Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 17:15:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #855 from Stremio/feat/replace-multiselect-settings
Some checks failed
Build / build (push) Has been cancelled
Details

Browse source 
Аpp: Replace Multiselect usage with MultiselectMenu
This commit is contained in:
Timothy Z. 2025-06-03 12:54:55 +03:00 committed by GitHub
commit d75c9b1d99
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 190 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/MultiselectMenu/Dropdown/Dropdown.tsx
View file

@ -10,23 +10,25 @@ import styles from './Dropdown.less';
type Props = {
options: MultiselectMenuOption[];
selectedOption?: MultiselectMenuOption | null;
value?: string | number;
menuOpen: boolean | (() => void);
level: number;
setLevel: (level: number) => void;
onSelect: (value: number) => void;
onSelect: (value: string | number) => void;
};
const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen }: Props) => {
const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props) => {
const { t } = useTranslation();
const optionsRef = useRef(new Map());
const containerRef = useRef(null);
const handleSetOptionRef = useCallback((value: number) => (node: HTMLButtonElement | null) => {
const selectedOption = options.find((opt) => opt.value === value);
const handleSetOptionRef = useCallback((optionValue: string | number) => (node: HTMLButtonElement | null) => {
if (node) {
optionsRef.current.set(value, node);
optionsRef.current.set(optionValue, node);
} else {
optionsRef.current.delete(value);
optionsRef.current.delete(optionValue);
}
}, []);
@ -63,11 +65,11 @@ const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen
.filter((option: MultiselectMenuOption) => !option.hidden)
.map((option: MultiselectMenuOption) => (
<Option
key={option.id}
key={option.value}
ref={handleSetOptionRef(option.value)}
option={option}
onSelect={onSelect}
selectedOption={selectedOption}
selectedValue={value}
/>
))
}

9
src/components/MultiselectMenu/Dropdown/Option/Option.tsx
View file

@ -8,13 +8,12 @@ import Icon from '@stremio/stremio-icons/react';
type Props = {
option: MultiselectMenuOption;
selectedOption?: MultiselectMenuOption | null;
onSelect: (value: number) => void;
selectedValue?: string | number;
onSelect: (value: string | number) => void;
};
const Option = forwardRef<HTMLButtonElement, Props>(({ option, selectedOption, onSelect }, ref) => {
// consider using option.id === selectedOption?.id instead
const selected = useMemo(() => option?.value === selectedOption?.value, [option, selectedOption]);
const Option = forwardRef<HTMLButtonElement, Props>(({ option, selectedValue, onSelect }, ref) => {
const selected = useMemo(() => option?.value === selectedValue, [option, selectedValue]);
const handleClick = useCallback(() => {
onSelect(option.value);

11
src/components/MultiselectMenu/MultiselectMenu.less
View file

@ -14,14 +14,21 @@
}
.multiselect-button {
color: var(--primary-foreground-color);
padding: 0.75rem 1.5rem;
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
gap: 0 0.5rem;
border-radius: @border-radius;
.label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--primary-foreground-color);
}
.icon {
width: 1rem;
color: var(--primary-foreground-color);
@ -33,7 +40,7 @@
}
}
&:hover {
&:hover, &.active {
background-color: var(--overlay-color);
}
}

26
src/components/MultiselectMenu/MultiselectMenu.tsx
View file

@ -11,23 +11,25 @@ import useOutsideClick from 'stremio/common/useOutsideClick';
type Props = {
className?: string,
title?: string;
title?: string | (() => string);
options: MultiselectMenuOption[];
selectedOption?: MultiselectMenuOption;
onSelect: (value: number) => void;
value?: string | number;
onSelect: (value: string | number) => void;
};
const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => {
const MultiselectMenu = ({ className, title, options, value, onSelect }: Props) => {
const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
const multiselectMenuRef = useOutsideClick(() => closeMenu());
const [level, setLevel] = React.useState<number>(0);
const onOptionSelect = (value: number) => {
level ? setLevel(level + 1) : onSelect(value), closeMenu();
const selectedOption = options.find((opt) => opt.value === value);
const onOptionSelect = (selectedValue: string | number) => {
level ? setLevel(level + 1) : onSelect(selectedValue), closeMenu();
};
return (
<div className={classNames(styles['multiselect-menu'], className)} ref={multiselectMenuRef}>
<div className={classNames(styles['multiselect-menu'], { [styles['active']]: menuOpen }, className)} ref={multiselectMenuRef}>
<Button
className={classNames(styles['multiselect-button'], { [styles['open']]: menuOpen })}
onClick={toggleMenu}
@ -35,7 +37,13 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }
aria-haspopup='listbox'
aria-expanded={menuOpen}
>
{title}
<div className={styles['label']}>
{
typeof title === 'function'
? title()
: title ?? selectedOption?.label
}
</div>
<Icon name={'caret-down'} className={classNames(styles['icon'], { [styles['open']]: menuOpen })} />
</Button>
{
@ -46,7 +54,7 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }
options={options}
onSelect={onOptionSelect}
menuOpen={menuOpen}
selectedOption={selectedOption}
value={value}
/>
: null
}

6
src/routes/Addons/Addons.js
View file

@ -6,7 +6,7 @@ const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { usePlatform, useBinaryState, withCoreSuspender } = require('stremio/common');
const { AddonDetailsModal, Button, Image, MainNavBars, Multiselect, ModalDialog, SearchBar, SharePrompt, TextInput } = require('stremio/components');
const { AddonDetailsModal, Button, Image, MainNavBars, ModalDialog, SearchBar, SharePrompt, TextInput, MultiselectMenu } = require('stremio/components');
const { useServices } = require('stremio/services');
const Addon = require('./Addon');
const useInstalledAddons = require('./useInstalledAddons');
@ -107,7 +107,7 @@ const Addons = ({ urlParams, queryParams }) => {
<div className={styles['addons-content']}>
<div className={styles['selectable-inputs-container']}>
{selectInputs.map((selectInput, index) => (
<Multiselect
<MultiselectMenu
{...selectInput}
key={index}
className={styles['select-input-container']}
@ -218,7 +218,7 @@ const Addons = ({ urlParams, queryParams }) => {
filtersModalOpen ?
<ModalDialog title={'Addons filters'} className={styles['filters-modal']} onCloseRequest={closeFiltersModal}>
{selectInputs.map((selectInput, index) => (
<Multiselect
<MultiselectMenu
{...selectInput}
key={index}
className={styles['select-input-container']}

1
src/routes/Addons/styles.less
View file

@ -90,6 +90,7 @@
}
.select-input-container {
background-color: var(--overlay-color);
flex-grow: 0;
flex-shrink: 1;
flex-basis: 15rem;

35
src/routes/Addons/useSelectableInputs.js
View file

@ -4,8 +4,8 @@ const React = require('react');
const { useTranslate } = require('stremio/common');
const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
const selectedCatalog = remoteAddons.selectable.catalogs.concat(installedAddons.selectable.catalogs).find(({ selected }) => selected);
const catalogSelect = {
title: t.string('SELECT_CATALOG'),
options: remoteAddons.selectable.catalogs
.concat(installedAddons.selectable.catalogs)
.map(({ name, deepLinks }) => ({
@ -13,24 +13,22 @@ const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
label: t.stringWithPrefix(name, 'ADDON_'),
title: t.stringWithPrefix(name, 'ADDON_'),
})),
selected: remoteAddons.selectable.catalogs
.concat(installedAddons.selectable.catalogs)
.filter(({ selected }) => selected)
.map(({ deepLinks }) => deepLinks.addons),
renderLabelText: remoteAddons.selected !== null ?
value: selectedCatalog ? selectedCatalog.deepLinks.addons : undefined,
title: remoteAddons.selected !== null ?
() => {
const selectableCatalog = remoteAddons.selectable.catalogs
.find(({ id }) => id === remoteAddons.selected.request.path.id);
return selectableCatalog ? t.stringWithPrefix(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
}
:
null,
onSelect: (event) => {
window.location = event.value;
: null,
onSelect: (value) => {
window.location = value;
}
};
const selectedType = installedAddons.selected !== null
? installedAddons.selectable.types.find(({ selected }) => selected)
: remoteAddons.selectable.types.find(({ selected }) => selected);
const typeSelect = {
title: t.string('SELECT_TYPE'),
options: installedAddons.selected !== null ?
installedAddons.selectable.types.map(({ type, deepLinks }) => ({
value: deepLinks.addons,
@ -41,15 +39,8 @@ const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
value: deepLinks.addons,
label: t.stringWithPrefix(type, 'TYPE_')
})),
selected: installedAddons.selected !== null ?
installedAddons.selectable.types
.filter(({ selected }) => selected)
.map(({ deepLinks }) => deepLinks.addons)
:
remoteAddons.selectable.types
.filter(({ selected }) => selected)
.map(({ deepLinks }) => deepLinks.addons),
renderLabelText: () => {
value: selectedType ? selectedType.deepLinks.addons : undefined,
title: () => {
return installedAddons.selected !== null ?
installedAddons.selected.request.type === null ?
t.string('TYPE_ALL')
@ -61,8 +52,8 @@ const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
:
typeSelect.title;
},
onSelect: (event) => {
window.location = event.value;
onSelect: (value) => {
window.location = value;
}
};
return [catalogSelect, typeSelect];

16
src/routes/Discover/Discover.js
View file

@ -6,7 +6,7 @@ const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { useServices } = require('stremio/services');
const { CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, Multiselect, ModalDialog } = require('stremio/components');
const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, ModalDialog, MultiselectMenu } = require('stremio/components');
const useDiscover = require('./useDiscover');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
@ -100,14 +100,13 @@ const Discover = ({ urlParams, queryParams }) => {
<div className={styles['discover-content']}>
<div className={styles['catalog-container']}>
<div className={styles['selectable-inputs-container']}>
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
<Multiselect
{selectInputs.map(({ title, options, value, onSelect }, index) => (
<MultiselectMenu
key={index}
className={styles['select-input']}
title={title}
options={options}
selected={selected}
renderLabelText={renderLabelText}
value={value}
onSelect={onSelect}
/>
))}
@ -203,14 +202,13 @@ const Discover = ({ urlParams, queryParams }) => {
{
inputsModalOpen ?
<ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
<Multiselect
{selectInputs.map(({ title, options, value, onSelect }, index) => (
<MultiselectMenu
key={index}
className={styles['select-input']}
title={title}
options={options}
selected={selected}
renderLabelText={renderLabelText}
value={value}
onSelect={onSelect}
/>
))}

1
src/routes/Discover/styles.less
View file

@ -50,6 +50,7 @@
.select-input {
flex: 0 1 15rem;
background-color: var(--overlay-color);
&:not(:first-child) {
margin-left: 1.5rem;

84
src/routes/Discover/useSelectableInputs.js
View file

@ -4,72 +4,70 @@ const React = require('react');
const { useTranslate } = require('stremio/common');
const mapSelectableInputs = (discover, t) => {
const selectedType = discover.selectable.types.find(({ selected }) => selected);
const typeSelect = {
title: t.string('SELECT_TYPE'),
options: discover.selectable.types
.map(({ type, deepLinks }) => ({
value: deepLinks.discover,
label: t.stringWithPrefix(type, 'TYPE_')
})),
selected: discover.selectable.types
.filter(({ selected }) => selected)
.map(({ deepLinks }) => deepLinks.discover),
renderLabelText: discover.selected !== null ?
() => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
:
null,
onSelect: (event) => {
window.location = event.value;
value: selectedType
? selectedType.deepLinks.discover
: undefined,
title: discover.selected !== null
? () => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
: t.string('SELECT_TYPE'),
onSelect: (value) => {
window.location = value;
}
};
const selectedCatalog = discover.selectable.catalogs.find(({ selected }) => selected);
const catalogSelect = {
title: t.string('SELECT_CATALOG'),
options: discover.selectable.catalogs
.map(({ id, name, addon, deepLinks }) => ({
value: deepLinks.discover,
label: t.catalogTitle({ addon, id, name }),
title: `${name} (${addon.manifest.name})`
})),
selected: discover.selectable.catalogs
.filter(({ selected }) => selected)
.map(({ deepLinks }) => deepLinks.discover),
renderLabelText: discover.selected !== null ?
() => {
value: discover.selected?.request.path.id
? selectedCatalog.deepLinks.discover
: undefined,
title: discover.selected !== null
? () => {
const selectableCatalog = discover.selectable.catalogs
.find(({ id }) => id === discover.selected.request.path.id);
return selectableCatalog ? t.catalogTitle(selectableCatalog, false) : discover.selected.request.path.id;
}
:
null,
onSelect: (event) => {
window.location = event.value;
t.string('SELECT_CATALOG'),
onSelect: (value) => {
window.location =value;
}
};
const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => ({
title: t.stringWithPrefix(name, 'SELECT_'),
isRequired: isRequired,
options: options.map(({ value, deepLinks }) => ({
label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'),
value: JSON.stringify({
href: deepLinks.discover,
value
})
})),
selected: options
.filter(({ selected }) => selected)
.map(({ value, deepLinks }) => JSON.stringify({
href: deepLinks.discover,
value
const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => {
const selectedExtra = options.find(({ selected }) => selected);
return {
isRequired: isRequired,
options: options.map(({ value, deepLinks }) => ({
label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'),
value: JSON.stringify({
href: deepLinks.discover,
value
})
})),
renderLabelText: options.some(({ selected, value }) => selected && value === null) ?
() => t.stringWithPrefix(name, 'SELECT_')
:
null,
onSelect: (event) => {
const { href } = JSON.parse(event.value);
window.location = href;
}
}));
value: JSON.stringify({
href: selectedExtra.deepLinks.discover,
value: selectedExtra.value,
}),
title: options.some(({ selected, value }) => selected && value === null) ?
() => t.stringWithPrefix(name, 'SELECT_')
: t.stringWithPrefix(selectedExtra.value),
onSelect: (value) => {
const { href } = JSON.parse(value);
window.location = href;
}
};
});
return [[typeSelect, catalogSelect, ...extraSelects], discover.selectable.nextPage];
};

10
src/routes/Library/Library.js
View file

@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const NotFound = require('stremio/routes/NotFound');
const { useProfile, useNotifications, routesRegexp, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
const { DelayedRenderer, Chips, Image, MainNavBars, Multiselect, LibItem } = require('stremio/components');
const { DelayedRenderer, Chips, Image, MainNavBars, LibItem, MultiselectMenu } = require('stremio/components');
const { default: Placeholder } = require('./Placeholder');
const useLibrary = require('./useLibrary');
const useSelectableInputs = require('./useSelectableInputs');
@ -64,17 +64,17 @@ const Library = ({ model, urlParams, queryParams }) => {
}
}, [profile.auth, library.selected]);
React.useEffect(() => {
if (!library.selected?.type && typeSelect.selected) {
window.location = typeSelect.selected[0];
if (!library.selected?.type && typeSelect.value) {
window.location = typeSelect.value;
}
}, [typeSelect.selected, library.selected]);
}, [typeSelect.value, library.selected]);
return (
<MainNavBars className={styles['library-container']} route={model}>
{
profile.auth !== null ?
<div className={styles['library-content']}>
<div className={styles['selectable-inputs-container']}>
<Multiselect {...typeSelect} className={styles['select-input-container']} />
<MultiselectMenu {...typeSelect} className={styles['select-input-container']} />
<Chips {...sortChips} className={styles['select-input-container']} />
</div>
{

1
src/routes/Library/styles.less
View file

@ -42,6 +42,7 @@
flex-shrink: 1;
flex-basis: 15rem;
height: 2.75rem;
background-color: var(--overlay-color);
&:not(:last-child) {
margin-right: 1.5rem;

13
src/routes/Library/useSelectableInputs.js
View file

@ -2,22 +2,17 @@
const React = require('react');
const { useTranslate } = require('stremio/common');
const mapSelectableInputs = (library, t) => {
const selectedType = library.selectable.types
.filter(({ selected }) => selected).map(({ deepLinks }) => deepLinks.library);
const selectedType = library.selectable.types.find(({ selected }) => selected) || library.selectable.types.find(({ type }) => type === null);
const typeSelect = {
title: t.string('SELECT_TYPE'),
options: library.selectable.types
.map(({ type, deepLinks }) => ({
value: deepLinks.library,
label: type === null ? t.string('TYPE_ALL') : t.stringWithPrefix(type, 'TYPE_')
})),
selected: selectedType.length
? selectedType
: [library.selectable.types[0]].map(({ deepLinks }) => deepLinks.library),
onSelect: (event) => {
window.location = event.value;
value: selectedType?.deepLinks.library,
onSelect: (value) => {
window.location = value;
}
};
const sortChips = {

11
src/routes/MetaDetails/StreamsList/StreamsList.js
View file

@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button, Image, Multiselect } = require('stremio/components');
const { Button, Image, MultiselectMenu } = require('stremio/components');
const { useServices } = require('stremio/services');
const Stream = require('./Stream');
const styles = require('./styles');
@ -21,9 +21,9 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
const profile = useProfile();
const streamsContainerRef = React.useRef(null);
const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
const onAddonSelected = React.useCallback((event) => {
const onAddonSelected = React.useCallback((value) => {
streamsContainerRef.current.scrollTo({ top: 0, left: 0, behavior: platform.name === 'ios' ? 'smooth' : 'instant' });
setSelectedAddon(event.value);
setSelectedAddon(value);
}, [platform]);
const showInstallAddonsButton = React.useMemo(() => {
return !profile || profile.auth === null || profile.auth?.user?.isNewUser === true && !video?.upcoming;
@ -77,7 +77,6 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
}, [streamsByAddon, selectedAddon]);
const selectableOptions = React.useMemo(() => {
return {
title: 'Select Addon',
options: [
{
value: ALL_ADDONS_KEY,
@ -90,7 +89,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
title: streamsByAddon[transportUrl].addon.manifest.name,
}))
],
selected: [selectedAddon],
value: selectedAddon,
onSelect: onAddonSelected
};
}, [streamsByAddon, selectedAddon]);
@ -117,7 +116,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
}
{
Object.keys(streamsByAddon).length > 1 ?
<Multiselect
<MultiselectMenu
{...selectableOptions}
className={styles['select-input-container']}
/>

2
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -114,7 +114,7 @@
.select-input-container {
min-width: 40%;
flex-grow: 1;
background: none;
background-color: none;
&:hover, &:focus, &:global(.active) {
background-color: var(--overlay-color);

4
src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
View file

@ -17,7 +17,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
}));
}, [seasons]);
const selectedSeason = React.useMemo(() => {
return { label: String(season), value: String(season) };
return String(season);
}, [season]);
const prevNextButtonOnClick = React.useCallback((event) => {
if (typeof onSelect === 'function') {
@ -64,7 +64,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
className={styles['seasons-popup-label-container']}
options={options}
title={season > 0 ? `${t('SEASON')} ${season}` : t('SPECIAL')}
selectedOption={selectedSeason}
value={selectedSeason}
onSelect={seasonOnSelect}
/>
<Button className={classnames(styles['next-season-button'], { 'disabled': nextDisabled })} title={'Next season'} data-action={'next'} onClick={prevNextButtonOnClick}>

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

@ -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');
@ -324,7 +324,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}
@ -376,7 +376,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}
/>
@ -385,7 +385,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}
/>
@ -427,7 +427,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}
/>
@ -452,7 +452,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}
/>
@ -461,7 +461,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}
/>
@ -496,7 +496,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}
@ -512,7 +512,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}
/>
@ -568,7 +568,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}
/>
@ -582,7 +582,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}
/>
@ -596,7 +596,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}
/>
@ -610,7 +610,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}
/>

5
src/routes/Settings/styles.less
View file

@ -267,6 +267,11 @@
.option-input-container {
padding: 1rem 1.5rem;
&.multiselect-container {
padding: 0;
background: var(--overlay-color);
}
&.button-container {
justify-content: center;

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

@ -15,17 +15,15 @@ const useProfileSettingsInputs = (profile) => {
value: codes[0],
label: name,
})),
selected: [
interfaceLanguages.find(({ codes }) => codes[1] === profile.settings.interfaceLanguage)?.codes?.[0] || profile.settings.interfaceLanguage
],
onSelect: (event) => {
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
}
}
});
@ -72,15 +70,15 @@ const useProfileSettingsInputs = (profile) => {
label: languageNames[code]
}))
],
selected: [profile.settings.subtitlesLanguage],
onSelect: (event) => {
value: profile.settings.subtitlesLanguage,
onSelect: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
subtitlesLanguage: event.value
subtitlesLanguage: value
}
}
});
@ -91,18 +89,18 @@ const useProfileSettingsInputs = (profile) => {
value: `${size}`,
label: `${size}%`
})),
selected: [`${profile.settings.subtitlesSize}`],
renderLabelText: () => {
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)
}
}
});
@ -110,14 +108,14 @@ const useProfileSettingsInputs = (profile) => {
}), [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
}
}
});
@ -125,14 +123,14 @@ const useProfileSettingsInputs = (profile) => {
}), [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
}
}
});
@ -140,14 +138,14 @@ const useProfileSettingsInputs = (profile) => {
}), [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
}
}
});
@ -158,15 +156,15 @@ const useProfileSettingsInputs = (profile) => {
value: code,
label: languageNames[code]
})),
selected: [profile.settings.audioLanguage],
onSelect: (event) => {
value: profile.settings.audioLanguage,
onSelect: (value) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
audioLanguage: event.value
audioLanguage: value
}
}
});
@ -208,18 +206,18 @@ const useProfileSettingsInputs = (profile) => {
value: `${size}`,
label: `${size / 1000} ${t('SECONDS')}`
})),
selected: [`${profile.settings.seekTimeDuration}`],
renderLabelText: () => {
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)
}
}
});
@ -230,18 +228,18 @@ const useProfileSettingsInputs = (profile) => {
value: `${size}`,
label: `${size / 1000} ${t('SECONDS')}`
})),
selected: [`${profile.settings.seekShortTimeDuration}`],
renderLabelText: () => {
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)
}
}
});
@ -254,19 +252,19 @@ const useProfileSettingsInputs = (profile) => {
value,
label: t(label),
})),
selected: [profile.settings.playerType],
renderLabelText: () => {
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
}
}
});
@ -277,21 +275,21 @@ const useProfileSettingsInputs = (profile) => {
value: `${duration}`,
label: duration === 0 ? 'Disabled' : `${duration / 1000} ${t('SECONDS')}`
})),
selected: [`${profile.settings.nextVideoNotificationDuration}`],
renderLabelText: () => {
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)
}
}
});

