kodi
121 lines
4.3 KiB
HTML
121 lines
4.3 KiB
HTML
<!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>
|