Handle web player

src/main/features/core/player/index.ts

@@ -32,7 +32,7 @@ mpv.on('status', (status: any) => {
 });
 
 // Automatically updates the play button when the player is playing
-mpv.on('started', () => {
+mpv.on('resumed', () => {
   getMainWindow()?.webContents.send('renderer-player-play');
 });
 

src/main/preload.ts

@@ -87,6 +87,9 @@ contextBridge.exposeInMainWorld('electron', {
     SETTINGS_SET(data: { property: string; value: any }) {
       ipcRenderer.send('settings-set', data);
     },
+    removeAllListeners(value: string) {
+      ipcRenderer.removeAllListeners(value);
+    },
     windowClose() {
       ipcRenderer.send('window-close');
     },

src/renderer/components/audio-player/utils/list-handlers.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import { Dispatch } from 'react';
-import { CrossfadeStyle } from '../../../../types';
+import { CrossfadeStyle } from '@/renderer/types';
 
 export const gaplessHandler = (args: {
   currentTime: number;

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

@@ -5,13 +5,16 @@ import { IoIosPause } from 'react-icons/io';
 import {
   RiPlayFill,
   RiRepeat2Fill,
+  RiRewindFill,
   RiShuffleFill,
   RiSkipBackFill,
   RiSkipForwardFill,
+  RiSpeedFill,
 } from 'react-icons/ri';
 import styled from 'styled-components';
 import { Text } from '@/renderer/components';
 import { usePlayerStore } from '@/renderer/store';
+import { useSettingsStore } from '@/renderer/store/settings.store';
 import { Font } from '@/renderer/styles';
 import { PlaybackType, PlayerStatus } from '@/renderer/types';
 import { useCenterControls } from '../hooks/use-center-controls';
@@ -56,10 +59,11 @@ const SliderWrapper = styled.div`
 export const CenterControls = ({ playersRef }: CenterControlsProps) => {
   const [isSeeking, setIsSeeking] = useState(false);
   const playerData = usePlayerStore((state) => state.getPlayerData());
+  const skip = useSettingsStore((state) => state.player.skipButtons);
+  const playerType = useSettingsStore((state) => state.player.type);
   const player1 = playersRef?.current?.player1?.player;
   const player2 = playersRef?.current?.player2?.player;
   const { status, player } = usePlayerStore((state) => state.current);
-  const settings = usePlayerStore((state) => state.settings);
   const setCurrentTime = usePlayerStore((state) => state.setCurrentTime);
 
   const {
@@ -67,6 +71,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
     handlePlayPause,
     handlePrevTrack,
     handleSeekSlider,
+    handleSkipBackward,
+    handleSkipForward,
   } = useCenterControls({ playersRef });
 
   const currentTime = usePlayerStore((state) => state.current.time);
@@ -78,7 +84,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
     let interval: any;
 
     if (status === PlayerStatus.PLAYING && !isSeeking) {
-      if (!isElectron() || settings.type === PlaybackType.WEB) {
+      if (!isElectron() || playerType === PlaybackType.WEB) {
         interval = setInterval(() => {
           setCurrentTime(currentPlayerRef.getCurrentTime());
         }, 1000);
@@ -88,7 +94,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
     }
 
     return () => clearInterval(interval);
-  }, [currentPlayerRef, isSeeking, setCurrentTime, settings.type, status]);
+  }, [currentPlayerRef, isSeeking, setCurrentTime, playerType, status]);
 
   return (
     <>
@@ -106,6 +112,17 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
             variant="secondary"
             onClick={handlePrevTrack}
           />
+          {skip?.enabled && (
+            <PlayerButton
+              icon={<RiRewindFill size={15} />}
+              tooltip={{
+                label: `Skip backwards ${skip?.skipBackwardSeconds} seconds`,
+                openDelay: 500,
+              }}
+              variant="secondary"
+              onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
+            />
+          )}
           <PlayerButton
             icon={
               status === PlayerStatus.PAUSED ? (
@@ -121,6 +138,17 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
             variant="main"
             onClick={handlePlayPause}
           />
+          {skip?.enabled && (
+            <PlayerButton
+              icon={<RiSpeedFill size={15} />}
+              tooltip={{
+                label: `Skip forwards ${skip?.skipBackwardSeconds} seconds`,
+                openDelay: 500,
+              }}
+              variant="secondary"
+              onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
+            />
+          )}
           <PlayerButton
             icon={<RiSkipForwardFill size={15} />}
             tooltip={{ label: 'Next track', openDelay: 500 }}

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

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
-import isElectron from 'is-electron';
 import styled from 'styled-components';
+import { useSettingsStore } from '@/renderer/store/settings.store';
 import { PlaybackType } from '@/renderer/types';
 import { AudioPlayer } from '../../../components';
 import { usePlayerStore } from '../../../store';
@@ -45,8 +45,8 @@ const CenterGridItem = styled.div`
 
 export const Playerbar = () => {
   const playersRef = useRef<any>();
-  const settings = usePlayerStore((state) => state.settings);
+  const settings = useSettingsStore((state) => state.player);
-  const volume = usePlayerStore((state) => state.settings.volume);
+  const volume = usePlayerStore((state) => state.volume);
   const player1 = usePlayerStore((state) => state.player1());
   const player2 = usePlayerStore((state) => state.player2());
   const status = usePlayerStore((state) => state.current.status);
@@ -66,7 +66,7 @@ export const Playerbar = () => {
           <RightControls />
         </RightGridItem>
       </PlayerbarControlsGrid>
-      {(!isElectron() || settings.type === PlaybackType.WEB) && (
+      {settings.type === PlaybackType.WEB && (
         <AudioPlayer
           ref={playersRef}
           autoNext={autoNext}
@@ -74,6 +74,7 @@ export const Playerbar = () => {
           crossfadeStyle={settings.crossfadeStyle}
           currentPlayer={player}
           muted={settings.muted}
+          playbackStyle={settings.style}
           player1={player1}
           player2={player2}
           status={status}

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

@@ -36,8 +36,8 @@ const MetadataStack = styled.div`
 `;
 
 export const RightControls = () => {
-  const volume = usePlayerStore((state) => state.settings.volume);
+  const volume = usePlayerStore((state) => state.volume);
-  const muted = usePlayerStore((state) => state.settings.muted);
+  const muted = usePlayerStore((state) => state.muted);
   const setSidebar = useAppStore((state) => state.setSidebar);
   const isQueueExpanded = useAppStore((state) => state.sidebar.rightExpanded);
   const { handleVolumeSlider, handleVolumeSliderState, handleMute } =

src/renderer/features/player/hooks/use-center-controls.ts

@@ -1,12 +1,16 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
+import isElectron from 'is-electron';
 import { PlaybackType, PlayerStatus } from '@/renderer/types';
 import { usePlayerStore } from '../../../store';
-import { mpvPlayer } from '../utils/mpvPlayer';
+import { useSettingsStore } from '../../../store/settings.store';
+import { mpvPlayer } from '../utils/mpv-player';
+
+const ipc = isElectron() ? window.electron.ipcRenderer : null;
 
 export const useCenterControls = (args: { playersRef: any }) => {
   const { playersRef } = args;
 
-  const settings = usePlayerStore((state) => state.settings);
+  const settings = useSettingsStore((state) => state.player);
   const play = usePlayerStore((state) => state.play);
   const pause = usePlayerStore((state) => state.pause);
   const prev = usePlayerStore((state) => state.prev);
@@ -41,26 +45,28 @@ export const useCenterControls = (args: { playersRef: any }) => {
     resetPlayers();
   };
 
+  const isMpvPlayer = isElectron() && settings.type === PlaybackType.LOCAL;
+
   const handlePlay = useCallback(() => {
-    if (settings.type === PlaybackType.LOCAL) {
+    if (isMpvPlayer) {
       mpvPlayer.play();
     } else {
       currentPlayerRef.getInternalPlayer().play();
     }
 
     play();
-  }, [currentPlayerRef, play, settings]);
+  }, [currentPlayerRef, isMpvPlayer, play]);
 
   const handlePause = useCallback(() => {
-    if (settings.type === PlaybackType.LOCAL) {
+    if (isMpvPlayer) {
       mpvPlayer.pause();
     }
 
     pause();
-  }, [pause, settings]);
+  }, [isMpvPlayer, pause]);
 
   const handleStop = () => {
-    if (settings.type === PlaybackType.LOCAL) {
+    if (isMpvPlayer) {
       mpvPlayer.stop();
     } else {
       stopPlayback();
@@ -73,7 +79,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
   const handleNextTrack = useCallback(() => {
     const playerData = next();
 
-    if (settings.type === PlaybackType.LOCAL) {
+    if (isMpvPlayer) {
       mpvPlayer.setQueue(playerData);
       mpvPlayer.next();
     } else {
@@ -81,12 +87,12 @@ export const useCenterControls = (args: { playersRef: any }) => {
     }
 
     setCurrentTime(0);
-  }, [next, resetPlayers, setCurrentTime, settings]);
+  }, [isMpvPlayer, next, resetPlayers, setCurrentTime]);
 
   const handlePrevTrack = useCallback(() => {
     const playerData = prev();
 
-    if (settings.type === PlaybackType.LOCAL) {
+    if (isMpvPlayer) {
       mpvPlayer.setQueue(playerData);
       mpvPlayer.previous();
     } else {
@@ -94,7 +100,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
     }
 
     setCurrentTime(0);
-  }, [prev, resetPlayers, setCurrentTime, settings]);
+  }, [isMpvPlayer, prev, resetPlayers, setCurrentTime]);
 
   const handlePlayPause = useCallback(() => {
     if (queue) {
@@ -108,30 +114,26 @@ export const useCenterControls = (args: { playersRef: any }) => {
     return null;
   }, [handlePause, handlePlay, playerStatus, queue]);
 
-  const handleSkipBackward = () => {
+  const handleSkipBackward = (seconds: number) => {
-    const skipBackwardSec = 5;
+    if (isMpvPlayer) {
-
+      const newTime = currentTime - seconds;
-    if (settings.type === PlaybackType.LOCAL) {
+      mpvPlayer.seek(-seconds);
-      const newTime = currentTime - skipBackwardSec;
-      mpvPlayer.seek(-skipBackwardSec);
       setCurrentTime(newTime < 0 ? 0 : newTime);
     } else {
-      const newTime = currentPlayerRef.getCurrentTime() - skipBackwardSec;
+      const newTime = currentPlayerRef?.getCurrentTime() - seconds;
       resetNextPlayer();
       setCurrentTime(newTime);
       currentPlayerRef.seekTo(newTime);
     }
   };
 
-  const handleSkipForward = () => {
+  const handleSkipForward = (seconds: number) => {
-    const skipForwardSec = 5;
+    if (isMpvPlayer) {
-
+      const newTime = currentTime + seconds;
-    if (settings.type === PlaybackType.LOCAL) {
+      mpvPlayer.seek(seconds);
-      const newTime = currentTime + skipForwardSec;
-      mpvPlayer.seek(skipForwardSec);
       setCurrentTime(newTime);
     } else {
-      const checkNewTime = currentPlayerRef.getCurrentTime() + skipForwardSec;
+      const checkNewTime = currentPlayerRef?.getCurrentTime() + seconds;
       const songDuration = currentPlayerRef.player.player.duration;
 
       const newTime =
@@ -147,26 +149,67 @@ export const useCenterControls = (args: { playersRef: any }) => {
     (e: number | any) => {
       setCurrentTime(e);
 
-      if (settings.type === PlaybackType.LOCAL) {
+      if (isMpvPlayer) {
         mpvPlayer.seekTo(e);
       } else {
         currentPlayerRef.seekTo(e);
       }
     },
-    [currentPlayerRef, setCurrentTime, settings]
+    [currentPlayerRef, isMpvPlayer, setCurrentTime]
   );
 
-  // const handleVolumeSlider = useCallback(
+  useEffect(() => {
-  //   (e: number | any) => {
+    ipc?.RENDERER_PLAYER_PLAY_PAUSE(() => {
-  //     // dispatch(setVolume(e));
+      const { status } = usePlayerStore.getState().current;
-  //     if (settings.type === PlaybackType.Local) {
+      if (status === PlayerStatus.PAUSED) {
-  //       // playerApi.volume(currentTime, e);
+        play();
-  //     }
 
-  //     setSettings({ volume: (e / 100) ** 2 });
+        if (isMpvPlayer) {
-  //   },
+          mpvPlayer.play();
-  //   [currentTime, setSettings, settings]
+        }
-  // );
+      } else {
+        pause();
+        if (isMpvPlayer) {
+          mpvPlayer.pause();
+        }
+      }
+    });
+
+    ipc?.RENDERER_PLAYER_NEXT(() => {
+      const playerData = next();
+
+      if (isMpvPlayer) {
+        mpvPlayer.setQueue(playerData);
+        mpvPlayer.next();
+      }
+    });
+
+    ipc?.RENDERER_PLAYER_PREVIOUS(() => {
+      const playerData = prev();
+      if (isMpvPlayer) {
+        mpvPlayer.setQueue(playerData);
+        mpvPlayer.previous();
+      }
+    });
+
+    ipc?.RENDERER_PLAYER_PLAY(() => play());
+
+    ipc?.RENDERER_PLAYER_PAUSE(() => pause());
+
+    ipc?.RENDERER_PLAYER_STOP(() => pause());
+
+    ipc?.RENDERER_PLAYER_CURRENT_TIME((_event, time) => setCurrentTime(time));
+
+    return () => {
+      ipc?.removeAllListeners('renderer-player-play-pause');
+      ipc?.removeAllListeners('renderer-player-next');
+      ipc?.removeAllListeners('renderer-player-previous');
+      ipc?.removeAllListeners('renderer-player-play');
+      ipc?.removeAllListeners('renderer-player-pause');
+      ipc?.removeAllListeners('renderer-player-stop');
+      ipc?.removeAllListeners('renderer-player-current-time');
+    };
+  }, [isMpvPlayer, next, pause, play, prev, setCurrentTime]);
 
   return {
     handleNextTrack,

src/renderer/features/player/hooks/use-playqueue-handler.ts

@@ -3,14 +3,22 @@ import { api } from '@/renderer/api';
 import { queryKeys } from '@/renderer/api/query-keys';
 import { useServerCredential } from '@/renderer/features/shared';
 import { useAuthStore, usePlayerStore } from '@/renderer/store';
-import { LibraryItem, Play, PlayQueueAddOptions } from '@/renderer/types';
+import { useSettingsStore } from '@/renderer/store/settings.store';
+import {
+  LibraryItem,
+  Play,
+  PlaybackType,
+  PlayQueueAddOptions,
+} from '@/renderer/types';
 import { mpvPlayer } from '../utils/mpv-player';
 
 export const usePlayQueueHandler = () => {
   const queryClient = useQueryClient();
   const serverId = useAuthStore((state) => state.currentServer?.id) || '';
   const { serverToken, isImageTokenRequired } = useServerCredential();
+  const play = usePlayerStore((state) => state.play);
   const addToQueue = usePlayerStore((state) => state.addToQueue);
+  const playerType = useSettingsStore((state) => state.player.type);
 
   const handlePlayQueueAdd = async (options: PlayQueueAddOptions) => {
     if (options.byData) {
@@ -55,10 +63,18 @@ export const usePlayQueueHandler = () => {
       const playerData = addToQueue(songs, options.play);
 
       if (options.play === Play.NEXT || options.play === Play.LAST) {
-        mpvPlayer.setQueueNext(playerData);
+        if (playerType === PlaybackType.LOCAL) {
-      } else {
+          mpvPlayer.setQueueNext(playerData);
-        mpvPlayer.setQueue(playerData);
+        }
-        mpvPlayer.play();
+      }
+
+      if (options.play === Play.NOW) {
+        if (playerType === PlaybackType.LOCAL) {
+          mpvPlayer.setQueue(playerData);
+          mpvPlayer.play();
+        }
+
+        play();
       }
     }
   };

src/renderer/features/player/hooks/use-right-controls.ts

@@ -1,11 +1,12 @@
 import { useEffect } from 'react';
 import { usePlayerStore } from '../../../store';
-import { mpvPlayer } from '../utils/mpvPlayer';
+import { mpvPlayer } from '../utils/mpv-player';
 
 export const useRightControls = () => {
-  const setSettings = usePlayerStore((state) => state.setSettings);
+  const setVolume = usePlayerStore((state) => state.setVolume);
-  const volume = usePlayerStore((state) => state.settings.volume);
+  const volume = usePlayerStore((state) => state.volume);
-  const muted = usePlayerStore((state) => state.settings.muted);
+  const muted = usePlayerStore((state) => state.muted);
+  const setMuted = usePlayerStore((state) => state.setMuted);
 
   // Ensure that the mpv player volume is set on startup
   useEffect(() => {
@@ -19,14 +20,15 @@ export const useRightControls = () => {
 
   const handleVolumeSlider = (e: number) => {
     mpvPlayer.volume(e);
+    setVolume(e);
   };
 
   const handleVolumeSliderState = (e: number) => {
-    setSettings({ volume: e });
+    setVolume(e);
   };
 
   const handleMute = () => {
-    setSettings({ muted: !muted });
+    setMuted(!muted);
     mpvPlayer.mute();
   };
 

src/renderer/features/player/utils/mpv-player.ts

@@ -34,20 +34,7 @@ const volume = (value: number) => ipc?.PLAYER_VOLUME(value);
 
 const mute = () => ipc?.PLAYER_MUTE();
 
-const {
+const { autoNext } = usePlayerStore.getState();
-  setCurrentTime,
-  play: setPlay,
-  pause: setPause,
-  autoNext,
-} = usePlayerStore.getState();
-
-ipc?.RENDERER_PLAYER_PLAY(() => setPlay());
-
-ipc?.RENDERER_PLAYER_PAUSE(() => setPause());
-
-ipc?.RENDERER_PLAYER_STOP(() => setPause());
-
-ipc?.RENDERER_PLAYER_CURRENT_TIME((_event, time) => setCurrentTime(time));
 
 ipc?.RENDERER_PLAYER_AUTO_NEXT(() => {
   const playerData = autoNext();

src/renderer/features/settings/components/general-tab.tsx

@@ -0,0 +1,37 @@
+import { Select, Stack } from '@mantine/core';
+import { SettingsOptions } from '@/renderer/features/settings/components/settings-option';
+
+export const GeneralTab = () => {
+  const options = [
+    {
+      control: <Select disabled data={[]} />,
+      description: 'Primary application language ',
+      title: 'Language',
+    },
+    {
+      control: <Select disabled data={[]} />,
+      description: 'Theme for the application',
+      title: 'Theme',
+    },
+    {
+      control: <Select disabled data={[]} />,
+      description: 'Font for the application',
+      title: 'Font',
+    },
+    {
+      control: (
+        <Select disabled data={['Windows', 'macOS']} defaultValue="Windows" />
+      ),
+      description: 'Font for the application',
+      title: 'Titlebar style',
+    },
+  ];
+
+  return (
+    <Stack mt="1rem" spacing="xl">
+      {options.map((option) => (
+        <SettingsOptions key={`general-${option.title}`} {...option} />
+      ))}
+    </Stack>
+  );
+};

src/renderer/features/settings/components/playback-tab.tsx

@@ -0,0 +1,284 @@
+import { useEffect, useState } from 'react';
+import { Divider, Group, SelectItem, Stack } from '@mantine/core';
+import isElectron from 'is-electron';
+import {
+  NumberInput,
+  SegmentedControl,
+  Select,
+  Slider,
+  Switch,
+  toast,
+  Tooltip,
+} from '@/renderer/components';
+import { mpvPlayer } from '@/renderer/features/player/utils/mpv-player';
+import { SettingsOptions } from '@/renderer/features/settings/components/settings-option';
+import { usePlayerStore } from '@/renderer/store';
+import { useSettingsStore } from '@/renderer/store/settings.store';
+import {
+  Play,
+  PlaybackStyle,
+  PlaybackType,
+  PlayerStatus,
+} from '@/renderer/types';
+
+const getAudioDevice = async () => {
+  const devices = await navigator.mediaDevices.enumerateDevices();
+  return (devices || []).filter(
+    (dev: MediaDeviceInfo) => dev.kind === 'audiooutput'
+  );
+};
+
+const ipc = isElectron() ? window.electron.ipcRenderer : null;
+
+const set = (property: string, value: any) => {
+  ipc?.SETTINGS_SET({ property, value });
+};
+
+export const PlaybackTab = () => {
+  const settings = useSettingsStore((state) => state.player);
+  const update = useSettingsStore((state) => state.setSettings);
+  const status = usePlayerStore((state) => state.current.status);
+  const [audioDevices, setAudioDevices] = useState<SelectItem[]>([]);
+
+  useEffect(() => {
+    const getAudioDevices = () => {
+      getAudioDevice()
+        .then((dev) =>
+          setAudioDevices(
+            dev.map((d) => ({ label: d.label, value: d.deviceId }))
+          )
+        )
+        .catch(() => toast.error({ message: 'Error fetching audio devices' }));
+    };
+
+    getAudioDevices();
+  }, []);
+
+  const playerOptions = [
+    {
+      control: (
+        <SegmentedControl
+          data={[
+            {
+              disabled: !isElectron(),
+              label: 'MPV',
+              value: PlaybackType.LOCAL,
+            },
+            { label: 'Web', value: PlaybackType.WEB },
+          ]}
+          defaultValue={settings.type}
+          disabled={status === PlayerStatus.PLAYING}
+          onChange={(e) => {
+            update({ player: { ...settings, type: e as PlaybackType } });
+            if (isElectron() && e === PlaybackType.LOCAL) {
+              const queueData = usePlayerStore.getState().getPlayerData();
+              mpvPlayer.setQueue(queueData);
+            }
+          }}
+        />
+      ),
+      description: 'The audio player to use for playback (desktop only)',
+      isHidden: !isElectron(),
+      note:
+        status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
+      title: 'Audio player',
+    },
+    {
+      control: (
+        <Select
+          clearable
+          data={audioDevices}
+          defaultValue={settings.audioDeviceId}
+          disabled={settings.type !== PlaybackType.WEB}
+          onChange={(e) =>
+            update({ player: { ...settings, audioDeviceId: e } })
+          }
+        />
+      ),
+      description: 'The audio device to use for playback (web player only)',
+      isHidden: !isElectron(),
+      title: 'Audio device',
+    },
+    {
+      control: (
+        <SegmentedControl
+          data={[
+            { label: 'Normal', value: PlaybackStyle.GAPLESS },
+            { label: 'Crossfade', value: PlaybackStyle.CROSSFADE },
+          ]}
+          defaultValue={settings.style}
+          disabled={
+            settings.type !== PlaybackType.WEB ||
+            status === PlayerStatus.PLAYING
+          }
+          onChange={(e) =>
+            update({ player: { ...settings, style: e as PlaybackStyle } })
+          }
+        />
+      ),
+      description: 'Adjust the playback style (web player only)',
+      isHidden: false,
+      note:
+        status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
+      title: 'Playback style',
+    },
+    {
+      control: (
+        <Slider
+          defaultValue={settings.crossfadeDuration}
+          disabled={
+            settings.type !== PlaybackType.WEB ||
+            settings.style !== PlaybackStyle.CROSSFADE ||
+            status === PlayerStatus.PLAYING
+          }
+          max={15}
+          min={0}
+          w={100}
+          onChangeEnd={(e) =>
+            update({ player: { ...settings, crossfadeDuration: e } })
+          }
+        />
+      ),
+      description: 'Adjust the crossfade duration (web player only)',
+      isHidden: false,
+      note:
+        status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
+      title: 'Crossfade Duration',
+    },
+    {
+      control: (
+        <Switch
+          defaultChecked={settings.globalMediaHotkeys}
+          disabled={!isElectron()}
+          onChange={(e) => {
+            update({
+              player: {
+                ...settings,
+                globalMediaHotkeys: e.currentTarget.checked,
+              },
+            });
+            set('global_media_hotkeys', e.currentTarget.checked);
+
+            if (e.currentTarget.checked) {
+              ipc?.PLAYER_MEDIA_KEYS_ENABLE();
+            } else {
+              ipc?.PLAYER_MEDIA_KEYS_DISABLE();
+            }
+          }}
+        />
+      ),
+      description:
+        'Enable or disable the usage of your system media hotkeys to control the audio player (desktop only)',
+      isHidden: false,
+      title: 'Global media hotkeys',
+    },
+  ];
+
+  const otherOptions = [
+    {
+      control: (
+        <SegmentedControl
+          data={[
+            { label: 'Now', value: Play.NOW },
+            { label: 'Next', value: Play.NEXT },
+            { label: 'Last', value: Play.LAST },
+          ]}
+          defaultValue={settings.playButtonBehavior}
+          onChange={(e) =>
+            update({
+              player: {
+                ...settings,
+                playButtonBehavior: e as Play,
+              },
+            })
+          }
+        />
+      ),
+      description:
+        'The default behavior of the play button when adding songs to the queue',
+      isHidden: false,
+      title: 'Play button behavior',
+    },
+    {
+      control: (
+        <Switch
+          defaultChecked={settings.skipButtons?.enabled}
+          onChange={(e) =>
+            update({
+              player: {
+                ...settings,
+                skipButtons: {
+                  ...settings.skipButtons,
+                  enabled: e.currentTarget.checked,
+                },
+              },
+            })
+          }
+        />
+      ),
+      description: 'Show or hide the skip buttons on the playerbar',
+      isHidden: false,
+      title: 'Show skip buttons',
+    },
+    {
+      control: (
+        <Group>
+          <Tooltip label="Backward">
+            <NumberInput
+              defaultValue={settings.skipButtons.skipBackwardSeconds}
+              width={75}
+              onBlur={(e) =>
+                update({
+                  player: {
+                    ...settings,
+                    skipButtons: {
+                      ...settings.skipButtons,
+                      skipBackwardSeconds: Number(e.currentTarget.value),
+                    },
+                  },
+                })
+              }
+            />
+          </Tooltip>
+          <Tooltip label="Forward">
+            <NumberInput
+              defaultValue={settings.skipButtons.skipForwardSeconds}
+              width={75}
+              onBlur={(e) =>
+                update({
+                  player: {
+                    ...settings,
+                    skipButtons: {
+                      ...settings.skipButtons,
+                      skipForwardSeconds: Number(e.currentTarget.value),
+                    },
+                  },
+                })
+              }
+            />
+          </Tooltip>
+        </Group>
+      ),
+      description:
+        'The number (in seconds) to skip forward or backward when using the skip buttons',
+      isHidden: false,
+      title: 'Skip duration',
+    },
+  ];
+
+  return (
+    <Stack my={10} spacing="xl">
+      {playerOptions
+        .filter((o) => !o.isHidden)
+        .map((option) => (
+          <SettingsOptions key={`playback-${option.title}`} {...option} />
+        ))}
+      <Divider />
+      {otherOptions
+        .filter((o) => !o.isHidden)
+        .map((option) => (
+          <SettingsOptions key={`playerbar-${option.title}`} {...option} />
+        ))}
+    </Stack>
+  );
+};

src/renderer/features/settings/components/settings-option.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Group, Stack } from '@mantine/core';
+import { RiInformationLine } from 'react-icons/ri';
+import { Text, Tooltip } from '@/renderer/components';
+
+interface SettingsOptionProps {
+  control: React.ReactNode;
+  description?: React.ReactNode | string;
+  note?: string;
+  title: React.ReactNode | string;
+}
+
+export const SettingsOptions = ({
+  title,
+  description,
+  control,
+  note,
+}: SettingsOptionProps) => {
+  return (
+    <>
+      <Group noWrap position="apart">
+        <Stack spacing="xs" sx={{ maxWidth: '50%' }}>
+          <Group>
+            <Text $noSelect size="sm">
+              {title}
+            </Text>
+            {note && (
+              <Tooltip label={note} openDelay={0}>
+                <Group>
+                  <RiInformationLine size={15} />
+                </Group>
+              </Tooltip>
+            )}
+          </Group>
+          {React.isValidElement(description) ? (
+            description
+          ) : (
+            <Text $noSelect $secondary size="sm">
+              {description}
+            </Text>
+          )}
+        </Stack>
+        <Group position="right">{control}</Group>
+      </Group>
+    </>
+  );
+};
+
+SettingsOptions.defaultProps = {
+  description: undefined,
+  note: undefined,
+};

src/renderer/features/settings/components/settings.tsx

@@ -0,0 +1,38 @@
+import { Box } from '@mantine/core';
+import { Tabs } from '@/renderer/components';
+import { GeneralTab } from '@/renderer/features/settings/components/general-tab';
+import { PlaybackTab } from '@/renderer/features/settings/components/playback-tab';
+import { useSettingsStore } from '@/renderer/store/settings.store';
+
+export const Settings = () => {
+  const currentTab = useSettingsStore((state) => state.tab);
+  const update = useSettingsStore((state) => state.setSettings);
+  return (
+    <Box px="1rem" sx={{ height: '800px', maxHeight: '50vh' }}>
+      <Tabs
+        orientation="horizontal"
+        styles={{
+          tab: {
+            fontSize: '1.1rem',
+            padding: '0.5rem 1rem',
+          },
+        }}
+        value={currentTab}
+        variant="default"
+        onChange={(e) => console.log(e)}
+        onTabChange={(e) => e && update({ tab: e })}
+      >
+        <Tabs.List>
+          <Tabs.Tab value="general">General</Tabs.Tab>
+          <Tabs.Tab value="playback">Playback</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="general">
+          <GeneralTab />
+        </Tabs.Panel>
+        <Tabs.Panel value="playback">
+          <PlaybackTab />
+        </Tabs.Panel>
+      </Tabs>
+    </Box>
+  );
+};

src/renderer/features/settings/index.ts

@@ -1,5 +1,6 @@
 import isElectron from 'is-electron';
 
+export * from './components/settings';
 export * from './hooks/use-default-settings';
 
 const ipc = isElectron() ? window.electron.ipcRenderer : null;
@@ -14,7 +15,7 @@ const restart = () => {
   ipc?.APP_RESTART();
 };
 
-export const settings = {
+export const localSettings = {
   get,
   restart,
   set,

src/renderer/store/player.store.ts

@@ -6,15 +6,7 @@ import { nanoid } from 'nanoid/non-secure';
 import create from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { Song } from '@/renderer/api/types';
-import {
+import { Play, PlayerStatus, UniqueId } from '@/renderer/types';
-  Play,
-  CrossfadeStyle,
-  PlaybackStyle,
-  PlaybackType,
-  PlayerRepeat,
-  PlayerStatus,
-  UniqueId,
-} from '@/renderer/types';
 
 type QueueSong = Song & UniqueId;
 
@@ -26,22 +18,14 @@ export interface PlayerState {
     status: PlayerStatus;
     time: number;
   };
+  muted: boolean;
   queue: {
     default: QueueSong[];
     previousNode: QueueSong;
     shuffled: QueueSong[];
     sorted: QueueSong[];
   };
-  settings: {
+  volume: number;
-    crossfadeDuration: number;
-    crossfadeStyle: CrossfadeStyle;
-    muted: boolean;
-    repeat: PlayerRepeat;
-    shuffle: boolean;
-    style: PlaybackStyle;
-    type: PlaybackType;
-    volume: number;
-  };
 }
 
 export interface PlayerData {
@@ -75,206 +59,203 @@ export interface PlayerSlice extends PlayerState {
   prev: () => PlayerData;
   setCurrentIndex: (index: number) => PlayerData;
   setCurrentTime: (time: number) => void;
-  setSettings: (settings: Partial<PlayerState['settings']>) => void;
+  setMuted: (muted: boolean) => void;
+  setVolume: (volume: number) => void;
 }
 
 export const usePlayerStore = create<PlayerSlice>()(
   persist(
-    devtools((set, get) => ({
+    devtools(
-      addToQueue: (songs, type) => {
+      (set, get) => ({
-        const queueSongs = map(songs, (song) => ({
+        addToQueue: (songs, type) => {
-          ...song,
+          const queueSongs = map(songs, (song) => ({
-          uniqueId: nanoid(),
+            ...song,
-        }));
+            uniqueId: nanoid(),
+          }));
 
-        if (type === Play.NOW) {
+          if (type === Play.NOW) {
+            set(
+              produce((state) => {
+                state.queue.default = queueSongs;
+                state.current.time = 0;
+                state.current.player = 1;
+                state.current.index = 0;
+                state.current.song = queueSongs[0];
+              })
+            );
+          } else if (type === Play.LAST) {
+            set(
+              produce((state) => {
+                state.queue.default = [...get().queue.default, ...queueSongs];
+              })
+            );
+          } else if (type === Play.NEXT) {
+            const queue = get().queue.default;
+            const currentIndex = get().current.index;
+
+            set(
+              produce((state) => {
+                state.queue.default = [
+                  ...queue.slice(0, currentIndex + 1),
+                  ...queueSongs,
+                  ...queue.slice(currentIndex + 1),
+                ];
+              })
+            );
+          }
+
+          return get().getPlayerData();
+        },
+        autoNext: () => {
           set(
             produce((state) => {
-              state.queue.default = queueSongs;
               state.current.time = 0;
-              state.current.player = 1;
+              state.current.index += 1;
-              state.current.index = 0;
+              state.current.player = state.current.player === 1 ? 2 : 1;
-              state.current.song = queueSongs[0];
+              state.current.song = state.queue.default[state.current.index];
+              state.queue.previousNode = get().current.song;
             })
           );
-        } else if (type === Play.LAST) {
+
-          set(
+          return get().getPlayerData();
-            produce((state) => {
+        },
-              state.queue.default = [...get().queue.default, ...queueSongs];
+        current: {
-            })
+          index: 0,
-          );
+          player: 1,
-        } else if (type === Play.NEXT) {
+          song: {} as QueueSong,
+          status: PlayerStatus.PAUSED,
+          time: 0,
+        },
+        getPlayerData: () => {
           const queue = get().queue.default;
-          const currentIndex = get().current.index;
+          const currentPlayer = get().current.player;
 
-          set(
+          const player1 =
-            produce((state) => {
+            currentPlayer === 1
-              state.queue.default = [
+              ? queue[get().current.index]
-                ...queue.slice(0, currentIndex + 1),
+              : queue[get().current.index + 1];
-                ...queueSongs,
-                ...queue.slice(currentIndex + 1),
-              ];
-            })
-          );
-        }
 
-        return get().getPlayerData();
+          const player2 =
-      },
+            currentPlayer === 1
-      autoNext: () => {
+              ? queue[get().current.index + 1]
-        set(
+              : queue[get().current.index];
-          produce((state) => {
-            state.current.time = 0;
-            state.current.index += 1;
-            state.current.player = state.current.player === 1 ? 2 : 1;
-            state.current.song = state.queue.default[state.current.index];
-            state.queue.previousNode = get().current.song;
-          })
-        );
 
-        return get().getPlayerData();
+          return {
-      },
+            current: {
-      current: {
+              index: get().current.index,
-        index: 0,
+              player: get().current.player,
-        player: 1,
+              song: get().current.song,
-        song: {} as QueueSong,
+              status: get().current.status,
-        status: PlayerStatus.PAUSED,
+            },
-        time: 0,
+            player1,
-      },
+            player2,
-      getPlayerData: () => {
+            queue: {
-        const queue = get().queue.default;
+              current: queue[get().current.index],
-        const currentPlayer = get().current.player;
+              next: queue[get().current.index + 1],
-
+              previous: queue[get().current.index - 1],
-        const player1 =
+            },
-          currentPlayer === 1
+          };
-            ? queue[get().current.index]
+        },
-            : queue[get().current.index + 1];
+        getQueueData: () => {
-
+          const queue = get().queue.default;
-        const player2 =
+          return {
-          currentPlayer === 1
-            ? queue[get().current.index + 1]
-            : queue[get().current.index];
-
-        return {
-          current: {
-            index: get().current.index,
-            player: get().current.player,
-            song: get().current.song,
-            status: get().current.status,
-          },
-          player1,
-          player2,
-          queue: {
             current: queue[get().current.index],
             next: queue[get().current.index + 1],
             previous: queue[get().current.index - 1],
-          },
+          };
-        };
+        },
-      },
-      getQueueData: () => {
-        const queue = get().queue.default;
-        return {
-          current: queue[get().current.index],
-          next: queue[get().current.index + 1],
-          previous: queue[get().current.index - 1],
-        };
-      },
-      next: () => {
-        set(
-          produce((state) => {
-            state.current.time = 0;
-            state.current.index += 1;
-            state.current.player = 1;
-            state.current.song = state.queue.default[state.current.index];
-            state.queue.previousNode = get().current.song;
-          })
-        );
-
-        return get().getPlayerData();
-      },
-      pause: () => {
-        set(
-          produce((state) => {
-            state.current.status = PlayerStatus.PAUSED;
-          })
-        );
-      },
-      play: () => {
-        set(
-          produce((state) => {
-            state.current.status = PlayerStatus.PLAYING;
-          })
-        );
-      },
-      player1: () => {
-        return get().getPlayerData().player1;
-      },
-      player2: () => {
-        return get().getPlayerData().player2;
-      },
-      prev: () => {
-        set(
-          produce((state) => {
-            state.current.time = 0;
-            state.current.index =
-              state.current.index - 1 < 0 ? 0 : state.current.index - 1;
-            state.current.player = 1;
-            state.current.song = state.queue.default[state.current.index];
-            state.queue.previousNode = get().current.song;
-          })
-        );
-
-        return get().getPlayerData();
-      },
-      queue: {
-        default: [],
-        previousNode: {} as QueueSong,
-        shuffled: [],
-        sorted: [],
-      },
-      setCurrentIndex: (index) => {
-        set(
-          produce((state) => {
-            state.current.time = 0;
-            state.current.index = index;
-            state.current.player = 1;
-            state.current.song = state.queue.default[index];
-            state.queue.previousNode = get().current.song;
-          })
-        );
-
-        return get().getPlayerData();
-      },
-      setCurrentTime: (time) => {
-        set(
-          produce((state) => {
-            state.current.time = time;
-          })
-        );
-      },
-      setSettings: (settings) => {
-        set(
-          produce((state) => {
-            state.settings = { ...get().settings, ...settings };
-          })
-        );
-
-        // try {
-        //   setLocalStorageSettings('player', get().settings);
-        // } catch (err) {
-        //   console.log('none');
-        // }
-      },
-      settings: {
-        crossfadeDuration: 5,
-        crossfadeStyle: CrossfadeStyle.EQUALPOWER,
         muted: false,
-        repeat: PlayerRepeat.NONE,
+        next: () => {
-        shuffle: false,
+          set(
-        style: PlaybackStyle.GAPLESS,
+            produce((state) => {
-        type: PlaybackType.LOCAL,
+              state.current.time = 0;
+              state.current.index += 1;
+              state.current.player = 1;
+              state.current.song = state.queue.default[state.current.index];
+              state.queue.previousNode = get().current.song;
+            })
+          );
+
+          return get().getPlayerData();
+        },
+        pause: () => {
+          set(
+            produce((state) => {
+              state.current.status = PlayerStatus.PAUSED;
+            })
+          );
+        },
+        play: () => {
+          set(
+            produce((state) => {
+              state.current.status = PlayerStatus.PLAYING;
+            })
+          );
+        },
+        player1: () => {
+          return get().getPlayerData().player1;
+        },
+        player2: () => {
+          return get().getPlayerData().player2;
+        },
+        prev: () => {
+          set(
+            produce((state) => {
+              state.current.time = 0;
+              state.current.index =
+                state.current.index - 1 < 0 ? 0 : state.current.index - 1;
+              state.current.player = 1;
+              state.current.song = state.queue.default[state.current.index];
+              state.queue.previousNode = get().current.song;
+            })
+          );
+
+          return get().getPlayerData();
+        },
+        queue: {
+          default: [],
+          previousNode: {} as QueueSong,
+          shuffled: [],
+          sorted: [],
+        },
+        setCurrentIndex: (index) => {
+          set(
+            produce((state) => {
+              state.current.time = 0;
+              state.current.index = index;
+              state.current.player = 1;
+              state.current.song = state.queue.default[index];
+              state.queue.previousNode = get().current.song;
+            })
+          );
+
+          return get().getPlayerData();
+        },
+        setCurrentTime: (time) => {
+          set(
+            produce((state) => {
+              state.current.time = time;
+            })
+          );
+        },
+        setMuted: (muted: boolean) => {
+          set(
+            produce((state) => {
+              state.muted = muted;
+            })
+          );
+        },
+        setVolume: (volume: number) => {
+          set(
+            produce((state) => {
+              state.volume = volume;
+            })
+          );
+        },
         volume: 50,
-      },
+      }),
-    })),
+      { name: 'store_player' }
-    { name: 'player' }
+    ),
+    { name: 'store_player' }
   )
 );

src/renderer/store/settings.store.ts

@@ -0,0 +1,86 @@
+/* eslint-disable prefer-destructuring */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import merge from 'lodash/merge';
+import create from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import {
+  CrossfadeStyle,
+  Play,
+  PlaybackStyle,
+  PlaybackType,
+  PlayerRepeat,
+} from '@/renderer/types';
+
+export interface SettingsState {
+  player: {
+    audioDeviceId?: string | null;
+    crossfadeDuration: number;
+    crossfadeStyle: CrossfadeStyle;
+    globalMediaHotkeys: boolean;
+    muted: boolean;
+    playButtonBehavior: Play;
+    repeat: PlayerRepeat;
+    scrobble: {
+      enabled: boolean;
+      scrobbleAtPercentage: number;
+    };
+    shuffle: boolean;
+    skipButtons: {
+      enabled: boolean;
+      skipBackwardSeconds: number;
+      skipForwardSeconds: number;
+    };
+    style: PlaybackStyle;
+    type: PlaybackType;
+    volume: number;
+  };
+  tab: 'general' | 'playback' | 'view' | string;
+}
+
+export interface SettingsSlice extends SettingsState {
+  setSettings: (data: Partial<SettingsState>) => void;
+}
+
+export const useSettingsStore = create<SettingsSlice>()(
+  persist(
+    devtools(
+      immer((set, get) => ({
+        player: {
+          audioDeviceId: undefined,
+          crossfadeDuration: 5,
+          crossfadeStyle: CrossfadeStyle.EQUALPOWER,
+          globalMediaHotkeys: true,
+          muted: false,
+          playButtonBehavior: Play.NOW,
+          repeat: PlayerRepeat.NONE,
+          scrobble: {
+            enabled: false,
+            scrobbleAtPercentage: 75,
+          },
+          shuffle: false,
+          skipButtons: {
+            enabled: true,
+            skipBackwardSeconds: 10,
+            skipForwardSeconds: 30,
+          },
+          style: PlaybackStyle.GAPLESS,
+          type: PlaybackType.LOCAL,
+          volume: 50,
+        },
+        setSettings: (data) => {
+          set({ ...get(), ...data });
+        },
+        tab: 'general',
+      })),
+      { name: 'store_settings' }
+    ),
+    {
+      merge: (persistedState, currentState) => {
+        return merge(persistedState, currentState);
+      },
+      name: 'store_settings',
+      version: 1,
+    }
+  )
+);