Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge branch 'development' of https://github.com/Stremio/stremio-web into feat/player-default-subtitles

Browse source
This commit is contained in:
Tim 2022-11-28 11:08:19 +01:00
commit 5875ca0385
8 changed files with 65 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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",
"langs": "^2.0.0",
"lodash.debounce": "4.0.8",

2
src/common/index.js
View file

@ -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,

20
src/common/useDeepEqualMemo.js
View file

@ -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;

13
src/routes/Player/Player.js
View file

@ -44,6 +44,7 @@ const Player = ({ urlParams, queryParams }) => {
const [speedMenuOpen, , closeSpeedMenu, toggleSpeedMenu] = useBinaryState(false);
const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false);
const defaultSubtitlesSelected = React.useRef(false);
const defaultAudioTrackSelected = React.useRef(false);
const [error, setError] = React.useState(null);
const [videoState, setVideoState] = React.useReducer(
(videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
@ -343,8 +344,20 @@ const Player = ({ urlParams, queryParams }) => {
}
}
}, [videoState.subtitlesTracks, videoState.extraSubtitlesTracks]);
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(() => {
defaultSubtitlesSelected.current = false;
defaultAudioTrackSelected.current = false;
}, [videoState.stream]);
React.useEffect(() => {
if ((!Array.isArray(videoState.subtitlesTracks) || videoState.subtitlesTracks.length === 0) &&

4
src/routes/Search/Search.js
View file

@ -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') {

10
src/routes/Settings/Settings.js
View file

@ -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>

49
src/routes/Settings/useProfileSettingsInputs.js
View file

@ -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,26 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const seekTimeDurationSelect = useDeepEqualMemo(() => ({
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}`,
label: `${size / 1000} seconds`
@ -133,7 +153,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const bingeWatchingCheckbox = useDeepEqualMemo(() => ({
const bingeWatchingCheckbox = React.useMemo(() => ({
checked: profile.settings.bingeWatching,
onClick: () => {
core.transport.dispatch({
@ -148,7 +168,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const playInBackgroundCheckbox = useDeepEqualMemo(() => ({
const playInBackgroundCheckbox = React.useMemo(() => ({
checked: profile.settings.playInBackground,
onClick: () => {
core.transport.dispatch({
@ -163,7 +183,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const playInExternalPlayerCheckbox = useDeepEqualMemo(() => ({
const playInExternalPlayerCheckbox = React.useMemo(() => ({
checked: profile.settings.playInExternalPlayer,
onClick: () => {
core.transport.dispatch({
@ -178,7 +198,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const hardwareDecodingCheckbox = useDeepEqualMemo(() => ({
const hardwareDecodingCheckbox = React.useMemo(() => ({
checked: profile.settings.hardwareDecoding,
onClick: () => {
core.transport.dispatch({
@ -193,7 +213,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
const streamingServerUrlInput = useDeepEqualMemo(() => ({
const streamingServerUrlInput = React.useMemo(() => ({
value: profile.settings.streamingServerUrl,
onChange: (value) => {
core.transport.dispatch({
@ -215,6 +235,7 @@ const useProfileSettingsInputs = (profile) => {
subtitlesTextColorInput,
subtitlesBackgroundColorInput,
subtitlesOutlineColorInput,
audioLanguageSelect,
seekTimeDurationSelect,
bingeWatchingCheckbox,
playInBackgroundCheckbox,

8
src/routes/Settings/useStreamingServerSettingsInputs.js
View file

@ -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;
}