diff --git a/packages/renderer/src/components/virtual-table/table-config-dropdown.tsx b/packages/renderer/src/components/virtual-table/table-config-dropdown.tsx index 57b60483f..d3119b330 100644 --- a/packages/renderer/src/components/virtual-table/table-config-dropdown.tsx +++ b/packages/renderer/src/components/virtual-table/table-config-dropdown.tsx @@ -3,7 +3,7 @@ import { Stack } from '@mantine/core'; import { Slider } from '/@/components/slider'; import { Switch } from '/@/components/switch'; import { Text } from '/@/components/text'; -import { useSettingsStore } from '/@/store/settings.store'; +import { useSettingsStore, useSettingsStoreActions } from '/@/store/settings.store'; import type { TableType } from '/@/types'; import { TableColumn } from '/@/types'; import { MultiSelect } from '/@/components/select'; @@ -36,7 +36,7 @@ interface TableConfigDropdownProps { } export const TableConfigDropdown = ({ type }: TableConfigDropdownProps) => { - const setSettings = useSettingsStore((state) => state.setSettings); + const { setSettings } = useSettingsStoreActions(); const tableConfig = useSettingsStore((state) => state.tables); const handleAddOrRemoveColumns = (values: TableColumn[]) => { diff --git a/packages/renderer/src/features/now-playing/components/play-queue.tsx b/packages/renderer/src/features/now-playing/components/play-queue.tsx index f4b9fbad7..d040fbf61 100644 --- a/packages/renderer/src/features/now-playing/components/play-queue.tsx +++ b/packages/renderer/src/features/now-playing/components/play-queue.tsx @@ -15,7 +15,11 @@ import { usePreviousSong, useQueueControls, } from '/@/store'; -import { useSettingsStore } from '/@/store/settings.store'; +import { + useSettingsStore, + useSettingsStoreActions, + useTableSettings, +} from '/@/store/settings.store'; import type { QueueSong, TableType } from '/@/types'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import { ErrorBoundary } from 'react-error-boundary'; @@ -34,9 +38,9 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: any) => { const { reorderQueue, setCurrentTrack } = useQueueControls(); const currentSong = useCurrentSong(); const previousSong = usePreviousSong(); - const setSettings = useSettingsStore((state) => state.setSettings); + const { setSettings } = useSettingsStoreActions(); const { setAppStore } = useAppStoreActions(); - const tableConfig = useSettingsStore((state) => state.tables[type]); + const tableConfig = useTableSettings(type); useImperativeHandle(ref, () => ({ get grid() { diff --git a/packages/renderer/src/features/settings/components/general-tab.tsx b/packages/renderer/src/features/settings/components/general-tab.tsx index 921a158e9..5e2e431d5 100644 --- a/packages/renderer/src/features/settings/components/general-tab.tsx +++ b/packages/renderer/src/features/settings/components/general-tab.tsx @@ -3,7 +3,7 @@ import isElectron from 'is-electron'; import { Switch, Select } from '/@/components'; import { SettingsOptions } from '/@/features/settings/components/settings-option'; import { THEME_DATA } from '/@/hooks'; -import { useSettingsStore } from '/@/store/settings.store'; +import { useGeneralSettings, useSettingsStoreActions } from '/@/store/settings.store'; import type { AppTheme } from '/@/themes/types'; const FONT_OPTIONS = [ @@ -29,8 +29,8 @@ const FONT_OPTIONS = [ ]; export const GeneralTab = () => { - const settings = useSettingsStore((state) => state.general); - const update = useSettingsStore((state) => state.setSettings); + const settings = useGeneralSettings(); + const { setSettings } = useSettingsStoreActions(); const options = [ { @@ -63,7 +63,7 @@ export const GeneralTab = () => { defaultValue={settings.fontContent} onChange={(e) => { if (!e) return; - update({ + setSettings({ general: { ...settings, fontContent: e, @@ -83,7 +83,7 @@ export const GeneralTab = () => { defaultValue={settings.fontHeader} onChange={(e) => { if (!e) return; - update({ + setSettings({ general: { ...settings, fontHeader: e, @@ -104,7 +104,7 @@ export const GeneralTab = () => { { - update({ + setSettings({ general: { ...settings, followSystemTheme: e.currentTarget.checked, @@ -123,7 +123,7 @@ export const GeneralTab = () => { data={THEME_DATA} defaultValue={settings.theme} onChange={(e) => { - update({ + setSettings({ general: { ...settings, theme: e as AppTheme, @@ -142,7 +142,7 @@ export const GeneralTab = () => { data={THEME_DATA} defaultValue={settings.themeDark} onChange={(e) => { - update({ + setSettings({ general: { ...settings, themeDark: e as AppTheme, @@ -161,7 +161,7 @@ export const GeneralTab = () => { data={THEME_DATA} defaultValue={settings.themeLight} onChange={(e) => { - update({ + setSettings({ general: { ...settings, themeLight: e as AppTheme, diff --git a/packages/renderer/src/features/settings/components/playback-tab.tsx b/packages/renderer/src/features/settings/components/playback-tab.tsx index 2aa977f48..6740e9e0a 100644 --- a/packages/renderer/src/features/settings/components/playback-tab.tsx +++ b/packages/renderer/src/features/settings/components/playback-tab.tsx @@ -17,7 +17,7 @@ import { import { mpvPlayer } from '#preload'; import { SettingsOptions } from '/@/features/settings/components/settings-option'; import { useCurrentStatus, usePlayerStore } from '/@/store'; -import { useSettingsStore } from '/@/store/settings.store'; +import { useSettingsStore, useSettingsStoreActions } from '/@/store/settings.store'; import { Play, PlaybackStyle, PlaybackType, PlayerStatus, CrossfadeStyle } from '/@/types'; import { localSettings } from '#preload'; @@ -28,7 +28,7 @@ const getAudioDevice = async () => { export const PlaybackTab = () => { const settings = useSettingsStore((state) => state.player); - const update = useSettingsStore((state) => state.setSettings); + const { setSettings } = useSettingsStoreActions(); const status = useCurrentStatus(); const [audioDevices, setAudioDevices] = useState([]); const [mpvPath, setMpvPath] = useState(''); @@ -81,7 +81,7 @@ export const PlaybackTab = () => { defaultValue={settings.type} disabled={status === PlayerStatus.PLAYING} onChange={(e) => { - update({ player: { ...settings, type: e as PlaybackType } }); + setSettings({ player: { ...settings, type: e as PlaybackType } }); if (isElectron() && e === PlaybackType.LOCAL) { const queueData = usePlayerStore.getState().actions.getPlayerData(); mpvPlayer.setQueue(queueData); @@ -152,7 +152,7 @@ export const PlaybackTab = () => { data={audioDevices} defaultValue={settings.audioDeviceId} disabled={settings.type !== PlaybackType.WEB} - onChange={(e) => update({ player: { ...settings, audioDeviceId: e } })} + onChange={(e) => setSettings({ player: { ...settings, audioDeviceId: e } })} /> ), description: 'The audio device to use for playback (web player only)', @@ -168,7 +168,7 @@ export const PlaybackTab = () => { ]} defaultValue={settings.style} disabled={settings.type !== PlaybackType.WEB || status === PlayerStatus.PLAYING} - onChange={(e) => update({ player: { ...settings, style: e as PlaybackStyle } })} + onChange={(e) => setSettings({ player: { ...settings, style: e as PlaybackStyle } })} /> ), description: 'Adjust the playback style (web player only)', @@ -188,7 +188,7 @@ export const PlaybackTab = () => { max={15} min={0} w={100} - onChangeEnd={(e) => update({ player: { ...settings, crossfadeDuration: e } })} + onChangeEnd={(e) => setSettings({ player: { ...settings, crossfadeDuration: e } })} /> ), description: 'Adjust the crossfade duration (web player only)', @@ -222,7 +222,7 @@ export const PlaybackTab = () => { width={200} onChange={(e) => { if (!e) return; - update({ + setSettings({ player: { ...settings, crossfadeStyle: e as CrossfadeStyle }, }); }} @@ -240,7 +240,7 @@ export const PlaybackTab = () => { defaultChecked={settings.globalMediaHotkeys} disabled={!isElectron()} onChange={(e) => { - update({ + setSettings({ player: { ...settings, globalMediaHotkeys: e.currentTarget.checked, @@ -274,7 +274,7 @@ export const PlaybackTab = () => { ]} defaultValue={settings.playButtonBehavior} onChange={(e) => - update({ + setSettings({ player: { ...settings, playButtonBehavior: e as Play, @@ -293,7 +293,7 @@ export const PlaybackTab = () => { aria-label="Toggle skip buttons" defaultChecked={settings.skipButtons?.enabled} onChange={(e) => - update({ + setSettings({ player: { ...settings, skipButtons: { @@ -318,7 +318,7 @@ export const PlaybackTab = () => { min={0} width={75} onBlur={(e) => - update({ + setSettings({ player: { ...settings, skipButtons: { @@ -338,7 +338,7 @@ export const PlaybackTab = () => { min={0} width={75} onBlur={(e) => - update({ + setSettings({ player: { ...settings, skipButtons: { diff --git a/packages/renderer/src/features/settings/components/settings.tsx b/packages/renderer/src/features/settings/components/settings.tsx index 4650fde79..87cc7640d 100644 --- a/packages/renderer/src/features/settings/components/settings.tsx +++ b/packages/renderer/src/features/settings/components/settings.tsx @@ -5,11 +5,11 @@ import { motion } from 'framer-motion'; import { Tabs } from '/@/components'; import { GeneralTab } from '/@/features/settings/components/general-tab'; import { PlaybackTab } from '/@/features/settings/components/playback-tab'; -import { useSettingsStore } from '/@/store/settings.store'; +import { useSettingsStore, useSettingsStoreActions } from '/@/store/settings.store'; export const Settings = () => { const currentTab = useSettingsStore((state) => state.tab); - const update = useSettingsStore((state) => state.setSettings); + const { setSettings } = useSettingsStoreActions(); const tabVariants: Variants = { in: { @@ -42,7 +42,7 @@ export const Settings = () => { }} value={currentTab} variant="pills" - onTabChange={(e) => e && update({ tab: e })} + onTabChange={(e) => e && setSettings({ tab: e })} > General diff --git a/packages/renderer/src/layouts/default-layout.tsx b/packages/renderer/src/layouts/default-layout.tsx index fcab1f3a4..810dadf35 100644 --- a/packages/renderer/src/layouts/default-layout.tsx +++ b/packages/renderer/src/layouts/default-layout.tsx @@ -18,7 +18,7 @@ import { useAppStoreActions } from '/@/store/app.store'; import { DrawerPlayQueue, SidebarPlayQueue } from '/@/features/now-playing'; if (!isElectron()) { - useSettingsStore.getState().setSettings({ + useSettingsStore.getState().actions.setSettings({ player: { ...useSettingsStore.getState().player, type: PlaybackType.WEB, diff --git a/packages/renderer/src/store/settings.store.ts b/packages/renderer/src/store/settings.store.ts index d1e52c903..4b36daf1f 100644 --- a/packages/renderer/src/store/settings.store.ts +++ b/packages/renderer/src/store/settings.store.ts @@ -5,6 +5,7 @@ import create from 'zustand'; import { devtools, persist } from 'zustand/middleware'; import { immer } from 'zustand/middleware/immer'; import { AppTheme } from '/@/themes/types'; +import type { TableType } from '/@/types'; import { CrossfadeStyle, Play, PlaybackStyle, PlaybackType, TableColumn } from '/@/types'; export type PersistedTableColumn = { @@ -56,13 +57,20 @@ export interface SettingsState { } export interface SettingsSlice extends SettingsState { - setSettings: (data: Partial) => void; + actions: { + setSettings: (data: Partial) => void; + }; } export const useSettingsStore = create()( persist( devtools( immer((set, get) => ({ + actions: { + setSettings: (data) => { + set({ ...get(), ...data }); + }, + }, general: { followSystemTheme: false, fontContent: 'Circular STD', @@ -90,9 +98,7 @@ export const useSettingsStore = create()( style: PlaybackStyle.GAPLESS, type: PlaybackType.LOCAL, }, - setSettings: (data) => { - set({ ...get(), ...data }); - }, + tab: 'general', tables: { nowPlaying: { @@ -177,3 +183,12 @@ export const useSettingsStore = create()( }, ), ); + +export const useSettingsStoreActions = () => useSettingsStore((state) => state.actions); + +export const usePlayerSettings = () => useSettingsStore((state) => state.player); + +export const useTableSettings = (type: TableType) => + useSettingsStore((state) => state.tables[type]); + +export const useGeneralSettings = () => useSettingsStore((state) => state.general);