push

config.json

@@ -1,7 +1,9 @@
 {
   "tmdbKey": "ac014b130a8e6344c91dff4e68b18d47",
   "enabledProviders": [
-    "cineby"
+    "cineby",
+    "videasy",
+    "vidfast"
   ],
   "timeoutMs": 30000,
   "filters": {

rest/server.js

@@ -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) {

web/css/components.css

@@ -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;
@@ -676,6 +700,11 @@ select.field {
   color: rgba(255, 255, 255, 0.55);
 }
 
+.player-sources__group--error {
+  color: var(--color-danger);
+  cursor: help;
+}
+
 .source-item {
   display: flex;
   align-items: center;

web/css/pages.css

@@ -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;

web/index.html

@@ -28,8 +28,11 @@
     </div>
   </header>
 
-  <main class="container page" id="content">
+  <main class="page" id="content">
-    <div id="sections"></div>
+    <div id="heroSlot"></div>
+    <div class="container">
+      <div id="sections"></div>
+    </div>
   </main>
 
   <footer class="site-footer">

web/js/cards.js

@@ -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 };
 })();

web/js/config.js

@@ -82,16 +82,45 @@
     }
   }
 
+  const PREFERRED_PROVIDERS = ['cineby', 'videasy', 'vidfast'];
+
   // Merge the server's provider lists with the user's toggles.
   // Returns the enabled provider names, in the server's `all` order.
   function enabledProviders(allNames, serverEnabled) {
     const all = Array.isArray(allNames) ? allNames : [];
     const overrides = getProviders();
-    if (!overrides) {
+    if (overrides) {
-      const base = Array.isArray(serverEnabled) && serverEnabled.length ? serverEnabled : all;
+      return Object.keys(overrides).filter((n) => overrides[n] !== false);
-      return all.filter((n) => base.includes(n));
     }
-    return all.filter((n) => overrides[n] !== false);
+    const server = Array.isArray(serverEnabled) ? serverEnabled : [];
+    const wanted = new Set([...PREFERRED_PROVIDERS, ...server]);
+    return (all.length ? all : PREFERRED_PROVIDERS.slice()).filter((n) =>
+      wanted.has(n)
+    );
+  }
+
+  // Watch-page resolver. Re-reads localStorage on every call so provider
+  // changes made in Settings apply to the next lookup without a reload.
+  function resolveProviders(catalog) {
+    const all = Array.isArray(catalog && catalog.all) ? catalog.all : [];
+    const serverEnabled = Array.isArray(catalog && catalog.enabled) ? catalog.enabled : [];
+    const overrides = getProviders();
+    if (overrides) {
+      return {
+        names: Object.keys(overrides).filter((n) => overrides[n] !== false),
+        customized: true,
+        useServerDefaults: false,
+      };
+    }
+    const wanted = new Set([...PREFERRED_PROVIDERS, ...serverEnabled]);
+    const names = all.length
+      ? all.filter((n) => wanted.has(n))
+      : PREFERRED_PROVIDERS.slice();
+    return {
+      names,
+      customized: false,
+      useServerDefaults: !names.length,
+    };
   }
 
   window.SR = window.SR || {};
@@ -106,5 +135,6 @@
     setProviders,
     clearProviders,
     enabledProviders,
+    resolveProviders,
   };
 })();

web/js/home.js

@@ -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');
+      SR.app.showError(e, 'could not load featured titles');
-    }
-    try {
-      appendRow(await SR.api.trending('tv', 'week'), 'Trending shows this week');
-    } catch (e) {
-      SR.app.showError(e, 'could not load trending shows');
     }
   })();
 })();

web/js/settings.js

@@ -54,8 +54,9 @@
     providerList.replaceChildren();
     boxes.clear();
     const overrides = SR.config.getProviders();
