optimize settings store

src/renderer/features/player/components/center-controls.tsx

@@ -13,17 +13,18 @@ import {
     useRadioPlayer,
 } from '/@/renderer/features/radio/hooks/use-radio-player';
 import {
+    useButtonSize,
     usePlayerRepeat,
     usePlayerShuffle,
     usePlayerSong,
     usePlayerStatus,
-    useSettingsStore,
+    useSkipButtons,
 } from '/@/renderer/store';
 import { Icon } from '/@/shared/components/icon/icon';
 import { PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/shared/types/types';
 
 export const CenterControls = () => {
-    const skip = useSettingsStore((state) => state.general.skipButtons);
+    const skip = useSkipButtons();
 
     const isRadioActive = useIsRadioActive();
 
@@ -85,7 +86,7 @@ const RadioCenterPlayButton = ({ disabled }: { disabled?: boolean }) => {
 
 const RadioStopButton = ({ disabled }: { disabled?: boolean }) => {
     const { t } = useTranslation();
-    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const buttonSize = useButtonSize();
     const { stop } = useRadioControls();
 
     return (
@@ -104,7 +105,7 @@ const RadioStopButton = ({ disabled }: { disabled?: boolean }) => {
 
 const StopButton = ({ disabled }: { disabled?: boolean }) => {
     const { t } = useTranslation();
-    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const buttonSize = useButtonSize();
     const { mediaStop } = usePlayer();
 
     return (
@@ -123,7 +124,7 @@ const StopButton = ({ disabled }: { disabled?: boolean }) => {
 
 const ShuffleButton = ({ disabled }: { disabled?: boolean }) => {
     const { t } = useTranslation();
-    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const buttonSize = useButtonSize();
     const shuffle = usePlayerShuffle();
     const { toggleShuffle } = usePlayer();
 
@@ -156,7 +157,7 @@ const ShuffleButton = ({ disabled }: { disabled?: boolean }) => {
 
 const PreviousButton = ({ disabled }: { disabled?: boolean }) => {
     const { t } = useTranslation();
-    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const buttonSize = useButtonSize();
     const { mediaPrevious } = usePlayer();
 
     return (
@@ -175,7 +176,7 @@ const PreviousButton = ({ disabled }: { disabled?: boolean }) => {
 
 const SkipBackwardButton = ({ disabled }: { disabled?: boolean }) => {
     const { t } = useTranslation();
-    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const buttonSize = useButtonSize();
     const { mediaSkipBackward } = usePlayer();
 
     return (
@@ -211,7 +212,7 @@ const CenterPlayButton = ({ disabled }: { disabled?: boolean }) => {
 
 const SkipForwardButton = ({ disabled }: { disabled?: boolean }) => {
     const { t } = useTranslation();
-    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const buttonSize = useButtonSize();
     const { mediaSkipForward } = usePlayer();
 
     return (
@@ -233,7 +234,7 @@ const SkipForwardButton = ({ disabled }: { disabled?: boolean }) => {
 
 const NextButton = ({ disabled }: { disabled?: boolean }) => {
     const { t } = useTranslation();
-    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const buttonSize = useButtonSize();
     const { mediaNext } = usePlayer();
 
     return (
@@ -252,7 +253,7 @@ const NextButton = ({ disabled }: { disabled?: boolean }) => {
 
 const RepeatButton = ({ disabled }: { disabled?: boolean }) => {
     const { t } = useTranslation();
-    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const buttonSize = useButtonSize();
     const repeat = usePlayerRepeat();
     const { toggleRepeat } = usePlayer();
 
@@ -298,7 +299,7 @@ const RepeatButton = ({ disabled }: { disabled?: boolean }) => {
 
 const ShuffleAllButton = ({ disabled }: { disabled?: boolean }) => {
     const { t } = useTranslation();
-    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const buttonSize = useButtonSize();
 
     return (
         <PlayerButton

src/renderer/features/player/components/full-screen-player-image.tsx

@@ -7,8 +7,7 @@ import styles from './full-screen-player-image.module.css';
 
 import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { AppRoute } from '/@/renderer/router/routes';
-import { usePlayerData, usePlayerSong } from '/@/renderer/store';
-import { useSettingsStore } from '/@/renderer/store/settings.store';
+import { useNativeAspectRatio, usePlayerData, usePlayerSong } from '/@/renderer/store';
 import { Badge } from '/@/shared/components/badge/badge';
 import { Center } from '/@/shared/components/center/center';
 import { Flex } from '/@/shared/components/flex/flex';
@@ -48,7 +47,7 @@ const ImageWithPlaceholder = ({
     className,
     ...props
 }: HTMLMotionProps<'img'> & { placeholder?: string }) => {
-    const nativeAspectRatio = useSettingsStore((store) => store.general.nativeAspectRatio);
+    const nativeAspectRatio = useNativeAspectRatio();
 
     if (!props.src) {
         return (

src/renderer/features/player/components/mobile-fullscreen-player-album-art.tsx

@@ -7,9 +7,9 @@ import styles from './mobile-fullscreen-player.module.css';
 import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import {
     useFullScreenPlayerStore,
+    useImageRes,
     usePlayerData,
     usePlayerSong,
-    useSettingsStore,
 } from '/@/renderer/store';
 import { Center } from '/@/shared/components/center/center';
 import { Icon } from '/@/shared/components/icon/icon';
@@ -78,7 +78,7 @@ export const MobileFullscreenPlayerAlbumArt = () => {
     const mainImageRef = useRef<HTMLImageElement | null>(null);
     const [mainImageDimensions, setMainImageDimensions] = useState({ idealSize: 1000 });
 
-    const albumArtRes = useSettingsStore((store) => store.general.imageRes.fullScreenPlayer);
+    const { fullScreenPlayer: albumArtRes } = useImageRes();
     const { useImageAspectRatio } = useFullScreenPlayerStore();
     const currentSong = usePlayerSong();
     const { nextSong } = usePlayerData();

src/renderer/features/player/components/player-config.tsx

@@ -12,10 +12,12 @@ import {
     usePlayerStatus,
 } from '/@/renderer/store';
 import {
-    useGeneralSettings,
+    useCombinedLyricsAndVisualizer,
     usePlaybackSettings,
     useSettingsStore,
     useSettingsStoreActions,
+    useShowLyricsInSidebar,
+    useShowVisualizerInSidebar,
 } from '/@/renderer/store/settings.store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Popover } from '/@/shared/components/popover/popover';
@@ -49,7 +51,9 @@ export const PlayerConfig = () => {
     const { setCrossfadeDuration, setCrossfadeStyle, setQueueType, setSpeed, setTransitionType } =
         usePlayerActions();
     const preservePitch = useSettingsStore((state) => state.playback.preservePitch);
-    const generalSettings = useGeneralSettings();
+    const showLyricsInSidebar = useShowLyricsInSidebar();
+    const showVisualizerInSidebar = useShowVisualizerInSidebar();
+    const combinedLyricsAndVisualizer = useCombinedLyricsAndVisualizer();
 
     const playbackSettings = usePlaybackSettings();
     const { setSettings } = useSettingsStoreActions();
@@ -325,11 +329,10 @@ export const PlayerConfig = () => {
             {
                 component: (
                     <Switch
-                        defaultChecked={generalSettings.showLyricsInSidebar}
+                        defaultChecked={showLyricsInSidebar}
                         onChange={(e) => {
                             setSettings({
                                 general: {
-                                    ...generalSettings,
                                     showLyricsInSidebar: e.currentTarget.checked,
                                 },
                             });
@@ -342,11 +345,10 @@ export const PlayerConfig = () => {
             {
                 component: (
                     <Switch
-                        defaultChecked={generalSettings.showVisualizerInSidebar}
+                        defaultChecked={showVisualizerInSidebar}
                         onChange={(e) => {
                             setSettings({
                                 general: {
-                                    ...generalSettings,
                                     showVisualizerInSidebar: e.currentTarget.checked,
                                 },
                             });
@@ -359,11 +361,10 @@ export const PlayerConfig = () => {
             {
                 component: (
                     <Switch
-                        defaultChecked={generalSettings.combinedLyricsAndVisualizer}
+                        defaultChecked={combinedLyricsAndVisualizer}
                         onChange={(e) => {
                             setSettings({
                                 general: {
-                                    ...generalSettings,
                                     combinedLyricsAndVisualizer: e.currentTarget.checked,
                                 },
                             });
@@ -395,7 +396,9 @@ export const PlayerConfig = () => {
         setTransitionType,
         setCrossfadeStyle,
         setPreservePitch,
-        generalSettings,
+        showLyricsInSidebar,
+        showVisualizerInSidebar,
+        combinedLyricsAndVisualizer,
     ]);
 
     return (

src/renderer/features/player/components/playerbar-waveform.tsx

@@ -10,8 +10,8 @@ import { useSongUrl } from '/@/renderer/features/player/audio-player/hooks/use-s
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import {
     BarAlign,
-    useGeneralSettings,
     usePlaybackSettings,
+    usePlayerbarSlider,
     usePlayerSong,
     usePlayerTimestamp,
 } from '/@/renderer/store';
@@ -22,7 +22,7 @@ import { Text } from '/@/shared/components/text/text';
 export const PlayerbarWaveform = () => {
     const currentSong = usePlayerSong();
     const { transcode } = usePlaybackSettings();
-    const { playerbarSlider } = useGeneralSettings();
+    const playerbarSlider = usePlayerbarSlider();
     const currentTime = usePlayerTimestamp();
     const containerRef = useRef<HTMLDivElement>(null);
     const { mediaSeekToTimestamp } = usePlayer();

src/renderer/features/player/components/playerbar.tsx

@@ -9,11 +9,11 @@ import { MobilePlayerbar } from '/@/renderer/features/player/components/mobile-p
 import { RightControls } from '/@/renderer/features/player/components/right-controls';
 import { useIsMobile } from '/@/renderer/hooks/use-is-mobile';
 import { useFullScreenPlayerStore, useSetFullScreenPlayerStore } from '/@/renderer/store';
-import { useGeneralSettings } from '/@/renderer/store/settings.store';
+import { usePlayerbarOpenDrawer } from '/@/renderer/store';
 import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
 
 export const Playerbar = () => {
-    const { playerbarOpenDrawer } = useGeneralSettings();
+    const playerbarOpenDrawer = usePlayerbarOpenDrawer();
     const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
     const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
     const isMobile = useIsMobile();

src/renderer/features/player/components/right-controls.tsx

@@ -14,16 +14,17 @@ import {
     useAutoDJSettings,
     useCurrentServer,
     useFullScreenPlayerStore,
-    useGeneralSettings,
     useHotkeySettings,
     usePlayerData,
     usePlayerMuted,
     usePlayerSong,
     usePlayerVolume,
     useSetFullScreenPlayerStore,
-    useSettingsStore,
     useSettingsStoreActions,
     useSidebarRightExpanded,
+    useSideQueueType,
+    useVolumeWheelStep,
+    useVolumeWidth,
 } from '/@/renderer/store';
 import { useFullScreenPlayerStoreActions } from '/@/renderer/store/full-screen-player.store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
@@ -114,7 +115,7 @@ const QueueButton = () => {
     const { t } = useTranslation();
     const isSidebarRightExpanded = useSidebarRightExpanded();
     const { setSideBar } = useAppStoreActions();
-    const { sideQueueType } = useGeneralSettings();
+    const sideQueueType = useSideQueueType();
 
     const { bindings } = useHotkeySettings();
 
@@ -355,8 +356,8 @@ const VolumeButton = () => {
     const { bindings } = useHotkeySettings();
     const volume = usePlayerVolume();
     const muted = usePlayerMuted();
-    const { volumeWheelStep } = useGeneralSettings();
-    const volumeWidth = useSettingsStore((state) => state.general.volumeWidth);
+    const volumeWheelStep = useVolumeWheelStep();
+    const volumeWidth = useVolumeWidth();
     const { mediaToggleMute, setVolume } = usePlayer();
     const isMinWidth = useMediaQuery('(max-width: 480px)');
 

src/renderer/features/player/hooks/use-media-session.ts

@@ -8,6 +8,7 @@ import {
     usePlaybackSettings,
     usePlayerStore,
     useSettingsStore,
+    useSkipButtons,
     useTimestampStoreBase,
 } from '/@/renderer/store';
 import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
@@ -18,7 +19,7 @@ const mediaSession = navigator.mediaSession;
 export const useMediaSession = () => {
     const { mediaSession: mediaSessionEnabled } = usePlaybackSettings();
     const player = usePlayer();
-    const skip = useSettingsStore((state) => state.general.skipButtons);
+    const skip = useSkipButtons();
     const playbackType = useSettingsStore((state) => state.playback.type);
 
     const isMediaSessionEnabled = useMemo(() => {