push

mod/scrape.js

@@ -45,8 +45,9 @@ async function scrapeAll(providers, media, timeoutMs) {
   const seen = new Set();
   const unique = [];
   for (const s of streams) {
-    if (seen.has(s.url)) continue;
+    const key = `${s._provider}|${s.url}|${s.quality || ''}|${s.name || s.title || ''}`;
-    seen.add(s.url);
+    if (seen.has(key)) continue;
+    seen.add(key);
     unique.push(s);
   }
   return { streams: unique, errors };

web/css/components.css

@@ -173,58 +173,6 @@ select.field {
   color: var(--color-accent-text);
 }
 
-/* ---- toggle switch --------------------------------------------------------- */
-
-.switch {
-  position: relative;
-  display: inline-flex;
-  flex: 0 0 auto;
-  cursor: pointer;
-}
-
-.switch input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.switch__track {
-  position: relative;
-  width: 44px;
-  height: 24px;
-  border-radius: var(--radius-full);
-  background: var(--color-surface-2);
-  border: 1px solid var(--color-border-strong);
-  transition: background 140ms ease, border-color 140ms ease;
-}
-
-.switch__thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  border-radius: var(--radius-full);
-  background: var(--color-text-dim);
-  transition: transform 140ms ease, background 140ms ease;
-}
-
-.switch input:checked + .switch__track {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-}
-
-.switch input:checked + .switch__track .switch__thumb {
-  transform: translateX(20px);
-  background: var(--color-accent-text);
-}
-
-.switch input:focus-visible + .switch__track {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-
 /* ---- media cards (poster) --------------------------------------------------- */
 
 .card {
@@ -652,3 +600,141 @@ select.field {
   opacity: 1;
   pointer-events: auto;
 }
+
+/* in-player source switcher (gear popup) */
+.player-sources {
+  position: absolute;
+  right: var(--space-3);
+  bottom: calc(var(--space-4) + 64px);
+  z-index: 7;
+  display: flex;
+  flex-direction: column;
+  width: min(380px, calc(100% - var(--space-6)));
+  max-height: calc(100% - 112px);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: var(--radius-md);
+  background: rgba(10, 10, 10, 0.94);
+  backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-2);
+  overflow: hidden;
+}
+
+.player-sources__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  color: #fff;
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.player-sources__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 auto;
+  border: none;
+  border-radius: var(--radius-full);
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+
+.player-sources__close:hover {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.player-sources__close svg {
+  width: 18px;
+  height: 18px;
+}
+
+.player-sources__list {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
+  padding: var(--space-2);
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong) transparent;
+}
+
+.player-sources__group {
+  padding: var(--space-2) var(--space-3) var(--space-1);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.source-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text);
+  text-align: left;
+  cursor: pointer;
+  font-size: var(--text-sm);
+}
+
+.source-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.source-item--active {
+  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
+}
+
+.source-item__rank {
+  flex: 0 0 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  font-size: var(--text-xs);
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.source-item--active .source-item__rank {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-accent-text);
+}
+
+.source-item__name {
+  font-weight: var(--font-weight-medium);
+}
+
+.source-item__meta {
+  margin-left: auto;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: var(--text-xs);
+  white-space: nowrap;
+}
+
+@media (max-width: 720px) {
+  .player-sources {
+    left: var(--space-3);
+    right: var(--space-3);
+    bottom: calc(var(--space-3) + 64px);
+    width: auto;
+    max-height: calc(100% - 88px);
+  }
+}

web/css/pages.css

@@ -4,34 +4,6 @@
   page-level blocks and handles responsive behavior.
 */
 
-/* ---- home ------------------------------------------------------------------ */
-
-.home-hero {
-  margin: 0 0 var(--space-6);
-  padding: var(--space-5);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background:
-    radial-gradient(80% 120% at 10% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 60%),
-    var(--color-surface);
-}
-
-.home-hero h1 {
-  font-size: var(--text-2xl);
-  letter-spacing: -0.02em;
-}
-
-.home-hero p {
-  margin-top: var(--space-2);
-  max-width: 56ch;
-  color: var(--color-text-dim);
-  font-size: var(--text-sm);
-}
-
-.home-hero .chips {
-  margin-top: var(--space-4);
-}
-
 /* ---- search ------------------------------------------------------------------ */
 
 .search-bar {
@@ -183,7 +155,7 @@
   margin-bottom: var(--space-1);
 }
 
-/* ---- watch: toolbar + sources ---------------------------------------------------- */
+/* ---- watch: toolbar (source popup lives in components.css with the player) ---------- */
 
 .watch-toolbar {
   display: flex;
@@ -204,78 +176,6 @@
   flex: 1;
 }
 
