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

Merge pull request #1114 from Stremio/refactor/settings-interface-section

Browse source 
Settings: Move interface settings to dedicated section
This commit is contained in:
Tim 2026-01-21 09:54:06 +01:00 committed by GitHub
commit 8339dc8a00
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 74 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/routes/Settings/General/General.tsx
View file

@ -1,13 +1,12 @@
import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, MultiselectMenu, Toggle } from 'stremio/components';
import { Button } from 'stremio/components';
import { useServices } from 'stremio/services';
import { usePlatform, useToast } from 'stremio/common';
import { Section, Option, Link } from '../components';
import User from './User';
import useDataExport from './useDataExport';
import styles from './General.less';
import useGeneralOptions from './useGeneralOptions';
type Props = {
profile: Profile,
@ -15,18 +14,11 @@ type Props = {
const General = forwardRef<HTMLDivElement, Props>(({ profile }: Props, ref) => {
const { t } = useTranslation();
const { core, shell } = useServices();
const { core } = useServices();
const platform = usePlatform();
const toast = useToast();
const [dataExport, loadDataExport] = useDataExport();
const {
interfaceLanguageSelect,
quitOnCloseToggle,
escExitFullscreenToggle,
hideSpoilersToggle,
} = useGeneralOptions(profile);
const [traktAuthStarted, setTraktAuthStarted] = useState(false);
const isTraktAuthenticated = useMemo(() => {
@ -143,39 +135,6 @@ const General = forwardRef<HTMLDivElement, Props>(({ profile }: Props, ref) => {
</Button>
</Option>
</Section>
<Section>
<Option label={'SETTINGS_UI_LANGUAGE'}>
<MultiselectMenu
className={'multiselect'}
{...interfaceLanguageSelect}
/>
</Option>
{
shell.active &&
<Option label={'SETTINGS_QUIT_ON_CLOSE'}>
<Toggle
tabIndex={-1}
{...quitOnCloseToggle}
/>
</Option>
}
{
shell.active &&
<Option label={'SETTINGS_FULLSCREEN_EXIT'}>
<Toggle
tabIndex={-1}
{...escExitFullscreenToggle}
/>
</Option>
}
<Option label={'SETTINGS_BLUR_UNWATCHED_IMAGE'}>
<Toggle
tabIndex={-1}
{...hideSpoilersToggle}
/>
</Option>
</Section>
</>;
});

57
src/routes/Settings/Interface/Interface.tsx Normal file
View file

@ -0,0 +1,57 @@
import React, { forwardRef } from 'react';
import { useServices } from 'stremio/services';
import { MultiselectMenu, Toggle } from 'stremio/components';
import { Section, Option } from '../components';
import useInterfaceOptions from './useInterfaceOptions';
type Props = {
profile: Profile,
};
const Interface = forwardRef<HTMLDivElement, Props>(({ profile }: Props, ref) => {
const { shell } = useServices();
const {
interfaceLanguageSelect,
quitOnCloseToggle,
escExitFullscreenToggle,
hideSpoilersToggle,
} = useInterfaceOptions(profile);
return (
<Section ref={ref} label={'INTERFACE'}>
<Option label={'SETTINGS_UI_LANGUAGE'}>
<MultiselectMenu
className={'multiselect'}
{...interfaceLanguageSelect}
/>
</Option>
{
shell.active &&
<Option label={'SETTINGS_QUIT_ON_CLOSE'}>
<Toggle
tabIndex={-1}
{...quitOnCloseToggle}
/>
</Option>
}
{
shell.active &&
<Option label={'SETTINGS_FULLSCREEN_EXIT'}>
<Toggle
tabIndex={-1}
{...escExitFullscreenToggle}
/>
</Option>
}
<Option label={'SETTINGS_BLUR_UNWATCHED_IMAGE'}>
<Toggle
tabIndex={-1}
{...hideSpoilersToggle}
/>
</Option>
</Section>
);
});
export default Interface;

2
src/routes/Settings/Interface/index.ts Normal file
View file

@ -0,0 +1,2 @@
import Interface from './Interface';
export default Interface;

4
src/routes/Settings/General/useGeneralOptions.ts → src/routes/Settings/Interface/useInterfaceOptions.ts
View file

@ -2,7 +2,7 @@ import { useMemo } from 'react';
import { interfaceLanguages, useLanguageSorting } from 'stremio/common';
import { useServices } from 'stremio/services';
const useGeneralOptions = (profile: Profile) => {
const useInterfaceOptions = (profile: Profile) => {
const { core } = useServices();
const interfaceLanguageOptions = useMemo(() =>
@ -89,4 +89,4 @@ const useGeneralOptions = (profile: Profile) => {
};
};
export default useGeneralOptions;
export default useInterfaceOptions;

3
src/routes/Settings/Menu/Menu.tsx
View file

@ -26,6 +26,9 @@ const Menu = ({ selected, streamingServer, onSelect }: Props) => {
<Button className={classNames(styles['button'], { [styles['selected']]: selected === SECTIONS.GENERAL })} title={t('SETTINGS_NAV_GENERAL')} data-section={SECTIONS.GENERAL} onClick={onSelect}>
{ t('SETTINGS_NAV_GENERAL') }
</Button>
<Button className={classNames(styles['button'], { [styles['selected']]: selected === SECTIONS.INTERFACE })} title={t('INTERFACE')} data-section={SECTIONS.INTERFACE} onClick={onSelect}>
{ t('INTERFACE') }
</Button>
<Button className={classNames(styles['button'], { [styles['selected']]: selected === SECTIONS.PLAYER })} title={t('SETTINGS_NAV_PLAYER')} data-section={SECTIONS.PLAYER} onClick={onSelect}>
{ t('SETTINGS_NAV_PLAYER') }
</Button>

7
src/routes/Settings/Settings.tsx
View file

@ -9,6 +9,7 @@ import { MainNavBars } from 'stremio/components';
import { SECTIONS } from './constants';
import Menu from './Menu';
import General from './General';
import Interface from './Interface';
import Player from './Player';
import Streaming from './Streaming';
import Shortcuts from './Shortcuts';
@ -23,12 +24,14 @@ const Settings = () => {
const sectionsContainerRef = useRef<HTMLDivElement>(null);
const generalSectionRef = useRef<HTMLDivElement>(null);
const interfaceSectionRef = useRef<HTMLDivElement>(null);
const playerSectionRef = useRef<HTMLDivElement>(null);
const streamingServerSectionRef = useRef<HTMLDivElement>(null);
const shortcutsSectionRef = useRef<HTMLDivElement>(null);
const sections = useMemo(() => ([
{ ref: generalSectionRef, id: SECTIONS.GENERAL },
{ ref: interfaceSectionRef, id: SECTIONS.INTERFACE },
{ ref: playerSectionRef, id: SECTIONS.PLAYER },
{ ref: streamingServerSectionRef, id: SECTIONS.STREAMING },
{ ref: shortcutsSectionRef, id: SECTIONS.SHORTCUTS },
@ -82,6 +85,10 @@ const Settings = () => {
ref={generalSectionRef}
profile={profile}
/>
<Interface
ref={interfaceSectionRef}
profile={profile}
/>
<Player
ref={playerSectionRef}
profile={profile}

1
src/routes/Settings/constants.ts
View file

@ -1,6 +1,7 @@
const SECTIONS = {
GENERAL: 'general',
PLAYER: 'player',
INTERFACE: 'interface',
STREAMING: 'streaming',
SHORTCUTS: 'shortcuts',
};