diff --git a/web/css/pages.css b/web/css/pages.css index 4f316c9..10204b2 100644 --- a/web/css/pages.css +++ b/web/css/pages.css @@ -97,6 +97,13 @@ text-transform: uppercase; } +.hero__logo { + max-width: min(420px, 60vw); + max-height: 140px; + object-fit: contain; + margin-bottom: var(--space-4); +} + .hero__title { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; @@ -645,7 +652,6 @@ .episode-card--current { outline: 2px solid var(--color-accent); outline-offset: 2px; - border-color: var(--color-accent); } .episode-card__thumb { diff --git a/web/index.html b/web/index.html index 57f28a4..91f42be 100644 --- a/web/index.html +++ b/web/index.html @@ -7,7 +7,7 @@ - +
@@ -48,6 +48,6 @@ - + diff --git a/web/js/home.js b/web/js/home.js index f7cb5ca..666c561 100644 --- a/web/js/home.js +++ b/web/js/home.js @@ -21,6 +21,36 @@ return data && Array.isArray(data.results) ? data.results.map(SR.cards.normalizeItem) : []; } + function loadHeroLogos(section, items) { + const slides = section.querySelectorAll('.hero__slide'); + items.forEach((item, i) => { + const slide = slides[i]; + if (!slide || !item || item.tmdbId == null) return; + const titleEl = slide.querySelector('.hero__title'); + if (!titleEl) return; + const logo = document.createElement('img'); + logo.className = 'hero__logo'; + logo.alt = item.name; + logo.hidden = true; + titleEl.insertAdjacentElement('beforebegin', logo); + SR.api.details(item.type, item.tmdbId) + .then((details) => { + const images = (details && details.images) || {}; + const logos = images.logos || []; + const url = (logos.find((l) => l && l.url && String(l.iso_639_1 || '').toLowerCase() === 'en') || {}).url; + if (!url) return; + logo.onerror = () => { + logo.hidden = true; + titleEl.hidden = false; + }; + logo.src = SR.util.tmdbResize(url, 'w500'); + logo.hidden = false; + titleEl.hidden = true; + }) + .catch(() => {}); + }); + } + (async () => { const [movieRes, tvRes] = await Promise.allSettled([ SR.api.trending('movie', 'day'), @@ -38,7 +68,10 @@ .filter((item) => item.backdrop && item.overview && item.name) .slice(0, 6); const hero = SR.cards.heroCarousel(heroData); - if (hero) heroSlot.appendChild(hero); + if (hero) { + heroSlot.appendChild(hero); + loadHeroLogos(hero, heroData); + } } catch (e) { SR.app.showError(e, 'could not load featured titles'); } diff --git a/web/js/watch.js b/web/js/watch.js index 0357cc9..fb330e0 100644 --- a/web/js/watch.js +++ b/web/js/watch.js @@ -441,7 +441,8 @@ ? `url("${SR.util.escapeHtml(SR.util.tmdbResize(backdrop, 'w1280'))}")` : ''; - const logo = images.logos && images.logos[0] && images.logos[0].url; + const logos = images.logos || []; + const logo = (logos.find((l) => l && l.url && String(l.iso_639_1 || '').toLowerCase() === 'en') || {}).url; if (logo) { heroTitleCard.alt = title; heroTitleCard.src = SR.util.tmdbResize(logo, 'w500'); diff --git a/web/search.html b/web/search.html index 736e0d3..aba3834 100644 --- a/web/search.html +++ b/web/search.html @@ -7,7 +7,7 @@ - +
diff --git a/web/settings.html b/web/settings.html index 02f1a0b..6c0d937 100644 --- a/web/settings.html +++ b/web/settings.html @@ -7,7 +7,7 @@ - +
diff --git a/web/watch.html b/web/watch.html index 5122472..660a301 100644 --- a/web/watch.html +++ b/web/watch.html @@ -7,7 +7,7 @@ - +
@@ -130,6 +130,6 @@ - +