From ba1776b500e0ce32517358f592574c27d98e19b7 Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 3 Nov 2022 01:55:51 +0100 Subject: [PATCH 1/5] chore: add new langs package --- package-lock.json | 11 +++++++++++ package.json | 1 + 2 files changed, 12 insertions(+) diff --git a/package-lock.json b/package-lock.json index 1642068a8..0fb40775e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "classnames": "2.3.1", "eventemitter3": "4.0.7", "filter-invalid-dom-props": "2.1.0", + "langs": "^2.0.0", "lodash.debounce": "4.0.8", "lodash.intersection": "4.4.0", "lodash.isequal": "4.5.0", @@ -9426,6 +9427,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", @@ -20962,6 +20968,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 43775796e..312792866 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", "lodash.debounce": "4.0.8", "lodash.intersection": "4.4.0", "lodash.isequal": "4.5.0", From a198fe635b9e788fad5706d50ed3947add91ae2a Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 3 Nov 2022 01:56:14 +0100 Subject: [PATCH 2/5] refactor(Settings): add audio language setting for player --- src/routes/Settings/Settings.js | 10 ++++++++++ .../Settings/useProfileSettingsInputs.js | 20 +++++++++++++++++++ 2 files changed, 30 insertions(+) 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 57f444d01..429b12dc8 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -111,6 +111,25 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); + const audioLanguageSelect = useDeepEqualMemo(() => ({ + 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 = useDeepEqualMemo(() => ({ options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({ value: `${size}`, @@ -215,6 +234,7 @@ const useProfileSettingsInputs = (profile) => { subtitlesTextColorInput, subtitlesBackgroundColorInput, subtitlesOutlineColorInput, + audioLanguageSelect, seekTimeDurationSelect, bingeWatchingCheckbox, playInBackgroundCheckbox, From efa9e20186a65e2a2e4bec01719d57033d51bf48 Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 3 Nov 2022 01:57:14 +0100 Subject: [PATCH 3/5] feat(Player): select default audio track --- src/routes/Player/Player.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index a8f7c2c3f..a1ff0fbc1 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'); @@ -40,6 +41,7 @@ const Player = ({ urlParams, queryParams }) => { const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false); const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = 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 }), @@ -313,6 +315,17 @@ const Player = ({ urlParams, queryParams }) => { pausedChanged(videoState.paused); } }, [videoState.paused]); + React.useEffect(() => { + if (defaultAudioTrackSelected.current === false) { + 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, settings.audioLanguage]); React.useEffect(() => { if ((!Array.isArray(videoState.subtitlesTracks) || videoState.subtitlesTracks.length === 0) && (!Array.isArray(videoState.extraSubtitlesTracks) || videoState.extraSubtitlesTracks.length === 0) && From 537911e3e8afa877f3c8e27ed24420a8b5cba85e Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Sat, 26 Nov 2022 14:20:24 +0200 Subject: [PATCH 4/5] drop useDeepEqualMemo --- src/common/index.js | 2 -- src/common/useDeepEqualMemo.js | 20 ------------- src/routes/Search/Search.js | 4 +-- .../Settings/useProfileSettingsInputs.js | 29 ++++++++++--------- .../useStreamingServerSettingsInputs.js | 8 ++--- 5 files changed, 21 insertions(+), 42 deletions(-) delete mode 100644 src/common/useDeepEqualMemo.js diff --git a/src/common/index.js b/src/common/index.js index 90c266e64..22dcad52a 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -31,7 +31,6 @@ const languageNames = require('./languageNames'); const routesRegexp = require('./routesRegexp'); const useAnimationFrame = require('./useAnimationFrame'); const useBinaryState = require('./useBinaryState'); -const useDeepEqualMemo = require('./useDeepEqualMemo'); const useFullscreen = require('./useFullscreen'); const useLiveRef = require('./useLiveRef'); const useModelState = require('./useModelState'); @@ -75,7 +74,6 @@ module.exports = { routesRegexp, useAnimationFrame, useBinaryState, - useDeepEqualMemo, useFullscreen, useLiveRef, useModelState, diff --git a/src/common/useDeepEqualMemo.js b/src/common/useDeepEqualMemo.js deleted file mode 100644 index 00f5e72ce..000000000 --- a/src/common/useDeepEqualMemo.js +++ /dev/null @@ -1,20 +0,0 @@ -// Copyright (C) 2017-2022 Smart code 203358507 - -const React = require('react'); -const isEqual = require('lodash.isequal'); - -const useDeepEqualMemo = (cb, deps) => { - const valueRef = React.useRef(); - const mountedRef = React.useRef(false); - const prevDepsRef = React.useRef(deps); - if (!mountedRef.current || !isEqual(prevDepsRef.current, deps)) { - valueRef.current = cb(); - prevDepsRef.current = deps; - } - React.useLayoutEffect(() => { - mountedRef.current = true; - }, []); - return valueRef.current; -}; - -module.exports = useDeepEqualMemo; diff --git a/src/routes/Search/Search.js b/src/routes/Search/Search.js index bea2e7606..3ea5bd3b5 100644 --- a/src/routes/Search/Search.js +++ b/src/routes/Search/Search.js @@ -5,7 +5,7 @@ const PropTypes = require('prop-types'); const classnames = require('classnames'); const debounce = require('lodash.debounce'); const Icon = require('@stremio/stremio-icons/dom'); -const { Image, MainNavBars, MetaRow, MetaItem, useDeepEqualMemo, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common'); +const { Image, MainNavBars, MetaRow, MetaItem, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common'); const useSearch = require('./useSearch'); const styles = require('./styles'); @@ -13,7 +13,7 @@ const THRESHOLD = 100; const Search = ({ queryParams }) => { const [search, loadSearchRows] = useSearch(queryParams); - const query = useDeepEqualMemo(() => { + const query = React.useMemo(() => { return search.selected !== null ? search.selected.extra.reduceRight((query, [name, value]) => { if (name === 'search') { diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index 57f444d01..83db7ee17 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -1,12 +1,13 @@ // Copyright (C) 2017-2022 Smart code 203358507 +const React = require('react'); const { useServices } = require('stremio/services'); -const { CONSTANTS, languageNames, useDeepEqualMemo } = require('stremio/common'); +const { CONSTANTS, languageNames } = require('stremio/common'); const useProfileSettingsInputs = (profile) => { const { core } = useServices(); - // TODO combine those useDeepEqualMemo in one - const interfaceLanguageSelect = useDeepEqualMemo(() => ({ + // TODO combine those useMemo in one + const interfaceLanguageSelect = React.useMemo(() => ({ options: Object.keys(languageNames).map((code) => ({ value: code, label: languageNames[code] @@ -25,7 +26,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const subtitlesLanguageSelect = useDeepEqualMemo(() => ({ + const subtitlesLanguageSelect = React.useMemo(() => ({ options: Object.keys(languageNames).map((code) => ({ value: code, label: languageNames[code] @@ -44,7 +45,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const subtitlesSizeSelect = useDeepEqualMemo(() => ({ + const subtitlesSizeSelect = React.useMemo(() => ({ options: CONSTANTS.SUBTITLES_SIZES.map((size) => ({ value: `${size}`, label: `${size}%` @@ -66,7 +67,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const subtitlesTextColorInput = useDeepEqualMemo(() => ({ + const subtitlesTextColorInput = React.useMemo(() => ({ value: profile.settings.subtitlesTextColor, onChange: (event) => { core.transport.dispatch({ @@ -81,7 +82,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const subtitlesBackgroundColorInput = useDeepEqualMemo(() => ({ + const subtitlesBackgroundColorInput = React.useMemo(() => ({ value: profile.settings.subtitlesBackgroundColor, onChange: (event) => { core.transport.dispatch({ @@ -96,7 +97,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const subtitlesOutlineColorInput = useDeepEqualMemo(() => ({ + const subtitlesOutlineColorInput = React.useMemo(() => ({ value: profile.settings.subtitlesOutlineColor, onChange: (event) => { core.transport.dispatch({ @@ -111,7 +112,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const seekTimeDurationSelect = useDeepEqualMemo(() => ({ + const seekTimeDurationSelect = React.useMemo(() => ({ options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({ value: `${size}`, label: `${size / 1000} seconds` @@ -133,7 +134,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const bingeWatchingCheckbox = useDeepEqualMemo(() => ({ + const bingeWatchingCheckbox = React.useMemo(() => ({ checked: profile.settings.bingeWatching, onClick: () => { core.transport.dispatch({ @@ -148,7 +149,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const playInBackgroundCheckbox = useDeepEqualMemo(() => ({ + const playInBackgroundCheckbox = React.useMemo(() => ({ checked: profile.settings.playInBackground, onClick: () => { core.transport.dispatch({ @@ -163,7 +164,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const playInExternalPlayerCheckbox = useDeepEqualMemo(() => ({ + const playInExternalPlayerCheckbox = React.useMemo(() => ({ checked: profile.settings.playInExternalPlayer, onClick: () => { core.transport.dispatch({ @@ -178,7 +179,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const hardwareDecodingCheckbox = useDeepEqualMemo(() => ({ + const hardwareDecodingCheckbox = React.useMemo(() => ({ checked: profile.settings.hardwareDecoding, onClick: () => { core.transport.dispatch({ @@ -193,7 +194,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const streamingServerUrlInput = useDeepEqualMemo(() => ({ + const streamingServerUrlInput = React.useMemo(() => ({ value: profile.settings.streamingServerUrl, onChange: (value) => { core.transport.dispatch({ diff --git a/src/routes/Settings/useStreamingServerSettingsInputs.js b/src/routes/Settings/useStreamingServerSettingsInputs.js index 8e1e3405c..d6ea1a6a0 100644 --- a/src/routes/Settings/useStreamingServerSettingsInputs.js +++ b/src/routes/Settings/useStreamingServerSettingsInputs.js @@ -1,8 +1,8 @@ // Copyright (C) 2017-2022 Smart code 203358507 +const React = require('react'); const isEqual = require('lodash.isequal'); const { useServices } = require('stremio/services'); -const { useDeepEqualMemo } = require('stremio/common'); const CACHE_SIZES = [0, 2147483648, 5368709120, 10737418240, null]; @@ -53,8 +53,8 @@ const TORRENT_PROFILES = { const useStreamingServerSettingsInputs = (streamingServer) => { const { core } = useServices(); - // TODO combine those useDeepEqualMemo in one - const cacheSizeSelect = useDeepEqualMemo(() => { + // TODO combine those useMemo in one + const cacheSizeSelect = React.useMemo(() => { if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') { return null; } @@ -82,7 +82,7 @@ const useStreamingServerSettingsInputs = (streamingServer) => { } }; }, [streamingServer.settings]); - const torrentProfileSelect = useDeepEqualMemo(() => { + const torrentProfileSelect = React.useMemo(() => { if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') { return null; } From c2b24479fa4c7511a383a5b1d10d3f4b40bb89e1 Mon Sep 17 00:00:00 2001 From: Tim Date: Mon, 28 Nov 2022 10:18:32 +0100 Subject: [PATCH 5/5] fix(Player): reset defaut audio track when stream change --- src/routes/Player/Player.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 2fbbbec0b..9eeccc000 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -328,7 +328,7 @@ const Player = ({ urlParams, queryParams }) => { } }, [videoState.paused]); React.useEffect(() => { - if (defaultAudioTrackSelected.current === false) { + 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); @@ -337,7 +337,10 @@ const Player = ({ urlParams, queryParams }) => { defaultAudioTrackSelected.current = true; } } - }, [videoState.audioTracks, settings.audioLanguage]); + }, [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) &&