Skip to content

Commit

Permalink
refactor(Settings): use MultiselectMenu instead Multiselect
Browse files Browse the repository at this point in the history
  • Loading branch information
@Botsy
Botsy committed Feb 28, 2025
1 parent 794f4e4 commit 7ea974f
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 63 deletions.
26 changes: 13 additions & 13 deletions src/routes/Settings/Settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const { default: Icon } = require('@stremio/stremio-icons/react');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { useProfile, usePlatform, useStreamingServer, withCoreSuspender, useToast } = require('stremio/common');
const { Button, ColorInput, MainNavBars, Multiselect, Toggle } = require('stremio/components');
const { Button, ColorInput, MainNavBars, MultiselectMenu, Toggle } = require('stremio/components');
const useProfileSettingsInputs = require('./useProfileSettingsInputs');
const useStreamingServerSettingsInputs = require('./useStreamingServerSettingsInputs');
const useDataExport = require('./useDataExport');
Expand Down Expand Up @@ -316,7 +316,7 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_UI_LANGUAGE') }</div>
</div>
<Multiselect
<MultiselectMenu
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
tabIndex={-1}
{...interfaceLanguageSelect}
Expand All @@ -333,7 +333,7 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_SUBTITLES_LANGUAGE') }</div>
</div>
<Multiselect
<MultiselectMenu
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...subtitlesLanguageSelect}
/>
Expand All @@ -356,7 +356,7 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_SUBTITLES_SIZE') }</div>
</div>
<Multiselect
<MultiselectMenu
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...subtitlesSizeSelect}
/>
Expand Down Expand Up @@ -398,7 +398,7 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_DEFAULT_AUDIO_TRACK') }</div>
</div>
<Multiselect
<MultiselectMenu
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...audioLanguageSelect}
/>
Expand All @@ -423,7 +423,7 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_SEEK_KEY') }</div>
</div>
<Multiselect
<MultiselectMenu
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...seekTimeDurationSelect}
/>
Expand All @@ -432,7 +432,7 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_SEEK_KEY_SHIFT') }</div>
</div>
<Multiselect
<MultiselectMenu
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...seekShortTimeDurationSelect}
/>
Expand Down Expand Up @@ -467,7 +467,7 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_NEXT_VIDEO_POPUP_DURATION') }</div>
</div>
<Multiselect
<MultiselectMenu
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
disabled={!profile.settings.bingeWatching}
{...nextVideoPopupDurationSelect}
Expand All @@ -483,7 +483,7 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_PLAY_IN_EXTERNAL_PLAYER') }</div>
</div>
<Multiselect
<MultiselectMenu
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...playInExternalPlayerSelect}
/>
Expand Down Expand Up @@ -527,7 +527,7 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_HTTPS_ENDPOINT') }</div>
</div>
<Multiselect
<MultiselectMenu
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...remoteEndpointSelect}
/>
Expand All @@ -541,7 +541,7 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_SERVER_CACHE_SIZE') }</div>
</div>
<Multiselect
<MultiselectMenu
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...cacheSizeSelect}
/>
Expand All @@ -555,7 +555,7 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_SERVER_TORRENT_PROFILE') }</div>
</div>
<Multiselect
<MultiselectMenu
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...torrentProfileSelect}
/>
Expand All @@ -569,7 +569,7 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_TRANSCODE_PROFILE') }</div>
</div>
<Multiselect
<MultiselectMenu
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...transcodingProfileSelect}
/>
Expand Down
98 changes: 61 additions & 37 deletions src/routes/Settings/useProfileSettingsInputs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,18 @@ const useProfileSettingsInputs = (profile) => {
value: codes[0],
label: name,
})),
selected: [
interfaceLanguages.find(({ codes }) => codes[1] === profile.settings.interfaceLanguage)?.codes?.[0] || profile.settings.interfaceLanguage
],
onSelect: (event) => {
selectedOption: {
label: interfaceLanguages.find(({ codes }) => codes[0] === profile.settings.interfaceLanguage)?.name,
value: interfaceLanguages.find(({ codes }) => codes[1] === profile.settings.interfaceLanguage)?.codes?.[0] || profile.settings.interfaceLanguage
},
onSelect: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
interfaceLanguage: event.value
interfaceLanguage: value
}
}
});
Expand All @@ -36,15 +37,18 @@ const useProfileSettingsInputs = (profile) => {
value: code,
label: languageNames[code]
})),
selected: [profile.settings.subtitlesLanguage],
onSelect: (event) => {
selectedOption: {
label: languageNames[profile.settings.subtitlesLanguage],
value: profile.settings.subtitlesLanguage
},
onSelect: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
subtitlesLanguage: event.value
subtitlesLanguage: value
}
}
});
Expand All @@ -55,63 +59,66 @@ const useProfileSettingsInputs = (profile) => {
value: `${size}`,
label: `${size}%`
})),
selected: [`${profile.settings.subtitlesSize}`],
renderLabelText: () => {
selectedOption: {
label: `${profile.settings.subtitlesSize}%`,
value: `${profile.settings.subtitlesSize}`
},
title: () => {
return `${profile.settings.subtitlesSize}%`;
},
onSelect: (event) => {
onSelect: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
subtitlesSize: parseInt(event.value, 10)
subtitlesSize: parseInt(value, 10)
}
}
});
}
}), [profile.settings]);
const subtitlesTextColorInput = React.useMemo(() => ({
value: profile.settings.subtitlesTextColor,
onChange: (event) => {
onChange: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
subtitlesTextColor: event.value
subtitlesTextColor: value
}
}
});
}
}), [profile.settings]);
const subtitlesBackgroundColorInput = React.useMemo(() => ({
value: profile.settings.subtitlesBackgroundColor,
onChange: (event) => {
onChange: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
subtitlesBackgroundColor: event.value
subtitlesBackgroundColor: value
}
}
});
}
}), [profile.settings]);
const subtitlesOutlineColorInput = React.useMemo(() => ({
value: profile.settings.subtitlesOutlineColor,
onChange: (event) => {
onChange: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
subtitlesOutlineColor: event.value
subtitlesOutlineColor: value
}
}
});
Expand All @@ -122,15 +129,18 @@ const useProfileSettingsInputs = (profile) => {
value: code,
label: languageNames[code]
})),
selected: [profile.settings.audioLanguage],
onSelect: (event) => {
selectedOption: {
label: languageNames[profile.settings.audioLanguage],
value: profile.settings.audioLanguage
},
onSelect: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
audioLanguage: event.value
audioLanguage: value
}
}
});
Expand Down Expand Up @@ -172,18 +182,21 @@ const useProfileSettingsInputs = (profile) => {
value: `${size}`,
label: `${size / 1000} ${t('SECONDS')}`
})),
selected: [`${profile.settings.seekTimeDuration}`],
renderLabelText: () => {
selectedOption: {
label: `${profile.settings.seekTimeDuration / 1000} ${t('SECONDS')}`,
value: `${profile.settings.seekTimeDuration}`
},
title: () => {
return `${profile.settings.seekTimeDuration / 1000} ${t('SECONDS')}`;
},
onSelect: (event) => {
onSelect: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
seekTimeDuration: parseInt(event.value, 10)
seekTimeDuration: parseInt(value, 10)
}
}
});
Expand All @@ -194,18 +207,21 @@ const useProfileSettingsInputs = (profile) => {
value: `${size}`,
label: `${size / 1000} ${t('SECONDS')}`
})),
selected: [`${profile.settings.seekShortTimeDuration}`],
renderLabelText: () => {
selectedOption: {
label: `${profile.settings.seekShortTimeDuration / 1000} ${t('SECONDS')}`,
value: `${profile.settings.seekShortTimeDuration}`,
},
title: () => {
return `${profile.settings.seekShortTimeDuration / 1000} ${t('SECONDS')}`;
},
onSelect: (event) => {
onSelect: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
seekShortTimeDuration: parseInt(event.value, 10)
seekShortTimeDuration: parseInt(value, 10)
}
}
});
Expand All @@ -218,19 +234,22 @@ const useProfileSettingsInputs = (profile) => {
value,
label: t(label),
})),
selected: [profile.settings.playerType],
renderLabelText: () => {
selectedOption: {
label: CONSTANTS.EXTERNAL_PLAYERS.find(({ value }) => value === profile.settings.playerType)?.label,
value: profile.settings.playerType
},
title: () => {
const selectedOption = CONSTANTS.EXTERNAL_PLAYERS.find(({ value }) => value === profile.settings.playerType);
return selectedOption ? t(selectedOption.label, { defaultValue: selectedOption.label }) : profile.settings.playerType;
},
onSelect: (event) => {
onSelect: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
playerType: event.value
playerType: value
}
}
});
Expand All @@ -241,21 +260,26 @@ const useProfileSettingsInputs = (profile) => {
value: `${duration}`,
label: duration === 0 ? 'Disabled' : `${duration / 1000} ${t('SECONDS')}`
})),
selected: [`${profile.settings.nextVideoNotificationDuration}`],
renderLabelText: () => {
selectedOption: {
label: profile.settings.nextVideoNotificationDuration === 0
? 'Disabled'
: `${profile.settings.nextVideoNotificationDuration / 1000} ${t('SECONDS')}`,
value: `${profile.settings.nextVideoNotificationDuration}`
},
title: () => {
return profile.settings.nextVideoNotificationDuration === 0 ?
'Disabled'
:
`${profile.settings.nextVideoNotificationDuration / 1000} ${t('SECONDS')}`;
},
onSelect: (event) => {
onSelect: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
nextVideoNotificationDuration: parseInt(event.value, 10)
nextVideoNotificationDuration: parseInt(value, 10)
}
}
});
Expand Down
Loading

0 comments on commit 7ea974f

Please sign in to comment.