vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor settings store

Browse Source
This commit is contained in:
jeffvli
2022-12-10 15:03:42 -08:00
parent bcc32deda1
commit 06d018883b
7 changed files with 53 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/renderer/src/components/virtual-table/table-config-dropdown.tsx
+2 -2
View File
@@ -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[]) => {
packages/renderer/src/features/now-playing/components/play-queue.tsx
+7 -3
View File
@@ -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() {
packages/renderer/src/features/settings/components/general-tab.tsx
+9 -9
View File
@@ -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 = () => {
<Switch
defaultChecked={settings.followSystemTheme}
onChange={(e) => {
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,
packages/renderer/src/features/settings/components/playback-tab.tsx
+12 -12
View File
@@ -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<SelectItem[]>([]);
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: {
packages/renderer/src/features/settings/components/settings.tsx
+3 -3
View File
@@ -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 })}
>
<Tabs.List>
<Tabs.Tab value="general">General</Tabs.Tab>
packages/renderer/src/layouts/default-layout.tsx
+1 -1
View File
@@ -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,
packages/renderer/src/store/settings.store.ts
+19 -4
View File
@@ -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<SettingsState>) => void;
actions: {
setSettings: (data: Partial<SettingsState>) => void;
};
}
export const useSettingsStore = create<SettingsSlice>()(
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<SettingsSlice>()(
style: PlaybackStyle.GAPLESS,
type: PlaybackType.LOCAL,
},
setSettings: (data) => {
set({ ...get(), ...data });
},
tab: 'general',
tables: {
nowPlaying: {
@@ -177,3 +183,12 @@ export const useSettingsStore = create<SettingsSlice>()(
},
),
);
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);