added esc key and short shift rewind

src/common/CONSTANTS.js

@@ -4,6 +4,7 @@ const CHROMECAST_RECEIVER_APP_ID = '1634F54B';
 const SUBTITLES_SIZES = [75, 100, 125, 150, 175, 200, 250];
 const SUBTITLES_FONTS = ['PlusJakartaSans', 'Arial', 'Halvetica', 'Times New Roman', 'Verdana', 'Courier', 'Lucida Console', 'sans-serif', 'serif', 'monospace'];
 const SEEK_TIME_DURATIONS = [5000, 10000, 15000, 20000, 25000, 30000];
+const SEEK_SHORT_TIME_DURATIONS = [5000, 10000, 15000, 20000, 25000, 30000];
 const NEXT_VIDEO_POPUP_DURATIONS = [0, 5000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000, 55000, 60000, 65000, 70000, 75000, 80000, 85000, 90000];
 const CATALOG_PREVIEW_SIZE = 10;
 const CATALOG_PAGE_SIZE = 100;
@@ -45,6 +46,7 @@ module.exports = {
     SUBTITLES_SIZES,
     SUBTITLES_FONTS,
     SEEK_TIME_DURATIONS,
+    SEEK_SHORT_TIME_DURATIONS,
     NEXT_VIDEO_POPUP_DURATIONS,
     CATALOG_PREVIEW_SIZE,
     CATALOG_PAGE_SIZE,

src/routes/Settings/Settings.js

@@ -35,6 +35,8 @@ const Settings = () => {
         subtitlesOutlineColorInput,
         audioLanguageSelect,
         seekTimeDurationSelect,
+        seekShortTimeDurationSelect,
+        escExitFullscreenCheckbox,
         playInExternalPlayerSelect,
         nextVideoPopupDurationSelect,
         bingeWatchingCheckbox,
@@ -57,6 +59,7 @@ const Settings = () => {
         return profile.auth !== null && profile.auth.user !== null && profile.auth.user.trakt !== null &&
             (Date.now() / 1000) < (profile.auth.user.trakt.created_at + profile.auth.user.trakt.expires_in);
     }, [profile.auth]);
+    console.log(profile.settings)
     const configureServerUrlModalButtons = React.useMemo(() => {
         return [
             {
@@ -334,6 +337,15 @@ const Settings = () => {
                                 {...subtitlesLanguageSelect}
                             />
                         </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>{ t('SETTINGS_FULLSCREEN_EXIT') }</div>
+                            </div>
+                            <Checkbox
+                                className={classnames(styles['option-input-container'], styles['checkbox-container'])}
+                                {...escExitFullscreenCheckbox}
+                            />
+                        </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
                                 <div className={styles['label']}>{ t('SETTINGS_SUBTITLES_SIZE') }</div>
@@ -381,13 +393,22 @@ const Settings = () => {
                         </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
-                                <div className={styles['label']}>{ t('SETTINGS_REWIND_FAST_FORWARD_DURATION') }</div>
+                                <div className={styles['label']}>{ t('SETTINGS_SEEK_KEY') }</div>
                             </div>
                             <Multiselect
                                 className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                 {...seekTimeDurationSelect}
                             />
                         </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>{ t('SETTINGS_SEEK_KEY_SHIFT') }</div>
+                            </div>
+                            <Multiselect
+                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
+                                {...seekShortTimeDurationSelect}
+                            />
+                        </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
                                 <div className={styles['label']}>{ t('AUTO_PLAY') }</div>

src/routes/Settings/useProfileSettingsInputs.js

@@ -135,6 +135,21 @@ const useProfileSettingsInputs = (profile) => {
             });
         }
     }), [profile.settings]);
+    const escExitFullscreenCheckbox = React.useMemo(() => ({
+        checked: profile.settings.escExitFullscreen,
+        onClick: () => {
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        escExistFullscreen: !profile.settings.escExitFullscreen
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+
     const seekTimeDurationSelect = React.useMemo(() => ({
         options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
             value: `${size}`,
@@ -157,6 +172,28 @@ const useProfileSettingsInputs = (profile) => {
             });
         }
     }), [profile.settings]);
+    const seekShortTimeDurationSelect = React.useMemo(() => ({
+        options: CONSTANTS.SEEK_SHORT_TIME_DURATIONS.map((size) => ({
+            value: `${size}`,
+            label: `${size / 1000} ${t('SECONDS')}`
+        })),
+        selected: [`${profile.settings.seekShortTimeDuration}`],
+        renderLabelText: () => {
+            return `${profile.settings.seekShortTimeDuration / 1000} ${t('SECONDS')}`;
+        },
+        onSelect: (event) => {
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        seekShortTimeDuration: parseInt(event.value, 10)
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
     const playInExternalPlayerSelect = React.useMemo(() => ({
         options: externalPlayerOptions.map((opt) => {
             opt.label = t(opt.label);
@@ -269,7 +306,9 @@ const useProfileSettingsInputs = (profile) => {
         subtitlesBackgroundColorInput,
         subtitlesOutlineColorInput,
         audioLanguageSelect,
+        escExitFullscreenCheckbox,
         seekTimeDurationSelect,
+        seekShortTimeDurationSelect,
         playInExternalPlayerSelect,
         nextVideoPopupDurationSelect,
         bingeWatchingCheckbox,

src/types/models/Ctx.d.ts

@@ -25,6 +25,8 @@ type Settings = {
     secondaryAudioLanguage: string | null,
     secondarySubtitlesLanguage: string | null,
     seekTimeDuration: number,
+    escExitFullscreen: boolean,
+    seekShortTimeDuration: number,
     streamingServerUrl: string,
     streamingServerWarningDismissed: Date | null,
     subtitlesBackgroundColor: string,