Add checks for player type

src/renderer/features/now-playing/components/play-queue-list-controls.tsx

@@ -13,7 +13,8 @@ import {
 } from 'react-icons/ri';
 import { Song } from '/@/renderer/api/types';
 import { useQueueControls } from '/@/renderer/store';
-import { TableType } from '/@/renderer/types';
+import { PlaybackType, TableType } from '/@/renderer/types';
+import { usePlayerType } from '/@/renderer/store/settings.store';
 
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
 
@@ -26,13 +27,18 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
   const { clearQueue, moveToBottomOfQueue, moveToTopOfQueue, shuffleQueue, removeFromQueue } =
     useQueueControls();
 
+  const playerType = usePlayerType();
+
   const handleMoveToBottom = () => {
     const selectedRows = tableRef?.current?.grid.api.getSelectedRows();
     const uniqueIds = selectedRows?.map((row) => row.uniqueId);
     if (!uniqueIds?.length) return;
 
     const playerData = moveToBottomOfQueue(uniqueIds);
-    mpvPlayer.setQueueNext(playerData);
+
+    if (playerType === PlaybackType.LOCAL) {
+      mpvPlayer.setQueueNext(playerData);
+    }
   };
 
   const handleMoveToTop = () => {
@@ -41,7 +47,10 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
     if (!uniqueIds?.length) return;
 
     const playerData = moveToTopOfQueue(uniqueIds);
-    mpvPlayer.setQueueNext(playerData);
+
+    if (playerType === PlaybackType.LOCAL) {
+      mpvPlayer.setQueueNext(playerData);
+    }
   };
 
   const handleRemoveSelected = () => {
@@ -50,24 +59,34 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
     if (!uniqueIds?.length) return;
 
     const playerData = removeFromQueue(uniqueIds);
-    mpvPlayer.setQueueNext(playerData);
+
+    if (playerType === PlaybackType.LOCAL) {
+      mpvPlayer.setQueueNext(playerData);
+    }
   };
 
   const handleClearQueue = () => {
     const playerData = clearQueue();
-    mpvPlayer.setQueue(playerData);
+
-    mpvPlayer.stop();
+    if (playerType === PlaybackType.LOCAL) {
+      mpvPlayer.setQueue(playerData);
+      mpvPlayer.stop();
+    }
   };
 
   const handleShuffleQueue = () => {
     const playerData = shuffleQueue();
-    mpvPlayer.setQueueNext(playerData);
+
+    if (playerType === PlaybackType.LOCAL) {
+      mpvPlayer.setQueueNext(playerData);
+    }
   };
 
   return (
     <Group
       position="apart"
       px="1rem"
+      py="1rem"
       sx={{ alignItems: 'center' }}
     >
       <Group>

src/renderer/features/now-playing/components/play-queue.tsx

@@ -22,6 +22,7 @@ import {
   useQueueControls,
 } from '/@/renderer/store';
 import {
+  usePlayerType,
   useSettingsStore,
   useSettingsStoreActions,
   useTableSettings,
@@ -31,7 +32,7 @@ import isElectron from 'is-electron';
 import { ErrorBoundary } from 'react-error-boundary';
 import { VirtualTable } from '/@/renderer/components/virtual-table';
 import { ErrorFallback } from '/@/renderer/features/action-required';
-import { TableType } from '/@/renderer/types';
+import { PlaybackType, TableType } from '/@/renderer/types';
 import { QueueSong } from '/@/renderer/api/types';
 
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
@@ -51,6 +52,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
   const { setAppStore } = useAppStoreActions();
   const tableConfig = useTableSettings(type);
   const [gridApi, setGridApi] = useState<AgGridReactType | undefined>();
+  const playerType = usePlayerType();
 
   useEffect(() => {
     if (tableRef.current) {
@@ -73,9 +75,12 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
     };
   }, []);
 
-  const handlePlayByRowClick = (e: CellDoubleClickedEvent) => {
+  const handleDoubleClick = (e: CellDoubleClickedEvent) => {
     const playerData = setCurrentTrack(e.data.uniqueId);
-    mpvPlayer.setQueue(playerData);
+
+    if (playerType === PlaybackType.LOCAL) {
+      mpvPlayer.setQueue(playerData);
+    }
   };
 
   const handleDragStart = () => {
@@ -92,7 +97,10 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
       .filter((e) => e !== undefined);
 
     const playerData = reorderQueue(selectedUniqueIds as string[], e.overNode?.data?.uniqueId);
-    mpvPlayer.setQueueNext(playerData);
+
+    if (playerType === PlaybackType.LOCAL) {
+      mpvPlayer.setQueueNext(playerData);
+    }
 
     if (type === 'sideDrawerQueue') {
       setAppStore({ isReorderingQueue: false });
@@ -223,7 +231,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
             rowData={queue}
             rowHeight={tableConfig.rowHeight || 40}
             rowSelection="multiple"
-            onCellDoubleClicked={handlePlayByRowClick}
+            onCellDoubleClicked={handleDoubleClick}
             onColumnMoved={handleColumnChange}
             onColumnResized={handleColumnChange}
             onDragStarted={handleDragStart}

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

@@ -26,7 +26,7 @@ import {
   useShuffleStatus,
   useCurrentTime,
 } from '/@/renderer/store';
-import { useSettingsStore } from '/@/renderer/store/settings.store';
+import { usePlayerType, useSettingsStore } from '/@/renderer/store/settings.store';
 import { PlayerStatus, PlaybackType, PlayerShuffle, PlayerRepeat } from '/@/renderer/types';
 
 interface CenterControlsProps {
@@ -69,7 +69,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
   const currentSong = useCurrentSong();
   const songDuration = currentSong?.duration;
   const skip = useSettingsStore((state) => state.player.skipButtons);
-  const playerType = useSettingsStore((state) => state.player.type);
+  const playerType = usePlayerType();
   const player1 = playersRef?.current?.player1;
   const player2 = playersRef?.current?.player2;
   const status = useCurrentStatus();

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

@@ -11,7 +11,7 @@ import {
   useSetCurrentTime,
   useShuffleStatus,
 } from '/@/renderer/store';
-import { useSettingsStore } from '/@/renderer/store/settings.store';
+import { usePlayerType, useSettingsStore } from '/@/renderer/store/settings.store';
 
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
 const mpvPlayerListener = isElectron() ? window.electron.mpvPlayerListener : null;
@@ -29,7 +29,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
   const playerStatus = useCurrentStatus();
   const repeatStatus = useRepeatStatus();
   const shuffleStatus = useShuffleStatus();
-  const playerType = useSettingsStore((state) => state.player.type);
+  const playerType = usePlayerType();
   const player1Ref = playersRef?.current?.player1;
   const player2Ref = playersRef?.current?.player2;
   const currentPlayerRef = currentPlayer === 1 ? player1Ref : player2Ref;

src/renderer/features/player/hooks/use-handle-playqueue-add.ts

@@ -6,7 +6,7 @@ import { ndNormalize } from '/@/renderer/api/navidrome.api';
 import { NDSong } from '/@/renderer/api/navidrome.types';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { useAuthStore, usePlayerStore } from '/@/renderer/store';
-import { useSettingsStore } from '/@/renderer/store/settings.store';
+import { usePlayerType } from '/@/renderer/store/settings.store';
 import { PlayQueueAddOptions, LibraryItem, Play, PlaybackType } from '/@/renderer/types';
 import { toast } from '/@/renderer/components/toast';
 import isElectron from 'is-electron';
@@ -15,7 +15,7 @@ const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
 
 export const useHandlePlayQueueAdd = () => {
   const queryClient = useQueryClient();
-  const playerType = useSettingsStore.getState().player.type;
+  const playerType = usePlayerType();
   const deviceId = useAuthStore.getState().deviceId;
   const server = useAuthStore.getState().currentServer;
 

src/renderer/store/settings.store.ts

@@ -233,3 +233,5 @@ export const useTableSettings = (type: TableType) =>
   useSettingsStore((state) => state.tables[type]);
 
 export const useGeneralSettings = () => useSettingsStore((state) => state.general);
+
+export const usePlayerType = () => useSettingsStore((state) => state.player.type);