diff --git a/src/App.tsx b/src/App.tsx index 6596894d..2fdfbf5c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -48,7 +48,7 @@ const { ServerSettings } = loadable(() => import('@/screens/settings/ServerSetti const { BrowseSettings } = loadable(() => import('@/screens/settings/BrowseSettings.tsx'), lazyLoadFallback); const { WebUISettings } = loadable(() => import('@/screens/settings/WebUISettings.tsx'), lazyLoadFallback); const { Migrate } = loadable(() => import('@/modules/migration/screens/Migrate.tsx'), lazyLoadFallback); -const { DeviceSetting } = loadable(() => import('@/components/settings/DeviceSetting.tsx'), lazyLoadFallback); +const { DeviceSetting } = loadable(() => import('@/modules/device/screens/DeviceSetting.tsx'), lazyLoadFallback); const { TrackingSettings } = loadable(() => import('@/modules/tracker/screens/TrackingSettings.tsx'), lazyLoadFallback); const { TrackerOAuthLogin } = loadable( () => import('@/modules/tracker/screens/TrackerOAuthLogin.tsx'), diff --git a/src/lib/metadata/metadata.ts b/src/lib/metadata/metadata.ts index c068d0e9..b5429b68 100644 --- a/src/lib/metadata/metadata.ts +++ b/src/lib/metadata/metadata.ts @@ -17,10 +17,10 @@ import { } from '@/typings.ts'; import { requestManager } from '@/lib/requests/requests/RequestManager.ts'; import { MetaType, SourceType } from '@/lib/graphql/generated/graphql.ts'; -import { DEFAULT_DEVICE, getActiveDevice } from '@/util/device.ts'; import { ChapterIdInfo } from '@/modules/chapter/services/Chapters.ts'; import { MangaIdInfo } from '@/modules/manga/services/Mangas.ts'; import { CategoryIdInfo } from '@/modules/category/Category.types.ts'; +import { DEFAULT_DEVICE, getActiveDevice } from '@/modules/device/services/Device.ts'; const APP_METADATA_KEY_PREFIX = 'webUI_'; diff --git a/src/lib/metadata/metadataServerSettings.ts b/src/lib/metadata/metadataServerSettings.ts index 9d821b65..8558b773 100644 --- a/src/lib/metadata/metadataServerSettings.ts +++ b/src/lib/metadata/metadataServerSettings.ts @@ -16,11 +16,11 @@ import { import { requestManager } from '@/lib/requests/requests/RequestManager.ts'; import { convertFromGqlMeta, getMetadataFrom, requestUpdateServerMetadata } from '@/lib/metadata/metadata.ts'; import { jsonSaveParse } from '@/lib/HelperFunctions.ts'; -import { DEFAULT_DEVICE } from '@/util/device.ts'; import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'; import { DEFAULT_SORT_SETTINGS } from '@/modules/migration/Migration.constants.ts'; import { MetadataMigrationSettings } from '@/modules/migration/Migration.types.ts'; import { MetadataThemeSettings } from '@/modules/theme/AppTheme.types.ts'; +import { DEFAULT_DEVICE } from '@/modules/device/services/Device.ts'; export const getDefaultSettings = (): MetadataServerSettings => ({ // downloads diff --git a/src/modules/core/contexts/AppContext.tsx b/src/modules/core/contexts/AppContext.tsx index f70eadae..d858cd23 100644 --- a/src/modules/core/contexts/AppContext.tsx +++ b/src/modules/core/contexts/AppContext.tsx @@ -22,7 +22,7 @@ import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx'; import { ThemeMode, ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx'; import { NavBarContextProvider } from '@/modules/navigation-bar/contexts/NavBarContextProvider.tsx'; import { LibraryOptionsContextProvider } from '@/modules/library/contexts/LibraryOptionsProvider.tsx'; -import { ActiveDevice, DEFAULT_DEVICE, setActiveDevice } from '@/util/device.ts'; +import { ActiveDeviceContextProvider } from '@/modules/device/contexts/DeviceContext.tsx'; import { MediaQuery } from '@/lib/ui/MediaQuery.tsx'; import { AppThemes, getTheme } from '@/modules/theme/services/AppThemes.ts'; import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts'; @@ -66,7 +66,6 @@ export const AppContext: React.FC = ({ children }) => { const [appTheme, setAppTheme] = useLocalStorage('appTheme', 'default'); const [themeMode, setThemeMode] = useLocalStorage('themeMode', ThemeMode.SYSTEM); const [pureBlackMode, setPureBlackMode] = useLocalStorage('pureBlackMode', false); - const [activeDevice, setActiveDeviceContext] = useLocalStorage('activeDevice', DEFAULT_DEVICE); const darkThemeContext = useMemo( () => ({ @@ -80,18 +79,11 @@ export const AppContext: React.FC = ({ children }) => { [themeMode, pureBlackMode, appTheme], ); - const activeDeviceContext = useMemo( - () => ({ activeDevice, setActiveDevice: setActiveDeviceContext }), - [activeDevice], - ); - const theme = useMemo( () => createAndSetTheme(themeMode, getTheme(appTheme, customThemes), pureBlackMode, currentDirection), [themeMode, currentDirection, systemThemeMode, pureBlackMode, appTheme, customThemes], ); - setActiveDevice(activeDevice); - return ( @@ -101,9 +93,9 @@ export const AppContext: React.FC = ({ children }) => { - + {children} - + diff --git a/src/modules/device/Device.types.ts b/src/modules/device/Device.types.ts new file mode 100644 index 00000000..fb3ae66b --- /dev/null +++ b/src/modules/device/Device.types.ts @@ -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 MetadataClientSettings = { + devices: string[]; +}; diff --git a/src/modules/device/contexts/DeviceContext.tsx b/src/modules/device/contexts/DeviceContext.tsx new file mode 100644 index 00000000..8e11e40b --- /dev/null +++ b/src/modules/device/contexts/DeviceContext.tsx @@ -0,0 +1,31 @@ +/* + * 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 React, { ReactNode, useMemo } from 'react'; +import { DEFAULT_DEVICE, setActiveDevice } from '@/modules/device/services/Device.ts'; +import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx'; + +export const DeviceContext = React.createContext<{ + activeDevice: string; + setActiveDevice: (device: string) => void; +}>({ + activeDevice: DEFAULT_DEVICE, + setActiveDevice: () => {}, +}); + +export const ActiveDeviceContextProvider = ({ children }: { children?: ReactNode }) => { + const [activeDevice, setActiveDeviceContext] = useLocalStorage('activeDevice', DEFAULT_DEVICE); + const activeDeviceContext = useMemo( + () => ({ activeDevice, setActiveDevice: setActiveDeviceContext }), + [activeDevice], + ); + + setActiveDevice(activeDevice); + + return {children}; +}; diff --git a/src/components/settings/DeviceSetting.tsx b/src/modules/device/screens/DeviceSetting.tsx similarity index 95% rename from src/components/settings/DeviceSetting.tsx rename to src/modules/device/screens/DeviceSetting.tsx index b2db8eb1..9eafc913 100644 --- a/src/components/settings/DeviceSetting.tsx +++ b/src/modules/device/screens/DeviceSetting.tsx @@ -17,11 +17,12 @@ import { MetadataServerSettingKeys, MetadataServerSettings } from '@/typings.ts' import { makeToast } from '@/lib/ui/Toast.ts'; import { MutableListSetting } from '@/modules/core/components/settings/MutableListSetting.tsx'; import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx'; -import { ActiveDevice, DEFAULT_DEVICE } from '@/util/device.ts'; +import { DeviceContext } from '@/modules/device/contexts/DeviceContext.tsx'; import { Select } from '@/modules/core/components/inputs/Select.tsx'; 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 { DEFAULT_DEVICE } from '@/modules/device/services/Device.ts'; export const DeviceSetting = () => { const { t } = useTranslation(); @@ -44,7 +45,7 @@ export const DeviceSetting = () => { request: { error, refetch }, } = useMetadataServerSettings(); - const { activeDevice, setActiveDevice } = useContext(ActiveDevice); + const { activeDevice, setActiveDevice } = useContext(DeviceContext); const updateMetadataSetting = ( setting: Setting, diff --git a/src/util/device.ts b/src/modules/device/services/Device.ts similarity index 69% rename from src/util/device.ts rename to src/modules/device/services/Device.ts index a91d9b5f..1fd8bbd1 100644 --- a/src/util/device.ts +++ b/src/modules/device/services/Device.ts @@ -6,8 +6,6 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import React from 'react'; - export const DEFAULT_DEVICE = 'default'; let activeDevice = DEFAULT_DEVICE; @@ -15,8 +13,3 @@ export const getActiveDevice = (): string => activeDevice; export const setActiveDevice = (device: string) => { activeDevice = device; }; - -export const ActiveDevice = React.createContext<{ activeDevice: string; setActiveDevice: (device: string) => void }>({ - activeDevice: DEFAULT_DEVICE, - setActiveDevice: () => {}, -}); diff --git a/src/typings.ts b/src/typings.ts index 552b891c..89252093 100644 --- a/src/typings.ts +++ b/src/typings.ts @@ -15,6 +15,7 @@ import { MetadataTrackingSettings } from '@/modules/tracker/Tracker.types.ts'; import { CategoryMetadataKeys } from '@/modules/category/Category.types.ts'; import { MetadataUpdateSettings } from '@/modules/app-updates/AppUpdateChecker.types.ts'; import { MetadataThemeSettings } from '@/modules/theme/AppTheme.types.ts'; +import { MetadataClientSettings } from '@/modules/device/Device.types.ts'; export interface IMetadataMigration { appKeyPrefix?: { oldPrefix: string; newPrefix: string }; @@ -62,10 +63,6 @@ export type MetadataDownloadSettings = { downloadAheadLimit: number; }; -export type MetadataClientSettings = { - devices: string[]; -}; - export type MetadataBrowseSettings = { hideLibraryEntries: boolean; };