-.sources {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  margin-bottom: var(--space-6);
-  overflow: hidden;
-}
-
-.sources__head {
-  padding: var(--space-3) var(--space-4);
-  border-bottom: 1px solid var(--color-border);
-  font-size: var(--text-sm);
-  font-weight: var(--font-weight-semibold);
-}
-
-.source-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  width: 100%;
-  padding: var(--space-3) var(--space-4);
-  border: none;
-  border-bottom: 1px solid var(--color-border);
-  background: transparent;
-  color: var(--color-text);
-  text-align: left;
-  cursor: pointer;
-  font-size: var(--text-sm);
-}
-
-.source-item:last-child {
-  border-bottom: none;
-}
-
-.source-item:hover {
-  background: var(--color-surface-hover);
-}
-
-.source-item--active {
-  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
-}
-
-.source-item__rank {
-  flex: 0 0 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-full);
-  background: var(--color-surface-2);
-  border: 1px solid var(--color-border);
-  font-size: var(--text-xs);
-  color: var(--color-text-dim);
-}
-
-.source-item--active .source-item__rank {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: var(--color-accent-text);
-}
-
-.source-item__name {
-  font-weight: var(--font-weight-medium);
-}
-
-.source-item__meta {
-  margin-left: auto;
-  color: var(--color-text-faint);
-  font-size: var(--text-xs);
-  white-space: nowrap;
-}
-
 .loading-cell {
   grid-column: 1 / -1;
   display: flex;
@@ -483,6 +383,7 @@
 
 .provider-list {
   display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: var(--space-2);
   margin-top: var(--space-4);
 }
@@ -490,9 +391,8 @@
 .provider {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: var(--space-2);
-  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
-  padding: var(--space-3) var(--space-4);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-surface-2);
@@ -504,14 +404,21 @@
   border-color: var(--color-border-strong);
 }
 
+.provider input[type="checkbox"] {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--color-accent);
+  cursor: pointer;
+}
+
 .provider__name {
   font-size: var(--text-sm);
   font-weight: var(--font-weight-medium);
-}
+  overflow: hidden;
-
+  text-overflow: ellipsis;
-.provider__note {
+  white-space: nowrap;
-  font-size: var(--text-xs);
-  color: var(--color-text-faint);
 }
 
 /* ---- responsive ---------------------------------------------------------------- */
@@ -536,10 +443,6 @@
     font-size: var(--text-2xl);
   }
 
-  .home-hero h1 {
-    font-size: var(--text-xl);
-  }
-
   .search-bar__form {
     flex-direction: column;
   }

web/css/tokens.css

@@ -17,11 +17,11 @@
   --color-text: #f2f2f2;                /* primary text */
   --color-text-dim: #9a9a9a;            /* secondary text */
   --color-text-faint: #5c5c5c;          /* tertiary text */
-  --color-accent: #00e08b;              /* brand / primary action color */
+  --color-accent: #c084fc;              /* brand / primary action color */
-  --color-accent-hover: #33ecab;
+  --color-accent-hover: #d8b4fe;
-  --color-accent-text: #04110a;         /* text on accent buttons */
+  --color-accent-text: #12071f;         /* text on accent buttons */
   --color-danger: #ff6b6b;
-  --color-success: #00e08b;
+  --color-success: #c084fc;
   --color-star: #ffc94d;                /* rating stars */
 
   /* ---- typography ------------------------------------------------------ */

web/index.html

@@ -29,19 +29,6 @@
   </header>
 
   <main class="container page" id="content">
-    <section class="home-hero">
-      <h1>What do you want to watch?</h1>
-      <p>
-        One catalog, many sources. Pick a stream, and if it dies mid-episode,
-        switch source — your place is remembered.
-      </p>
-      <form class="search-bar__form" id="heroForm" role="search">
-        <input class="field search-bar__input" id="heroInput" type="search" placeholder="Search movies and shows…" autocomplete="off">
-        <button class="btn btn--primary" type="submit">Search</button>
-      </form>
-      <div class="chips" id="heroChips"></div>
-    </section>
-
     <div id="sections"></div>
   </main>
 

web/js/home.js

