Editor client: Pause/Resume video on tab visibility change

legion-labs · Mar 25, 2022 · c12432c · c12432c
1 parent ad7de60
commit c12432c
Showing 1 changed file with 26 additions and 0 deletions.
diff --git a/crates/lgn-web-client/frontend/src/actions/videoPlayer.ts b/crates/lgn-web-client/frontend/src/actions/videoPlayer.ts
@@ -40,6 +40,22 @@ export default function videoPlayer(
   let listeners: Listener[] = [];
   let lastFrameId = -1;
 
+  async function onVisibilityChange() {
+    switch (document.visibilityState) {
+      case "hidden": {
+        videoElement.pause();
+
+        break;
+      }
+
+      case "visible": {
+        await videoElement.play();
+
+        break;
+      }
+    }
+  }
+
   function addListener(source: Source, name: string, f: () => void) {
     source.addEventListener(name, f);
 
@@ -119,6 +135,8 @@ export default function videoPlayer(
     }
   }
 
+  document.addEventListener("visibilitychange", onVisibilityChange);
+
   (videoElement as PushableHTMLVideoElement).push = (data) => {
     const chunk = new Uint8Array(data);
     const frameId =
@@ -153,4 +171,12 @@ export default function videoPlayer(
       lastFrameId = frameId;
     }
   };
+
+  return {
+    destroy() {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+
+      destroy();
+    },
+  };
 }