push
This commit is contained in:
4DBug
@@ -178,6 +178,8 @@ function searchResult(m) {
|
||||
name: m.title || m.name,
|
||||
year: date ? String(date).slice(0, 4) : '',
|
||||
poster: m.poster_path ? `https://image.tmdb.org/t/p/w342${m.poster_path}` : '',
|
||||
backdrop: m.backdrop_path ? `https://image.tmdb.org/t/p/w1280${m.backdrop_path}` : '',
|
||||
rating: m.vote_average ? Number(m.vote_average).toFixed(1) : '',
|
||||
overview: m.overview || '',
|
||||
};
|
||||
}
|
||||
@@ -239,6 +241,7 @@ async function handleEpisodes(req, res, url, id, season) {
|
||||
episode_number: e.episode_number,
|
||||
name: e.name,
|
||||
air_date: e.air_date || '',
|
||||
still: e.still_path ? `https://image.tmdb.org/t/p/w300${e.still_path}` : '',
|
||||
})),
|
||||
});
|
||||
} catch (e) {
|
||||
|
||||
@@ -230,13 +230,37 @@ select.field {
|
||||
|
||||
.card__meta {
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
.card__meta__text {
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card__ep {
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card__ep-dot {
|
||||
margin: 0 2px;
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
.card__dot {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
.card__progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
+250
-1
@@ -2,7 +2,230 @@
|
||||
PAGES — page-specific layout: home, search, watch.
|
||||
Widget styling lives in components.css; this file only positions
|
||||
page-level blocks and handles responsive behavior.
|
||||
*/
|
||||
*/
|
||||
|
||||
/* ---- home: hero carousel ------------------------------------------------------ */
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
height: clamp(440px, 72vh, 640px);
|
||||
margin: calc(-1 * var(--space-5)) 0 var(--space-6);
|
||||
overflow: hidden;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.hero__slides,
|
||||
.hero__slide {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.hero__slide {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 600ms ease, visibility 0s linear 600ms;
|
||||
}
|
||||
|
||||
.hero__slide.is-active {
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 600ms ease;
|
||||
}
|
||||
|
||||
.hero__backdrop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transform: scale(1.04);
|
||||
transition: transform 8s ease;
|
||||
}
|
||||
|
||||
.hero__slide.is-active .hero__backdrop {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.hero__scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.58) 45%, rgba(0, 0, 0, 0.22) 75%, rgba(0, 0, 0, 0.05) 100%),
|
||||
linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.05) 100%);
|
||||
}
|
||||
|
||||
.hero__fade {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 34%;
|
||||
background: linear-gradient(to top, var(--color-bg) 2%, color-mix(in srgb, var(--color-bg) 72%, transparent) 58%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero__inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
max-width: var(--container-max);
|
||||
padding: 0 var(--container-pad);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.hero__content {
|
||||
max-width: 620px;
|
||||
padding-bottom: clamp(72px, 12vh, 112px);
|
||||
}
|
||||
|
||||
.hero__kicker {
|
||||
display: inline-block;
|
||||
margin-bottom: var(--space-3);
|
||||
padding: 4px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(8px);
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
font-size: clamp(2.2rem, 5vw, 3.6rem);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.03em;
|
||||
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.hero__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: var(--space-4);
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.hero__rating {
|
||||
color: var(--color-star);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.hero__dot {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.hero__meta .badge {
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.hero__overview {
|
||||
max-width: 58ch;
|
||||
margin-top: var(--space-4);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.6;
|
||||
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
.hero__play {
|
||||
padding: 10px 24px;
|
||||
font-size: var(--text-md);
|
||||
}
|
||||
|
||||
.hero__play svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.hero__arrow {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(10, 10, 10, 0.42);
|
||||
color: #fff;
|
||||
backdrop-filter: blur(8px);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 160ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
.hero:hover .hero__arrow,
|
||||
.hero__arrow:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero__arrow:hover {
|
||||
background: rgba(10, 10, 10, 0.65);
|
||||
}
|
||||
|
||||
.hero__arrow svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.hero__arrow--prev {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.hero__arrow--next {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.hero__dots {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: var(--space-5);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.hero__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(255, 255, 255, 0.32);
|
||||
cursor: pointer;
|
||||
transition: width 160ms ease, background 160ms ease;
|
||||
}
|
||||
|
||||
.hero__dot.is-active {
|
||||
width: 24px;
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
/* ---- search ------------------------------------------------------------------ */
|
||||
|
||||
@@ -249,6 +472,15 @@
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.episode__thumb--empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--color-text-faint);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface));
|
||||
}
|
||||
|
||||
.episode__play {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -428,6 +660,23 @@
|
||||
--card-width: 132px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
height: clamp(360px, 58vh, 520px);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.hero__content {
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
|
||||
.hero__overview {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.hero__arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.watch-hero {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
+5
-2
@@ -28,8 +28,11 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container page" id="content">
|
||||
<div id="sections"></div>
|
||||
<main class="page" id="content">
|
||||
<div id="heroSlot"></div>
|
||||
<div class="container">
|
||||
<div id="sections"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
|
||||
+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