+    const enabled = SR.config.enabledProviders(allProviders, serverEnabled);
     for (const name of allProviders) {
-      const checked = overrides ? overrides[name] !== false : serverEnabled.includes(name);
+      const checked = enabled.includes(name);
       const label = document.createElement('label');
       label.className = 'provider';
       const input = document.createElement('input');
@@ -71,7 +72,7 @@
       providerList.appendChild(label);
     }
     const on = boxes.size ? Array.from(boxes.values()).filter((b) => b.checked).length : 0;
-    const source = overrides ? 'your selection' : 'server defaults';
+    const source = overrides ? 'your selection' : 'default sources';
     let host;
     try { host = new URL(SR.config.getBase()).host; } catch (e) { host = SR.config.getBase(); }
     setStatus(providersStatus, `${on} of ${allProviders.length} enabled — ${source} · ${host}`);
@@ -96,7 +97,7 @@
   });
 
   document.getElementById('providersReset').addEventListener('click', () =>
-    resetProviders('Using server defaults'));
+    resetProviders('Using default sources'));
 
   async function initSources() {
     try {
@@ -147,7 +148,7 @@
 
   document.getElementById('resetProviders').addEventListener('click', () => {
     resetProviders('');
-    setStatus(dataStatus, 'Source toggles reset to server defaults.');
+    setStatus(dataStatus, 'Source toggles reset to default sources.');
   });
 
   initSources();

web/js/util.js

@@ -50,6 +50,21 @@
     return url.replace(/\/t\/p\/[A-Za-z0-9._-]+/, `/t/p/${size}`);
   }
 
+  // True when the in-browser player can load the stream through the proxy.
+  function webPlayable(stream) {
+    const s = stream || {};
+    const url = String(s.url || '');
+    if (!/^https?:\/\//i.test(url)) return false;
+    const type = String(s.type || '').toLowerCase();
+    if (['magnet', 'torrent', 'dash', 'mkv', 'avi'].includes(type)) return false;
+    const isHls = type === 'm3u8' || /\.m3u8($|\?)/i.test(url);
+    const isDirect =
+      type === 'mp4' ||
+      type === 'webm' ||
+      /\.(mp4|m4v|webm)(\?|#|$)/i.test(url);
+    return isHls || isDirect;
+  }
+
   window.SR = window.SR || {};
-  SR.util = { escapeHtml, getParam, formatSeconds, runtimeLabel, debounce, tmdbResize };
+  SR.util = { escapeHtml, getParam, formatSeconds, runtimeLabel, debounce, tmdbResize, webPlayable };
 })();

web/js/watch.js

@@ -50,6 +50,9 @@
     seasons: [],
     episodes: [],
     streams: [],
+    unsupported: [],
+    providerErrors: {},
+    loadErrors: {},
     sourceIndex: -1,
     season: null,
     episode: null,
@@ -380,21 +383,39 @@
     return SR.storage.keyFor({ type, tmdbId: Number(id), season: state.season, episode: state.episode });
   }
 
-  let providerNames = null; // cached per page load; null → ask server again
+  let providerCatalog = null; // cached per page load; enabled names are re-read from localStorage every lookup
 
