From 3df8eb65d020940623b00cbfa94134dd9adb21e3 Mon Sep 17 00:00:00 2001 From: Tim Date: Wed, 8 Jan 2025 20:41:55 +0100 Subject: [PATCH 01/39] feat: allow to drop local subtitles --- src/common/CONSTANTS.js | 6 ++++ src/common/index.js | 2 ++ src/common/onFileDrop.ts | 31 +++++++++++++++++++ src/routes/Player/Player.js | 12 +++++-- .../Player/SubtitlesMenu/SubtitlesMenu.js | 12 +++++-- src/routes/Player/useVideo.js | 12 +++++++ src/services/DragAndDrop/DragAndDrop.js | 4 +++ 7 files changed, 74 insertions(+), 5 deletions(-) create mode 100644 src/common/onFileDrop.ts diff --git a/src/common/CONSTANTS.js b/src/common/CONSTANTS.js index 727c152fa..ea88b0114 100644 --- a/src/common/CONSTANTS.js +++ b/src/common/CONSTANTS.js @@ -41,6 +41,11 @@ const ICON_FOR_TYPE = new Map([ ['other', 'movies'], ]); +const SUPPORTED_LOCAL_SUBTITLES = [ + 'application/x-subrip', + 'text/vtt', +]; + const EXTERNAL_PLAYERS = [ { label: 'EXTERNAL_PLAYER_DISABLED', @@ -113,6 +118,7 @@ module.exports = { WRITERS_LINK_CATEGORY, TYPE_PRIORITIES, ICON_FOR_TYPE, + SUPPORTED_LOCAL_SUBTITLES, EXTERNAL_PLAYERS, WHITELISTED_HOSTS, }; diff --git a/src/common/index.js b/src/common/index.js index 4c514dfbe..2dba2ad54 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -13,6 +13,7 @@ const languages = require('./languages'); const routesRegexp = require('./routesRegexp'); const useAnimationFrame = require('./useAnimationFrame'); const useBinaryState = require('./useBinaryState'); +const { default: onFileDrop } = require('./onFileDrop'); const useFullscreen = require('./useFullscreen'); const useLiveRef = require('./useLiveRef'); const useModelState = require('./useModelState'); @@ -41,6 +42,7 @@ module.exports = { routesRegexp, useAnimationFrame, useBinaryState, + onFileDrop, useFullscreen, useLiveRef, useModelState, diff --git a/src/common/onFileDrop.ts b/src/common/onFileDrop.ts new file mode 100644 index 000000000..0060a975a --- /dev/null +++ b/src/common/onFileDrop.ts @@ -0,0 +1,31 @@ +import { useEffect } from 'react'; + +const onFileDrop = (types: string[], callback: (file: File) => void) => { + const onDragOver = (event: DragEvent) => { + event.preventDefault(); + }; + + const onDrop = (event: DragEvent) => { + event.preventDefault(); + + if (event.dataTransfer && event.dataTransfer.files.length > 0) { + const file = event.dataTransfer.files[0]; + + if (types.includes(file.type)) { + callback(file); + } + } + }; + + useEffect(() => { + window.addEventListener('dragover', onDragOver); + window.addEventListener('drop', onDrop); + + return () => { + window.removeEventListener('dragover', onDragOver); + window.removeEventListener('drop', onDrop); + }; + }, []); +}; + +export default onFileDrop; diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index c76a8dcae..86867d3c0 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -8,7 +8,7 @@ const langs = require('langs'); const { useTranslation } = require('react-i18next'); const { useRouteFocused } = require('stremio-router'); const { useServices } = require('stremio/services'); -const { useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common'); +const { onFileDrop, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender, CONSTANTS } = require('stremio/common'); const { HorizontalNavBar, Transition } = require('stremio/components'); const BufferingLoader = require('./BufferingLoader'); const VolumeChangeIndicator = require('./VolumeChangeIndicator'); @@ -133,7 +133,10 @@ const Player = ({ urlParams, queryParams }) => { toast.show({ type: 'success', title: t('PLAYER_SUBTITLES_LOADED'), - message: track.exclusive ? t('PLAYER_SUBTITLES_LOADED_EXCLUSIVE') : t('PLAYER_SUBTITLES_LOADED_ORIGIN', { origin: track.origin }), + message: + track.exclusive ? t('PLAYER_SUBTITLES_LOADED_EXCLUSIVE') : + track.local ? t('PLAYER_SUBTITLES_LOADED_LOCAL') : + t('PLAYER_SUBTITLES_LOADED_ORIGIN', { origin: track.origin }), timeout: 3000 }); }, []); @@ -270,6 +273,11 @@ const Player = ({ urlParams, queryParams }) => { event.nativeEvent.immersePrevented = true; }, []); + onFileDrop(CONSTANTS.SUPPORTED_LOCAL_SUBTITLES, async (file) => { + const buffer = await file.arrayBuffer(); + video.addLocalSubtitles(file.name, buffer); + }); + React.useEffect(() => { setError(null); video.unload(); diff --git a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js index 44cd20864..72de44e0b 100644 --- a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js +++ b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js @@ -10,11 +10,13 @@ const styles = require('./styles'); const { t } = require('i18next'); const ORIGIN_PRIORITIES = { + 'LOCAL': 3, 'EMBEDDED': 2, - 'EXCLUSIVE': 1 + 'EXCLUSIVE': 1, }; const LANGUAGE_PRIORITIES = { - 'eng': 1 + 'local': 2, + 'eng': 1, }; const SubtitlesMenu = React.memo((props) => { @@ -161,7 +163,11 @@ const SubtitlesMenu = React.memo((props) => { {subtitlesLanguages.map((lang, index) => ( + + + + + + ); +}; + +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 09/39] 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 10/39] 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 11/39] 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 12/39] 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 d9da7d5ab788e06bf6e2db79f16f0c88ab477e6c Mon Sep 17 00:00:00 2001 From: Tim Date: Wed, 5 Feb 2025 15:00:06 +0100 Subject: [PATCH 13/39] feat: support hardware decoding --- src/routes/Player/Player.js | 3 ++- src/routes/Settings/Settings.js | 24 +++++++++++++----------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index c76a8dcae..d727d6811 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -296,6 +296,7 @@ const Player = ({ urlParams, queryParams }) => { 0, forceTranscoding: forceTranscoding || casting, maxAudioChannels: settings.surroundSound ? 32 : 2, + hardwareDecoding: settings.hardwareDecoding, streamingServerURL: streamingServer.baseUrl ? casting ? streamingServer.baseUrl @@ -303,7 +304,7 @@ const Player = ({ urlParams, queryParams }) => { streamingServer.selected.transportUrl : null, - seriesInfo: player.seriesInfo + seriesInfo: player.seriesInfo, }, { chromecastTransport: chromecast.active ? chromecast.transport : null, shellTransport: shell.active ? shell.transport : null, diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 24eaaaf5d..6ad15163a 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -488,17 +488,19 @@ const Settings = () => { {...playInExternalPlayerSelect} />
-
-
-
{ t('SETTINGS_HWDEC') }
-
- -
+ { + shell.active && +
+
+
{ t('SETTINGS_HWDEC') }
+
+ +
+ }
{ t('SETTINGS_NAV_STREAMING') }
From 9d18a1bb61d969b05f4034565f7b64cdb747e847 Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 6 Feb 2025 18:10:34 +0100 Subject: [PATCH 14/39] fix: drop srt file with shell --- src/common/CONSTANTS.js | 6 ++++++ src/common/FileDrop/FileDrop.tsx | 16 ++++++++++------ src/common/FileDrop/utils.ts | 19 +++++++++++++++++++ src/routes/Player/Player.js | 5 ++--- src/services/DragAndDrop/DragAndDrop.js | 2 ++ 5 files changed, 39 insertions(+), 9 deletions(-) create mode 100644 src/common/FileDrop/utils.ts diff --git a/src/common/CONSTANTS.js b/src/common/CONSTANTS.js index ea88b0114..8e4e3efdc 100644 --- a/src/common/CONSTANTS.js +++ b/src/common/CONSTANTS.js @@ -41,6 +41,11 @@ const ICON_FOR_TYPE = new Map([ ['other', 'movies'], ]); +const MIME_SIGNATURES = { + 'application/x-subrip': ['310D0A', '310A'], + 'text/vtt': ['574542565454'], +}; + const SUPPORTED_LOCAL_SUBTITLES = [ 'application/x-subrip', 'text/vtt', @@ -118,6 +123,7 @@ module.exports = { WRITERS_LINK_CATEGORY, TYPE_PRIORITIES, ICON_FOR_TYPE, + MIME_SIGNATURES, SUPPORTED_LOCAL_SUBTITLES, EXTERNAL_PLAYERS, WHITELISTED_HOSTS, diff --git a/src/common/FileDrop/FileDrop.tsx b/src/common/FileDrop/FileDrop.tsx index 9117a4c7a..aae4e146b 100644 --- a/src/common/FileDrop/FileDrop.tsx +++ b/src/common/FileDrop/FileDrop.tsx @@ -1,8 +1,9 @@ import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'; import classNames from 'classnames'; +import { isFileType } from './utils'; export type FileType = string; -export type FileDropListener = (file: File) => void; +export type FileDropListener = (filename: string, buffer: ArrayBuffer) => void; type FileDropContext = { on: (type: FileType, listener: FileDropListener) => void, @@ -31,15 +32,18 @@ const FileDropProvider = ({ className, children }: Props) => { const onDrop = useCallback((event: DragEvent) => { event.preventDefault(); - const { dataTransfer } = event; - if (dataTransfer && dataTransfer.files.length > 0) { + if (dataTransfer && dataTransfer?.files.length > 0) { const file = dataTransfer.files[0]; - listeners - .filter(([type]) => type === file.type) - .forEach(([, listerner]) => listerner(file)); + file + .arrayBuffer() + .then((buffer) => { + listeners + .filter(([type]) => file.type ? type === file.type : isFileType(buffer, type)) + .forEach(([, listerner]) => listerner(file.name, buffer)); + }); } setActive(false); diff --git a/src/common/FileDrop/utils.ts b/src/common/FileDrop/utils.ts new file mode 100644 index 000000000..b5427ecfb --- /dev/null +++ b/src/common/FileDrop/utils.ts @@ -0,0 +1,19 @@ +import { MIME_SIGNATURES } from 'stremio/common/CONSTANTS'; + +const SIGNATURES = MIME_SIGNATURES as Record; + +const isFileType = (buffer: ArrayBuffer, type: string) => { + const signatures = SIGNATURES[type]; + + return signatures.some((signature) => { + const array = new Uint8Array(buffer); + const signatureBuffer = Buffer.from(signature, 'hex'); + const bufferToCompare = array.subarray(0, signatureBuffer.length); + + return Buffer.compare(signatureBuffer, bufferToCompare) === 0; + }); +}; + +export { + isFileType, +}; \ No newline at end of file diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 5ea8975f0..4dbc12295 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -277,9 +277,8 @@ const Player = ({ urlParams, queryParams }) => { event.nativeEvent.immersePrevented = true; }, []); - onFileDrop(CONSTANTS.SUPPORTED_LOCAL_SUBTITLES, async (file) => { - const buffer = await file.arrayBuffer(); - video.addLocalSubtitles(file.name, buffer); + onFileDrop(CONSTANTS.SUPPORTED_LOCAL_SUBTITLES, async (filename, buffer) => { + video.addLocalSubtitles(filename, buffer); }); React.useEffect(() => { diff --git a/src/services/DragAndDrop/DragAndDrop.js b/src/services/DragAndDrop/DragAndDrop.js index 6e20a840e..1538c328e 100644 --- a/src/services/DragAndDrop/DragAndDrop.js +++ b/src/services/DragAndDrop/DragAndDrop.js @@ -40,6 +40,8 @@ function DragAndDrop({ core }) { break; case 'text/vtt': break; + case '': + break; default: { events.emit('error', { message: 'Unsupported file', From 330fac3f3987d484a04d1eab5e63844fc7ff4d63 Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 6 Feb 2025 18:29:15 +0100 Subject: [PATCH 15/39] style: lint --- src/common/FileDrop/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/FileDrop/utils.ts b/src/common/FileDrop/utils.ts index b5427ecfb..f9996aed3 100644 --- a/src/common/FileDrop/utils.ts +++ b/src/common/FileDrop/utils.ts @@ -16,4 +16,4 @@ const isFileType = (buffer: ArrayBuffer, type: string) => { export { isFileType, -}; \ No newline at end of file +}; From 617b0e3125f7cf199d5ab96d8466cc1e84cdd896 Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 7 Feb 2025 11:28:51 +0100 Subject: [PATCH 16/39] chore: update stremio-video and stremio-translations --- package-lock.json | 14 +++++++------- package.json | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index be53e9ec7..994e15d3c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@stremio/stremio-colors": "5.2.0", "@stremio/stremio-core-web": "0.48.4", "@stremio/stremio-icons": "5.4.1", - "@stremio/stremio-video": "0.0.48", + "@stremio/stremio-video": "github:Stremio/stremio-video#436fe5a988ab0953a61aa043666cae1dd9522882", "a-color-picker": "1.2.1", "bowser": "2.11.0", "buffer": "6.0.3", @@ -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#f7d327d822f1061947568042bfb3dffde5525a30", "url": "0.11.4", "use-long-press": "^3.2.0" }, @@ -3409,9 +3409,9 @@ ] }, "node_modules/@stremio/stremio-video": { - "version": "0.0.48", - "resolved": "https://registry.npmjs.org/@stremio/stremio-video/-/stremio-video-0.0.48.tgz", - "integrity": "sha512-6ALGXCZC4NPsfhPcrwFWQzvH6UMMRsgSkHetnOhv9WmZ5ubiyUdbBzj9atGiGuuQz8pRcze66ztrub+dsaQbpw==", + "version": "0.0.50", + "resolved": "git+ssh://git@github.com/Stremio/stremio-video.git#436fe5a988ab0953a61aa043666cae1dd9522882", + "integrity": "sha512-yKVKGl+qHTki2wAhJEauql2nKFDuX8bZXX5SrWLyNTI9cw/86UbQd7TEqvS2d9cBTMj9UrxQxMAG6zrKaSmwxg==", "license": "MIT", "dependencies": { "buffer": "6.0.3", @@ -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#f7d327d822f1061947568042bfb3dffde5525a30", + "integrity": "sha512-kqOI4fjs0yaG/LuEgR7IobDfi5GFZkjaYzEvHS+Cb822sE/BECHIRFVNWy05j4TNtwK60kSQX0KPrILRwKXD/Q==", "license": "MIT" }, "node_modules/string_decoder": { diff --git a/package.json b/package.json index 79593f9d5..1c061061b 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@stremio/stremio-colors": "5.2.0", "@stremio/stremio-core-web": "0.48.4", "@stremio/stremio-icons": "5.4.1", - "@stremio/stremio-video": "0.0.48", + "@stremio/stremio-video": "github:Stremio/stremio-video#436fe5a988ab0953a61aa043666cae1dd9522882", "a-color-picker": "1.2.1", "bowser": "2.11.0", "buffer": "6.0.3", @@ -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#f7d327d822f1061947568042bfb3dffde5525a30", "url": "0.11.4", "use-long-press": "^3.2.0" }, From e2b2286c98739fde26d5b17ce8b811d4783cb311 Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 7 Feb 2025 11:32:31 +0100 Subject: [PATCH 17/39] chore: update stremio-video --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4477c0b4f..14e5f5e38 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@stremio/stremio-colors": "5.2.0", "@stremio/stremio-core-web": "0.48.5", "@stremio/stremio-icons": "5.4.1", - "@stremio/stremio-video": "0.0.48", + "@stremio/stremio-video": "github:Stremio/stremio-video#b5e6eb7c3aa85703c3468c53e489d7ec47daccae", "a-color-picker": "1.2.1", "bowser": "2.11.0", "buffer": "6.0.3", @@ -3409,9 +3409,9 @@ ] }, "node_modules/@stremio/stremio-video": { - "version": "0.0.48", - "resolved": "https://registry.npmjs.org/@stremio/stremio-video/-/stremio-video-0.0.48.tgz", - "integrity": "sha512-6ALGXCZC4NPsfhPcrwFWQzvH6UMMRsgSkHetnOhv9WmZ5ubiyUdbBzj9atGiGuuQz8pRcze66ztrub+dsaQbpw==", + "version": "0.0.52", + "resolved": "git+ssh://git@github.com/Stremio/stremio-video.git#b5e6eb7c3aa85703c3468c53e489d7ec47daccae", + "integrity": "sha512-ywXVR/blyHdP/8q458+sL7cfvPj5RyE6esuxZBU6qejKxX+U62x6qcky1dNL5ZWub5YYucbqfjftaVuuNz+dug==", "license": "MIT", "dependencies": { "buffer": "6.0.3", diff --git a/package.json b/package.json index 9587f9530..c6eda5722 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@stremio/stremio-colors": "5.2.0", "@stremio/stremio-core-web": "0.48.5", "@stremio/stremio-icons": "5.4.1", - "@stremio/stremio-video": "0.0.48", + "@stremio/stremio-video": "github:Stremio/stremio-video#b5e6eb7c3aa85703c3468c53e489d7ec47daccae", "a-color-picker": "1.2.1", "bowser": "2.11.0", "buffer": "6.0.3", From 6605eafd7896307d38cce74a5383a10d69470874 Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 7 Feb 2025 12:04:40 +0100 Subject: [PATCH 18/39] 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 19/39] 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') }
-
Subtitles Settings
- - {t('PLAYER_SUBTITLES_SETTINGS')}
+
+ + - + + typeof props.selectedExtraSubtitlesTrackId === 'string' ? + props.extraSubtitlesOffset === null || isNaN(props.extraSubtitlesOffset) + : + true + } + onChange={onSubtitlesOffsetChanged} + /> +
); diff --git a/src/routes/Player/SubtitlesMenu/styles.less b/src/routes/Player/SubtitlesMenu/styles.less index d47d6ab75..71f1d5cb4 100644 --- a/src/routes/Player/SubtitlesMenu/styles.less +++ b/src/routes/Player/SubtitlesMenu/styles.less @@ -106,6 +106,10 @@ .subtitles-settings-container { width: 17rem; + .settings-list { + overflow-y: scroll; + } + .spacing { flex: 1; } From 675257eb56f518cc14e2ad0178996648034a5d6b Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 10 Feb 2025 18:02:04 +0200 Subject: [PATCH 26/39] fix: prevent navbar icons to cut on mobile --- src/components/NavBar/VerticalNavBar/styles.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/NavBar/VerticalNavBar/styles.less b/src/components/NavBar/VerticalNavBar/styles.less index 3a6ae76d8..7d17d6054 100644 --- a/src/components/NavBar/VerticalNavBar/styles.less +++ b/src/components/NavBar/VerticalNavBar/styles.less @@ -13,6 +13,7 @@ background-color: transparent; overflow-y: auto; scrollbar-width: none; + -ms-overflow-style: none; &::-webkit-scrollbar { display: none; @@ -21,6 +22,7 @@ .nav-tab-button { width: calc(var(--vertical-nav-bar-size) - 1.2rem); height: calc(var(--vertical-nav-bar-size) - 1.2rem); + min-height: 3.5rem; } } From 7074e13047bac237226570363fde297d5c0f6caa Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Thu, 13 Feb 2025 12:59:09 +0200 Subject: [PATCH 27/39] Fix: Visible calendar items when selected --- src/routes/Calendar/List/Item/Item.less | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less index aba6bba09..051e092df 100644 --- a/src/routes/Calendar/List/Item/Item.less +++ b/src/routes/Calendar/List/Item/Item.less @@ -7,8 +7,6 @@ flex-direction: column; background-color: var(--overlay-color); border-radius: var(--border-radius); - border: 0.15rem solid transparent; - transition: border-color 0.1s ease-out; .heading { flex: none; @@ -82,6 +80,19 @@ } } + &::before { + border: 0.15rem solid transparent; + border-radius: var(--border-radius); + box-sizing: border-box; + content: ""; + width: 100%; + height: 100%; + position: absolute; + pointer-events: none; + z-index: 1; + transition: border-color 0.1s ease-out; + } + &.today { .heading { background-color: var(--primary-accent-color); @@ -89,7 +100,9 @@ } &.active { - border-color: var(--primary-foreground-color); + &::before { + border-color: var(--primary-foreground-color); + } } &:not(.active):hover { From 1b2fe2104458a42c376c457e0014b5b5c6a08e86 Mon Sep 17 00:00:00 2001 From: Botzy Date: Thu, 13 Feb 2025 13:05:14 +0200 Subject: [PATCH 28/39] feat(Checkbox): added Checkbox component --- src/components/Checkbox/Checkbox.less | 95 +++++++++++++++++++++++++++ src/components/Checkbox/Checkbox.tsx | 87 ++++++++++++++++++++++++ src/components/Checkbox/index.ts | 5 ++ src/components/index.ts | 2 + 4 files changed, 189 insertions(+) create mode 100644 src/components/Checkbox/Checkbox.less create mode 100644 src/components/Checkbox/Checkbox.tsx create mode 100644 src/components/Checkbox/index.ts diff --git a/src/components/Checkbox/Checkbox.less b/src/components/Checkbox/Checkbox.less new file mode 100644 index 000000000..7d43947ed --- /dev/null +++ b/src/components/Checkbox/Checkbox.less @@ -0,0 +1,95 @@ +// Copyright (C) 2017-2025 Smart code 203358507 + +.checkbox { + display: flex; + align-items: center; + overflow: visible; + + .label { + display: flex; + flex-direction: row; + align-items: center; + padding: 0.5rem 0; + + span { + font-size: 0.9rem; + color: var(--primary-foreground-color); + opacity: 0.6; + } + .link { + font-size: 0.9rem; + color: var(--primary-accent-color); + + &:hover { + text-decoration: underline; + } + } + } + + .checkbox-container { + position: relative; + width: 1.75rem; + height: 1.75rem; + border: 0.2rem solid var(--color-placeholder); + border-radius: 0.5rem; + background-color: transparent; + display: flex; + flex: none; + margin-right: 1rem; + align-items: center; + justify-content: center; + transition: all 0.2s ease-in-out; + cursor: pointer; + outline: none; + user-select: none; + + input[type='checkbox'] { + opacity: 0; + width: 0; + height: 0; + position: absolute; + cursor: pointer; + } + + .checkmark { + position: absolute; + top: 0; + left: 0; + width: 1.5rem; + height: 1.5rem; + transition: opacity 0.2s ease-in-out; + background-color: transparent; + opacity: 0; + + &:after { + content: ""; + position: absolute; + left: 0.45rem; + top: 0.2rem; + width: 0.2rem; + height: 0.5rem; + border: solid var(--primary-foreground-color); + border-width: 0 0.2rem 0.2rem 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } + } + + &.disabled { + cursor: not-allowed; + } + + &.error { + border-color: var(--color-trakt); + } + + &.checked { + border: 3px solid var(--secondary-accent-color); + background-color: var(--secondary-accent-color); + .checkmark { + opacity: 1; + } + } + } +} diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx new file mode 100644 index 000000000..b5c0b0e7c --- /dev/null +++ b/src/components/Checkbox/Checkbox.tsx @@ -0,0 +1,87 @@ +// Copyright (C) 2017-2025 Smart code 203358507 + +import React, { useCallback, ChangeEvent, KeyboardEvent, RefCallback } from 'react'; +import classNames from 'classnames'; +import styles from './Checkbox.less'; +import Button from '../Button'; + +type Props = { + ref?: RefCallback; + name: string; + disabled?: boolean; + checked?: boolean; + className?: string; + label?: string; + link?: string; + href?: string; + onChange?: (props: any) => void; + error?: string; +}; + +const Checkbox = React.forwardRef(({ name, disabled, className, label, href, link, onChange, error, checked }, ref) => { + + const handleSelect = useCallback((event: ChangeEvent) => { + if (!disabled && onChange) { + onChange({ + type: 'select', + checked: event.target.checked, + reactEvent: event, + nativeEvent: event.nativeEvent, + }); + } + }, [disabled, onChange]); + + const onKeyDown = useCallback((event: KeyboardEvent) => { + if ((event.key === 'Enter' || event.key === ' ') && !disabled) { + onChange && onChange({ + type: 'select', + checked: event.target.checked, + reactEvent: event, + nativeEvent: event.nativeEvent, + }); + } + }, [disabled, checked, onChange]); + + return ( +
+ +
+ ); +}); + +export default Checkbox; diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts new file mode 100644 index 000000000..fa5739580 --- /dev/null +++ b/src/components/Checkbox/index.ts @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2025 Smart code 203358507 + +import Checkbox from './Checkbox'; + +export default Checkbox; diff --git a/src/components/index.ts b/src/components/index.ts index f65d66f81..7ef75f888 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,6 +1,7 @@ import AddonDetailsModal from './AddonDetailsModal'; import BottomSheet from './BottomSheet'; import Button from './Button'; +import Checkbox from './Checkbox'; import Chips from './Chips'; import ColorInput from './ColorInput'; import ContinueWatchingItem from './ContinueWatchingItem'; @@ -31,6 +32,7 @@ export { AddonDetailsModal, BottomSheet, Button, + Checkbox, Chips, ColorInput, ContinueWatchingItem, From e3fda56a11f3a7081d44d6c2a5f5d7e826fc954e Mon Sep 17 00:00:00 2001 From: Botzy Date: Thu, 13 Feb 2025 13:06:05 +0200 Subject: [PATCH 29/39] refactor(Intro): reuse Checkbox component for consent items --- src/routes/Intro/Intro.js | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js index fc98fe5cf..989e6febd 100644 --- a/src/routes/Intro/Intro.js +++ b/src/routes/Intro/Intro.js @@ -8,9 +8,8 @@ const { default: Icon } = require('@stremio/stremio-icons/react'); const { Modal, useRouteFocused } = require('stremio-router'); const { useServices } = require('stremio/services'); const { useBinaryState } = require('stremio/common'); -const { Button, Image } = require('stremio/components'); +const { Button, Image, Checkbox } = require('stremio/components'); const CredentialsTextInput = require('./CredentialsTextInput'); -const ConsentToggle = require('./ConsentToggle'); const PasswordResetModal = require('./PasswordResetModal'); const useFacebookLogin = require('./useFacebookLogin'); const styles = require('./styles'); @@ -308,30 +307,27 @@ const Intro = ({ queryParams }) => { onChange={confirmPasswordOnChange} onSubmit={confirmPasswordOnSubmit} /> - - - : From 71bd470d31d2645ffb5a5d6dbcb3273846b503c9 Mon Sep 17 00:00:00 2001 From: Botzy Date: Mon, 17 Feb 2025 14:02:15 +0200 Subject: [PATCH 30/39] fix(Checkbox): use checkmark icon instead of styles and make bg color the primary accent one --- src/components/Checkbox/Checkbox.less | 35 +++++---------------------- src/components/Checkbox/Checkbox.tsx | 7 +++++- 2 files changed, 12 insertions(+), 30 deletions(-) diff --git a/src/components/Checkbox/Checkbox.less b/src/components/Checkbox/Checkbox.less index 7d43947ed..5890ce52e 100644 --- a/src/components/Checkbox/Checkbox.less +++ b/src/components/Checkbox/Checkbox.less @@ -30,9 +30,10 @@ position: relative; width: 1.75rem; height: 1.75rem; - border: 0.2rem solid var(--color-placeholder); + border: 0.2rem solid var(--primary-accent-color); border-radius: 0.5rem; background-color: transparent; + padding: 0.1rem; display: flex; flex: none; margin-right: 1rem; @@ -51,29 +52,9 @@ cursor: pointer; } - .checkmark { - position: absolute; - top: 0; - left: 0; - width: 1.5rem; - height: 1.5rem; - transition: opacity 0.2s ease-in-out; - background-color: transparent; - opacity: 0; - - &:after { - content: ""; - position: absolute; - left: 0.45rem; - top: 0.2rem; - width: 0.2rem; - height: 0.5rem; - border: solid var(--primary-foreground-color); - border-width: 0 0.2rem 0.2rem 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - } + .checkbox-icon { + width: 100%; + height: 100%; } &.disabled { @@ -85,11 +66,7 @@ } &.checked { - border: 3px solid var(--secondary-accent-color); - background-color: var(--secondary-accent-color); - .checkmark { - opacity: 1; - } + background-color: var(--primary-accent-color); } } } diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index b5c0b0e7c..8180ddd84 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -4,6 +4,7 @@ import React, { useCallback, ChangeEvent, KeyboardEvent, RefCallback } from 'rea import classNames from 'classnames'; import styles from './Checkbox.less'; import Button from '../Button'; +import Icon from '@stremio/stremio-icons/react'; type Props = { ref?: RefCallback; @@ -66,7 +67,11 @@ const Checkbox = React.forwardRef(({ name, disabled, cl onChange={handleSelect} className={styles['input']} /> - + { + checked ? + + : null + }
{label} From 6e806d5c8483b6d2f10a70c8ac5a2ea880fe4c87 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 17 Feb 2025 14:11:28 +0200 Subject: [PATCH 31/39] Revert previous changes and added margin/padding block --- src/routes/Calendar/List/Item/Item.less | 25 +++++++++---------------- src/routes/Calendar/List/List.less | 6 ++++++ 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less index 051e092df..e850d3e49 100644 --- a/src/routes/Calendar/List/Item/Item.less +++ b/src/routes/Calendar/List/Item/Item.less @@ -7,6 +7,8 @@ flex-direction: column; background-color: var(--overlay-color); border-radius: var(--border-radius); + border: 0.15rem solid transparent; + transition: border-color 0.1s ease-out; .heading { flex: none; @@ -80,19 +82,6 @@ } } - &::before { - border: 0.15rem solid transparent; - border-radius: var(--border-radius); - box-sizing: border-box; - content: ""; - width: 100%; - height: 100%; - position: absolute; - pointer-events: none; - z-index: 1; - transition: border-color 0.1s ease-out; - } - &.today { .heading { background-color: var(--primary-accent-color); @@ -100,12 +89,16 @@ } &.active { - &::before { - border-color: var(--primary-foreground-color); - } + border-color: var(--primary-foreground-color); } &:not(.active):hover { border-color: var(--overlay-color); } } + +@supports (scroll-margin-block-start: 2px) { + .item { + scroll-margin-block-start: 2px; + } +} \ No newline at end of file diff --git a/src/routes/Calendar/List/List.less b/src/routes/Calendar/List/List.less index f63078680..9a1904a70 100644 --- a/src/routes/Calendar/List/List.less +++ b/src/routes/Calendar/List/List.less @@ -35,3 +35,9 @@ display: none; } } + +@supports (scroll-padding-block-start: 2px) { + .list { + scroll-padding-block-start: 2px; + } +} \ No newline at end of file From b800e78c8b8205394b201e23dd7a1a1c4f59d7d7 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 17 Feb 2025 15:08:03 +0200 Subject: [PATCH 32/39] Added seek bar contrast --- src/components/Slider/styles.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Slider/styles.less b/src/components/Slider/styles.less index 66ad267c7..421826ea6 100644 --- a/src/components/Slider/styles.less +++ b/src/components/Slider/styles.less @@ -39,7 +39,8 @@ html.active-slider-within { flex: 1; height: var(--track-size); border-radius: var(--track-size); - background-color: var(--overlay-color); + background-color: var(--primary-accent-color); + opacity: 0.2; } .track-before { From 91ed45625bae6ada202c131148df845498512546 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 17 Feb 2025 15:21:06 +0200 Subject: [PATCH 33/39] Moved scroll padding/margin inside the classes --- src/routes/Calendar/List/Item/Item.less | 7 +------ src/routes/Calendar/List/List.less | 7 +------ 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less index e850d3e49..90cc07f27 100644 --- a/src/routes/Calendar/List/Item/Item.less +++ b/src/routes/Calendar/List/Item/Item.less @@ -9,6 +9,7 @@ border-radius: var(--border-radius); border: 0.15rem solid transparent; transition: border-color 0.1s ease-out; + scroll-margin-block-start: 2px; .heading { flex: none; @@ -95,10 +96,4 @@ &:not(.active):hover { border-color: var(--overlay-color); } -} - -@supports (scroll-margin-block-start: 2px) { - .item { - scroll-margin-block-start: 2px; - } } \ No newline at end of file diff --git a/src/routes/Calendar/List/List.less b/src/routes/Calendar/List/List.less index 9a1904a70..21c5dc588 100644 --- a/src/routes/Calendar/List/List.less +++ b/src/routes/Calendar/List/List.less @@ -10,6 +10,7 @@ width: 20rem; padding: 0 1rem; overflow-y: auto; + scroll-padding-block-start: 2px; } @media only screen and (max-width: @small) and (orientation: portrait) { @@ -34,10 +35,4 @@ .list { display: none; } -} - -@supports (scroll-padding-block-start: 2px) { - .list { - scroll-padding-block-start: 2px; - } } \ No newline at end of file From 5c316f4a332036bc32a748f68a7e6e22a81f5904 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 17 Feb 2025 15:27:19 +0200 Subject: [PATCH 34/39] Added supports check --- src/routes/Calendar/List/Item/Item.less | 5 ++++- src/routes/Calendar/List/List.less | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less index 90cc07f27..742cc1e5b 100644 --- a/src/routes/Calendar/List/Item/Item.less +++ b/src/routes/Calendar/List/Item/Item.less @@ -9,7 +9,10 @@ border-radius: var(--border-radius); border: 0.15rem solid transparent; transition: border-color 0.1s ease-out; - scroll-margin-block-start: 2px; + + @supports (scroll-margin-block-start: 2px) { + scroll-margin-block-start: 2px; + } .heading { flex: none; diff --git a/src/routes/Calendar/List/List.less b/src/routes/Calendar/List/List.less index 21c5dc588..768ac8c24 100644 --- a/src/routes/Calendar/List/List.less +++ b/src/routes/Calendar/List/List.less @@ -10,7 +10,10 @@ width: 20rem; padding: 0 1rem; overflow-y: auto; - scroll-padding-block-start: 2px; + + @supports (scroll-padding-block-start: 2px) { + scroll-padding-block-start: 2px; + } } @media only screen and (max-width: @small) and (orientation: portrait) { From 72e7b7051ef55d8567482a063d5b7a75231ff0db Mon Sep 17 00:00:00 2001 From: Botzy Date: Mon, 17 Feb 2025 17:46:13 +0200 Subject: [PATCH 35/39] fix(Button): add missing target prop to type --- src/components/Button/Button.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index f4b059bd3..f97e1ba82 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -8,6 +8,7 @@ import styles from './Button.less'; type Props = { className?: string, href?: string, + target?: string title?: string, disabled?: boolean, tabIndex?: number, From f5ef7d653d50003e24b98ea8f08ee1edf029f9e1 Mon Sep 17 00:00:00 2001 From: Botzy Date: Mon, 17 Feb 2025 18:09:17 +0200 Subject: [PATCH 36/39] fix(Checkbox): improve typings and styles to follow mockups --- src/components/Checkbox/Checkbox.less | 24 +++++++++++++++++------- src/components/Checkbox/Checkbox.tsx | 13 +++++++++---- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/src/components/Checkbox/Checkbox.less b/src/components/Checkbox/Checkbox.less index 5890ce52e..742506cc0 100644 --- a/src/components/Checkbox/Checkbox.less +++ b/src/components/Checkbox/Checkbox.less @@ -1,5 +1,7 @@ // Copyright (C) 2017-2025 Smart code 203358507 +@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; + .checkbox { display: flex; align-items: center; @@ -10,6 +12,7 @@ flex-direction: row; align-items: center; padding: 0.5rem 0; + cursor: pointer; span { font-size: 0.9rem; @@ -28,21 +31,23 @@ .checkbox-container { position: relative; - width: 1.75rem; - height: 1.75rem; - border: 0.2rem solid var(--primary-accent-color); - border-radius: 0.5rem; - background-color: transparent; + width: 1.5rem; + height: 1.5rem; + border-radius: 0.3rem; + background-color: var(--overlay-color); padding: 0.1rem; display: flex; flex: none; - margin-right: 1rem; + margin: 0 1rem 0 0.3rem; align-items: center; justify-content: center; transition: all 0.2s ease-in-out; cursor: pointer; outline: none; user-select: none; + outline-width: var(--focus-outline-size); + outline-color: @color-surface-light5; + outline-offset: 2px; input[type='checkbox'] { opacity: 0; @@ -54,7 +59,8 @@ .checkbox-icon { width: 100%; - height: 100%; + height: 100%; + color: var(--primary-foreground-color); } &.disabled { @@ -68,5 +74,9 @@ &.checked { background-color: var(--primary-accent-color); } + + &:hover, &:focus { + outline-style: solid; + } } } diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 8180ddd84..da4ae33eb 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -15,7 +15,12 @@ type Props = { label?: string; link?: string; href?: string; - onChange?: (props: any) => void; + onChange?: (props: { + type: string; + checked: boolean; + reactEvent: KeyboardEvent | ChangeEvent; + nativeEvent: Event; + }) => void; error?: string; }; @@ -32,12 +37,12 @@ const Checkbox = React.forwardRef(({ name, disabled, cl } }, [disabled, onChange]); - const onKeyDown = useCallback((event: KeyboardEvent) => { + const onKeyDown = useCallback((event: KeyboardEvent) => { if ((event.key === 'Enter' || event.key === ' ') && !disabled) { onChange && onChange({ type: 'select', - checked: event.target.checked, - reactEvent: event, + checked: !checked, + reactEvent: event as KeyboardEvent, nativeEvent: event.nativeEvent, }); } From e60cf6501e977259da4cdbef2fc6a362e8a2d19f Mon Sep 17 00:00:00 2001 From: Botsy Date: Mon, 17 Feb 2025 18:10:48 +0200 Subject: [PATCH 37/39] Update src/components/Checkbox/Checkbox.less Co-authored-by: Timothy Z. --- src/components/Checkbox/Checkbox.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Checkbox/Checkbox.less b/src/components/Checkbox/Checkbox.less index 742506cc0..718a7b129 100644 --- a/src/components/Checkbox/Checkbox.less +++ b/src/components/Checkbox/Checkbox.less @@ -19,6 +19,7 @@ color: var(--primary-foreground-color); opacity: 0.6; } + .link { font-size: 0.9rem; color: var(--primary-accent-color); From 14927942e8f37b2135e378e9612cd367159143bf Mon Sep 17 00:00:00 2001 From: Botzy Date: Mon, 17 Feb 2025 18:25:21 +0200 Subject: [PATCH 38/39] fix(ConsentToggle): remove unused ConsentToggle component --- .../Intro/ConsentToggle/ConsentToggle.js | 56 ------------------- src/routes/Intro/ConsentToggle/index.js | 5 -- src/routes/Intro/ConsentToggle/styles.less | 43 -------------- 3 files changed, 104 deletions(-) delete mode 100644 src/routes/Intro/ConsentToggle/ConsentToggle.js delete mode 100644 src/routes/Intro/ConsentToggle/index.js delete mode 100644 src/routes/Intro/ConsentToggle/styles.less diff --git a/src/routes/Intro/ConsentToggle/ConsentToggle.js b/src/routes/Intro/ConsentToggle/ConsentToggle.js deleted file mode 100644 index 9a0210607..000000000 --- a/src/routes/Intro/ConsentToggle/ConsentToggle.js +++ /dev/null @@ -1,56 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -const React = require('react'); -const PropTypes = require('prop-types'); -const classnames = require('classnames'); -const { Button, Toggle } = require('stremio/components'); -const styles = require('./styles'); - -const ConsentToggle = React.forwardRef(({ className, label, link, href, onToggle, ...props }, ref) => { - const toggleOnClick = React.useCallback((event) => { - if (typeof props.onClick === 'function') { - props.onClick(event); - } - - if (!event.nativeEvent.togglePrevented && typeof onToggle === 'function') { - onToggle({ - type: 'toggle', - reactEvent: event, - nativeEvent: event.nativeEvent - }); - } - }, [onToggle, props.onClick]); - const linkOnClick = React.useCallback((event) => { - event.nativeEvent.togglePrevented = true; - }, []); - return ( - -
- {label} - {' '} - { - typeof link === 'string' && link.length > 0 && typeof href === 'string' && href.length > 0 ? - - : - null - } -
- - ); -}); - -ConsentToggle.displayName = 'ConsentToggle'; - -ConsentToggle.propTypes = { - className: PropTypes.string, - checked: PropTypes.bool, - label: PropTypes.string, - link: PropTypes.string, - href: PropTypes.string, - onToggle: PropTypes.func, - onClick: PropTypes.func -}; - -module.exports = ConsentToggle; diff --git a/src/routes/Intro/ConsentToggle/index.js b/src/routes/Intro/ConsentToggle/index.js deleted file mode 100644 index 8edfe4a27..000000000 --- a/src/routes/Intro/ConsentToggle/index.js +++ /dev/null @@ -1,5 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -const ConsentToggle = require('./ConsentToggle'); - -module.exports = ConsentToggle; diff --git a/src/routes/Intro/ConsentToggle/styles.less b/src/routes/Intro/ConsentToggle/styles.less deleted file mode 100644 index e8229e244..000000000 --- a/src/routes/Intro/ConsentToggle/styles.less +++ /dev/null @@ -1,43 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; - -:import('~stremio/components/Toggle/styles.less') { - checkbox-icon: icon; -} - -.consent-toggle-container { - display: flex; - flex-direction: row; - align-items: center; - padding: 0.5rem 0; - border-radius: var(--border-radius); - - &:focus { - outline: none; - background-color: var(--overlay-color); - } - - &:global(.checked) { - .label { - opacity: 1; - } - } - - .label { - flex: 1; - margin-left: 1rem; - font-size: 0.9rem; - color: var(--primary-foreground-color); - opacity: 0.6; - - .link { - font-size: 0.9rem; - color: var(--primary-accent-color); - - &:hover { - text-decoration: underline; - } - } - } -} \ No newline at end of file From 878691fffbb9dc86834b37c153d1f037152121a8 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 17 Feb 2025 18:57:33 +0200 Subject: [PATCH 39/39] Removed margin block and convert padding to rem --- src/routes/Calendar/List/Item/Item.less | 4 ---- src/routes/Calendar/List/List.less | 4 ++-- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less index 742cc1e5b..b11feda2a 100644 --- a/src/routes/Calendar/List/Item/Item.less +++ b/src/routes/Calendar/List/Item/Item.less @@ -10,10 +10,6 @@ border: 0.15rem solid transparent; transition: border-color 0.1s ease-out; - @supports (scroll-margin-block-start: 2px) { - scroll-margin-block-start: 2px; - } - .heading { flex: none; position: relative; diff --git a/src/routes/Calendar/List/List.less b/src/routes/Calendar/List/List.less index 768ac8c24..9f2dfd774 100644 --- a/src/routes/Calendar/List/List.less +++ b/src/routes/Calendar/List/List.less @@ -11,8 +11,8 @@ padding: 0 1rem; overflow-y: auto; - @supports (scroll-padding-block-start: 2px) { - scroll-padding-block-start: 2px; + @supports (scroll-padding-block-start: 0.15rem) { + scroll-padding-block-start: 0.15rem; } }