sync watchparty playback speed

src/hooks/useWatchPartySync.ts

@@ -17,6 +17,7 @@ interface RoomUser {
     isPaused: boolean;
     time: number;
     duration: number;
+    playbackRate: number;
   };
   content: {
     title: string;
@@ -79,6 +80,9 @@ export function useWatchPartySync(
   const display = usePlayerStore((s) => s.display);
   const currentTime = usePlayerStore((s) => s.progress.time);
   const isPlaying = usePlayerStore((s) => s.mediaPlaying.isPlaying);
+  const currentPlaybackRate = usePlayerStore(
+    (s) => s.mediaPlaying.playbackRate,
+  );
 
   // Get watch party state
   const { roomCode, isHost, enabled, enableAsGuest } = useWatchPartyStore();
@@ -165,6 +169,10 @@ export function useWatchPartySync(
     const predictedHostTime = getPredictedHostTime();
     const difference = currentTime - predictedHostTime;
 
+    // Handle playback rate sync
+    const needsPlaybackRateSync =
+      hostUser.player.playbackRate !== currentPlaybackRate;
+
     // Handle time sync
     const activeThreshold = isPlaying ? 2 : 5;
     const needsTimeSync = Math.abs(difference) > activeThreshold;
@@ -180,11 +188,22 @@ export function useWatchPartySync(
       Math.abs(hostUser.player.time - state.previousHostTime) > 5;
 
     // Sync if needed
-    if ((needsTimeSync || needsPlayStateSync || needsJumpSync) && !isSyncing) {
+    if (
+      (needsTimeSync ||
+        needsPlayStateSync ||
+        needsJumpSync ||
+        needsPlaybackRateSync) &&
+      !isSyncing
+    ) {
       state.syncInProgress = true;
       setIsSyncing(true);
 
-      // Sync time first
+      // Sync playback rate first if needed
+      if (needsPlaybackRateSync) {
+        display.setPlaybackRate(hostUser.player.playbackRate);
+      }
+
+      // Sync time
       display.setTime(predictedHostTime);
 
       // Then sync play state after a short delay
@@ -210,6 +229,7 @@ export function useWatchPartySync(
     hostUser,
     isHost,
     currentTime,
+    currentPlaybackRate,
     display,
     isSyncing,
     getPredictedHostTime,
@@ -242,6 +262,7 @@ export function useWatchPartySync(
                 isPaused: latestStatus.player.isPaused,
                 time: latestStatus.player.time,
                 duration: latestStatus.player.duration,
+                playbackRate: latestStatus.player.playbackRate,
               },
               content: {
                 title: latestStatus.content.title,