Move browse files into new folder

This commit is contained in:
schroda
2024-10-05 22:29:56 +02:00
parent 3244a6e3df
commit 3917d5b328
5 changed files with 16 additions and 7 deletions

View File

@@ -0,0 +1,11 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
export type MetadataBrowseSettings = {
hideLibraryEntries: boolean;
};

View File

@@ -0,0 +1,73 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
import Tab from '@mui/material/Tab';
import { useTranslation } from 'react-i18next';
import { StringParam, useQueryParam } from 'use-query-params';
import { Sources } from '@/modules/source/screens/Sources.tsx';
import { Extensions } from '@/modules/extension/screens/Extensions.tsx';
import { TabPanel } from '@/modules/core/components/tabs/TabPanel.tsx';
import { TabsWrapper } from '@/modules/core/components/tabs/TabsWrapper.tsx';
import { TabsMenu } from '@/modules/core/components/tabs/TabsMenu.tsx';
import { Migration } from '@/modules/migration/screens/Migration.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
enum Tabs {
SOURCE = 'source',
EXTENSIONS = 'extensions',
MIGRATE = 'migrate',
}
export function Browse() {
const { t } = useTranslation();
const { setTitle } = useContext(NavBarContext);
useLayoutEffect(() => {
setTitle(t('global.label.browse'));
}, [t]);
const tabsMenuRef = useRef<HTMLDivElement | null>(null);
const [tabsMenuHeight, setTabsMenuHeight] = useState(0);
useResizeObserver(
tabsMenuRef,
useCallback(() => setTabsMenuHeight(tabsMenuRef.current!.offsetHeight), [tabsMenuRef.current]),
);
const [tabSearchParam, setTabSearchParam] = useQueryParam('tab', StringParam, {});
const tabName = (tabSearchParam as Tabs) ?? Tabs.SOURCE;
if (!tabSearchParam) {
setTabSearchParam(tabName, 'replaceIn');
}
return (
<TabsWrapper>
<TabsMenu
ref={tabsMenuRef}
variant="fullWidth"
value={tabName}
onChange={(_, newTab) => setTabSearchParam(newTab, 'replaceIn')}
>
<Tab value={Tabs.SOURCE} sx={{ textTransform: 'none' }} label={t('source.title_one')} />
<Tab value={Tabs.EXTENSIONS} sx={{ textTransform: 'none' }} label={t('extension.title_other')} />
<Tab value={Tabs.MIGRATE} sx={{ textTransform: 'none' }} label={t('migrate.title')} />
</TabsMenu>
<TabPanel index={Tabs.SOURCE} currentIndex={tabName}>
<Sources />
</TabPanel>
<TabPanel index={Tabs.EXTENSIONS} currentIndex={tabName}>
<Extensions tabsMenuHeight={tabsMenuHeight} />
</TabPanel>
<TabPanel index={Tabs.MIGRATE} currentIndex={tabName}>
<Migration tabsMenuHeight={tabsMenuHeight} />
</TabPanel>
</TabsWrapper>
);
}

View File

