250 lines
8.9 KiB
JavaScript
250 lines
8.9 KiB
JavaScript
/*
|
|
CARDS — renders poster cards, rows (carousels) and grids.
|
|
Items can come straight from the API ({tmdb_id, type, name, year, poster})
|
|
or from storage records; normalizeItem() handles both.
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
|
|
const { escapeHtml: esc, tmdbResize, formatSeconds } = SR.util;
|
|
|
|
function normalizeItem(r) {
|
|
return {
|
|
tmdbId: r.tmdb_id != null ? r.tmdb_id : r.tmdbId,
|
|
type: r.type,
|
|
season: r.season,
|
|
episode: r.episode,
|
|
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 || '',
|
|
};
|
|
}
|
|
|
|
function watchHref(item) {
|
|
const p = new URLSearchParams();
|
|
p.set('id', item.tmdbId);
|
|
p.set('type', item.type);
|
|
if (item.type === 'tv') {
|
|
if (item.season != null) p.set('s', item.season);
|
|
if (item.episode != null) p.set('e', item.episode);
|
|
}
|
|
return `watch.html?${p.toString()}`;
|
|
}
|
|
|
|
function card(item, opts = {}) {
|
|
const el = document.createElement('a');
|
|
el.className = 'card';
|
|
el.href = opts.href || watchHref(item);
|
|
const poster = tmdbResize(item.poster, 'w342');
|
|
const progress =
|
|
opts.progress != null
|
|
? `<span class="card__progress"><i style="width:${Math.round(Math.min(1, opts.progress) * 100)}%"></i></span>`
|
|
: '';
|
|
const meta =
|
|
item.meta ||
|
|
(item.year
|
|
? `${item.year} · ${item.type === 'tv' ? 'TV' : 'Movie'}`
|
|
: item.type === 'tv'
|
|
? 'TV'
|
|
: 'Movie');
|
|
const metaHtml = item.metaHtml || `<span class="card__meta__text">${esc(meta)}</span>`;
|
|
const title = item.hideTitle
|
|
? ''
|
|
: `<span class="card__title">${esc(item.name)}</span>`;
|
|
el.innerHTML = `
|
|
<span class="card__poster${poster ? '' : ' card__poster--empty'}">
|
|
${poster ? `<img src="${poster}" alt="" loading="lazy">` : '?'}
|
|
${progress}
|
|
</span>
|
|
${title}
|
|
<span class="card__meta">${metaHtml}</span>`;
|
|
if (item.hideTitle) el.setAttribute('aria-label', `${item.name} — ${meta}`);
|
|
return el;
|
|
}
|
|
|
|
function row(title, items) {
|
|
const section = document.createElement('section');
|
|
section.className = 'row';
|
|
section.innerHTML = `<div class="row__header"><h2 class="row__title">${esc(title)}</h2></div>`;
|
|
const scroll = document.createElement('div');
|
|
scroll.className = 'row__scroll';
|
|
for (const item of items) scroll.appendChild(card(item));
|
|
section.appendChild(scroll);
|
|
return section;
|
|
}
|
|
|
|
function grid(items) {
|
|
const el = document.createElement('div');
|
|
el.className = 'grid';
|
|
for (const item of items) el.appendChild(card(item));
|
|
return el;
|
|
}
|
|
|
|
function emptyState(title, hint) {
|
|
const el = document.createElement('div');
|
|
el.className = 'empty';
|
|
el.innerHTML = `<h3>${esc(title)}</h3>${hint ? `<p>${esc(hint)}</p>` : ''}`;
|
|
return el;
|
|
}
|
|
|
|
// "Continue watching" row: latest record per show, with progress bar
|
|
function continueRow() {
|
|
const recs = SR.storage.latestPerShow();
|
|
if (!recs.length) return null;
|
|
const items = recs.map((r) => ({
|
|
tmdbId: r.tmdbId,
|
|
type: r.type,
|
|
season: r.season,
|
|
episode: r.episode,
|
|
name: r.show || r.title || '',
|
|
poster: r.poster || '',
|
|
hideTitle: true,
|
|
meta:
|
|
r.type === 'tv'
|
|
? `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">
|
|
<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, watchHref, heroCarousel };
|
|
})();
|