pass ref to prevent duplicate requests

jeffvli · Sep 29, 2023 · c4d41fe · c4d41fe
1 parent 6c1891d
commit c4d41fe
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/src/renderer/features/player/components/center-controls.tsx b/src/renderer/features/player/components/center-controls.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { MutableRefObject, useEffect, useState } from 'react';
 import { useHotkeys } from '@mantine/hooks';
 import { useQueryClient } from '@tanstack/react-query';
 import formatDuration from 'format-duration';
@@ -41,6 +41,7 @@ import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue
 
 interface CenterControlsProps {
     playersRef: any;
+    seekRef: MutableRefObject<((position: number) => void) | undefined>;
 }
 
 const ButtonsContainer = styled.div`
@@ -91,7 +92,7 @@ const ControlsContainer = styled.div`
     }
 `;
 
-export const CenterControls = ({ playersRef }: CenterControlsProps) => {
+export const CenterControls = ({ playersRef, seekRef }: CenterControlsProps) => {
     const queryClient = useQueryClient();
     const [isSeeking, setIsSeeking] = useState(false);
     const currentSong = useCurrentSong();
@@ -143,6 +144,10 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
         return () => clearInterval(interval);
     }, [currentPlayerRef, isSeeking, setCurrentTime, playerType, status]);
 
+    useEffect(() => {
+        seekRef.current = handleSeekSlider;
+    }, [handleSeekSlider, seekRef]);
+
     const [seekValue, setSeekValue] = useState(0);
 
     useHotkeys([

diff --git a/src/renderer/features/player/components/playerbar.tsx b/src/renderer/features/player/components/playerbar.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import isElectron from 'is-electron';
 import styled from 'styled-components';
 import { useSettingsStore } from '/@/renderer/store/settings.store';
@@ -71,6 +71,7 @@ export const Playerbar = () => {
     const player = useCurrentPlayer();
     const muted = useMuted();
     const { autoNext } = usePlayerControls();
+    const handleSeekRef = useRef<(position: number) => void>();
 
     const autoNextFn = useCallback(() => {
         const playerData = autoNext();
@@ -90,10 +91,13 @@ export const Playerbar = () => {
                     <LeftControls />
                 </LeftGridItem>
                 <CenterGridItem>
-                    <CenterControls playersRef={playersRef} />
+                    <CenterControls
+                        playersRef={playersRef}
+                        seekRef={handleSeekRef}
+                    />
                 </CenterGridItem>
                 <RightGridItem>
-                    <RightControls playersRef={playersRef} />
+                    <RightControls seekRef={handleSeekRef} />
                 </RightGridItem>
             </PlayerbarControlsGrid>
             {settings.type === PlaybackType.WEB && (

diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, useCallback, useEffect } from 'react';
+import { MouseEvent, MutableRefObject, useCallback, useEffect } from 'react';
 import { Flex, Group } from '@mantine/core';
 import { useHotkeys, useMediaQuery } from '@mantine/hooks';
 import isElectron from 'is-electron';
@@ -31,16 +31,15 @@ import { PlayerbarSlider } from '/@/renderer/features/player/components/playerba
 import { api } from '/@/renderer/api';
 import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
 import { Play } from '/@/renderer/types';
-import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls';
 
 const ipc = isElectron() ? window.electron.ipc : null;
 const remote = isElectron() ? window.electron.remote : null;
 
 interface RightControlsProps {
-    playersRef: any;
+    seekRef: MutableRefObject<((position: number) => void) | undefined>;
 }
 
-export const RightControls = ({ playersRef }: RightControlsProps) => {
+export const RightControls = ({ seekRef }: RightControlsProps) => {
     const isMinWidth = useMediaQuery('(max-width: 480px)');
     const volume = useVolume();
     const muted = useMuted();
@@ -56,7 +55,6 @@ export const RightControls = ({ playersRef }: RightControlsProps) => {
     const addToFavoritesMutation = useCreateFavorite({});
     const removeFromFavoritesMutation = useDeleteFavorite({});
     const handlePlayQueueAdd = usePlayQueueAdd();
-    const { handleSeekSlider } = useCenterControls({ playersRef });
 
     const handleAddToFavorites = () => {
         if (!currentSong) return;
@@ -174,9 +172,9 @@ export const RightControls = ({ playersRef }: RightControlsProps) => {
                 playType: Play.NOW,
             });
 
-            handleSeekSlider(queue.position ? queue.position / 1000 : 0);
+            if (seekRef.current) seekRef.current(queue.position ? queue.position / 1000 : 0);
         }
-    }, [handlePlayQueueAdd, handleSeekSlider, server]);
+    }, [handlePlayQueueAdd, seekRef, server]);
 
     useHotkeys([
         [bindings.volumeDown.isGlobal ? '' : bindings.volumeDown.hotkey, handleVolumeDown],