From 7b8078421856cd5fe021469ec4831cd651b86206 Mon Sep 17 00:00:00 2001 From: Tim Date: Wed, 29 Jan 2025 23:56:48 +0100 Subject: [PATCH 1/8] feat: implement shell updater banner --- src/App/App.js | 2 + src/App/UpdaterBanner/UpdaterBanner.less | 39 +++++++++++++++++++ src/App/UpdaterBanner/UpdaterBanner.tsx | 49 ++++++++++++++++++++++++ src/App/UpdaterBanner/index.ts | 2 + src/App/styles.less | 8 ++++ src/common/animations.less | 13 +++++++ 6 files changed, 113 insertions(+) create mode 100644 src/App/UpdaterBanner/UpdaterBanner.less create mode 100644 src/App/UpdaterBanner/UpdaterBanner.tsx create mode 100644 src/App/UpdaterBanner/index.ts diff --git a/src/App/App.js b/src/App/App.js index 730e75f28..999da04a7 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -10,6 +10,7 @@ const { PlatformProvider, ToastProvider, TooltipProvider, CONSTANTS, withCoreSus const ServicesToaster = require('./ServicesToaster'); const DeepLinkHandler = require('./DeepLinkHandler'); const SearchParamsHandler = require('./SearchParamsHandler'); +const { default: UpdaterBanner } = require('./UpdaterBanner'); const ErrorDialog = require('./ErrorDialog'); const withProtectedRoutes = require('./withProtectedRoutes'); const routerViewsConfig = require('./routerViewsConfig'); @@ -168,6 +169,7 @@ const App = () => { + { + const { shell } = useServices(); + const [visible, show, hide] = useBinaryState(false); + + const onInstallClick = () => { + shell.transport && shell.transport.send('autoupdater-notif-clicked'); + }; + + useEffect(() => { + shell.on('autoupdater-show-notif', show); + + return () => { + shell.off('autoupdater-show-notif', show); + }; + }); + + return ( +
+ +
+
+ A new version of Stremio is available +
+
+ + +
+
+ +
+ ); +}; + +export default UpdaterBanner; diff --git a/src/App/UpdaterBanner/index.ts b/src/App/UpdaterBanner/index.ts new file mode 100644 index 000000000..e4306ecb2 --- /dev/null +++ b/src/App/UpdaterBanner/index.ts @@ -0,0 +1,2 @@ +import UpdaterBanner from './UpdaterBanner'; +export default UpdaterBanner; diff --git a/src/App/styles.less b/src/App/styles.less index a413ed163..e2eed685a 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -208,6 +208,14 @@ html { } } + .updater-banner-container { + z-index: 1; + position: absolute; + left: 0; + right: 0; + bottom: 0; + } + .router { width: 100%; height: 100%; diff --git a/src/common/animations.less b/src/common/animations.less index c7a30d2fb..91dbe386d 100644 --- a/src/common/animations.less +++ b/src/common/animations.less @@ -69,6 +69,19 @@ transform: translateX(100%); } +.slide-up-enter { + transform: translateY(100%); +} + +.slide-up-active { + transform: translateY(0%); + transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0); +} + +.slide-up-exit { + transform: translateY(100%); +} + @keyframes fade-in-no-motion { 0% { opacity: 0; From e5882ea143359d53f5af44c07b98070eb4d23c88 Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 30 Jan 2025 11:10:45 +0100 Subject: [PATCH 2/8] refactor(App): update updater banner style --- src/App/UpdaterBanner/UpdaterBanner.less | 49 ++++++++++++++---------- src/App/UpdaterBanner/UpdaterBanner.tsx | 16 ++++---- 2 files changed, 35 insertions(+), 30 deletions(-) diff --git a/src/App/UpdaterBanner/UpdaterBanner.less b/src/App/UpdaterBanner/UpdaterBanner.less index 83956ef50..9928fb493 100644 --- a/src/App/UpdaterBanner/UpdaterBanner.less +++ b/src/App/UpdaterBanner/UpdaterBanner.less @@ -2,38 +2,45 @@ height: 4rem; display: flex; align-items: center; - justify-content: space-between; + justify-content: center; + gap: 1rem; padding: 0 1rem; font-size: 1rem; font-weight: bold; color: var(--primary-foreground-color); background-color: var(--primary-accent-color); - .buttons { + .button { display: flex; flex-direction: row; - gap: 0.75rem; + align-items: center; + justify-content: center; + height: 2.5rem; + padding: 0 1rem; + border-radius: var(--border-radius); + color: var(--primary-background-color); + background-color: var(--primary-foreground-color); + transition: all 0.1s ease-out; - .button { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - height: 2.75rem; - padding: 0 1rem; - border-radius: var(--border-radius); - transition: all 0.1s ease-out; + &:hover { + color: var(--primary-foreground-color); + background-color: transparent; + box-shadow: inset 0 0 0 0.15rem var(--primary-foreground-color); + } + } - &.suggested { - color: var(--primary-background-color); - background-color: var(--primary-foreground-color); - } + .close { + position: absolute; + right: 0; + height: 4rem; + width: 4rem; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; - &:hover { - color: var(--primary-foreground-color); - background-color: transparent; - box-shadow: inset 0 0 0 0.15rem var(--primary-foreground-color); - } + .icon { + height: 2rem; } } } \ No newline at end of file diff --git a/src/App/UpdaterBanner/UpdaterBanner.tsx b/src/App/UpdaterBanner/UpdaterBanner.tsx index bf18077a8..a6b48066d 100644 --- a/src/App/UpdaterBanner/UpdaterBanner.tsx +++ b/src/App/UpdaterBanner/UpdaterBanner.tsx @@ -1,9 +1,9 @@ import React, { useEffect } from 'react'; +import Icon from '@stremio/stremio-icons/react'; import { useServices } from 'stremio/services'; import { useBinaryState } from 'stremio/common'; import { Button, Transition } from 'stremio/components'; import styles from './UpdaterBanner.less'; -import classNames from 'classnames'; type Props = { className: string, @@ -32,14 +32,12 @@ const UpdaterBanner = ({ className }: Props) => {
A new version of Stremio is available
-
- - -
+ + From 77e283d9344b5242b54d58fec2a70df50d918ec2 Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 30 Jan 2025 14:57:37 +0100 Subject: [PATCH 3/8] refactor: use useShell hook for UpdaterBanner --- src/App/UpdaterBanner/UpdaterBanner.tsx | 9 +++++---- src/common/Platform/Platform.tsx | 2 +- src/common/index.js | 2 ++ src/common/{Platform => }/useShell.ts | 0 4 files changed, 8 insertions(+), 5 deletions(-) rename src/common/{Platform => }/useShell.ts (100%) diff --git a/src/App/UpdaterBanner/UpdaterBanner.tsx b/src/App/UpdaterBanner/UpdaterBanner.tsx index a6b48066d..cf80c198a 100644 --- a/src/App/UpdaterBanner/UpdaterBanner.tsx +++ b/src/App/UpdaterBanner/UpdaterBanner.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import Icon from '@stremio/stremio-icons/react'; import { useServices } from 'stremio/services'; -import { useBinaryState } from 'stremio/common'; +import { useBinaryState, useShell } from 'stremio/common'; import { Button, Transition } from 'stremio/components'; import styles from './UpdaterBanner.less'; @@ -11,17 +11,18 @@ type Props = { const UpdaterBanner = ({ className }: Props) => { const { shell } = useServices(); + const shellTransport = useShell(); const [visible, show, hide] = useBinaryState(false); const onInstallClick = () => { - shell.transport && shell.transport.send('autoupdater-notif-clicked'); + shellTransport.send('autoupdater-notif-clicked'); }; useEffect(() => { - shell.on('autoupdater-show-notif', show); + shell.transport && shell.transport.on('autoupdater-show-notif', show); return () => { - shell.off('autoupdater-show-notif', show); + shell.transport && shell.transport.off('autoupdater-show-notif', show); }; }); diff --git a/src/common/Platform/Platform.tsx b/src/common/Platform/Platform.tsx index 41e74b24f..375fe5e18 100644 --- a/src/common/Platform/Platform.tsx +++ b/src/common/Platform/Platform.tsx @@ -1,6 +1,6 @@ import React, { createContext, useContext } from 'react'; import { WHITELISTED_HOSTS } from 'stremio/common/CONSTANTS'; -import useShell from './useShell'; +import { useShell } from 'stremio/common'; import { name, isMobile } from './device'; interface PlatformContext { diff --git a/src/common/index.js b/src/common/index.js index 4c514dfbe..61d2a3933 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -19,6 +19,7 @@ const useModelState = require('./useModelState'); const useNotifications = require('./useNotifications'); const useOnScrollToBottom = require('./useOnScrollToBottom'); const useProfile = require('./useProfile'); +const { default: useShell } = require('./useShell'); const useStreamingServer = require('./useStreamingServer'); const useTorrent = require('./useTorrent'); const useTranslate = require('./useTranslate'); @@ -47,6 +48,7 @@ module.exports = { useNotifications, useOnScrollToBottom, useProfile, + useShell, useStreamingServer, useTorrent, useTranslate, diff --git a/src/common/Platform/useShell.ts b/src/common/useShell.ts similarity index 100% rename from src/common/Platform/useShell.ts rename to src/common/useShell.ts From e2b9114ecef90c5ae561f2163272c4b94fdcec71 Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 30 Jan 2025 17:01:28 +0100 Subject: [PATCH 4/8] fix(Platform): import issue --- src/common/Platform/Platform.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/Platform/Platform.tsx b/src/common/Platform/Platform.tsx index 375fe5e18..2212303e4 100644 --- a/src/common/Platform/Platform.tsx +++ b/src/common/Platform/Platform.tsx @@ -1,6 +1,6 @@ import React, { createContext, useContext } from 'react'; import { WHITELISTED_HOSTS } from 'stremio/common/CONSTANTS'; -import { useShell } from 'stremio/common'; +import useShell from 'stremio/common/useShell'; import { name, isMobile } from './device'; interface PlatformContext { From a95f07f19d3652ce18eea8ffaa1c98bed53cc1f7 Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 30 Jan 2025 17:02:24 +0100 Subject: [PATCH 5/8] fix(UpdateBanner): missing useEffect deps array --- src/App/UpdaterBanner/UpdaterBanner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App/UpdaterBanner/UpdaterBanner.tsx b/src/App/UpdaterBanner/UpdaterBanner.tsx index cf80c198a..b3135a6c3 100644 --- a/src/App/UpdaterBanner/UpdaterBanner.tsx +++ b/src/App/UpdaterBanner/UpdaterBanner.tsx @@ -24,7 +24,7 @@ const UpdaterBanner = ({ className }: Props) => { return () => { shell.transport && shell.transport.off('autoupdater-show-notif', show); }; - }); + }, []); return (
From 6605eafd7896307d38cce74a5383a10d69470874 Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 7 Feb 2025 12:04:40 +0100 Subject: [PATCH 6/8] chore: update stremio-translations --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4477c0b4f..7317cea49 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,7 @@ "react-i18next": "^15.1.3", "react-is": "18.3.1", "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6", - "stremio-translations": "github:Stremio/stremio-translations#a0f50634202f748a57907b645d2cd92fbaa479dd", + "stremio-translations": "github:Stremio/stremio-translations#afda3a5a52e3b91b39ed6e61a2849d8e6887641f", "url": "0.11.4", "use-long-press": "^3.2.0" }, @@ -13374,8 +13374,8 @@ }, "node_modules/stremio-translations": { "version": "1.44.9", - "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#a0f50634202f748a57907b645d2cd92fbaa479dd", - "integrity": "sha512-JJpd1JJet3T6/VTNdZ2NZ7uvHJ4zkuyqo5BnTcDGqLVNO/OpicGqKhZjE4WGSgmuhsfPBU8T0ICCfzKu2xpvKg==", + "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#afda3a5a52e3b91b39ed6e61a2849d8e6887641f", + "integrity": "sha512-uAWlQsiObblYeLUf/cATCecqNS3Md34pGgeCcH2HBjZI6drSD6DEVYHd4Sxjmv+vmjnngQyHWr6ThHP27mWc4Q==", "license": "MIT" }, "node_modules/string_decoder": { diff --git a/package.json b/package.json index 9587f9530..001eec76c 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "react-i18next": "^15.1.3", "react-is": "18.3.1", "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6", - "stremio-translations": "github:Stremio/stremio-translations#a0f50634202f748a57907b645d2cd92fbaa479dd", + "stremio-translations": "github:Stremio/stremio-translations#afda3a5a52e3b91b39ed6e61a2849d8e6887641f", "url": "0.11.4", "use-long-press": "^3.2.0" }, From 6ba966d306e3d9c1471ca12ed7bb5a181af9758b Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 7 Feb 2025 12:05:31 +0100 Subject: [PATCH 7/8] refactor(UpdaterBanner): add translation strings --- src/App/UpdaterBanner/UpdaterBanner.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/App/UpdaterBanner/UpdaterBanner.tsx b/src/App/UpdaterBanner/UpdaterBanner.tsx index cf80c198a..3c1a16ab9 100644 --- a/src/App/UpdaterBanner/UpdaterBanner.tsx +++ b/src/App/UpdaterBanner/UpdaterBanner.tsx @@ -1,5 +1,6 @@ import React, { useEffect } from 'react'; import Icon from '@stremio/stremio-icons/react'; +import { useTranslation } from 'react-i18next'; import { useServices } from 'stremio/services'; import { useBinaryState, useShell } from 'stremio/common'; import { Button, Transition } from 'stremio/components'; @@ -10,6 +11,7 @@ type Props = { }; const UpdaterBanner = ({ className }: Props) => { + const { t } = useTranslation(); const { shell } = useServices(); const shellTransport = useShell(); const [visible, show, hide] = useBinaryState(false); @@ -31,10 +33,10 @@ const UpdaterBanner = ({ className }: Props) => {
- A new version of Stremio is available + { t('UPDATER_TITLE') }