From 6b5ee9aba0e698404af20e0f6274fab9b3fb6a7a Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Wed, 6 Mar 2024 12:45:54 +0100
Subject: [PATCH] feat: finish playback speed stuff

---
 .../src/components/player/PlaybackSpeedSelector.tsx |  2 +-
 apps/expo/src/components/player/VideoPlayer.tsx     |  9 +++------
 apps/expo/src/hooks/player/usePlaybackSpeed.ts      | 13 ++++++++-----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/expo/src/components/player/PlaybackSpeedSelector.tsx b/apps/expo/src/components/player/PlaybackSpeedSelector.tsx
index 9cc8ca1..e78ae91 100644
--- a/apps/expo/src/components/player/PlaybackSpeedSelector.tsx
+++ b/apps/expo/src/components/player/PlaybackSpeedSelector.tsx
@@ -55,7 +55,7 @@ export const PlaybackSpeedSelector = () => {
               }}
             >
               <Text>{speed}</Text>
-              {speed === currentSpeed.value && (
+              {speed === currentSpeed && (
                 <MaterialCommunityIcons
                   name="check-circle"
                   size={24}
diff --git a/apps/expo/src/components/player/VideoPlayer.tsx b/apps/expo/src/components/player/VideoPlayer.tsx
index 2a3227e..9899385 100644
--- a/apps/expo/src/components/player/VideoPlayer.tsx
+++ b/apps/expo/src/components/player/VideoPlayer.tsx
@@ -228,13 +228,10 @@ export const VideoPlayer = () => {
   const onReadyForDisplay = () => {
     setIsLoading(false);
     setHasStartedPlaying(true);
-  };
-
-  useEffect(() => {
     if (videoRef) {
-      void videoRef.setRateAsync(currentSpeed.value, true);
+      void videoRef.setRateAsync(currentSpeed, true);
     }
-  }, [currentSpeed.value, videoRef]);
+  };
 
   useEffect(() => {
     const synchronizePlayback = async () => {
@@ -265,7 +262,7 @@ export const VideoPlayer = () => {
           shouldPlay={shouldPlay}
           resizeMode={resizeMode}
           volume={currentVolume.value}
-          rate={currentSpeed.value}
+          rate={currentSpeed}
           onLoadStart={onVideoLoadStart}
           onReadyForDisplay={onReadyForDisplay}
           onPlaybackStatusUpdate={setStatus}
diff --git a/apps/expo/src/hooks/player/usePlaybackSpeed.ts b/apps/expo/src/hooks/player/usePlaybackSpeed.ts
index 9fdf9d3..c08a2dc 100644
--- a/apps/expo/src/hooks/player/usePlaybackSpeed.ts
+++ b/apps/expo/src/hooks/player/usePlaybackSpeed.ts
@@ -1,18 +1,21 @@
 import { useCallback } from "react";
-import { useSharedValue } from "react-native-reanimated";
+
+import { usePlayerStore } from "~/stores/player/store";
 
 export const usePlaybackSpeed = () => {
-  const speed = useSharedValue(1);
+  const videoRef = usePlayerStore((state) => state.videoRef);
 
   const changePlaybackSpeed = useCallback(
     (newValue: number) => {
-      speed.value = newValue;
+      if (videoRef) {
+        void videoRef.setRateAsync(newValue, true);
+      }
     },
-    [speed],
+    [videoRef],
   );
 
   return {
-    currentSpeed: speed,
+    currentSpeed: videoRef?.props.rate ?? 1,
     changePlaybackSpeed,
   } as const;
 };