From c811c28be685d21d825eca46f539d0433e1f0a28 Mon Sep 17 00:00:00 2001 From: Tim Date: Tue, 10 Dec 2024 20:40:17 +0100 Subject: [PATCH 1/5] refactor: move audio tracks to their own menu --- src/routes/Player/AudioMenu/AudioMenu.less | 60 +++++++++++++++++ src/routes/Player/AudioMenu/AudioMenu.tsx | 65 +++++++++++++++++++ src/routes/Player/AudioMenu/index.ts | 2 + src/routes/Player/ControlBar/ControlBar.js | 10 ++- src/routes/Player/Player.js | 45 ++++++++++--- .../Player/SubtitlesMenu/SubtitlesMenu.js | 34 ---------- src/routes/Settings/Settings.js | 8 +++ src/types/types.d.ts | 7 ++ 8 files changed, 186 insertions(+), 45 deletions(-) create mode 100644 src/routes/Player/AudioMenu/AudioMenu.less create mode 100644 src/routes/Player/AudioMenu/AudioMenu.tsx create mode 100644 src/routes/Player/AudioMenu/index.ts diff --git a/src/routes/Player/AudioMenu/AudioMenu.less b/src/routes/Player/AudioMenu/AudioMenu.less new file mode 100644 index 000000000..4836cd4d0 --- /dev/null +++ b/src/routes/Player/AudioMenu/AudioMenu.less @@ -0,0 +1,60 @@ +.audio-menu { + height: 25rem; + display: flex; + flex-direction: row; + + .container { + flex: none; + align-self: stretch; + display: flex; + flex-direction: column; + width: 16rem; + + .header { + flex: none; + align-self: stretch; + padding: 1.5rem 2rem; + font-weight: 700; + color: var(--primary-foreground-color); + } + + .list { + flex: 1; + align-self: stretch; + overflow-y: auto; + padding: 0 1rem; + + .option { + display: flex; + flex-direction: row; + align-items: center; + height: 3.5rem; + padding: 0 1.5rem; + margin-bottom: 0.5rem; + border-radius: var(--border-radius); + + &:global(.selected), &:hover { + background-color: var(--overlay-color); + } + + .label { + flex: 1; + max-height: 2.4em; + font-size: 1.1rem; + color: var(--primary-foreground-color); + text-wrap: nowrap; + text-overflow: ellipsis; + } + + .icon { + flex: none; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-left: 1rem; + background-color: var(--secondary-accent-color); + } + } + } + } +} \ No newline at end of file diff --git a/src/routes/Player/AudioMenu/AudioMenu.tsx b/src/routes/Player/AudioMenu/AudioMenu.tsx new file mode 100644 index 000000000..1a84b28da --- /dev/null +++ b/src/routes/Player/AudioMenu/AudioMenu.tsx @@ -0,0 +1,65 @@ +import React, { MouseEvent, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import classNames from 'classnames'; +import { Button, languageNames } from 'stremio/common'; +import styles from './AudioMenu.less'; + +type Props = { + className: string, + selectedAudioTrackId: string | null, + audioTracks: AudioTrack[], + onAudioTrackSelected: (id: string) => void, +}; + +const AudioMenu = ({ className, selectedAudioTrackId, audioTracks, onAudioTrackSelected }: Props) => { + const { t } = useTranslation(); + + const onMouseDown = (event: MouseEvent) => { + event.stopPropagation(); + }; + + const onAudioTrackClick = useCallback(({ currentTarget }: MouseEvent) => { + const id = currentTarget.getAttribute('data-id')!; + onAudioTrackSelected && onAudioTrackSelected(id); + }, [onAudioTrackSelected]); + + return ( +
+
+
+ { t('AUDIO_TRACKS') } +
+
+ { + audioTracks.map(({ id, label, lang }, index) => ( + + )) + } +
+
+
+ ); +}; + +export default AudioMenu; diff --git a/src/routes/Player/AudioMenu/index.ts b/src/routes/Player/AudioMenu/index.ts new file mode 100644 index 000000000..265490872 --- /dev/null +++ b/src/routes/Player/AudioMenu/index.ts @@ -0,0 +1,2 @@ +import AudioMenu from './AudioMenu'; +export default AudioMenu; diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index a68a542bf..77b483f9b 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/src/routes/Player/ControlBar/ControlBar.js @@ -35,6 +35,7 @@ const ControlBar = ({ onVolumeChangeRequested, onSeekRequested, onToggleSubtitlesMenu, + onToggleAudioMenu, onToggleInfoMenu, onToggleSpeedMenu, onToggleVideosMenu, @@ -48,6 +49,9 @@ const ControlBar = ({ const onSubtitlesButtonMouseDown = React.useCallback((event) => { event.nativeEvent.subtitlesMenuClosePrevented = true; }, []); + const onAudioButtonMouseDown = React.useCallback((event) => { + event.stopPropagation(); + }, []); const onInfoButtonMouseDown = React.useCallback((event) => { event.nativeEvent.infoMenuClosePrevented = true; }, []); @@ -157,9 +161,12 @@ const ControlBar = ({ - + { metaItem?.content?.videos?.length > 0 ? - ))} - - - : - null - }
{ t('PLAYER_SUBTITLES_LANGUAGES') }
@@ -312,16 +286,8 @@ SubtitlesMenu.propTypes = { extraSubtitlesOffset: PropTypes.number, extraSubtitlesDelay: PropTypes.number, extraSubtitlesSize: PropTypes.number, - audioTracks: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - lang: PropTypes.string.isRequired, - origin: PropTypes.string.isRequired, - label: PropTypes.string.isRequired - })), - selectedAudioTrackId: PropTypes.string, onSubtitlesTrackSelected: PropTypes.func, onExtraSubtitlesTrackSelected: PropTypes.func, - onAudioTrackSelected: PropTypes.func, onSubtitlesOffsetChanged: PropTypes.func, onSubtitlesSizeChanged: PropTypes.func, onExtraSubtitlesOffsetChanged: PropTypes.func, diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 275028038..407a4c172 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -627,6 +627,14 @@ const Settings = () => { S
+
+
+
{ t('SETTINGS_SHORTCUT_MENU_AUDIO') }
+
+
+ A +
+
{ t('SETTINGS_SHORTCUT_MENU_INFO') }
diff --git a/src/types/types.d.ts b/src/types/types.d.ts index 8b7a627b6..8f6d55730 100644 --- a/src/types/types.d.ts +++ b/src/types/types.d.ts @@ -61,3 +61,10 @@ type Catalog = { installed?: boolean, deepLinks?: D, }; + +type AudioTrack = { + id: string, + label: string, + lang: string, + origin: string, +}; From 57aac8a27a762caaffbac94810e5a5f445b5709c Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 20 Dec 2024 20:18:17 +0100 Subject: [PATCH 2/5] fix(Player): audio menu open state --- src/routes/Player/AudioMenu/AudioMenu.tsx | 9 +++++---- src/routes/Player/ControlBar/ControlBar.js | 2 +- src/routes/Player/Player.js | 4 +++- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/routes/Player/AudioMenu/AudioMenu.tsx b/src/routes/Player/AudioMenu/AudioMenu.tsx index 1a84b28da..71bdb68ed 100644 --- a/src/routes/Player/AudioMenu/AudioMenu.tsx +++ b/src/routes/Player/AudioMenu/AudioMenu.tsx @@ -14,15 +14,16 @@ type Props = { const AudioMenu = ({ className, selectedAudioTrackId, audioTracks, onAudioTrackSelected }: Props) => { const { t } = useTranslation(); - const onMouseDown = (event: MouseEvent) => { - event.stopPropagation(); - }; - const onAudioTrackClick = useCallback(({ currentTarget }: MouseEvent) => { const id = currentTarget.getAttribute('data-id')!; onAudioTrackSelected && onAudioTrackSelected(id); }, [onAudioTrackSelected]); + const onMouseDown = (event: MouseEvent) => { + // @ts-expect-error: Property 'audioMenuClosePrevented' does not exist on type 'MouseEvent'. + event.nativeEvent.audioMenuClosePrevented = true; + }; + return (
diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index 77b483f9b..ca9498320 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/src/routes/Player/ControlBar/ControlBar.js @@ -50,7 +50,7 @@ const ControlBar = ({ event.nativeEvent.subtitlesMenuClosePrevented = true; }, []); const onAudioButtonMouseDown = React.useCallback((event) => { - event.stopPropagation(); + event.nativeEvent.audioMenuClosePrevented = true; }, []); const onInfoButtonMouseDown = React.useCallback((event) => { event.nativeEvent.infoMenuClosePrevented = true; diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 26194a9b0..d201af0fa 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -240,7 +240,9 @@ const Player = ({ urlParams, queryParams }) => { if (!event.nativeEvent.subtitlesMenuClosePrevented) { closeSubtitlesMenu(); } - closeAudioMenu(); + if (!event.nativeEvent.audioMenuClosePrevented) { + closeAudioMenu(); + } if (!event.nativeEvent.infoMenuClosePrevented) { closeInfoMenu(); } From b9d6e01256b920f3bad7d5cc6716045a6c74df4d Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 20 Dec 2024 20:24:51 +0100 Subject: [PATCH 3/5] fix(Player): layout issue with audio menu --- src/routes/Player/AudioMenu/AudioMenu.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Player/AudioMenu/AudioMenu.less b/src/routes/Player/AudioMenu/AudioMenu.less index 4836cd4d0..1887a1e7c 100644 --- a/src/routes/Player/AudioMenu/AudioMenu.less +++ b/src/routes/Player/AudioMenu/AudioMenu.less @@ -1,5 +1,4 @@ .audio-menu { - height: 25rem; display: flex; flex-direction: row; @@ -23,6 +22,7 @@ align-self: stretch; overflow-y: auto; padding: 0 1rem; + padding-bottom: 0.5rem; .option { display: flex; From d1583a6f4a378f3a5263dbc96d75b66a1aefb3db Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 20 Dec 2024 20:26:48 +0100 Subject: [PATCH 4/5] Update src/routes/Player/Player.js Co-authored-by: Timothy Z. --- src/routes/Player/Player.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 2f8e9c921..2d93689d7 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -63,7 +63,7 @@ const Player = ({ urlParams, queryParams }) => { const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false); const menusOpen = React.useMemo(() => { - return optionsMenuOpen || subtitlesMenuOpen || audioMenuOpen|| infoMenuOpen || speedMenuOpen || videosMenuOpen || statisticsMenuOpen; + return optionsMenuOpen || subtitlesMenuOpen || audioMenuOpen || infoMenuOpen || speedMenuOpen || videosMenuOpen || statisticsMenuOpen; }, [optionsMenuOpen, subtitlesMenuOpen, audioMenuOpen, infoMenuOpen, speedMenuOpen, videosMenuOpen, statisticsMenuOpen]); const closeMenus = React.useCallback(() => { From 95682f63e65a2c649b96dbf1163d233c47b1419b Mon Sep 17 00:00:00 2001 From: Tim Date: Mon, 23 Dec 2024 16:20:21 +0100 Subject: [PATCH 5/5] chore: update stremio-translations --- package-lock.json | 7 ++++--- package.json | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2ac27cb5a..5be6d2466 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#f666d9a97cafa5aa150878b5c51a2896b5f4f1b2", + "stremio-translations": "github:Stremio/stremio-translations#a0f50634202f748a57907b645d2cd92fbaa479dd", "url": "0.11.4", "use-long-press": "^3.2.0" }, @@ -13373,8 +13373,9 @@ }, "node_modules/stremio-translations": { "version": "1.44.9", - "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#f666d9a97cafa5aa150878b5c51a2896b5f4f1b2", - "integrity": "sha512-SzaIGUMqQuMAq58sI9L/RKSs5O4eF8VKPMqnWFddBSg/tZOU9xuNYqjRPKT07cp8MRfzzGQmCKMByozTYfjdIA==" + "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#a0f50634202f748a57907b645d2cd92fbaa479dd", + "integrity": "sha512-JJpd1JJet3T6/VTNdZ2NZ7uvHJ4zkuyqo5BnTcDGqLVNO/OpicGqKhZjE4WGSgmuhsfPBU8T0ICCfzKu2xpvKg==", + "license": "MIT" }, "node_modules/string_decoder": { "version": "1.1.1", diff --git a/package.json b/package.json index bec340a54..80b43d540 100755 --- 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#f666d9a97cafa5aa150878b5c51a2896b5f4f1b2", + "stremio-translations": "github:Stremio/stremio-translations#a0f50634202f748a57907b645d2cd92fbaa479dd", "url": "0.11.4", "use-long-press": "^3.2.0" },