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

added esc key and short shift rewind

Browse source
This commit is contained in:
kKaskak 2023-10-31 21:47:32 +02:00
parent eb682fd8c3
commit 05321aa103
4 changed files with 65 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/CONSTANTS.js
View file

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

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

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

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

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

2
src/types/models/Ctx.d.ts vendored
View file

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