add initial files

src/renderer/features/player/hooks/useCenterControls.ts

@@ -0,0 +1,180 @@
+import { useCallback } from 'react';
+import { usePlayerStore } from 'renderer/store';
+import { PlaybackType, PlayerStatus } from '../../../../types';
+import { mpvPlayer } from '../utils/mpvPlayer';
+
+export const useCenterControls = (args: { playersRef: any }) => {
+  const { playersRef } = args;
+
+  const settings = usePlayerStore((state) => state.settings);
+  const play = usePlayerStore((state) => state.play);
+  const pause = usePlayerStore((state) => state.pause);
+  const prev = usePlayerStore((state) => state.prev);
+  const next = usePlayerStore((state) => state.next);
+  const queue = usePlayerStore((state) => state.queue.default);
+  const playerStatus = usePlayerStore((state) => state.current.status);
+  const currentPlayer = usePlayerStore((state) => state.current.player);
+  const currentTime = usePlayerStore((state) => state.current.time);
+  const setCurrentTime = usePlayerStore((state) => state.setCurrentTime);
+
+  const player1Ref = playersRef?.current?.player1;
+  const player2Ref = playersRef?.current?.player2;
+  const currentPlayerRef = currentPlayer === 1 ? player1Ref : player2Ref;
+  const nextPlayerRef = currentPlayer === 1 ? player2Ref : player1Ref;
+
+  const resetPlayers = useCallback(() => {
+    player1Ref.getInternalPlayer().currentTime = 0;
+    player2Ref.getInternalPlayer().currentTime = 0;
+    player1Ref.getInternalPlayer().pause();
+    player2Ref.getInternalPlayer().pause();
+  }, [player1Ref, player2Ref]);
+
+  const resetNextPlayer = useCallback(() => {
+    currentPlayerRef.getInternalPlayer().volume = 0.1;
+    nextPlayerRef.getInternalPlayer().currentTime = 0;
+    nextPlayerRef.getInternalPlayer().pause();
+  }, [currentPlayerRef, nextPlayerRef]);
+
+  const stopPlayback = () => {
+    player1Ref.getInternalPlayer().pause();
+    player2Ref.getInternalPlayer().pause();
+    resetPlayers();
+  };
+
+  const handlePlay = useCallback(() => {
+    if (settings.type === PlaybackType.Local) {
+      mpvPlayer.play();
+    } else {
+      currentPlayerRef.getInternalPlayer().play();
+    }
+
+    play();
+  }, [currentPlayerRef, play, settings]);
+
+  const handlePause = useCallback(() => {
+    if (settings.type === PlaybackType.Local) {
+      mpvPlayer.pause();
+    }
+
+    pause();
+  }, [pause, settings]);
+
+  const handleStop = () => {
+    if (settings.type === PlaybackType.Local) {
+      mpvPlayer.stop();
+    } else {
+      stopPlayback();
+    }
+
+    setCurrentTime(0);
+    pause();
+  };
+
+  const handleNextTrack = useCallback(() => {
+    const playerData = next();
+
+    if (settings.type === PlaybackType.Local) {
+      mpvPlayer.setQueue(playerData);
+      mpvPlayer.next();
+    } else {
+      resetPlayers();
+    }
+
+    setCurrentTime(0);
+  }, [next, resetPlayers, setCurrentTime, settings]);
+
+  const handlePrevTrack = useCallback(() => {
+    const playerData = prev();
+
+    if (settings.type === PlaybackType.Local) {
+      mpvPlayer.setQueue(playerData);
+      mpvPlayer.previous();
+    } else {
+      resetPlayers();
+    }
+
+    setCurrentTime(0);
+  }, [prev, resetPlayers, setCurrentTime, settings]);
+
+  const handlePlayPause = useCallback(() => {
+    if (queue) {
+      if (playerStatus === PlayerStatus.Paused) {
+        return handlePlay();
+      }
+
+      return handlePause();
+    }
+
+    return null;
+  }, [handlePause, handlePlay, playerStatus, queue]);
+
+  const handleSkipBackward = () => {
+    const skipBackwardSec = 5;
+
+    if (settings.type === PlaybackType.Local) {
+      const newTime = currentTime - skipBackwardSec;
+      mpvPlayer.seek(-skipBackwardSec);
+      setCurrentTime(newTime < 0 ? 0 : newTime);
+    } else {
+      const newTime = currentPlayerRef.getCurrentTime() - skipBackwardSec;
+      resetNextPlayer();
+      setCurrentTime(newTime);
+      currentPlayerRef.seekTo(newTime);
+    }
+  };
+
+  const handleSkipForward = () => {
+    const skipForwardSec = 5;
+
+    if (settings.type === PlaybackType.Local) {
+      const newTime = currentTime + skipForwardSec;
+      mpvPlayer.seek(skipForwardSec);
+      setCurrentTime(newTime);
+    } else {
+      const checkNewTime = currentPlayerRef.getCurrentTime() + skipForwardSec;
+      const songDuration = currentPlayerRef.player.player.duration;
+
+      const newTime =
+        checkNewTime >= songDuration ? songDuration - 1 : checkNewTime;
+
+      resetNextPlayer();
+      setCurrentTime(newTime);
+      currentPlayerRef.seekTo(newTime);
+    }
+  };
+
+  const handleSeekSlider = useCallback(
+    (e: number | any) => {
+      setCurrentTime(e);
+
+      if (settings.type === PlaybackType.Local) {
+        mpvPlayer.seekTo(e);
+      } else {
+        currentPlayerRef.seekTo(e);
+      }
+    },
+    [currentPlayerRef, setCurrentTime, settings]
+  );
+
+  // const handleVolumeSlider = useCallback(
+  //   (e: number | any) => {
+  //     // dispatch(setVolume(e));
+  //     if (settings.type === PlaybackType.Local) {
+  //       // playerApi.volume(currentTime, e);
+  //     }
+
+  //     setSettings({ volume: (e / 100) ** 2 });
+  //   },
+  //   [currentTime, setSettings, settings]
+  // );
+
+  return {
+    handleNextTrack,
+    handlePlayPause,
+    handlePrevTrack,
+    handleSeekSlider,
+    handleSkipBackward,
+    handleSkipForward,
+    handleStop,
+  };
+};

