From 5b6ef295f85c32b0a7b18b643c57eb2bf7075ea1 Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Mon, 15 Jun 2026 16:55:00 -0700
Subject: [PATCH] =?UTF-8?q?Video=20detail:=20trailer=20billboard=20reveals?=
 =?UTF-8?q?=20with=20a=20left=E2=86=92right=20wipe=20+=20fade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the flat opacity crossfade with a soft, feathered left→right wipe of the
trailer in (mask via @property, falls back to crossfade) — "a rollover and a
fade". The wipe now fires ONLY when YouTube reports PLAYING (handshake + state
events), not on a blind timer, with a 4.5s safety net. When the trailer ENDS the
original backdrop fades back in and the iframe is torn down.
---
 webui/static/video/video-detail.js | 44 ++++++++++++++++++++++++++++--
 webui/static/video/video-side.css  | 29 ++++++++++++++++++--
 2 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/webui/static/video/video-detail.js b/webui/static/video/video-detail.js
index d429510e..c7503641 100644
--- a/webui/static/video/video-detail.js
+++ b/webui/static/video/video-detail.js
@@ -724,6 +724,7 @@
 
     // ── billboard autoplay trailer (opt-in setting) ───────────────────────────
     var prefs = null, bbTrailerTimer = null, bbMuted = true;
