From ea2d2ad27bbc073eed8d4cc94ad4dadc4bdc49d1 Mon Sep 17 00:00:00 2001
From: Jonathan Gamble <101470903+schlawg@users.noreply.github.com>
Date: Sat, 16 Mar 2024 17:40:05 -0500
Subject: [PATCH] detach player when resized away to conserve bandwidth

---
 ui/analyse/src/study/relay/videoPlayerView.ts | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/ui/analyse/src/study/relay/videoPlayerView.ts b/ui/analyse/src/study/relay/videoPlayerView.ts
index ba4667ca272a..ca9056584644 100644
--- a/ui/analyse/src/study/relay/videoPlayerView.ts
+++ b/ui/analyse/src/study/relay/videoPlayerView.ts
@@ -15,14 +15,15 @@ export function renderVideoPlayer(relay: RelayCtrl): VNode | undefined {
 }
 
 export function onWindowResize(redraw: Redraw) {
-  let cols = 0;
+  let showingVideo = false;
   window.addEventListener(
     'resize',
     () => {
-      player?.cover(document.getElementById('video-player-placeholder') ?? undefined);
-      const newCols = Number(window.getComputedStyle(document.body).getPropertyValue('--cols'));
-      if (newCols === cols) return;
-      cols = newCols;
+      const allow = window.getComputedStyle(document.body).getPropertyValue('--allow-video') === 'true';
+      const placeholder = document.getElementById('video-player-placeholder') ?? undefined;
+      player?.cover(allow ? placeholder : undefined);
+      if (showingVideo === allow && !!placeholder) return;
+      showingVideo = allow && !!placeholder;
       redraw();
     },
     { passive: true },
@@ -47,18 +48,12 @@ class VideoPlayer {
       if (document.body.contains(this.iframe)) document.body.removeChild(this.iframe);
       return;
     }
-    const placement = {
-      left: el.offsetLeft,
-      top: el.offsetTop,
-      width: el.offsetWidth,
-      height: el.offsetHeight,
-    };
     this.animationFrameId = requestAnimationFrame(() => {
       this.iframe.style.display = 'block';
-      this.iframe.style.left = `${placement.left}px`;
-      this.iframe.style.top = `${placement.top}px`;
-      this.iframe.style.width = `${placement.width}px`;
-      this.iframe.style.height = `${placement.height}px`;
+      this.iframe.style.left = `${el!.offsetLeft}px`;
+      this.iframe.style.top = `${el!.offsetTop}px`;
+      this.iframe.style.width = `${el!.offsetWidth}px`;
+      this.iframe.style.height = `${el!.offsetHeight}px`;
       if (!document.body.contains(this.iframe)) document.body.appendChild(this.iframe);
     });
   }