From 1669977daee9d4c99ca4751069e581c0a1fc90d4 Mon Sep 17 00:00:00 2001
From: Eliot Partridge <byte@code.horse>
Date: Tue, 14 May 2024 16:25:30 -0400
Subject: [PATCH] Pause spoilered videos on image pages, unpause on unspoiler

---
 assets/js/image_expansion.js | 5 +++--
 assets/js/utils/image.ts     | 7 +++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/assets/js/image_expansion.js b/assets/js/image_expansion.js
index 66cc379e..9612a3a7 100644
--- a/assets/js/image_expansion.js
+++ b/assets/js/image_expansion.js
@@ -87,11 +87,12 @@ function pickAndResize(elem) {
   }
 
   const muted = store.get('unmute_videos') ? '' : 'muted';
+  const autoplay = elem.classList.contains('hidden') ? '' : 'autoplay'; // Don't autoplay hidden videos initially
 
   if (imageFormat === 'mp4') {
     elem.classList.add('full-height');
     elem.insertAdjacentHTML('afterbegin',
-      `<video controls autoplay loop ${muted} playsinline preload="auto" id="image-display"
+      `<video controls ${autoplay} loop ${muted} playsinline preload="auto" id="image-display"
            width="${imageWidth}" height="${imageHeight}">
         <source src="${uris.webm}" type="video/webm">
         <source src="${uris.mp4}" type="video/mp4">
@@ -104,7 +105,7 @@ function pickAndResize(elem) {
   }
   else if (imageFormat === 'webm') {
     elem.insertAdjacentHTML('afterbegin',
-      `<video controls autoplay loop ${muted} playsinline id="image-display">
+      `<video controls ${autoplay} loop ${muted} playsinline id="image-display">
         <source src="${uri}" type="video/webm">
         <source src="${uri.replace(/webm$/, 'mp4')}" type="video/mp4">
         <p class="block block--fixed block--warning">
diff --git a/assets/js/utils/image.ts b/assets/js/utils/image.ts
index 2004d11f..65cdd7db 100644
--- a/assets/js/utils/image.ts
+++ b/assets/js/utils/image.ts
@@ -64,9 +64,16 @@ export function showThumb(img: HTMLDivElement) {
 export function showBlock(img: HTMLDivElement) {
   img.querySelector('.image-filtered')?.classList.add('hidden');
   const imageShowClasses = img.querySelector('.image-show')?.classList;
+
   if (imageShowClasses) {
     imageShowClasses.remove('hidden');
     imageShowClasses.add('spoiler-pending');
+
+    // Play previously paused, spoilered video
+    const vidEl = img.querySelector('video');
+    if (vidEl) {
+      vidEl.play();
+    }
   }
 }