@@ -0,0 +1,157 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { Trans, useTranslation } from 'react-i18next';
import { useContext, useLayoutEffect } from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Switch from '@mui/material/Switch';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
import { MutableListSetting } from '@/modules/core/components/settings/MutableListSetting.tsx';
import { ServerSettings as GqlServerSettings } from '@/typings.ts';
import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/lib/metadata/metadataServerSettings.ts';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { MetadataBrowseSettings } from '@/modules/browse/Browse.types.ts';
type ExtensionsSettings = Pick<GqlServerSettings, 'maxSourcesInParallel' | 'localSourcePath' | 'extensionRepos'>;
const extractBrowseSettings = (settings: GqlServerSettings): ExtensionsSettings => ({
maxSourcesInParallel: settings.maxSourcesInParallel,
localSourcePath: settings.localSourcePath,
extensionRepos: settings.extensionRepos,
});
export const BrowseSettings = () => {
const { t } = useTranslation();
const { setTitle, setAction } = useContext(NavBarContext);
useLayoutEffect(() => {
setTitle(t('settings.browse.title'));
setAction(null);
}, [t]);
const [showNsfw, setShowNsfw] = useLocalStorage<boolean>('showNsfw', true);
const { data, loading, error, refetch } = requestManager.useGetServerSettings({
notifyOnNetworkStatusChange: true,
});
const [mutateSettings] = requestManager.useUpdateServerSettings();
const updateSetting = <Setting extends keyof ExtensionsSettings>(
setting: Setting,
value: ExtensionsSettings[Setting],
) => {
mutateSettings({ variables: { input: { settings: { [setting]: value } } } }).catch(() =>
makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
);
};
const {
settings: { hideLibraryEntries },
} = useMetadataServerSettings();
const updateMetadataServerSettings = createUpdateMetadataServerSettings<keyof MetadataBrowseSettings>(() =>
makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
);
if (loading) {
return <LoadingPlaceholder />;
}
if (error) {
return (
<EmptyViewAbsoluteCentered
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => refetch().catch(defaultPromiseErrorHandler('BrowseSettings::refetch'))}
/>
);
}
const serverSettings = extractBrowseSettings(data!.settings);
return (
<List sx={{ pt: 0 }}>
<ListItem>
<ListItemText primary={t('settings.label.hide_library_entries')} />
<Switch
edge="end"
checked={hideLibraryEntries}
onChange={() => updateMetadataServerSettings('hideLibraryEntries', !hideLibraryEntries)}
/>
</ListItem>
<ListItem>
<ListItemText
primary={t('settings.label.show_nsfw')}
secondary={t('settings.label.show_nsfw_description')}
/>
<Switch edge="end" checked={showNsfw} onChange={() => setShowNsfw(!showNsfw)} />
</ListItem>
<NumberSetting
settingTitle={t('settings.server.requests.sources.parallel.label.title')}
settingValue={t('settings.server.requests.sources.parallel.label.value', {
value: serverSettings.maxSourcesInParallel,
count: serverSettings.maxSourcesInParallel,
})}
valueUnit={t('source.title_one')}
value={serverSettings.maxSourcesInParallel}
defaultValue={6}
minValue={1}
maxValue={20}
showSlider
stepSize={1}
handleUpdate={(parallelSources) => updateSetting('maxSourcesInParallel', parallelSources)}
/>
<MutableListSetting
settingName={t('extension.settings.repositories.custom.label.title')}
description={t('extension.settings.repositories.custom.label.description')}
dialogDisclaimer={
<Trans i18nKey="extension.settings.repositories.custom.label.disclaimer">
<strong>Suwayomi does not provide any support for 3rd party repositories or extensions!</strong>
<br />
Use with caution as there could be malicious actors making those repositories.
<br />
You as the user need to verify the security and that you trust any repository or extension.
</Trans>
}
handleChange={(repos) => {
updateSetting('extensionRepos', repos);
requestManager.clearExtensionCache();
}}
valueInfos={serverSettings.extensionRepos.map((extensionRepo) => [extensionRepo])}
addItemButtonTitle={t('extension.settings.repositories.custom.dialog.action.button.add')}
placeholder="https://github.com/MY_ACCOUNT/MY_REPO/tree/repo"
validateItem={(repo) =>
!!repo.match(
/https:\/\/(www\.|raw\.)?(github|githubusercontent)\.com\/([^/]+)\/([^/]+)((\/tree|\/blob)?\/([^/\n]*))?(\/([^/\n]*\.json)?)?/g,
)
}
invalidItemError={t('extension.settings.repositories.custom.error.label.invalid_url')}
/>
<TextSetting
settingName={t('settings.server.local_source.path.label.title')}
dialogDescription={t('settings.server.local_source.path.label.description')}
value={serverSettings.localSourcePath}
settingDescription={
serverSettings.localSourcePath.length ? serverSettings.localSourcePath : t('global.label.default')
}
handleChange={(path) => updateSetting('localSourcePath', path)}
/>
</List>
);
};