From f4f8855984a9f3b886488047f39fa7d2fea9566c Mon Sep 17 00:00:00 2001
From: Muffin <muffin@muffin.ink>
Date: Fri, 20 Sep 2024 00:32:15 -0500
Subject: [PATCH 1/2] Lily/Video: append the <video>s into the DOM

seems to fix https://github.com/TurboWarp/scratch-render/issues/12
---
 extensions/Lily/Video.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/extensions/Lily/Video.js b/extensions/Lily/Video.js
index 8050f21346..280f8c56ac 100644
--- a/extensions/Lily/Video.js
+++ b/extensions/Lily/Video.js
@@ -15,6 +15,21 @@
   const renderer = vm.renderer;
   const Cast = Scratch.Cast;
 
+  // In some versions of Chrome, it seems that trying to render a <video> returns pure black
+  // if it's not in the DOM in a place the browser thinks is visible. That means we can't
+  // use display: none.
+  // See https://github.com/TurboWarp/scratch-render/issues/12
+  const elementContainer = document.createElement('div');
+  elementContainer.className = 'tw-extensions-lily-videos-container';
+  elementContainer.style.pointerEvents = 'none';
+  elementContainer.style.position = 'absolute';
+  elementContainer.style.opacity = '0';
+  elementContainer.style.width = '0';
+  elementContainer.style.height = '0';
+  elementContainer.style.visibility = 'hidden';
+  elementContainer.ariaHidden = 'true';
+  document.body.appendChild(elementContainer);
+
   const BitmapSkin = runtime.renderer.exports.BitmapSkin;
   class VideoSkin extends BitmapSkin {
     constructor(id, renderer, videoName, videoSrc) {
@@ -50,6 +65,10 @@
       this.videoElement.src = videoSrc;
       this.videoElement.currentTime = 0;
 
+      // <video> must be in the DOM for it to render (see comments above)
+      elementContainer.appendChild(this.videoElement);
+      this.videoElement.tabIndex = -1;
+
       this.videoDirty = true;
 
       this.reuploadVideo();
@@ -106,6 +125,7 @@
     dispose() {
       super.dispose();
       this.videoElement.pause();
+      this.videoElement.remove();
     }
   }
 

From 49b2fb157601cde63db6b55ee6345e86b5e57891 Mon Sep 17 00:00:00 2001
From: Muffin <muffin@muffin.ink>
Date: Fri, 20 Sep 2024 00:33:21 -0500
Subject: [PATCH 2/2] npm run format

---
 extensions/Lily/Video.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/extensions/Lily/Video.js b/extensions/Lily/Video.js
index 280f8c56ac..879625c06a 100644
--- a/extensions/Lily/Video.js
+++ b/extensions/Lily/Video.js
@@ -19,15 +19,15 @@
   // if it's not in the DOM in a place the browser thinks is visible. That means we can't
   // use display: none.
   // See https://github.com/TurboWarp/scratch-render/issues/12
-  const elementContainer = document.createElement('div');
-  elementContainer.className = 'tw-extensions-lily-videos-container';
-  elementContainer.style.pointerEvents = 'none';
-  elementContainer.style.position = 'absolute';
-  elementContainer.style.opacity = '0';
-  elementContainer.style.width = '0';
-  elementContainer.style.height = '0';
-  elementContainer.style.visibility = 'hidden';
-  elementContainer.ariaHidden = 'true';
+  const elementContainer = document.createElement("div");
+  elementContainer.className = "tw-extensions-lily-videos-container";
+  elementContainer.style.pointerEvents = "none";
+  elementContainer.style.position = "absolute";
+  elementContainer.style.opacity = "0";
+  elementContainer.style.width = "0";
+  elementContainer.style.height = "0";
+  elementContainer.style.visibility = "hidden";
+  elementContainer.ariaHidden = "true";
   document.body.appendChild(elementContainer);
 
   const BitmapSkin = runtime.renderer.exports.BitmapSkin;