From ed51814c27302cf0a9daae6587bd80b1bc9fd949 Mon Sep 17 00:00:00 2001 From: Tim Date: Sun, 20 Jun 2021 10:43:12 +0200 Subject: [PATCH 1/5] refactor(Settings): add seek time properties --- src/common/CONSTANTS.js | 2 + src/routes/Settings/Settings.js | 20 ++++++++ .../Settings/useProfileSettingsInputs.js | 46 +++++++++++++++++++ 3 files changed, 68 insertions(+) diff --git a/src/common/CONSTANTS.js b/src/common/CONSTANTS.js index f5702fd4e..7b6ee1549 100644 --- a/src/common/CONSTANTS.js +++ b/src/common/CONSTANTS.js @@ -3,6 +3,7 @@ const CHROMECAST_RECEIVER_APP_ID = '1634F54B'; const SUBTITLES_SIZES = [75, 100, 125, 150, 175, 200, 250]; const SUBTITLES_FONTS = ['Roboto', 'Arial', 'Halvetica', 'Times New Roman', 'Verdana', 'Courier', 'Lucida Console', 'sans-serif', 'serif', 'monospace']; +const SEEK_TIME_DURATIONS = [5, 10, 15, 20, 25, 30]; const CATALOG_PREVIEW_SIZE = 10; const CATALOG_PAGE_SIZE = 100; const NONE_EXTRA_VALUE = 'None'; @@ -28,6 +29,7 @@ module.exports = { CHROMECAST_RECEIVER_APP_ID, SUBTITLES_SIZES, SUBTITLES_FONTS, + SEEK_TIME_DURATIONS, CATALOG_PREVIEW_SIZE, CATALOG_PAGE_SIZE, NONE_EXTRA_VALUE, diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 546912994..567d8c586 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -27,6 +27,8 @@ const Settings = () => { subtitlesTextColorInput, subtitlesBackgroundColorInput, subtitlesOutlineColorInput, + seekTimeDuration, + seekTimeShiftDuration, bingeWatchingCheckbox, playInBackgroundCheckbox, playInExternalPlayerCheckbox, @@ -303,6 +305,24 @@ const Settings = () => { {...subtitlesOutlineColorInput} /> +
+
+
Arrow keys seek time
+
+ +
+
+
+
Arrow keys seek time when holding Shift key
+
+ +
Auto-play next episode
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index 26619afce..dad762254 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -110,6 +110,50 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); + const seekTimeDuration = useDeepEqualMemo(() => ({ + options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({ + value: `${size}`, + label: `${size}s` + })), + selected: [`${profile.settings.seekTimeDuration}`], + renderLabelText: () => { + return `${profile.settings.seekTimeDuration}s`; + }, + onSelect: (event) => { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'UpdateSettings', + args: { + ...profile.settings, + seekTimeDuration: parseInt(event.value, 10) + } + } + }); + } + }), [profile.settings]); + const seekTimeShiftDuration = useDeepEqualMemo(() => ({ + options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({ + value: `${size}`, + label: `${size}s` + })), + selected: [`${profile.settings.seekTimeShiftDuration}`], + renderLabelText: () => { + return `${profile.settings.seekTimeShiftDuration}s`; + }, + onSelect: (event) => { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'UpdateSettings', + args: { + ...profile.settings, + seekTimeShiftDuration: parseInt(event.value, 10) + } + } + }); + } + }), [profile.settings]); const bingeWatchingCheckbox = useDeepEqualMemo(() => ({ checked: profile.settings.bingeWatching, onClick: () => { @@ -192,6 +236,8 @@ const useProfileSettingsInputs = (profile) => { subtitlesTextColorInput, subtitlesBackgroundColorInput, subtitlesOutlineColorInput, + seekTimeDuration, + seekTimeShiftDuration, bingeWatchingCheckbox, playInBackgroundCheckbox, playInExternalPlayerCheckbox, From c11caaacd03eb4cac12aa23505f6ddda4031be13 Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 16 Jul 2021 10:44:47 +0200 Subject: [PATCH 2/5] refactor(Settings): remove seekTimeShiftDuration --- src/routes/Settings/Settings.js | 10 -------- .../Settings/useProfileSettingsInputs.js | 23 ------------------- 2 files changed, 33 deletions(-) diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 567d8c586..8d4ac199f 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -28,7 +28,6 @@ const Settings = () => { subtitlesBackgroundColorInput, subtitlesOutlineColorInput, seekTimeDuration, - seekTimeShiftDuration, bingeWatchingCheckbox, playInBackgroundCheckbox, playInExternalPlayerCheckbox, @@ -314,15 +313,6 @@ const Settings = () => { {...seekTimeDuration} />
-
-
-
Arrow keys seek time when holding Shift key
-
- -
Auto-play next episode
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index dad762254..a34e422ad 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -132,28 +132,6 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const seekTimeShiftDuration = useDeepEqualMemo(() => ({ - options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({ - value: `${size}`, - label: `${size}s` - })), - selected: [`${profile.settings.seekTimeShiftDuration}`], - renderLabelText: () => { - return `${profile.settings.seekTimeShiftDuration}s`; - }, - onSelect: (event) => { - core.transport.dispatch({ - action: 'Ctx', - args: { - action: 'UpdateSettings', - args: { - ...profile.settings, - seekTimeShiftDuration: parseInt(event.value, 10) - } - } - }); - } - }), [profile.settings]); const bingeWatchingCheckbox = useDeepEqualMemo(() => ({ checked: profile.settings.bingeWatching, onClick: () => { @@ -237,7 +215,6 @@ const useProfileSettingsInputs = (profile) => { subtitlesBackgroundColorInput, subtitlesOutlineColorInput, seekTimeDuration, - seekTimeShiftDuration, bingeWatchingCheckbox, playInBackgroundCheckbox, playInExternalPlayerCheckbox, From 839f2b8cba72d0b2150d03885a9587b521d9eab0 Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 16 Jul 2021 11:21:09 +0200 Subject: [PATCH 3/5] refactor(Player): use seek duration from settings and handle shift key event --- src/routes/Player/Player.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index d54124e02..84be29c2a 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -331,14 +331,26 @@ const Player = ({ urlParams, queryParams }) => { } case 'ArrowRight': { if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) { - onSeekRequested(videoState.time + 15000); + let seekTimeDuration = settings.seekTimeDuration * 1000; + + if (event.shiftKey === true) { + seekTimeDuration = seekTimeDuration * 3; + } + + onSeekRequested(videoState.time + seekTimeDuration); } break; } case 'ArrowLeft': { if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) { - onSeekRequested(videoState.time - 15000); + let seekTimeDuration = settings.seekTimeDuration * 1000; + + if (event.shiftKey === true) { + seekTimeDuration = seekTimeDuration * 3; + } + + onSeekRequested(videoState.time - seekTimeDuration); } break; From bb73cd8695f108d33efe0ffec0be8387aca00962 Mon Sep 17 00:00:00 2001 From: Tim Date: Mon, 19 Jul 2021 16:18:55 +0200 Subject: [PATCH 4/5] refactor: convert seekTimeDuration to ms --- src/common/CONSTANTS.js | 2 +- src/routes/Player/Player.js | 4 ++-- src/routes/Settings/useProfileSettingsInputs.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/common/CONSTANTS.js b/src/common/CONSTANTS.js index 7b6ee1549..ff9d18e58 100644 --- a/src/common/CONSTANTS.js +++ b/src/common/CONSTANTS.js @@ -3,7 +3,7 @@ const CHROMECAST_RECEIVER_APP_ID = '1634F54B'; const SUBTITLES_SIZES = [75, 100, 125, 150, 175, 200, 250]; const SUBTITLES_FONTS = ['Roboto', 'Arial', 'Halvetica', 'Times New Roman', 'Verdana', 'Courier', 'Lucida Console', 'sans-serif', 'serif', 'monospace']; -const SEEK_TIME_DURATIONS = [5, 10, 15, 20, 25, 30]; +const SEEK_TIME_DURATIONS = [5000, 10000, 15000, 20000, 25000, 30000]; const CATALOG_PREVIEW_SIZE = 10; const CATALOG_PAGE_SIZE = 100; const NONE_EXTRA_VALUE = 'None'; diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 4614ba444..0f9fff879 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -344,7 +344,7 @@ const Player = ({ urlParams, queryParams }) => { } case 'ArrowRight': { if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) { - let seekTimeDuration = settings.seekTimeDuration * 1000; + let seekTimeDuration = settings.seekTimeDuration; if (event.shiftKey === true) { seekTimeDuration = seekTimeDuration * 3; @@ -357,7 +357,7 @@ const Player = ({ urlParams, queryParams }) => { } case 'ArrowLeft': { if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) { - let seekTimeDuration = settings.seekTimeDuration * 1000; + let seekTimeDuration = settings.seekTimeDuration; if (event.shiftKey === true) { seekTimeDuration = seekTimeDuration * 3; diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index a34e422ad..479b1bf49 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -113,11 +113,11 @@ const useProfileSettingsInputs = (profile) => { const seekTimeDuration = useDeepEqualMemo(() => ({ options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({ value: `${size}`, - label: `${size}s` + label: `${size / 1000}s` })), selected: [`${profile.settings.seekTimeDuration}`], renderLabelText: () => { - return `${profile.settings.seekTimeDuration}s`; + return `${profile.settings.seekTimeDuration / 1000}s`; }, onSelect: (event) => { core.transport.dispatch({ From 4f407a97a567947ab32cfd0adb141eff43034e81 Mon Sep 17 00:00:00 2001 From: Tim Date: Mon, 19 Jul 2021 16:59:56 +0200 Subject: [PATCH 5/5] refactor(Player): add settings.seekTimeDuration to layoutEffect, update to cleaner code syntax --- src/routes/Player/Player.js | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 0f9fff879..af4a341a0 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -344,26 +344,16 @@ const Player = ({ urlParams, queryParams }) => { } case 'ArrowRight': { if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) { - let seekTimeDuration = settings.seekTimeDuration; - - if (event.shiftKey === true) { - seekTimeDuration = seekTimeDuration * 3; - } - - onSeekRequested(videoState.time + seekTimeDuration); + const seekTimeMultiplier = event.shiftKey ? 3 : 1; + onSeekRequested(videoState.time + (settings.seekTimeDuration * seekTimeMultiplier)); } break; } case 'ArrowLeft': { if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) { - let seekTimeDuration = settings.seekTimeDuration; - - if (event.shiftKey === true) { - seekTimeDuration = seekTimeDuration * 3; - } - - onSeekRequested(videoState.time - seekTimeDuration); + const seekTimeMultiplier = event.shiftKey ? 3 : 1; + onSeekRequested(videoState.time - (settings.seekTimeDuration * seekTimeMultiplier)); } break; @@ -411,7 +401,7 @@ const Player = ({ urlParams, queryParams }) => { return () => { window.removeEventListener('keydown', onKeyDown); }; - }, [player, routeFocused, subtitlesMenuOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu]); + }, [player, routeFocused, subtitlesMenuOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu, settings.seekTimeDuration]); React.useLayoutEffect(() => { return () => { setImmersedDebounced.cancel();