push
This commit is contained in:
4DBug
+140
-3
@@ -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 };
|
||||
})();
|
||||
|
||||
+22
-7
@@ -6,6 +6,7 @@
|
||||
|
||||
SR.app.initChrome();
|
||||
|
||||
const heroSlot = document.getElementById('heroSlot');
|
||||
const sections = document.getElementById('sections');
|
||||
|
||||
const cont = SR.cards.continueRow();
|
||||
@@ -16,16 +17,30 @@
|
||||
sections.appendChild(SR.cards.row(title, data.results.map(SR.cards.normalizeItem)));
|
||||
}
|
||||
|
||||
function itemsFrom(data) {
|
||||
return data && Array.isArray(data.results) ? data.results.map(SR.cards.normalizeItem) : [];
|
||||
}
|
||||
|
||||
(async () => {
|
||||
const [movieRes, tvRes] = await Promise.allSettled([
|
||||
SR.api.trending('movie', 'day'),
|
||||
SR.api.trending('tv', 'week'),
|
||||
]);
|
||||
|
||||
if (movieRes.status === 'fulfilled') appendRow(movieRes.value, 'Trending movies today');
|
||||
else SR.app.showError(movieRes.reason, 'could not load trending movies');
|
||||
|
||||
if (tvRes.status === 'fulfilled') appendRow(tvRes.value, 'Trending shows this week');
|
||||
else SR.app.showError(tvRes.reason, 'could not load trending shows');
|
||||
|
||||
try {
|
||||
appendRow(await SR.api.trending('movie', 'day'), 'Trending movies today');
|
||||
const heroData = [...itemsFrom(tvRes.value), ...itemsFrom(movieRes.value)]
|
||||
.filter((item) => item.backdrop && item.overview && item.name)
|
||||
.slice(0, 6);
|
||||
const hero = SR.cards.heroCarousel(heroData);
|
||||
if (hero) heroSlot.appendChild(hero);
|
||||
} catch (e) {
|
||||
SR.app.showError(e, 'could not load trending movies');
|
||||
}
|
||||
try {
|
||||
appendRow(await SR.api.trending('tv', 'week'), 'Trending shows this week');
|
||||
} catch (e) {
|
||||
SR.app.showError(e, 'could not load trending shows');
|
||||
SR.app.showError(e, 'could not load featured titles');
|
||||
}
|
||||
})();
|
||||
})();
|
||||
|
||||
+17
-1
@@ -614,12 +614,28 @@
|
||||
b.type = 'button';
|
||||
b.className = ep.episode_number === state.episode ? 'episode episode--current' : 'episode';
|
||||
const date = ep.air_date ? ` · ${SR.util.escapeHtml(ep.air_date)}` : '';
|
||||
const still = ep.still || (ep.still_path ? SR.util.tmdbResize(ep.still_path, 'w300') : '');
|
||||
b.innerHTML = `
|
||||
<span class="episode__thumb"><span class="episode__play">▶</span></span>
|
||||
<span class="episode__thumb${still ? '' : ' episode__thumb--empty'}">
|
||||
${still ? `<img src="${still}" alt="" loading="lazy">` : `<span aria-hidden="true">${ep.episode_number}</span>`}
|
||||
<span class="episode__play">▶</span>
|
||||
</span>
|
||||
<span class="episode__body">
|
||||
<span class="episode__num">S${state.season} · E${ep.episode_number}${date}</span>
|
||||
<span class="episode__title">${SR.util.escapeHtml(ep.name || `Episode ${ep.episode_number}`)}</span>
|
||||
</span>`;
|
||||
const img = b.querySelector('.episode__thumb img');
|
||||
if (img) {
|
||||
img.addEventListener('error', () => {
|
||||
const thumb = img.closest('.episode__thumb');
|
||||
img.remove();
|
||||
thumb.classList.add('episode__thumb--empty');
|
||||
const num = document.createElement('span');
|
||||
num.setAttribute('aria-hidden', 'true');
|
||||
num.textContent = ep.episode_number;
|
||||
thumb.prepend(num);
|
||||
});
|
||||
}
|
||||
b.addEventListener('click', () => playEpisode(ep.episode_number));
|
||||
episodeGrid.appendChild(b);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user