push

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');
-      track.className = 'switch__track';
-      track.innerHTML = '<span class="switch__thumb"></span>';
-      sw.append(input, track);
-      label.append(nameEl, sw);
+      const nameEl = document.createElement('span');
+      nameEl.className = 'provider__name';
+      nameEl.textContent = name;
+      label.append(input, nameEl);
       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;
-    pcGear.classList.toggle('is-on', !sourcesPanel.hidden);
+    if (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;
-    pcGear.classList.remove('is-on');
+    closeSources();
     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 || '';