Improve ATV handling

This commit is contained in:
ponzischeme89
2026-05-27 07:21:24 +12:00
parent 9291a97df9
commit c3137a2bdf
14 changed files with 2206 additions and 391 deletions
+102 -80
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Current Airing Shows</title>
<title>EmbyToolkit</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
@@ -13,13 +13,13 @@
--surface2: #1a2030;
--surface3: #222840;
--border: #252d3d;
--border-active: #4a6fff;
--border-active: #14b8a6;
--text: #e8ecf4;
--text-2: #8892a8;
--text-3: #4e5a70;
--accent: #4a6fff;
--accent-h: #6384ff;
--accent-glow: rgba(74,111,255,0.12);
--accent: #14b8a6;
--accent-h: #2dd4bf;
--accent-glow: rgba(20,184,166,0.12);
--green: #34d399;
--green-bg: rgba(52,211,153,0.08);
--red: #f87171;
@@ -30,86 +30,86 @@
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
min-height: 100svh;
background: var(--bg);
color: var(--text);
font-family: 'DM Sans', sans-serif;
display: grid;
grid-template-columns: 220px 1fr;
height: 100vh;
height: 100svh;
overflow: hidden;
}
.header {
height: 56px;
padding: 0 24px;
/* ── App Nav Sidebar ── */
.app-nav {
display: flex;
align-items: center;
gap: 14px;
border-bottom: 1px solid var(--border);
flex-direction: column;
background: var(--surface);
border-right: 1px solid var(--border);
overflow: hidden;
}
.header-logo {
width: 30px;
height: 30px;
border-radius: 7px;
display: grid;
place-items: center;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 700;
}
.header h1 {
margin: 0;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.02em;
}
.header-nav {
.app-nav-brand {
padding: 18px 16px;
display: flex;
align-items: center;
gap: 8px;
margin-left: 10px;
gap: 10px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.nav-link {
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--border);
.app-nav-logo {
width: 32px; height: 32px;
background: var(--accent);
border-radius: 8px;
display: grid; place-items: center;
color: #fff;
flex-shrink: 0;
}
.app-nav-name {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.03em;
}
.app-nav-items {
list-style: none;
padding: 8px;
flex: 1;
overflow-y: auto;
margin: 0;
}
.app-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 8px;
color: var(--text-2);
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: background 0.12s, border-color 0.12s, color 0.12s;
font-size: 13px;
font-weight: 500;
transition: background 0.12s, color 0.12s;
margin-bottom: 1px;
}
.nav-link:hover {
background: var(--surface2);
color: var(--text);
}
.nav-link.active {
background: var(--accent-glow);
border-color: var(--accent);
color: var(--text);
}
.header-status {
margin-left: auto;
.app-nav-item:hover { background: var(--surface2); color: var(--text); }
.app-nav-item.active { background: var(--accent); color: #fff; }
.app-nav-footer {
padding: 14px 16px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: var(--text-2);
flex-shrink: 0;
}
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 6px var(--green);
}
.dot.off {
background: var(--red);
box-shadow: 0 0 6px var(--red);
width: 7px; height: 7px; border-radius: 50%;
background: var(--green); box-shadow: 0 0 6px var(--green);
}
.dot.off { background: var(--red); box-shadow: 0 0 6px var(--red); }
.page {
padding: 20px 22px 26px;
overflow-y: auto;
}
.hero {
display: flex;
@@ -195,12 +195,6 @@
}
.btn:hover:not(:disabled) { background: var(--surface3); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-h); }
.btn-green {
background: var(--green);
border-color: var(--green);
@@ -382,19 +376,36 @@
</head>
<body>
<header class="header">
<div class="header-logo">TG</div>
<h1>Emby Thumbnail Generator</h1>
<nav class="header-nav">
<a class="nav-link" href="/">Generator</a>
<a class="nav-link" href="/collections">Collections</a>
<a class="nav-link active" href="/airing">Airing</a>
</nav>
<div class="header-status">
<nav class="app-nav">
<div class="app-nav-brand">
<div class="app-nav-logo">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" y1="22" x2="12" y2="12"/></svg>
</div>
<span class="app-nav-name">EmbyToolkit</span>
</div>
<ul class="app-nav-items">
<li><a class="app-nav-item" href="/">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
<span>Generator</span>
</a></li>
<li><a class="app-nav-item" href="/collections">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
<span>Collections</span>
</a></li>
<li><a class="app-nav-item active" href="/airing">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="15" rx="2"/><polyline points="17 2 12 7 7 2"/></svg>
<span>Airing</span>
</a></li>
<li><a class="app-nav-item" href="/bulk-assign">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>
<span>Bulk Assign</span>
</a></li>
</ul>
<div class="app-nav-footer">
<span class="dot" id="statusDot"></span>
<span id="statusText">Checking…</span>
</div>
</header>
</nav>
<main class="page">
<section class="hero">
@@ -402,7 +413,7 @@
<h2>Current Airing Shows</h2>
<p>
This page uses Emby metadata to find continuing shows, upcoming airtimes, and season premieres.
<strong>Apply New Season</strong> is enabled when the latest season premiere is between 1 and 3 weeks old.
<strong>Apply New Season</strong> is available only when the show is in Emby and already has a logo.
</p>
</div>
</section>
@@ -520,8 +531,10 @@ function formatWeekRange(startValue, endValue) {
function canApplyNewSeason(item) {
return Boolean(
item.eligible_new_season ||
((item.status || '').toLowerCase() === 'continuing' && (item.selected_week_air_at || item.next_air_at))
item.has_logo && (
item.eligible_new_season ||
((item.status || '').toLowerCase() === 'continuing' && (item.selected_week_air_at || item.next_air_at))
)
);
}
@@ -536,6 +549,15 @@ function renderCards(items) {
${items.map((item) => `
${(() => {
const applyAllowed = canApplyNewSeason(item);
const note = !item.has_logo
? 'Requires an Emby logo before New Season artwork can be applied.'
: applyAllowed
? (item.eligibility_reason === 'current_airing' || (!item.eligibility_reason && ((item.status || '').toLowerCase() === 'continuing') && (item.selected_week_air_at || item.next_air_at))
? 'Applies thumb + primary. Eligible because the show is continuing and has a current or upcoming airing.'
: (item.season_premiere_inferred
? 'Applies thumb + primary. Season start was inferred from current season activity.'
: 'Applies thumb + primary with default artwork settings.'))
: `Available when Emby finds a current or upcoming airing, or a recent season start in the ${esc(String(state.windowMinDays))}-${esc(String(state.windowMaxDays))} day window.`;
return `
<article class="card">
<img class="card-poster" src="${esc(item.poster_url)}" alt="" loading="lazy" decoding="async">
@@ -578,7 +600,7 @@ function renderCards(items) {
>
${state.applyingId === item.id ? 'Applying…' : 'Apply New Season'}
</button>
<span class="card-note">${applyAllowed ? (item.eligibility_reason === 'current_airing' || (!item.eligibility_reason && ((item.status || '').toLowerCase() === 'continuing') && (item.selected_week_air_at || item.next_air_at)) ? 'Applies thumb + primary. Eligible because the show is continuing and has a current or upcoming airing.' : (item.season_premiere_inferred ? 'Applies thumb + primary. Season start was inferred from current season activity.' : 'Applies thumb + primary with default artwork settings.')) : `Available when Emby finds a current or upcoming airing, or a recent season start in the ${esc(String(state.windowMinDays))}-${esc(String(state.windowMaxDays))} day window.`}</span>
<span class="card-note">${note}</span>
</div>
</div>
</article>