From c2ad087490f5ba67a1bf312c31cf97f040feabd8 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 12 Apr 2022 19:06:45 +0300
Subject: [PATCH] subtitles size changable for embedded subs

---
 src/routes/Player/Player.js                   |  5 +++
 .../Player/SubtitlesMenu/SubtitlesMenu.js     | 36 ++++++++++++++++---
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 1a2120eb5..edf230234 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -52,6 +52,7 @@ const Player = ({ urlParams, queryParams }) => {
             subtitlesTracks: [],
             selectedSubtitlesTrackId: null,
             subtitlesOffset: null,
+            subtitlesSize: null,
             extraSubtitlesTracks: [],
             selectedExtraSubtitlesTrackId: null,
             extraSubtitlesSize: null,
@@ -72,6 +73,7 @@ const Player = ({ urlParams, queryParams }) => {
         manifest.props.forEach((propName) => {
             dispatch({ type: 'observeProp', propName });
         });
+        dispatch({ type: 'setProp', propName: 'subtitlesSize', propValue: settings.subtitlesSize });
         dispatch({ type: 'setProp', propName: 'subtitlesOffset', propValue: settings.subtitlesOffset });
         dispatch({ type: 'setProp', propName: 'extraSubtitlesSize', propValue: settings.subtitlesSize });
         dispatch({ type: 'setProp', propName: 'extraSubtitlesOffset', propValue: settings.subtitlesOffset });
@@ -266,6 +268,7 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [player.subtitles, videoState.stream]);
     React.useEffect(() => {
+        dispatch({ type: 'setProp', propName: 'subtitlesSize', propValue: settings.subtitlesSize });
         dispatch({ type: 'setProp', propName: 'extraSubtitlesSize', propValue: settings.subtitlesSize });
     }, [settings.subtitlesSize]);
     React.useEffect(() => {
@@ -498,6 +501,7 @@ const Player = ({ urlParams, queryParams }) => {
                         subtitlesTracks={videoState.subtitlesTracks}
                         selectedSubtitlesTrackId={videoState.selectedSubtitlesTrackId}
                         subtitlesOffset={videoState.subtitlesOffset}
+                        subtitlesSize={videoState.subtitlesSize}
                         extraSubtitlesTracks={videoState.extraSubtitlesTracks}
                         selectedExtraSubtitlesTrackId={videoState.selectedExtraSubtitlesTrackId}
                         extraSubtitlesOffset={videoState.extraSubtitlesOffset}
@@ -506,6 +510,7 @@ const Player = ({ urlParams, queryParams }) => {
                         onSubtitlesTrackSelected={onSubtitlesTrackSelected}
                         onExtraSubtitlesTrackSelected={onExtraSubtitlesTrackSelected}
                         onSubtitlesOffsetChanged={onSubtitlesOffsetChanged}
+                        onSubtitlesSizeChanged={onSubtitlesSizeChanged}
                         onExtraSubtitlesOffsetChanged={onSubtitlesOffsetChanged}
                         onExtraSubtitlesDelayChanged={onExtraSubtitlesDelayChanged}
                         onExtraSubtitlesSizeChanged={onSubtitlesSizeChanged}
diff --git a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
index 9f47cbc64..f6dbfbeba 100644
--- a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
+++ b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
@@ -107,16 +107,24 @@ const SubtitlesMenu = (props) => {
     }, [props.selectedExtraSubtitlesTrackId, props.extraSubtitlesDelay, props.onExtraSubtitlesDelayChanged]);
     const onSubtitlesSizeChanged = React.useCallback((event) => {
         const delta = event.value === 'increment' ? 1 : -1;
-        if (typeof props.selectedExtraSubtitlesTrackId === 'string') {
+        if (typeof props.selectedSubtitlesTrackId === 'string') {
+            if (props.subtitlesSize !== null && !isNaN(props.subtitlesSize)) {
+                const sizeIndex = CONSTANTS.SUBTITLES_SIZES.indexOf(props.subtitlesSize);
+                const size = CONSTANTS.SUBTITLES_SIZES[Math.max(0, Math.min(CONSTANTS.SUBTITLES_SIZES.length - 1, sizeIndex + delta))];
+                if (typeof props.onSubtitlesSizeChanged === 'function') {
+                    props.onSubtitlesSizeChanged(size);
+                }
+            }
+        } else if (typeof props.selectedExtraSubtitlesTrackId === 'string') {
             if (props.extraSubtitlesSize !== null && !isNaN(props.extraSubtitlesSize)) {
                 const extraSizeIndex = CONSTANTS.SUBTITLES_SIZES.indexOf(props.extraSubtitlesSize);
-                const extraSize = CONSTANTS.SUBTITLES_SIZES[Math.max(0, Math.min(CONSTANTS.SUBTITLES_SIZES.length, extraSizeIndex + delta))];
+                const extraSize = CONSTANTS.SUBTITLES_SIZES[Math.max(0, Math.min(CONSTANTS.SUBTITLES_SIZES.length - 1, extraSizeIndex + delta))];
                 if (typeof props.onExtraSubtitlesSizeChanged === 'function') {
                     props.onExtraSubtitlesSizeChanged(extraSize);
                 }
             }
         }
-    }, [props.selectedExtraSubtitlesTrackId, props.extraSubtitlesSize, props.onExtraSubtitlesSizeChanged]);
+    }, [props.selectedSubtitlesTrackId, props.selectedExtraSubtitlesTrackId, props.subtitlesSize, props.extraSubtitlesSize, props.onSubtitlesSizeChanged, props.onExtraSubtitlesSizeChanged]);
     const onSubtitlesOffsetChanged = React.useCallback((event) => {
         const delta = event.value === 'increment' ? 1 : -1;
         if (typeof props.selectedSubtitlesTrackId === 'string') {
@@ -199,8 +207,24 @@ const SubtitlesMenu = (props) => {
                 <DiscreteSelectInput
                     className={styles['discrete-input']}
                     label={'Size'}
-                    value={typeof props.selectedExtraSubtitlesTrackId === 'string' && props.extraSubtitlesSize !== null && !isNaN(props.extraSubtitlesSize) ? `${props.extraSubtitlesSize}%` : '--'}
-                    disabled={typeof props.selectedExtraSubtitlesTrackId !== 'string' || props.extraSubtitlesSize === null || isNaN(props.extraSubtitlesSize)}
+                    value={
+                        typeof props.selectedSubtitlesTrackId === 'string' ?
+                            props.subtitlesSize !== null && !isNaN(props.subtitlesSize) ? `${props.subtitlesSize}%` : '--'
+                            :
+                            typeof props.selectedExtraSubtitlesTrackId === 'string' ?
+                                props.extraSubtitlesSize !== null && !isNaN(props.extraSubtitlesSize) ? `${props.extraSubtitlesSize}%` : '--'
+                                :
+                                '--'
+                    }
+                    disabled={
+                        typeof props.selectedSubtitlesTrackId === 'string' ?
+                            props.subtitlesSize === null || isNaN(props.subtitlesSize)
+                            :
+                            typeof props.selectedExtraSubtitlesTrackId === 'string' ?
+                                props.extraSubtitlesSize === null || isNaN(props.extraSubtitlesSize)
+                                :
+                                true
+                    }
                     onChange={onSubtitlesSizeChanged}
                 />
                 <DiscreteSelectInput
@@ -242,6 +266,7 @@ SubtitlesMenu.propTypes = {
     })),
     selectedSubtitlesTrackId: PropTypes.string,
     subtitlesOffset: PropTypes.number,
+    subtitlesSize: PropTypes.number,
     extraSubtitlesTracks: PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.string.isRequired,
         lang: PropTypes.string.isRequired,
@@ -254,6 +279,7 @@ SubtitlesMenu.propTypes = {
     onSubtitlesTrackSelected: PropTypes.func,
     onExtraSubtitlesTrackSelected: PropTypes.func,
     onSubtitlesOffsetChanged: PropTypes.func,
+    onSubtitlesSizeChanged: PropTypes.func,
     onExtraSubtitlesOffsetChanged: PropTypes.func,
     onExtraSubtitlesDelayChanged: PropTypes.func,
     onExtraSubtitlesSizeChanged: PropTypes.func