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, +};