@@ -1,37 +1,13 @@
 /*
-  HOME — hero with search + continue-watching row + trending rows.
+  HOME — continue-watching row + trending rows.
 */
 (function () {
   'use strict';
 
-  // quick-search chips in the hero — edit freely
-  const QUICK_SEARCHES = ['Action', 'Comedy', 'Sci-Fi', 'Drama', 'Horror', 'Animation', 'Crime'];
-
   SR.app.initChrome();
 
   const sections = document.getElementById('sections');
 
-  const form = document.getElementById('heroForm');
-  const input = document.getElementById('heroInput');
-  if (form && input) {
-    form.addEventListener('submit', (e) => {
-      e.preventDefault();
-      const q = input.value.trim();
-      location.href = q ? `search.html?q=${encodeURIComponent(q)}` : 'search.html';
-    });
-  }
-
-  const chips = document.getElementById('heroChips');
-  if (chips) {
-    for (const term of QUICK_SEARCHES) {
-      const a = document.createElement('a');
-      a.className = 'chip';
-      a.href = `search.html?q=${encodeURIComponent(term)}`;
-      a.textContent = term;
-      chips.appendChild(a);
-    }
-  }
-
   const cont = SR.cards.continueRow();
   if (cont) sections.appendChild(cont);
 

web/js/settings.js

@@ -58,19 +58,13 @@
       const checked = overrides ? overrides[name] !== false : serverEnabled.includes(name);
       const label = document.createElement('label');
       label.className = 'provider';
-      const nameEl = document.createElement('span');
-      nameEl.className = 'provider__name';
-      nameEl.textContent = name;
-      const sw = document.createElement('span');
-      sw.className = 'switch';
       const input = document.createElement('input');
       input.type = 'checkbox';
       input.checked = !!checked;
-      const track = document.createElement('span');
+      const nameEl = document.createElement('span');
-      track.className = 'switch__track';
+      nameEl.className = 'provider__name';
-      track.innerHTML = '<span class="switch__thumb"></span>';
+      nameEl.textContent = name;
-      sw.append(input, track);
+      label.append(input, nameEl);
-      label.append(nameEl, sw);
       input.addEventListener('change', () =>
         persist(currentMap(), input.checked ? `${name} enabled` : `${name} disabled`));
       boxes.set(name, input);
@@ -78,7 +72,9 @@
     }
     const on = boxes.size ? Array.from(boxes.values()).filter((b) => b.checked).length : 0;
     const source = overrides ? 'your selection' : 'server defaults';
-    setStatus(providersStatus, `${on} of ${allProviders.length} enabled — ${source}`);
+    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}`);
   }
 
   function resetProviders(message) {

web/js/watch.js

@@ -24,6 +24,7 @@
   const sourceLabel = document.getElementById('sourceLabel');
   const resumeNote = document.getElementById('resumeNote');
   const sourcesPanel = document.getElementById('sourcesPanel');
+  const sourcesClose = document.getElementById('sourcesClose');
   const episodeSection = document.getElementById('episodes');
 
   // custom player controls
@@ -57,7 +58,13 @@
 
   /* ---- status overlay ------------------------------------------------------ */
 
+  function closeSources() {
+    sourcesPanel.hidden = true;
+    pcGear.classList.remove('is-on');
+  }
+
   function showStatus(msg, isError) {
+    closeSources();
     statusEl.hidden = false;
     playerWrap.classList.remove('player-wrap--controls', 'player-wrap--paused');
     statusEl.innerHTML = isError
@@ -151,7 +158,7 @@
     playerWrap.classList.add('player-wrap--controls');
     clearTimeout(hideTimer);
     hideTimer = setTimeout(() => {
-      if (!video.paused && !video.ended && !scrubbing) {
+      if (!video.paused && !video.ended && !scrubbing && sourcesPanel.hidden) {
         playerWrap.classList.remove('player-wrap--controls');
       }
     }, 3000);
@@ -198,7 +205,13 @@
   }
 
   // video events
-  video.addEventListener('click', togglePlay);
+  video.addEventListener('click', () => {
+    if (!sourcesPanel.hidden) {
+      closeSources();
+      return;
+    }
+    togglePlay();
+  });
   video.addEventListener('dblclick', toggleFullscreen);
   video.addEventListener('play', () => {
     syncPlayIcon();
@@ -229,9 +242,15 @@
   });
   pcCc.addEventListener('click', toggleCc);
   pcGear.addEventListener('click', () => {
-    sourcesPanel.hidden = !sourcesPanel.hidden;
+    if (sourcesPanel.hidden) {
-    pcGear.classList.toggle('is-on', !sourcesPanel.hidden);
+      sourcesPanel.hidden = false;
+      pcGear.classList.add('is-on');
+      showControls();
+    } else {
+      closeSources();
+    }
   });
+  sourcesClose.addEventListener('click', closeSources);
   pcPip.addEventListener('click', togglePip);
   pcFull.addEventListener('click', toggleFullscreen);
 
@@ -299,6 +318,9 @@
       case 'c':
         toggleCc();
         break;
+      case 'Escape':
+        if (!sourcesPanel.hidden) closeSources();
+        break;
     }
     if (video.src || video.currentSrc) showControls();
   });
@@ -378,8 +400,7 @@
       query.season = state.season;
       query.episode = state.episode;
     }
-    sourcesPanel.hidden = true;
+    closeSources();
-    pcGear.classList.remove('is-on');
     pcQuality.textContent = '';
     showStatus('Finding streams…');
     sourceLabel.textContent = '';
@@ -397,21 +418,42 @@
     }
   }
 
+  // Sort the popup by provider: provider name is the primary key (A→Z),
+  // original rank is the tie-breaker so order inside a provider is stable.
+  function sortedStreams() {
+    return state.streams
+      .map((s, i) => ({ s, i }))
+      .sort((a, b) => {
+        const pa = String(a.s.provider || '').toLowerCase();
+        const pb = String(b.s.provider || '').toLowerCase();
+        if (pa !== pb) return pa < pb ? -1 : 1;
+        return a.i - b.i;
+      });
+  }
+
   function renderSources() {
     const list = document.getElementById('sourceList');
     list.replaceChildren();
-    state.streams.forEach((s, i) => {
+    let lastProvider = null;
+    for (const { s, i } of sortedStreams()) {
+      if (s.provider !== lastProvider) {
+        lastProvider = s.provider;
+        const h = document.createElement('div');
+        h.className = 'player-sources__group';
+        h.textContent = s.provider || 'Other';
+        list.appendChild(h);
+      }
       const b = document.createElement('button');
       b.type = 'button';
       b.className = i === state.sourceIndex ? 'source-item source-item--active' : 'source-item';
-      const meta = [s.provider, s.quality, s.audio].filter(Boolean).join(' · ');
+      const meta = [s.quality, s.audio].filter(Boolean).join(' · ');
       b.innerHTML = `
         <span class="source-item__rank">${i + 1}</span>
         <span class="source-item__name">${SR.util.escapeHtml(s.name)}</span>