+    var bbMsgHandler = null, bbRevealTimer = null;
     function loadPrefs(cb) {
         if (prefs) { cb(prefs); return; }
         fetch('/api/video/prefs', { headers: { 'Accept': 'application/json' } })
@@ -745,6 +746,7 @@
     function startBillboardTrailer(key) {
         var bb = q('.vd-billboard'); if (!bb || bb.querySelector('[data-vd-bb-trailer]')) return;
         bbMuted = true;
+        bb.classList.remove('vd-billboard--restoring');
         var wrap = document.createElement('div');
         wrap.className = 'vd-bb-trailer'; wrap.setAttribute('data-vd-bb-trailer', '');
         wrap.innerHTML = '<iframe allow="autoplay; encrypted-media" frameborder="0" ' +
@@ -753,14 +755,52 @@
             '<div class="vd-bb-tctrls"><button class="vd-bb-tbtn" type="button" data-vd-bb-mute aria-label="Unmute">🔇</button>' +
             '<button class="vd-bb-tbtn" type="button" data-vd-bb-stop aria-label="Stop">✕</button></div>';
         bb.appendChild(wrap);
+        var iframe = wrap.querySelector('iframe');
+        // Ask YouTube to report playback state, then reveal ONLY once it's truly
+        // PLAYING (state 1) — so the wipe doesn't fire over a black/buffering frame
+        // — and restore the backdrop when it ENDS (state 0).
+        function handshake() {
+            try {
+                iframe.contentWindow.postMessage(
+                    '{"event":"listening","id":"vd-bb","channel":"widget"}', '*');
+            } catch (e) { /* cross-origin not ready yet */ }
+        }
+        iframe.addEventListener('load', function () { handshake(); setTimeout(handshake, 500); });
+        bbMsgHandler = function (e) {
+            if (!iframe.contentWindow || e.source !== iframe.contentWindow) return;
+            var msg; try { msg = JSON.parse(e.data); } catch (x) { return; }
+            var st = null;
+            if (msg && msg.event === 'infoDelivery' && msg.info && typeof msg.info.playerState === 'number') st = msg.info.playerState;
+            else if (msg && msg.event === 'onStateChange' && typeof msg.info === 'number') st = msg.info;
+            if (st === 1) revealBillboardTrailer(bb);
+            else if (st === 0) restoreBillboard(bb);
+        };
+        window.addEventListener('message', bbMsgHandler);
+        // Safety net: if YouTube never reports PLAYING (blocked handshake), reveal
+        // anyway so a playing-but-hidden trailer doesn't sit behind the backdrop.
+        bbRevealTimer = setTimeout(function () { revealBillboardTrailer(bb); }, 4500);
+    }
+    function revealBillboardTrailer(bb) {
+        clearTimeout(bbRevealTimer); bbRevealTimer = null;
+        bb.classList.remove('vd-billboard--restoring');
         bb.classList.add('vd-billboard--trailer');
     }
+    function restoreBillboard(bb) {
+        // Trailer finished → fade the original backdrop back in, then tear down.
+        bb.classList.remove('vd-billboard--trailer');
+        bb.classList.add('vd-billboard--restoring');
+        setTimeout(function () {
+            if (bb.classList.contains('vd-billboard--restoring')) stopBillboardTrailer();
+        }, 950);
+    }
     function stopBillboardTrailer() {
         clearTimeout(bbTrailerTimer); bbTrailerTimer = null;
+        clearTimeout(bbRevealTimer); bbRevealTimer = null;
+        if (bbMsgHandler) { window.removeEventListener('message', bbMsgHandler); bbMsgHandler = null; }
         var ws = document.querySelectorAll('[data-vd-bb-trailer]');
         for (var i = 0; i < ws.length; i++) ws[i].remove();
-        var bbs = document.querySelectorAll('.vd-billboard--trailer');
-        for (var j = 0; j < bbs.length; j++) bbs[j].classList.remove('vd-billboard--trailer');
+        var bbs = document.querySelectorAll('.vd-billboard--trailer, .vd-billboard--restoring');
+        for (var j = 0; j < bbs.length; j++) bbs[j].classList.remove('vd-billboard--trailer', 'vd-billboard--restoring');
     }
     function toggleBillboardMute(btn) {
         bbMuted = !bbMuted;
diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css
index fe1c24d5..f1c433d8 100644
--- a/webui/static/video/video-side.css
+++ b/webui/static/video/video-side.css
@@ -1409,12 +1409,37 @@ a.vd-prov:hover img, a.vd-prov:hover .vd-prov-ph { border-color: rgba(var(--vd-a
 }
 
 /* ── billboard autoplay trailer ──────────────────────────────────────────── */
-.vd-bb-trailer { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; animation: vd-fade 0.6s ease; }
+.vd-bb-trailer { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; opacity: 0; }
 .vd-bb-trailer iframe {
     position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
     width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; border: 0; pointer-events: none;
 }
-.vd-billboard--trailer .vd-bb-bg { opacity: 0; transition: opacity 0.6s ease; }
+/* Reveal — only once the trailer is actually PLAYING (gated in video-detail.js).
+   The trailer wipes in left→right behind a soft feathered edge while it
+   crossfades, so the backdrop appears to roll away from the left AND fade —
+   "both a rollover and a fade." @property animates the mask gradient smoothly;
+   browsers without it still get the opacity crossfade. */
+@property --vd-wipe { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+.vd-billboard--trailer .vd-bb-trailer {
+    -webkit-mask-image: linear-gradient(100deg, #000 var(--vd-wipe), transparent calc(var(--vd-wipe) + 16%));
+            mask-image: linear-gradient(100deg, #000 var(--vd-wipe), transparent calc(var(--vd-wipe) + 16%));
+    animation: vdTrailerWipeIn 1.15s cubic-bezier(0.62, 0.04, 0.18, 1) forwards;
+}
+@keyframes vdTrailerWipeIn { from { --vd-wipe: -16%; opacity: 0; } to { --vd-wipe: 116%; opacity: 1; } }
+.vd-billboard--trailer .vd-bb-bg { animation: vdBgFadeOut 1.15s ease forwards; }
+@keyframes vdBgFadeOut { from { opacity: 1; } to { opacity: 0; } }
+
+/* Restore — when the trailer ends, fade the original backdrop back in and the
+   trailer out, then it's torn down. */
+.vd-billboard--restoring .vd-bb-bg { animation: vdBgFadeIn 0.9s ease forwards; }
+@keyframes vdBgFadeIn { from { opacity: 0; } to { opacity: 1; } }
+.vd-billboard--restoring .vd-bb-trailer { animation: vdTrailerFadeOut 0.7s ease forwards; }
+@keyframes vdTrailerFadeOut { from { opacity: 1; } to { opacity: 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+    .vd-billboard--trailer .vd-bb-trailer { -webkit-mask-image: none; mask-image: none; animation: vd-fade 0.4s ease forwards; }
+    .vd-billboard--trailer .vd-bb-bg { animation: vdBgFadeOut 0.4s ease forwards; }
+}
 .vd-bb-tctrls { position: absolute; bottom: 20px; right: 24px; z-index: 4; display: flex; gap: 8px; }
 .vd-bb-tbtn {
     width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); cursor: pointer;