Bugfix: only set currentTIme for playing video once

src/connection/DynamicScene/DynamicSceneConnected/index.tsx

@@ -34,7 +34,11 @@ export const DynamicSceneConnected: React.FC<DynamicSceneConnectedProps> = ({
   );
 
   const emitRoomData = useRoomDataEmit(emit, roomContextData.roomData);
-  const roomContextValue = { ...roomContextData, emitRoomData };
+  const roomContextValue = {
+    ...roomContextData,
+    emitRoomData,
+    originalRoomData: roomData,
+  };
 
   useRoomDataSyncing(roomContextValue, socket);
 

src/connection/types.ts

@@ -11,6 +11,9 @@ export type RoomContextValueTypes = Readonly<{
    */
   occupants: ReadonlyMap<PersonId, RoomPerson>;
 
+  /**
+   * Current (most recently updated) snapshot of the server state.
+   */
   roomData: RoomData;
 
   roomName: string;
@@ -41,5 +44,13 @@ export type AsGettersAndSetters<Values> = {
 export type RoomContextData = AsGettersAndSetters<RoomContextValueTypes>;
 
 export type RoomContextValue = RoomContextData & {
+  /**
+   * Updates local room data and emits any changes to the server.
+   */
   emitRoomData: (newRoomData: Partial<RoomData>) => void;
+
+  /**
+   * Snapshot of the room data as it was when first joined.
+   */
+  originalRoomData: RoomData;
 };

src/pages/room/RoomEvents/useVideoControls/usePlayPauseControl.ts

@@ -6,7 +6,7 @@ import { useRoomContext } from "@connection/RoomContext";
 import { useEmitOnClick } from "../useEmitOnClick";
 
 export const usePlayPauseControl = () => {
-  const { roomData } = useRoomContext();
+  const { originalRoomData, roomData } = useRoomContext();
   const { currentTime, playing } = roomData.get();
 
   useEmitOnClick(controls.playPauseButton, (oldRoomData) => ({
@@ -18,10 +18,17 @@ export const usePlayPauseControl = () => {
     controls.playPauseButton.setAttribute("src", playing ? "#pause" : "#play");
 
     if (playing) {
-      videoElement.currentTime = currentTime;
       videoElement.play();
     } else {
       videoElement.pause();
     }
   }, [currentTime, playing]);
+
+  useEffect(() => {
+    videoElement.currentTime = originalRoomData.currentTime;
+
+    if (originalRoomData.playing) {
+      videoElement.play();
+    }
+  }, [originalRoomData]);
 };

src/pages/room/RoomEvents/useVideoControls/useTimeSynchronization.ts

@@ -13,12 +13,14 @@ export const useTimeSynchronization = () => {
   const { emitRoomData, roomData } = useRoomContext();
   const { currentTime, playing } = roomData.get();
 
+  // Constantly update the server on the current time of the video
   useInterval(() => {
     emitRoomData({
       currentTime: videoElement.currentTime,
     });
   }, videoElementSyncInterval);
 
+  // If the video is paused, we can safely match its time to currentTime
   useEffect(() => {
     if (!playing) {
       videoElement.currentTime = currentTime;