-        <span class="source-item__meta">${SR.util.escapeHtml(meta)}</span>`;
+        ${meta ? `<span class="source-item__meta">${SR.util.escapeHtml(meta)}</span>` : ''}`;
       b.addEventListener('click', () => playSource(i));
       list.appendChild(b);
-    });
+    }
     document.getElementById('sourcesCount').textContent =
       `${state.streams.length} source${state.streams.length === 1 ? '' : 's'}`;
   }
@@ -429,6 +471,7 @@
     })();
     state.sourceIndex = i;
     state.loadedKey = key;
+    closeSources();
     renderSources();
     sourceLabel.textContent = `${s.name} — ${[s.quality, s.provider].filter(Boolean).join(', ')}`;
     pcQuality.textContent = s.quality || '';

web/watch.html

@@ -57,7 +57,7 @@
             <span class="player-controls__spacer"></span>
             <button class="pc-btn pc-btn--text" id="pcCc" type="button" aria-pressed="false" aria-label="Toggle captions">CC</button>
             <span class="pc-quality" id="pcQuality"></span>
-            <button class="pc-btn" id="pcGear" type="button" aria-label="Change source">
+            <button class="pc-btn" id="pcGear" type="button" aria-label="Source settings">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
             </button>
             <button class="pc-btn" id="pcPip" type="button" aria-label="Picture in picture">
@@ -73,6 +73,16 @@
           <div class="spinner"></div>
           <p>Warming up…</p>
         </div>
+
+        <div class="player-sources" id="sourcesPanel" hidden>
+          <div class="player-sources__head">
+            <span>Sources · <span id="sourcesCount"></span></span>
+            <button class="player-sources__close" id="sourcesClose" type="button" aria-label="Close sources">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          </div>
+          <div class="player-sources__list" id="sourceList"></div>
+        </div>
       </div>
 
       <div class="watch-toolbar">
@@ -81,11 +91,6 @@
         <span class="watch-toolbar__spacer"></span>
       </div>
 
-      <div class="sources" id="sourcesPanel" hidden>
-        <div class="sources__head">Sources · <span id="sourcesCount"></span></div>
-        <div id="sourceList"></div>
-      </div>
-
       <section class="episodes" id="episodes" hidden>
         <div class="episodes__toolbar">
           <h2 class="episodes__title">Episodes</h2>