feat (ui): series overlay

2026-03-09 16:19:50 +01:00
parent 7a395a24b4
commit c62f61fc38
7 changed files with 312 additions and 0 deletions
@@ -192,6 +192,26 @@
      </div>
    </div>

+    <div id="tvdbModal" class="modal hidden" aria-hidden="true">
+      <div class="modal-card tvdb-modal-card">
+        <div class="row modal-head tvdb-modal-head">
+          <h3>TVDB Preview</h3>
+          <div class="panel-head-actions">
+            <button id="tvdbModalOpenInTabBtn" class="secondary">Open in tab</button>
+            <button id="closeTvdbModalBtn" class="secondary" aria-label="Close TVDB preview">✕</button>
+          </div>
+        </div>
+        <p id="tvdbModalStatus" class="muted"></p>
+        <div id="tvdbModalFallback" class="tvdb-fallback hidden">
+          <h4>Embedding blocked or unavailable</h4>
+          <p>
+            This page cannot be embedded here. TheTVDB may block framing using browser security headers.
+          </p>
+        </div>
+        <iframe id="tvdbModalFrame" title="TVDB Preview" class="tvdb-modal-frame"></iframe>
+      </div>
+    </div>
+
    <script src="/static/app.js"></script>
  </body>
 </html>
@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Rename MVP - TVDB Embed Test</title>
+    <script>
+      (function () {
+        var key = "rename_mvp_theme";
+        var theme = localStorage.getItem(key);
+        if (theme !== "light" && theme !== "dark") {
+          theme = "dark";
+        }
+        document.documentElement.setAttribute("data-theme", theme);
+      })();
+    </script>
+    <link rel="stylesheet" href="/static/styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <h1>TVDB Embed Test</h1>
+      <div id="testMeta">Standalone iframe validation page</div>
+    </header>
+    <main class="debug-page">
+      <section class="panel" style="height: calc(100vh - 100px); min-height: 0;">
+        <div class="panel-head">
+          <h2>Embed Validation</h2>
+        </div>
+        <div class="panel-body" style="min-height: 0;">
+          <div class="row">
+            <label for="tvdbUrlInput">TVDB URL</label>
+            <input
+              id="tvdbUrlInput"
+              type="text"
+              value="https://www.thetvdb.com/series/ghosts-us"
+              style="flex: 1; min-width: 260px;"
+            />
+            <button id="loadEmbedBtn">Load in iframe</button>
+            <button id="openInTabBtn" class="secondary">Open in tab</button>
+          </div>
+          <p id="embedStatus" class="muted"></p>
+          <div id="embedFallback" class="panel hidden" style="margin-bottom: 8px;">
+            <h3>Embedding blocked or failed</h3>
+            <p class="muted" style="margin: 0;">
+              The page could not be embedded. This is usually caused by TheTVDB frame restrictions
+              (`X-Frame-Options` or `Content-Security-Policy: frame-ancestors`).
+            </p>
+          </div>
+          <iframe
+            id="tvdbFrame"
+            title="TVDB Embed Test Frame"
+            style="width: 100%; height: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-subtle);"
+          ></iframe>
+        </div>
+      </section>
+    </main>
+
+    <script>
+      (function () {
+        var input = document.getElementById("tvdbUrlInput");
+        var frame = document.getElementById("tvdbFrame");
+        var status = document.getElementById("embedStatus");
+        var fallback = document.getElementById("embedFallback");
+        var loadBtn = document.getElementById("loadEmbedBtn");
+        var openBtn = document.getElementById("openInTabBtn");
+        var fallbackTimer = null;
+
+        function validTvdbUrl(value) {
+          try {
+            var u = new URL(value);
+            return u.protocol === "https:" && (u.hostname === "www.thetvdb.com" || u.hostname === "thetvdb.com");
+          } catch (_err) {
+            return false;
+          }
+        }
+
+        function showFallback(text) {
+          status.textContent = text;
+          fallback.classList.remove("hidden");
+        }
+
+        function loadFrame() {
+          var url = (input.value || "").trim();
+          if (!validTvdbUrl(url)) {
+            showFallback("Enter a valid https://www.thetvdb.com URL.");
+            frame.removeAttribute("src");
+            return;
+          }
+
+          fallback.classList.add("hidden");
+          status.textContent = "Loading iframe...";
+          if (fallbackTimer) window.clearTimeout(fallbackTimer);
+          fallbackTimer = window.setTimeout(function () {
+            showFallback("No iframe load confirmation received. Embedding is likely blocked.");
+          }, 5000);
+          frame.src = url;
+        }
+
+        frame.addEventListener("load", function () {
+          if (fallbackTimer) window.clearTimeout(fallbackTimer);
+          status.textContent =
+            "Iframe load event received. If TVDB content is visible below, embedding works in this browser.";
+          fallback.classList.add("hidden");
+        });
+
+        loadBtn.addEventListener("click", loadFrame);
+        openBtn.addEventListener("click", function () {
+          var url = (input.value || "").trim();
+          if (!validTvdbUrl(url)) {
+            showFallback("Enter a valid https://www.thetvdb.com URL.");
+            return;
+          }
+          window.open(url, "_blank", "noopener,noreferrer");
+        });
+
+        loadFrame();
+      })();
+    </script>
+  </body>
+</html>