diff --git a/package-lock.json b/package-lock.json index b08282964..586ff67cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "eventemitter3": "4.0.7", "filter-invalid-dom-props": "2.1.0", "hat": "0.0.3", + "langs": "^2.0.0", "lodash.debounce": "4.0.8", "lodash.intersection": "4.4.0", "lodash.isequal": "4.5.0", @@ -9814,6 +9815,11 @@ "node": ">= 8" } }, + "node_modules/langs": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/langs/-/langs-2.0.0.tgz", + "integrity": "sha512-v4pxOBEQVN1WBTfB1crhTtxzNLZU9HPWgadlwzWKISJtt6Ku/CnpBrwVy+jFv8StjxsPfwPFzO0CMwdZLJ0/BA==" + }, "node_modules/less": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/less/-/less-4.1.2.tgz", @@ -22159,6 +22165,11 @@ "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==", "dev": true }, + "langs": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/langs/-/langs-2.0.0.tgz", + "integrity": "sha512-v4pxOBEQVN1WBTfB1crhTtxzNLZU9HPWgadlwzWKISJtt6Ku/CnpBrwVy+jFv8StjxsPfwPFzO0CMwdZLJ0/BA==" + }, "less": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/less/-/less-4.1.2.tgz", diff --git a/package.json b/package.json index d36ec6289..90c9e5f4d 100755 --- 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 index 54e6d37ea..9eeccc000 100644 --- 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 index 9ca68fd52..85c790094 100644 --- 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} /> +
+
+
Audio Language
+
+ +
Rewind & Fast-forward duration
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index 83db7ee17..f7bcb9885 100644 --- 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,