-  async function getProviderNames() {
+  async function getProviderCatalog() {
-    if (providerNames) return providerNames;
+    if (providerCatalog) return providerCatalog;
     try {
       const data = await SR.api.providers();
-      providerNames = SR.config.enabledProviders(data.all || [], data.enabled || []);
+      providerCatalog = { all: data.all || [], enabled: data.enabled || [] };
     } catch (e) {
-      providerNames = null; // unreachable → let /streams use server defaults
+      return { all: [], enabled: [] };
     }
-    return providerNames;
+    return providerCatalog;
+  }
+
+  async function getProviderInfo() {
+    if (SR.config.getProviders()) return SR.config.resolveProviders(null);
+    return SR.config.resolveProviders(await getProviderCatalog());
   }
 
   async function loadStreams() {
-    const query = { tmdb: id, type, providers: await getProviderNames() };
+    const providerInfo = await getProviderInfo();
+    if (!providerInfo.useServerDefaults && providerInfo.names.length === 0) {
+      closeSources();
+      pcQuality.textContent = '';
+      sourceLabel.textContent = '';
+      resumeNote.textContent = '';
+      showStatus('No sources are enabled. Open Settings → Sources and enable at least one provider.', true);
+      return;
+    }
+    const query = {
+      tmdb: id,
+      type,
+      providers: providerInfo.useServerDefaults ? null : providerInfo.names,
+    };
     if (type === 'tv') {
       if (state.season == null || state.episode == null) return;
       query.season = state.season;
@@ -407,11 +428,26 @@
     resumeNote.textContent = '';
     try {
       const data = await SR.api.streams(query);
-      state.streams = data.streams || [];
+      const allStreams = data.streams || [];
+      state.streams = allStreams.filter(SR.util.webPlayable);
+      state.unsupported = allStreams.filter((s) => !SR.util.webPlayable(s));
+      state.providerErrors = data.providerErrors || {};
+      state.loadErrors = data.loadErrors || {};
       renderSources();
       pcGear.hidden = state.streams.length === 0;
       if (state.streams.length) playSource(0);
-      else showStatus('No streams found for this title.', true);
+      else {
+        const failed = Object.keys({ ...state.loadErrors, ...state.providerErrors });
+        const hidden = state.unsupported.length;
+        if (failed.length || hidden) {
+          const parts = ['No web-playable streams found.'];
+          if (failed.length) parts.push(`Provider failures: ${failed.join(', ')}.`);
+          if (hidden) parts.push(`Hidden ${hidden} unsupported source(s).`);
+          showStatus(parts.join(' '), true);
+        } else {
+          showStatus('No streams found for this title.', true);
+        }
+      }
     } catch (e) {
       SR.app.showError(e, 'stream lookup failed');
       showStatus('Stream lookup failed.', true);
@@ -454,8 +490,31 @@
       b.addEventListener('click', () => playSource(i));
       list.appendChild(b);
     }
-    document.getElementById('sourcesCount').textContent =
+    const failures = { ...state.loadErrors, ...state.providerErrors };
-      `${state.streams.length} source${state.streams.length === 1 ? '' : 's'}`;
+    const failed = Object.keys(failures);
+    if (failed.length) {
+      const note = document.createElement('div');
+      note.className = 'player-sources__group player-sources__group--error';
+      note.textContent = `Failed: ${failed.join(', ')}`;
+      note.title = failed.map((name) => `${name}: ${failures[name] || 'no streams'}`).join('\n');
+      list.appendChild(note);
+    }
+    if (state.unsupported.length) {
+      const types = [
+        ...new Set(state.unsupported.map((s) => String(s.type || 'unknown').toLowerCase())),
+      ];
+      const note = document.createElement('div');
+      note.className = 'player-sources__group player-sources__group--error';
+      note.textContent = `Hidden unsupported: ${state.unsupported.length} (${types.join(', ')})`;
+      note.title = state.unsupported
+        .map((s) => `${s.provider || 'Other'}: ${s.name || 'stream'} (${s.type || 'unknown'})`)
+        .join('\n');
+      list.appendChild(note);
+    }
+    const count = `${state.streams.length} source${state.streams.length === 1 ? '' : 's'}`;
+    document.getElementById('sourcesCount').textContent = state.unsupported.length
+      ? `${count} · ${state.unsupported.length} hidden`
+      : count;
   }
 
   function playSource(i) {
@@ -555,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);
     }

web/settings.html

@@ -39,7 +39,7 @@
       <div class="settings__content">
         <section class="settings__card" id="sources">
           <h2>Sources</h2>
-          <p class="settings__hint">Choose which providers to search for streams. Saved in this browser; applies to new lookups.</p>
+          <p class="settings__hint">Choose which providers to search for streams. Saved in this browser; applies from the next stream lookup.</p>
           <div class="settings__actions">
             <button class="btn btn--ghost" id="allOn" type="button">Enable all</button>
             <button class="btn btn--ghost" id="allOff" type="button">Disable all</button>