feat: finish playback speed stuff

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}

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}

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;
 };