subtitles settings linked with core

src/routes/Player/Player.js

@@ -7,10 +7,12 @@ const ControlBar = require('./ControlBar');
 const SubtitlesPicker = require('./SubtitlesPicker');
 const Video = require('./Video');
 const usePlayer = require('./usePlayer');
+const useSubtitlesSettings = require('./useSubtitlesSettings');
 const styles = require('./styles');
 
 const Player = ({ urlParams }) => {
     const player = usePlayer(urlParams);
+    const [subtitlesSettings, updateSubtitlesSettings] = useSubtitlesSettings();
     const [subtitlesPickerOpen, , closeSubtitlesPicker, toggleSubtitlesPicker] = useBinaryState(true);
     const [state, setState] = React.useReducer(
         (state, nextState) => ({
@@ -44,7 +46,11 @@ const Player = ({ urlParams }) => {
         manifest.props.forEach((propName) => {
             dispatch({ observedPropName: propName });
         });
-    }, []);
+        dispatch({ propName: 'subtitlesSize', propValue: subtitlesSettings.size });
+        dispatch({ propName: 'subtitlesTextColor', propValue: subtitlesSettings.text_color });
+        dispatch({ propName: 'subtitlesBackgroundColor', propValue: subtitlesSettings.background_color });
+        dispatch({ propName: 'subtitlesOutlineColor', propValue: subtitlesSettings.outline_color });
+    }, [subtitlesSettings.size, subtitlesSettings.text_color, subtitlesSettings.background_color, subtitlesSettings.outline_color]);
     const onPropChanged = React.useCallback((propName, propValue) => {
         setState({ [propName]: propValue });
     }, []);
@@ -79,7 +85,7 @@ const Player = ({ urlParams }) => {
         dispatch({ propName: 'subtitlesDelay', propValue: delay });
     }, []);
     const onSubtitlesSizeChanged = React.useCallback((size) => {
-        dispatch({ propName: 'subtitlesSize', propValue: size });
+        updateSubtitlesSettings({ subtitles_size: size });
     }, []);
     const onSubtitlesOffsetChanged = React.useCallback((offset) => {
         dispatch({ propName: 'subtitlesOffset', propValue: offset });
@@ -113,6 +119,18 @@ const Player = ({ urlParams }) => {
             }
         });
     }, [player.subtitles_resources]);
+    React.useEffect(() => {
+        dispatch({ propName: 'subtitlesSize', propValue: subtitlesSettings.size });
+    }, [subtitlesSettings.size]);
+    React.useEffect(() => {
+        dispatch({ propName: 'subtitlesTextColor', propValue: subtitlesSettings.text_color });
+    }, [subtitlesSettings.text_color]);
+    React.useEffect(() => {
+        dispatch({ propName: 'subtitlesBackgroundColor', propValue: subtitlesSettings.background_color });
+    }, [subtitlesSettings.background_color]);
+    React.useEffect(() => {
+        dispatch({ propName: 'subtitlesOutlineColor', propValue: subtitlesSettings.outline_color });
+    }, [subtitlesSettings.outline_color]);
     return (
         <div className={styles['player-container']} onMouseDown={onContainerMouseDown}>
             <Video

src/routes/Player/Video/Video.js

@@ -1,16 +1,15 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const hat = require('hat');
+const { useLiveRef } = require('stremio/common');
 const selectVideoImplementation = require('./selectVideoImplementation');
 
 const Video = React.forwardRef(({ className, ...props }, ref) => {
-    const [onEnded, onError, onPropValue, onPropChanged, onImplementationChanged] = React.useMemo(() => [
+    const onEndedRef = useLiveRef(props.onEnded);
-        props.onEnded,
+    const onErrorRef = useLiveRef(props.onError);
-        props.onError,
+    const onPropValueRef = useLiveRef(props.onPropValue);
-        props.onPropValue,
+    const onPropChangedRef = useLiveRef(props.onPropChanged);
-        props.onPropChanged,
+    const onImplementationChangedRef = useLiveRef(props.onImplementationChanged);
-        props.onImplementationChanged
-    ], []);
     const containerElementRef = React.useRef(null);
     const videoRef = React.useRef(null);
     const id = React.useMemo(() => `video-${hat()}`, []);
@@ -26,11 +25,13 @@ const Video = React.forwardRef(({ className, ...props }, ref) => {
                     containerElement: containerElementRef.current,
                     shell: args.commandArgs.shell
                 });
-                videoRef.current.on('ended', onEnded);
+                videoRef.current.on('ended', onEndedRef.current);
-                videoRef.current.on('error', onError);
+                videoRef.current.on('error', onErrorRef.current);
-                videoRef.current.on('propValue', onPropValue);
+                videoRef.current.on('propValue', onPropValueRef.current);
-                videoRef.current.on('propChanged', onPropChanged);
+                videoRef.current.on('propChanged', onPropChangedRef.current);
-                onImplementationChanged(videoRef.current.constructor.manifest);
+                if (typeof onImplementationChangedRef.current === 'function') {
+                    onImplementationChangedRef.current(videoRef.current.constructor.manifest);
+                }
             }
         }
 
@@ -42,7 +43,7 @@ const Video = React.forwardRef(({ className, ...props }, ref) => {
             }
         }
     }, []);
-    React.useImperativeHandle(ref, () => ({ dispatch }));
+    React.useImperativeHandle(ref, () => ({ dispatch }), []);
     React.useEffect(() => {
         return () => {
             dispatch({ commandName: 'destroy' });

src/routes/Player/useSubtitlesSettings.js

@@ -3,10 +3,10 @@ const { useModelState } = require('stremio/common');
 const { useServices } = require('stremio/services');
 
 const mapSubtitlesSettings = (ctx) => ({
-    size: ctx.content.settings.subtitles_size,
+    size: ctx.profile.settings.subtitles_size,
-    text_color: ctx.content.settings.subtitles_text_color,
+    text_color: ctx.profile.settings.subtitles_text_color,
-    background_color: ctx.content.settings.subtitles_background_color,
+    background_color: ctx.profile.settings.subtitles_background_color,
-    outline_color: ctx.content.settings.subtitles_outline_color,
+    outline_color: ctx.profile.settings.subtitles_outline_color,
 });
 
 const useSubtitlesSettings = () => {
@@ -15,11 +15,25 @@ const useSubtitlesSettings = () => {
         const ctx = core.getState('ctx');
         return mapSubtitlesSettings(ctx);
     }, []);
-    return useModelState({
+    const subtitlesSettings = useModelState({
         model: 'ctx',
         map: mapSubtitlesSettings,
         init: initSubtitlesSettings
     });
+    const updateSubtitlesSettings = React.useCallback((settings) => {
+        const ctx = core.getState('ctx');
+        core.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'UpdateSettings',
+                args: {
+                    ...ctx.profile.settings,
+                    ...settings
+                }
+            }
+        });
+    }, []);
+    return [subtitlesSettings, updateSubtitlesSettings];
 };
 
 module.exports = useSubtitlesSettings;