From 4c42a6567d1570c4a985fcbaa79a2f2e0c76397a Mon Sep 17 00:00:00 2001
From: Josh Goldberg <me@joshuakgoldberg.com>
Date: Sun, 30 Aug 2020 09:41:41 -0400
Subject: [PATCH] Bugfix: only set currentTIme for playing video once

---
 .../DynamicScene/DynamicSceneConnected/index.tsx      |  6 +++++-
 src/connection/types.ts                               | 11 +++++++++++
 .../useVideoControls/usePlayPauseControl.ts           | 11 +++++++++--
 .../useVideoControls/useTimeSynchronization.ts        |  2 ++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/connection/DynamicScene/DynamicSceneConnected/index.tsx b/src/connection/DynamicScene/DynamicSceneConnected/index.tsx
index 92dfec8..d030102 100644
--- a/src/connection/DynamicScene/DynamicSceneConnected/index.tsx
+++ b/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);
 
diff --git a/src/connection/types.ts b/src/connection/types.ts
index 2307526..761eca1 100644
--- a/src/connection/types.ts
+++ b/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;
 };
diff --git a/src/pages/room/RoomEvents/useVideoControls/usePlayPauseControl.ts b/src/pages/room/RoomEvents/useVideoControls/usePlayPauseControl.ts
index e52ad45..ea6392b 100644
--- a/src/pages/room/RoomEvents/useVideoControls/usePlayPauseControl.ts
+++ b/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]);
 };
diff --git a/src/pages/room/RoomEvents/useVideoControls/useTimeSynchronization.ts b/src/pages/room/RoomEvents/useVideoControls/useTimeSynchronization.ts
index c60d5ed..60b0f35 100644
--- a/src/pages/room/RoomEvents/useVideoControls/useTimeSynchronization.ts
+++ b/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;