src/renderer/features/player/hooks/usePlayQueueHandler.ts

@@ -0,0 +1,135 @@
+import { useQueryClient } from 'react-query';
+import { usePlayerStore } from 'renderer/store';
+import {
+  getJellyfinStreamUrl,
+  getServerFolderAuth,
+  getSubsonicStreamUrl,
+} from 'renderer/utils';
+import { Item, Play } from 'types';
+import { mpvPlayer } from '../utils/mpvPlayer';
+
+const getEndpoint = (item: Item) => {
+  switch (item) {
+    case Item.Album:
+      return 'getAlbum';
+    case Item.Artist:
+      return 'getArtistSongs';
+    case Item.Playlist:
+      return 'getPlaylist';
+    default:
+      return 'getAlbum';
+  }
+};
+
+export const usePlayQueueHandler = () => {
+  const queryClient = useQueryClient();
+  const addQueue = usePlayerStore((state) => state.add);
+
+  // const dispatchSongsToQueue = useCallback(
+  //   (entries: Song[], play: Play) => {
+  //     const filteredSongs = filterPlayQueue(config.playback.filters, entries);
+
+  //     if (play === Play.Play) {
+  //       if (filteredSongs.entries.length > 0) {
+  //       } else {
+  //       }
+  //     }
+
+  //     if (play === Play.Next || play === Play.Later) {
+  //       if (filteredSongs.entries.length > 0) {
+  //       }
+  //     }
+
+  //     notifyToast(
+  //       'info',
+  //       getPlayedSongsNotification({
+  //         ...filteredSongs.count,
+  //         type: play === Play.Play ? 'play' : 'add',
+  //       })
+  //     );
+  //   },
+  //   [config.playback.filters, dispatch]
+  // );
+
+  const handlePlayQueueAdd = async (options: {
+    byData?: any[];
+    byItemType?: {
+      endpoint: (params: Record<string, any>) => any;
+      id: string;
+      type: Item;
+    };
+    play: Play;
+  }) => {
+    if (options.byData) {
+      // dispatchSongsToQueue(options.byData, options.play);
+    }
+
+    if (options.byItemType) {
+      const deviceId = localStorage.getItem('device_id');
+      const { serverUrl } = JSON.parse(
+        localStorage.getItem('authentication') || '{}'
+      );
+
+      if (deviceId) {
+        const data = await options.byItemType.endpoint({
+          id: options.byItemType.id,
+        });
+
+        const songs = data.data.songs.map((song) => {
+          const auth = getServerFolderAuth(serverUrl, song.serverFolderId);
+
+          if (auth) {
+            const streamUrl =
+              auth.type === 'jellyfin'
+                ? getJellyfinStreamUrl(auth, song, deviceId)
+                : getSubsonicStreamUrl(auth, song, deviceId);
+
+            return {
+              albumId: song.albumId,
+              artistName: song.artistName,
+              duration: song.duration,
+              id: song.id,
+              streamUrl,
+              title: song.name,
+              year: song.year,
+            };
+          }
+
+          return {
+            albumId: song.albumId,
+            artistName: song.artistName,
+            duration: song.duration,
+            id: song.id,
+            streamUrl: song.streamUrl,
+            title: song.name,
+            year: song.year,
+          };
+        });
+
+        const pData = addQueue(songs);
+        mpvPlayer.setQueue(pData);
+      }
+
+      // const data = await apiController({
+      //   args: { id: options.byItemType.id, musicFolder: options.musicFolder },
+      //   endpoint:
+      //     options.byItemType.endpoint || getEndpoint(options.byItemType.item),
+      //   serverType: config.serverType,
+      // });
+      // if (options.byItemType.item === Item.Album) {
+      //   queryClient.setQueryData(['album', options.byItemType.id], data);
+      // } else if (options.byItemType.item === Item.Artist) {
+      //   queryClient.setQueryData(['artistSongs', options.byItemType.id], data);
+      // } else if (options.byItemType.item === Item.Playlist) {
+      //   queryClient.setQueryData(['playlist', options.byItemType.id], data);
+      // }
+      // if (data?.song) {
+      //   dispatchSongsToQueue(data.song, options.play);
+      // } else {
+      //   dispatchSongsToQueue(data, options.play);
+      // }
+    }
+  };
+
+  return { handlePlayQueueAdd };
+};

src/renderer/features/player/hooks/useRightControls.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { usePlayerStore } from 'renderer/store';
+import { mpvPlayer } from '../utils/mpvPlayer';
+
+export const useRightControls = () => {
+  const setSettings = usePlayerStore((state) => state.setSettings);
+  const volume = usePlayerStore((state) => state.settings.volume);
+  const muted = usePlayerStore((state) => state.settings.muted);
+
+  // Ensure that the mpv player volume is set on startup
+  useEffect(() => {
+    mpvPlayer.volume(volume);
+  }, [volume]);
+
+  // Ensure that the mpv player mute status is set on startup
+  useEffect(() => {
+    if (muted) {
+      mpvPlayer.mute();
+    }
+  }, [muted]);
+
+  const handleVolumeSlider = (e: number) => {
+    mpvPlayer.volume(e);
+  };
+
+  const handleVolumeSliderState = (e: number) => {
+    setSettings({ volume: e });
+  };
+
+  const handleMute = () => {
+    setSettings({ muted: !muted });
+    mpvPlayer.mute();
+  };
+
+  return {
+    handleMute,
+    handleVolumeSlider,
+    handleVolumeSliderState,
+  };
+};