bug/tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

push

Browse Source
This commit is contained in:
4DBug
2026-08-26 21:15:42 -05:00
parent bbb5659e00
commit fc0e2c7af6
7 changed files with 461 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/js/cards.js
+140 -3
View File
@@ -17,6 +17,8 @@
name: r.name || r.title || '',
year: r.year || '',
poster: r.poster || r.poster_url || '',
backdrop: r.backdrop || r.backdrop_url || '',
rating: r.rating || (r.vote_average ? Number(r.vote_average).toFixed(1) : ''),
overview: r.overview || '',
};
}
@@ -48,13 +50,14 @@
: item.type === 'tv'
? 'TV'
: 'Movie');
const metaHtml = item.metaHtml || `<span class="card__meta__text">${esc(meta)}</span>`;
el.innerHTML = `
<span class="card__poster${poster ? '' : ' card__poster--empty'}">
${poster ? `<img src="${poster}" alt="" loading="lazy">` : '?'}
${progress}
</span>
<span class="card__title">${esc(item.name)}</span>
<span class="card__meta">${esc(meta)}</span>`;
<span class="card__meta">${metaHtml}</span>`;
return el;
}
@@ -96,13 +99,147 @@
poster: r.poster || '',
meta:
r.type === 'tv'
? `S${r.season}E${r.episode}${r.title ? ` · ${r.title}` : ''} · ${formatSeconds(Math.max(0, r.d - r.t))} left`
? `S${r.season} · E${r.episode} · ${formatSeconds(Math.max(0, r.d - r.t))} left`
: `Movie · ${formatSeconds(Math.max(0, r.d - r.t))} left`,
metaHtml:
r.type === 'tv'
? `<span class="card__ep">S${r.season} <span class="card__ep-dot">·</span> E${r.episode}</span><span class="card__dot">·</span><span class="card__meta__text">${formatSeconds(Math.max(0, r.d - r.t))} left</span>`
: `<span class="card__meta__text">Movie · ${formatSeconds(Math.max(0, r.d - r.t))} left</span>`,
progress: r.d ? r.t / r.d : 0,
}));
return row('Continue watching', items);
}
function heroCarousel(items) {
const data = (items || []).filter((item) => item && item.backdrop && item.name);
if (!data.length) return null;
const section = document.createElement('section');
section.className = 'hero';
section.setAttribute('aria-roledescription', 'carousel');
section.setAttribute('aria-label', 'Featured titles');
const wrap = document.createElement('div');
wrap.className = 'hero__slides';
const slideEls = [];
for (let i = 0; i < data.length; i += 1) {
const item = data[i];
const slide = document.createElement('article');
slide.className = i === 0 ? 'hero__slide is-active' : 'hero__slide';
slide.setAttribute('role', 'group');
slide.setAttribute('aria-roledescription', 'slide');
slide.setAttribute('aria-label', `${i + 1} of ${data.length}: ${item.name}`);
const typeLabel = item.type === 'tv' ? 'TV' : 'Movie';
const metaBits = [
item.rating ? `<span class="hero__rating">★ ${esc(item.rating)}</span>` : '',
item.year ? `<span>${esc(item.year)}</span>` : '',
`<span class="badge">${esc(typeLabel)}</span>`,
]
.filter(Boolean)
.join('<span class="hero__dot">·</span>');
slide.innerHTML = `
<img class="hero__backdrop" src="${item.backdrop}" alt="" loading="${i === 0 ? 'eager' : 'lazy'}">
<div class="hero__scrim"></div>
<div class="hero__fade"></div>
<div class="container hero__inner">
<div class="hero__content">
<span class="hero__kicker">Trending now</span>
<h1 class="hero__title">${esc(item.name)}</h1>
<div class="hero__meta">${metaBits}</div>
${item.overview ? `<p class="hero__overview">${esc(item.overview)}</p>` : ''}
<div class="hero__actions">
<a class="btn btn--primary hero__play" href="${watchHref(item)}">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
<span>Play</span>
</a>
</div>
</div>
</div>`;
wrap.appendChild(slide);
slideEls.push(slide);
}
section.appendChild(wrap);
if (slideEls.length > 1) {
const prev = document.createElement('button');
prev.type = 'button';
prev.className = 'hero__arrow hero__arrow--prev';
prev.setAttribute('aria-label', 'Previous slide');
prev.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"></path></svg>';
const next = document.createElement('button');
next.type = 'button';
next.className = 'hero__arrow hero__arrow--next';
next.setAttribute('aria-label', 'Next slide');
next.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"></path></svg>';
const dots = document.createElement('div');
dots.className = 'hero__dots';
const dotEls = [];
for (let i = 0; i < slideEls.length; i += 1) {
const dot = document.createElement('button');
dot.type = 'button';
dot.className = i === 0 ? 'hero__dot is-active' : 'hero__dot';
dot.setAttribute('aria-label', `Go to slide ${i + 1}`);
dots.appendChild(dot);
dotEls.push(dot);
}
section.append(prev, next, dots);
let current = 0;
let timer = null;
function goTo(index) {
current = (index + slideEls.length) % slideEls.length;
slideEls.forEach((slide, i) => slide.classList.toggle('is-active', i === current));
dotEls.forEach((dot, i) => dot.classList.toggle('is-active', i === current));
}
function start() {
stop();
if (!document.hidden) timer = setInterval(() => goTo(current + 1), 7000);
}
function stop() {
if (timer) {
clearInterval(timer);
timer = null;
}
}
prev.addEventListener('click', () => {
goTo(current - 1);
start();
});
next.addEventListener('click', () => {
goTo(current + 1);
start();
});
dotEls.forEach((dot, i) => dot.addEventListener('click', () => {
goTo(i);
start();
}));
section.addEventListener('mouseenter', stop);
section.addEventListener('mouseleave', start);
section.addEventListener('focusin', stop);
section.addEventListener('focusout', (e) => {
if (!section.contains(e.relatedTarget)) start();
});
document.addEventListener('visibilitychange', () => {
if (document.hidden) stop();
else start();
});
start();
}
return section;
}
window.SR = window.SR || {};
SR.cards = { normalizeItem, card, row, grid, emptyState, continueRow };
SR.cards = { normalizeItem, card, row, grid, emptyState, continueRow, watchHref, heroCarousel };
})();