26
src/routes/Settings/useStreamingServerSettingsInputs.js
View file

@ -77,15 +77,15 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
value: address,
}))
],
selected: [streamingServer.settings.content.remoteHttps],
onSelect: (event) => {
value: streamingServer.settings.content.remoteHttps,
onSelect: (value) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
...streamingServer.settings.content,
remoteHttps: event.value,
remoteHttps: value,
}
}
});
@ -103,18 +103,18 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
label: cacheSizeToString(size),
value: JSON.stringify(size)
})),
selected: [JSON.stringify(streamingServer.settings.content.cacheSize)],
renderLabelText: () => {
value: JSON.stringify(streamingServer.settings.content.cacheSize),
title: () => {
return cacheSizeToString(streamingServer.settings.content.cacheSize);
},
onSelect: (event) => {
onSelect: (value) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
...streamingServer.settings.content,
cacheSize: JSON.parse(event.value),
cacheSize: JSON.parse(value),
}
}
});
@ -152,15 +152,15 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
:
[]
),
selected: [JSON.stringify(selectedTorrentProfile)],
onSelect: (event) => {
value: JSON.stringify(selectedTorrentProfile),
onSelect: (value) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
...streamingServer.settings.content,
...JSON.parse(event.value),
...JSON.parse(value),
}
}
});
@ -183,15 +183,15 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
value: name,
}))
],
selected: [streamingServer.settings.content.transcodeProfile],
onSelect: (event) => {
value: streamingServer.settings.content.transcodeProfile,
onSelect: (value) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
...streamingServer.settings.content,
transcodeProfile: event.value,
transcodeProfile: value,
}
}
});