Merge pull request #317 from Stremio/feat/player-default-audio-track

Feat/player default audio track
Stremio · Nov 28, 2022 · 04c6c29 · 04c6c29
2 parents 74dfff4 + daf39c8
commit 04c6c29
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
         "classnames": "2.3.1",
         "eventemitter3": "4.0.7",
         "filter-invalid-dom-props": "2.1.0",
+        "langs": "^2.0.0",
         "hat": "0.0.3",
         "lodash.debounce": "4.0.8",
         "lodash.intersection": "4.4.0",

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
@@ -4,6 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
+const langs = require('langs');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 const { HorizontalNavBar, Button, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
@@ -42,6 +43,7 @@ const Player = ({ urlParams, queryParams }) => {
     const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
     const [speedMenuOpen, , closeSpeedMenu, toggleSpeedMenu] = useBinaryState(false);
     const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false);
+    const defaultAudioTrackSelected = React.useRef(false);
     const [error, setError] = React.useState(null);
     const [videoState, setVideoState] = React.useReducer(
         (videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
@@ -325,6 +327,20 @@ const Player = ({ urlParams, queryParams }) => {
             pausedChanged(videoState.paused);
         }
     }, [videoState.paused]);
+    React.useEffect(() => {
+        if (!defaultAudioTrackSelected.current) {
+            const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
+            const audioTrack = findTrackByLang(videoState.audioTracks, settings.audioLanguage);
+
+            if (audioTrack && audioTrack.id) {
+                onAudioTrackSelected(audioTrack.id);
+                defaultAudioTrackSelected.current = true;
+            }
+        }
+    }, [videoState.audioTracks]);
+    React.useEffect(() => {
+        defaultAudioTrackSelected.current = false;
+    }, [videoState.stream]);
     React.useEffect(() => {
         if ((!Array.isArray(videoState.subtitlesTracks) || videoState.subtitlesTracks.length === 0) &&
             (!Array.isArray(videoState.extraSubtitlesTracks) || videoState.extraSubtitlesTracks.length === 0) &&

diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
@@ -28,6 +28,7 @@ const Settings = () => {
         subtitlesTextColorInput,
         subtitlesBackgroundColorInput,
         subtitlesOutlineColorInput,
+        audioLanguageSelect,
         seekTimeDurationSelect,
         bingeWatchingCheckbox,
         playInBackgroundCheckbox,
@@ -310,6 +311,15 @@ const Settings = () => {
                                 {...subtitlesOutlineColorInput}
                             />
                         </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Audio Language</div>
+                            </div>
+                            <Multiselect
+                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
+                                {...audioLanguageSelect}
+                            />
+                        </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
                                 <div className={styles['label']}>Rewind & Fast-forward duration</div>

diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js
@@ -112,6 +112,25 @@ const useProfileSettingsInputs = (profile) => {
             });
         }
     }), [profile.settings]);
+    const audioLanguageSelect = React.useMemo(() => ({
+        options: Object.keys(languageNames).map((code) => ({
+            value: code,
+            label: languageNames[code]
+        })),
+        selected: [profile.settings.audioLanguage],
+        onSelect: (event) => {
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        audioLanguage: event.value
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
     const seekTimeDurationSelect = React.useMemo(() => ({
         options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
             value: `${size}`,
@@ -216,6 +235,7 @@ const useProfileSettingsInputs = (profile) => {
         subtitlesTextColorInput,
         subtitlesBackgroundColorInput,
         subtitlesOutlineColorInput,
+        audioLanguageSelect,
         seekTimeDurationSelect,
         bingeWatchingCheckbox,
         playInBackgroundCheckbox,