pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add reset to default for settings

Browse source
This commit is contained in:
jeffvli 2023-03-31 05:56:32 -07:00
parent 293d8ec584
commit 0d4d5b5de0
2 changed files with 212 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/renderer/features/settings/components/settings-header.tsx
View file

@ -1,13 +1,45 @@
import { Flex, Group } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals';
import { RiSettings2Fill } from 'react-icons/ri'; import { RiSettings2Fill } from 'react-icons/ri';
import { PageHeader } from '/@/renderer/components'; import { Button, ConfirmModal, PageHeader } from '/@/renderer/components';
import { LibraryHeaderBar } from '/@/renderer/features/shared'; import { LibraryHeaderBar } from '/@/renderer/features/shared';
import { useSettingsStoreActions } from '../../../store/settings.store';
export const SettingsHeader = () => { export const SettingsHeader = () => {
const { reset } = useSettingsStoreActions();
const handleResetToDefault = () => {
reset();
closeAllModals();
};
const openResetConfirmModal = () => {
openModal({
children: <ConfirmModal onConfirm={handleResetToDefault}>Are you sure?</ConfirmModal>,
title: 'Reset settings to default',
});
};
return ( return (
<PageHeader> <PageHeader>
<LibraryHeaderBar> <LibraryHeaderBar>
<RiSettings2Fill size="2rem" /> <Flex
<LibraryHeaderBar.Title>Settings</LibraryHeaderBar.Title> align="center"
justify="space-between"
w="100%"
>
<Group noWrap>
<RiSettings2Fill size="2rem" />
<LibraryHeaderBar.Title>Settings</LibraryHeaderBar.Title>
</Group>
<Button
compact
variant="default"
onClick={openResetConfirmModal}
>
Reset to default
</Button>
</Flex>
</LibraryHeaderBar> </LibraryHeaderBar>
</PageHeader> </PageHeader>
); );

335
src/renderer/store/settings.store.ts
View file

@ -1,5 +1,6 @@
/* eslint-disable prefer-destructuring */ /* eslint-disable prefer-destructuring */
/* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable @typescript-eslint/no-unused-vars */
import isElectron from 'is-electron';
import merge from 'lodash/merge'; import merge from 'lodash/merge';
import create from 'zustand'; import create from 'zustand';
import { devtools, persist } from 'zustand/middleware'; import { devtools, persist } from 'zustand/middleware';
@ -80,177 +81,195 @@ export interface SettingsState {
export interface SettingsSlice extends SettingsState { export interface SettingsSlice extends SettingsState {
actions: { actions: {
reset: () => void;
setSettings: (data: Partial<SettingsState>) => void; setSettings: (data: Partial<SettingsState>) => void;
}; };
} }
const initialState: SettingsState = {
general: {
followSystemTheme: false,
fontContent: 'Poppins',
playButtonBehavior: Play.NOW,
showQueueDrawerButton: false,
sideQueueType: 'sideDrawerQueue',
skipButtons: {
enabled: false,
skipBackwardSeconds: 5,
skipForwardSeconds: 10,
},
theme: AppTheme.DEFAULT_DARK,
themeDark: AppTheme.DEFAULT_DARK,
themeLight: AppTheme.DEFAULT_LIGHT,
volumeWheelStep: 5,
},
playback: {
audioDeviceId: undefined,
crossfadeDuration: 5,
crossfadeStyle: CrossfadeStyle.EQUALPOWER,
globalMediaHotkeys: false,
muted: false,
scrobble: {
enabled: true,
scrobbleAtDuration: 240,
scrobbleAtPercentage: 75,
},
style: PlaybackStyle.GAPLESS,
type: PlaybackType.LOCAL,
},
tab: 'general',
tables: {
fullScreen: {
autoFit: true,
columns: [
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
{
column: TableColumn.USER_FAVORITE,
width: 100,
},
],
followCurrentSong: true,
rowHeight: 60,
},
nowPlaying: {
autoFit: true,
columns: [
{
column: TableColumn.ROW_INDEX,
width: 50,
},
{
column: TableColumn.TITLE,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
{
column: TableColumn.ALBUM,
width: 100,
},
{
column: TableColumn.ALBUM_ARTIST,
width: 100,
},
{
column: TableColumn.GENRE,
width: 100,
},
{
column: TableColumn.YEAR,
width: 100,
},
],
followCurrentSong: true,
rowHeight: 30,
},
sideDrawerQueue: {
autoFit: true,
columns: [
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
],
followCurrentSong: true,
rowHeight: 60,
},
sideQueue: {
autoFit: true,
columns: [
{
column: TableColumn.ROW_INDEX,
width: 50,
},
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
],
followCurrentSong: true,
rowHeight: 60,
},
songs: {
autoFit: true,
columns: [
{
column: TableColumn.ROW_INDEX,
width: 50,
},
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
{
column: TableColumn.ALBUM,
width: 300,
},
{
column: TableColumn.ARTIST,
width: 100,
},
{
column: TableColumn.YEAR,
width: 100,
},
],
rowHeight: 60,
},
},
window: {
disableAutoUpdate: true,
exitToTray: false,
minimizeToTray: false,
windowBarStyle: Platform.WEB,
},
};
export const useSettingsStore = create<SettingsSlice>()( export const useSettingsStore = create<SettingsSlice>()(
persist( persist(
devtools( devtools(
immer((set, get) => ({ immer((set, get) => ({
actions: { actions: {
reset: () => {
if (!isElectron()) {
set({
...initialState,
playback: {
...initialState.playback,
type: PlaybackType.WEB,
},
});
} else {
set(initialState);
}
},
setSettings: (data) => { setSettings: (data) => {
set({ ...get(), ...data }); set({ ...get(), ...data });
}, },
}, },
general: { ...initialState,
followSystemTheme: false,
fontContent: 'Poppins',
playButtonBehavior: Play.NOW,
showQueueDrawerButton: false,
sideQueueType: 'sideDrawerQueue',
skipButtons: {
enabled: false,
skipBackwardSeconds: 5,
skipForwardSeconds: 10,
},
theme: AppTheme.DEFAULT_DARK,
themeDark: AppTheme.DEFAULT_DARK,
themeLight: AppTheme.DEFAULT_LIGHT,
volumeWheelStep: 5,
},
playback: {
audioDeviceId: undefined,
crossfadeDuration: 5,
crossfadeStyle: CrossfadeStyle.EQUALPOWER,
globalMediaHotkeys: false,
muted: false,
scrobble: {
enabled: true,
scrobbleAtDuration: 240,
scrobbleAtPercentage: 75,
},
style: PlaybackStyle.GAPLESS,
type: PlaybackType.LOCAL,
},
tab: 'general',
tables: {
fullScreen: {
autoFit: true,
columns: [
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
{
column: TableColumn.USER_FAVORITE,
width: 100,
},
],
followCurrentSong: true,
rowHeight: 60,
},
nowPlaying: {
autoFit: true,
columns: [
{
column: TableColumn.ROW_INDEX,
width: 50,
},
{
column: TableColumn.TITLE,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
{
column: TableColumn.ALBUM,
width: 100,
},
{
column: TableColumn.ALBUM_ARTIST,
width: 100,
},
{
column: TableColumn.GENRE,
width: 100,
},
{
column: TableColumn.YEAR,
width: 100,
},
],
followCurrentSong: true,
rowHeight: 30,
},
sideDrawerQueue: {
autoFit: true,
columns: [
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
],
followCurrentSong: true,
rowHeight: 60,
},
sideQueue: {
autoFit: true,
columns: [
{
column: TableColumn.ROW_INDEX,
width: 50,
},
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
],
followCurrentSong: true,
rowHeight: 60,
},
songs: {
autoFit: true,
columns: [
{
column: TableColumn.ROW_INDEX,
width: 50,
},
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
{
column: TableColumn.ALBUM,
width: 300,
},
{
column: TableColumn.ARTIST,
width: 100,
},
{
column: TableColumn.YEAR,
width: 100,
},
],
rowHeight: 60,
},
},
window: {
disableAutoUpdate: true,
exitToTray: false,
minimizeToTray: false,
windowBarStyle: Platform.WEB,
},
})), })),
{ name: 'store_settings' }, { name: 'store_settings' },
), ),