push

config.json

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

flake.nix

@@ -22,13 +22,13 @@
           };
 
           npmDeps = pkgs.fetchNpmDeps {
-            name = "streamreverse-npm-deps";
+            name = "bug-tv-npm-deps";
             inherit src;
             hash = "sha256-pMxVG+OHiqjz1GHWDhhNOsrhoVPzVJ5kXhiRsP0Rflg=";
           };
         in
         pkgs.stdenvNoCC.mkDerivation {
-          pname = "streamreverse";
+          pname = "bug-tv";
           version = "0.1.0";
 
           inherit src npmDeps;
@@ -111,7 +111,7 @@
                 enable = lib.mkEnableOption "the bug.tv multi-provider stream finder API";
 
                 package = lib.mkOption {
-                  description = "The streamreverse package to run.";
+                  description = "The bug-tv package to run.";
                   type = lib.types.package;
                 };
 

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

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "streamreverse",
+  "name": "bug-tv",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "streamreverse",
+      "name": "bug-tv",
       "version": "0.1.0",
       "dependencies": {
         "cheerio-without-node-native": "^0.20.2",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "streamreverse",
+  "name": "bug-tv",
   "version": "0.1.0",
   "private": true,
   "description": "Multi-provider stream finder with TMDB search and REST API",

rest/openapi.js

@@ -1,5 +1,3 @@
-// OpenAPI 3.0 spec for the streamreverse REST API.
-// Served at GET /api.json and rendered by Swagger UI at GET /.
 
 const spec = {
   openapi: '3.0.3',

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/base.css

@@ -52,6 +52,14 @@ p {
   margin: 0;
 }
 
+code {
+  padding: 1px var(--space-1);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  font-size: 0.9em;
+}
+
 /* ---- page frame ---------------------------------------------------------- */
 
 .container {
@@ -66,6 +74,8 @@ p {
   padding-bottom: var(--space-8);
 }
 
+/* ---- header ---------------------------------------------------------------- */
+
 .site-header {
   position: sticky;
   top: 0;
@@ -77,7 +87,8 @@ p {
 }
 
 .site-header__inner {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: var(--space-4);
   height: var(--header-height);
@@ -94,22 +105,67 @@ p {
 }
 
 .site-header__nav {
+  display: flex;
+  gap: var(--space-1);
+}
+
+.site-header__nav a {
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-full);
   font-size: var(--text-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-dim);
-  padding: var(--space-2) var(--space-3);
+  transition: background 120ms ease, color 120ms ease;
-  border-radius: var(--radius-sm);
 }
 
-.site-header__nav:hover {
+.site-header__nav a:hover {
   color: var(--color-text);
   background: var(--color-surface);
 }
 
-.site-header__spacer {
+.site-header__nav a.is-active {
-  flex: 1;
+  color: var(--color-accent-text);
+  background: var(--color-accent);
 }
 
+.site-header__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-1);
+}
+
+/* ---- icon buttons ----------------------------------------------------------- */
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border: none;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--color-text-dim);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.icon-btn:hover {
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.icon-btn.is-active {
+  color: var(--color-accent);
+}
+
+.icon-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* ---- footer ------------------------------------------------------------------ */
+
 .site-footer {
   border-top: 1px solid var(--color-border);
   padding: var(--space-4) 0 var(--space-5);
@@ -130,3 +186,11 @@ p {
 .site-footer a:hover {
   color: var(--color-text);
 }
+
+/* ---- responsive ---------------------------------------------------------------- */
+
+@media (max-width: 720px) {
+  .site-header__nav a {
+    padding: var(--space-2) var(--space-3);
+  }
+}

web/css/components.css

@@ -3,7 +3,7 @@
   after the thing it styles (BEM-ish: block, block__element, block--modifier).
   Theme values come from tokens.css; never hardcode colors/sizes here if a
   token exists.
-*/
+ */
 
 /* ---- buttons ------------------------------------------------------------- */
 
@@ -12,9 +12,9 @@
   align-items: center;
   justify-content: center;
   gap: var(--space-2);
-  padding: var(--space-2) var(--space-4);
+  padding: var(--space-2) var(--space-5);
   border: 1px solid var(--color-border-strong);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-full);
   background: var(--color-surface-2);
   color: var(--color-text);
   font-size: var(--text-sm);
@@ -22,7 +22,7 @@
   line-height: 1.3;
   cursor: pointer;
   user-select: none;
-  transition: background 120ms ease, border-color 120ms ease;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
 }
 
 .btn:hover {
@@ -97,7 +97,7 @@
 
 select.field {
   appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2398a2b0' stroke-width='2'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239a9a9a' stroke-width='2'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 12px center;
   padding-right: 32px;
@@ -135,7 +135,7 @@ select.field {
 .tag {
   display: inline-block;
   padding: 2px var(--space-2);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-full);
   background: var(--color-surface-2);
   border: 1px solid var(--color-border);
   font-size: var(--text-xs);
@@ -151,7 +151,7 @@ select.field {
 }
 
 .chip {
-  padding: var(--space-1) var(--space-3);
+  padding: var(--space-1) var(--space-4);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-full);
   background: transparent;
@@ -168,9 +168,9 @@ select.field {
 }
 
 .chip--active {
-  background: var(--color-surface);
+  background: var(--color-accent);
   border-color: var(--color-accent);
-  color: var(--color-text);
+  color: var(--color-accent-text);
 }
 
 /* ---- media cards (poster) --------------------------------------------------- */
@@ -184,23 +184,29 @@ select.field {
 
 .card__poster {
   position: relative;
+  display: block;
   aspect-ratio: var(--poster-aspect);
   border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
-  transition: border-color 120ms ease, transform 120ms ease;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
 }
 
 .card:hover .card__poster {
-  border-color: var(--color-border-strong);
+  border-color: var(--color-accent);
-  transform: translateY(-2px);
+  box-shadow: 0 0 0 1px var(--color-accent);
 }
 
 .card__poster img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  transition: transform 220ms ease;
+}
+
+.card:hover .card__poster img {
+  transform: scale(1.04);
 }
 
 .card__poster--empty {
@@ -224,20 +230,44 @@ 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-dim);
+  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;
   right: 0;
   bottom: 0;
-  height: 3px;
+  height: 4px;
-  background: rgba(255, 255, 255, 0.15);
+  background: rgba(0, 0, 0, 0.6);
 }
 
 .card__progress i {
@@ -301,62 +331,6 @@ select.field {
   width: auto;
 }
 
-/* ---- modal ----------------------------------------------------------------- */
-
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-4);
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-}
-
-.modal {
-  width: 100%;
-  max-width: 460px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-surface);
-  box-shadow: var(--shadow-2);
-}
-
-.modal__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  padding: var(--space-4) var(--space-5);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.modal__title {
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-semibold);
-}
-
-.modal__body {
-  padding: var(--space-5);
-  display: grid;
-  gap: var(--space-4);
-}
-
-.modal__hint {
-  font-size: var(--text-xs);
-  color: var(--color-text-faint);
-}
-
-.modal__actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--space-2);
-  padding: var(--space-4) var(--space-5);
-  border-top: 1px solid var(--color-border);
-}
-
 /* ---- toast ----------------------------------------------------------------- */
 
 .toast {
@@ -366,9 +340,9 @@ select.field {
   z-index: 110;
   transform: translateX(-50%);
   max-width: min(90vw, 480px);
-  padding: var(--space-2) var(--space-4);
+  padding: var(--space-2) var(--space-5);
   border: 1px solid var(--color-border-strong);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-full);
   background: var(--color-surface);
   box-shadow: var(--shadow-2);
   font-size: var(--text-sm);
@@ -419,3 +393,377 @@ select.field {
   color: var(--color-text-dim);
   margin-bottom: var(--space-2);
 }
+
+/* ---- player controls --------------------------------------------------------- */
+
+.player-wrap {
+  --pc-progress: 0%;
+  position: relative;
+  aspect-ratio: var(--player-aspect);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: #000;
+  border: 1px solid var(--color-border);
+  cursor: default;
+}
+
+.player-wrap video {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: #000;
+}
+
+/* top-left back button */
+.player-back {
+  position: absolute;
+  top: var(--space-3);
+  left: var(--space-3);
+  z-index: 5;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  border-radius: var(--radius-full);
+  background: rgba(0, 0, 0, 0.45);
+  color: #fff;
+  backdrop-filter: blur(6px);
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 160ms ease, transform 160ms ease, background 120ms ease;
+}
+
+.player-back:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.player-back svg {
+  width: 22px;
+  height: 22px;
+}
+
+/* centered big play (shown when paused) */
+.player-bigplay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 4;
+  transform: translate(-50%, -50%);
+  width: 76px;
+  height: 76px;
+  border: none;
+  border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--color-accent) 90%, transparent);
+  color: var(--color-accent-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: var(--shadow-2);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.player-bigplay:hover {
+  transform: translate(-50%, -50%) scale(1.05);
+}
+
+.player-bigplay svg {
+  width: 34px;
+  height: 34px;
+  margin-left: 4px;
+}
+
+/* bottom controls bar */
+.player-controls {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 6;
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-4) var(--space-4) var(--space-3);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.player-controls__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.player-controls__spacer {
+  flex: 1;
+}
+
+.pc-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  flex: 0 0 auto;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: #fff;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+
+.pc-btn:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.pc-btn:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.pc-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.pc-btn--text {
+  width: auto;
+  padding: 0 var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.04em;
+}
+
+.pc-btn.is-on {
+  color: var(--color-accent);
+}
+
+.pc-time {
+  flex: 0 0 auto;
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+  color: rgba(255, 255, 255, 0.85);
+  white-space: nowrap;
+}
+
+.pc-quality {
+  flex: 0 0 auto;
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-accent);
+  white-space: nowrap;
+}
+
+/* range inputs (seek + volume) */
+.pc-seek,
+.pc-vol {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(
+    to right,
+    var(--color-accent) var(--pc-progress),
+    rgba(255, 255, 255, 0.28) var(--pc-progress)
+  );
+  cursor: pointer;
+}
+
+.pc-seek {
+  width: 100%;
+  margin-bottom: var(--space-2);
+}
+
+.pc-vol {
+  width: 72px;
+  flex: 0 0 auto;
+}
+
+.pc-seek::-webkit-slider-thumb,
+.pc-vol::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  border: none;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
+}
+
+.pc-seek::-moz-range-thumb,
+.pc-vol::-moz-range-thumb {
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  border: none;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
+}
+
+/* show back + controls when hovered or flagged */
+.player-wrap:hover .player-controls,
+.player-wrap:hover .player-back,
+.player-wrap--controls .player-controls,
+.player-wrap--controls .player-back {
+  opacity: 1;
+  transform: none;
+}
+
+.player-wrap:hover .player-bigplay,
+.player-wrap--controls .player-bigplay {
+  /* big play only when paused — handled by .player-wrap--paused below */
+}
+
+.player-wrap--paused .player-bigplay {
+  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);
+}
+
+.player-sources__group--error {
+  color: var(--color-danger);
+  cursor: help;
+}
+
+.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/tokens.css

@@ -8,20 +8,20 @@
 
 :root {
   /* ---- palette (retheme here) ----------------------------------------- */
-  --color-bg: #0b0d10;                  /* page background */
+  --color-bg: #0a0a0a;                  /* page background */
-  --color-surface: #14171c;             /* cards, panels */
+  --color-surface: #141414;             /* cards, panels */
-  --color-surface-hover: #1c2129;       /* hover state for surfaces */
+  --color-surface-hover: #1d1d1d;       /* hover state for surfaces */
-  --color-surface-2: #191d24;           /* inputs, alt surfaces */
+  --color-surface-2: #1a1a1a;           /* inputs, alt surfaces */
-  --color-border: #262c35;              /* default borders */
+  --color-border: #262626;              /* default borders */
-  --color-border-strong: #39424f;       /* visible borders / hover borders */
+  --color-border-strong: #3a3a3a;       /* visible borders / hover borders */
-  --color-text: #eceff3;                /* primary text */
+  --color-text: #f2f2f2;                /* primary text */
-  --color-text-dim: #98a2b0;            /* secondary text */
+  --color-text-dim: #9a9a9a;            /* secondary text */
-  --color-text-faint: #5f6b7a;          /* tertiary text */
+  --color-text-faint: #5c5c5c;          /* tertiary text */
-  --color-accent: #4f8cff;              /* brand / primary action color */
+  --color-accent: #c084fc;              /* brand / primary action color */
-  --color-accent-hover: #6ea1ff;
+  --color-accent-hover: #d8b4fe;
-  --color-accent-text: #ffffff;         /* text on accent buttons */
+  --color-accent-text: #12071f;         /* text on accent buttons */
   --color-danger: #ff6b6b;
-  --color-success: #46c98f;
+  --color-success: #c084fc;
   --color-star: #ffc94d;                /* rating stars */
 
   /* ---- typography ------------------------------------------------------ */
@@ -51,12 +51,12 @@
   --space-8: 64px;
 
   /* ---- shape ------------------------------------------------------------- */
-  --radius-sm: 6px;
+  --radius-sm: 8px;
-  --radius-md: 10px;
+  --radius-md: 12px;
-  --radius-lg: 14px;
+  --radius-lg: 16px;
   --radius-full: 999px;
-  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
+  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.45);
-  --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.5);
+  --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.6);
 
   /* ---- layout ------------------------------------------------------------ */
   --container-max: 1280px;

web/index.html

@@ -9,64 +9,39 @@
   <link rel="stylesheet" href="css/components.css">
   <link rel="stylesheet" href="css/pages.css">
 </head>
-<body>
+<body class="home-page">
   <header class="site-header">
     <div class="container site-header__inner">
       <a class="brand" href="index.html">bug<span>.tv</span></a>
-      <a class="site-header__nav" href="index.html">Home</a>
+      <nav class="site-header__nav" aria-label="Primary">
-      <a class="site-header__nav" href="search.html">Search</a>
+
-      <span class="site-header__spacer"></span>
+      </nav>
-      <button class="btn btn--ghost btn--sm" id="settingsBtn" type="button">Settings</button>
+      <div class="site-header__actions">
+        <a class="icon-btn" href="search.html" aria-label="Search" title="Search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+        </a>
+        <a class="icon-btn" href="settings.html" aria-label="Settings" title="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>
+        </a>
+      </div>
     </div>
   </header>
 
-  <main class="container page" id="content">
+  <main class="page" id="content">
-    <section class="home-hero">
+    <div id="heroSlot"></div>
-      <h1>What do you want to watch?</h1>
+    <div class="container">
-      <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>
+    </div>
   </main>
 
   <footer class="site-footer">
     <div class="container">
-      <span>bug.tv</span>
+      <span>tv.bug.tools</span>
-      <span>API: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
+      <span>api: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
+      <span>tv.bug.tools doesn't store files, but provides links to external services.</span>
     </div>
   </footer>
 
-  <div class="modal-overlay" id="settingsModal" hidden>
-    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
-      <div class="modal__head">
-        <h2 class="modal__title" id="settingsTitle">Settings</h2>
-        <button class="btn btn--ghost btn--sm" id="settingsClose" type="button">Close</button>
-      </div>
-      <div class="modal__body">
-        <div>
-          <label class="field-label" for="apiBaseInput">API base URL</label>
-          <input class="field" id="apiBaseInput" type="url" placeholder="https://…">
-          <p class="modal__hint">
-            All requests go to this API. You can also override it for one session
-            by adding <code>?api=https://…</code> to any page URL.
-          </p>
-        </div>
-      </div>
-      <div class="modal__actions">
-        <button class="btn" id="apiBaseReset" type="button">Reset to default</button>
-        <button class="btn btn--primary" id="apiBaseSave" type="button">Save</button>
-      </div>
-    </div>
-  </div>
-
   <script src="js/util.js"></script>
   <script src="js/config.js"></script>
   <script src="js/api.js"></script>

web/js/api.js

@@ -1,7 +1,21 @@
+/*
+  API — two upstreams:
+    1. the bug-tv REST server (SR.config.getBase()): provider catalog,
+       /streams lookup, and the /proxy/media tunnel the player needs (CORS,
+       headers, m3u8 rewrite).
+    2. TMDB, called straight from the browser (it is CORS-enabled): search,
+       trending, details, seasons, episodes. Each returns the same shape the
+       server's endpoints used to, so the pages are unchanged.
 
+  Keeping catalog traffic off the server means it only does provider scraping
+  and stream proxying.
+*/
 (function () {
   'use strict';
 
+  const TMDB_BASE = 'https://api.themoviedb.org/3';
+  const TMDB_IMG = 'https://image.tmdb.org/t/p/';
+
   async function request(path, params) {
     const url = new URL(SR.config.getBase() + path);
     if (params) {
@@ -28,6 +42,38 @@
     return data;
   }
 
+  // Direct TMDB call. `key` overrides the configured key (Settings "Test").
+  async function tmdb(pathname, params, key) {
+    const url = new URL(TMDB_BASE + pathname);
+    url.searchParams.set('api_key', key || SR.config.getTmdbKey());
+    url.searchParams.set('language', 'en-US');
+    if (params) {
+      for (const [k, v] of Object.entries(params)) {
+        if (v === undefined || v === null || v === '') continue;
+        url.searchParams.set(k, String(v));
+      }
+    }
+    let res;
+    try {
+      res = await fetch(url.toString());
+    } catch (e) {
+      throw new Error('cannot reach the TMDB API — check your connection or the TMDB API key in Settings');
+    }
+    let data = null;
+    try {
+      data = await res.json();
+    } catch (e) {
+      /* non-JSON body */
+    }
+    if (!res.ok) {
+      if (res.status === 401) {
+        throw new Error('TMDB rejected the API key — check "TMDB API key" in Settings');
+      }
+      throw new Error((data && (data.status_message || data.error)) || `TMDB error: HTTP ${res.status}`);
+    }
+    return data;
+  }
+
   // route a media/subtitle URL through the API proxy (CORS, headers, m3u8 rewrite)
   function proxyUrl(target, headers) {
     const q = new URLSearchParams();
@@ -36,15 +82,95 @@
     return SR.config.getBase() + '/proxy/media?' + q.toString();
   }
 
+  // Same shapes the server endpoints used to return.
+  function searchResult(m) {
+    const isTv = m.media_type === 'tv';
+    const date = isTv ? m.first_air_date : m.release_date;
+    return {
+      tmdb_id: m.id,
+      type: isTv ? 'tv' : 'movie',
+      name: m.title || m.name,
+      year: date ? String(date).slice(0, 4) : '',
+      poster: m.poster_path ? `${TMDB_IMG}w342${m.poster_path}` : '',
+      backdrop: m.backdrop_path ? `${TMDB_IMG}w1280${m.backdrop_path}` : '',
+      rating: m.vote_average ? Number(m.vote_average).toFixed(1) : '',
+      overview: m.overview || '',
+    };
+  }
+
+  function fullImage(pathname) {
+    return pathname ? `${TMDB_IMG}original${pathname}` : '';
+  }
+
   window.SR = window.SR || {};
   SR.api = {
     request,
+    tmdb,
     proxyUrl,
-    search: (q) => request('/search', { q }),
+
-    trending: (type, timeWindow) => request('/trending', { type, window: timeWindow }),
+    // — TMDB, straight from the browser —
-    details: (type, id) => request(`/${type}/${id}`),
+    search: (q) =>
-    seasons: (id) => request(`/tv/${id}/seasons`),
+      tmdb('/search/multi', { query: q, include_adult: 'false', page: 1 }).then((r) => {
-    episodes: (id, season) => request(`/tv/${id}/seasons/${season}`),
+        const results = (r.results || [])
-    streams: ({ tmdb, type, season, episode }) => request('/streams', { tmdb, type, season, episode }),
+          .filter((m) => m.media_type === 'movie' || m.media_type === 'tv')
+          .slice(0, 15)
+          .map(searchResult);
+        return { query: q, count: results.length, results };
+      }),
+    trending: (type, timeWindow) => {
+      const t = ['movie', 'tv', 'all'].includes(type) ? type : 'all';
+      const w = timeWindow === 'day' ? 'day' : 'week';
+      return tmdb(`/trending/${t}/${w}`).then((r) => {
+        const results = (r.results || []).slice(0, 20).map(searchResult);
+        return { type: t, window: w, count: results.length, results };
+      });
+    },
+    details: (type, id) =>
+      tmdb(`/${type}/${id}`, { append_to_response: 'images' }).then((d) => {
+        d.poster_url = fullImage(d.poster_path);
+        d.backdrop_url = fullImage(d.backdrop_path);
+        if (d.images) {
+          for (const key of Object.keys(d.images)) {
+            d.images[key] = (d.images[key] || []).map((im) => ({ ...im, url: fullImage(im.file_path) }));
+          }
+        }
+        return d;
+      }),
+    seasons: (id) =>
+      tmdb(`/tv/${id}`).then((r) => {
+        const seasons = (r.seasons || [])
+          .filter((s) => s.season_number > 0 && (s.episode_count || 0) > 0)
+          .map((s) => ({
+            season_number: s.season_number,
+            name: s.name,
+            episode_count: s.episode_count,
+            air_date: s.air_date || '',
+          }));
+        return { tmdb_id: id, count: seasons.length, seasons };
+      }),
+    episodes: (id, season) =>
+      tmdb(`/tv/${id}/season/${season}`).then((r) => {
+        const episodes = (r.episodes || [])
+          .slice()
+          .sort((a, b) => a.episode_number - b.episode_number)
+          .map((e) => ({
+            episode_number: e.episode_number,
+            name: e.name,
+            air_date: e.air_date || '',
+            still: e.still_path ? `${TMDB_IMG}w300${e.still_path}` : '',
+          }));
+        return { tmdb_id: id, season: parseInt(season, 10), count: episodes.length, episodes };
+      }),
+
+    // — bug-tv server (providers, streams, proxy) —
+    streams: ({ tmdb, type, season, episode, providers }) =>
+      request('/streams', {
+        tmdb,
+        type,
+        season,
+        episode,
+        providers: Array.isArray(providers) && providers.length ? providers.join(',') : '',
+      }),
+    providers: () => request('/providers'),
   };
 })();

web/js/app.js

@@ -1,49 +1,11 @@
 /*
-  APP — shared chrome for every page: settings dialog, footer API label,
+  APP — shared chrome for every page: footer API label, toast notifications.
-  toast notifications.
+  (Settings moved to its own page: settings.html)
 */
 (function () {
   'use strict';
 
   function initChrome() {
-    const modal = document.getElementById('settingsModal');
-    const openBtn = document.getElementById('settingsBtn');
-    const input = document.getElementById('apiBaseInput');
-
-    if (openBtn && modal && input) {
-      const close = () => {
-        modal.hidden = true;
-      };
-      openBtn.addEventListener('click', () => {
-        input.value = SR.config.getBase();
-        modal.hidden = false;
-        input.focus();
-        input.select();
-      });
-      const closeBtn = document.getElementById('settingsClose');
-      if (closeBtn) closeBtn.addEventListener('click', close);
-      modal.addEventListener('click', (e) => {
-        if (e.target === modal) close();
-      });
-      document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && !modal.hidden) close();
-      });
-      const saveBtn = document.getElementById('apiBaseSave');
-      if (saveBtn) {
-        saveBtn.addEventListener('click', () => {
-          SR.config.setBase(input.value);
-          location.reload();
-        });
-      }
-      const resetBtn = document.getElementById('apiBaseReset');
-      if (resetBtn) {
-        resetBtn.addEventListener('click', () => {
-          SR.config.clearBase();
-          location.reload();
-        });
-      }
-    }
-
     const label = document.getElementById('apiBaseLabel');
     if (label) {
       const base = SR.config.getBase();

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,18 @@
         : item.type === 'tv'
           ? 'TV'
           : 'Movie');
+    const metaHtml = item.metaHtml || `<span class="card__meta__text">${esc(meta)}</span>`;
+    const title = item.hideTitle
+      ? ''
+      : `<span class="card__title">${esc(item.name)}</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>
+      ${title}
-      <span class="card__meta">${esc(meta)}</span>`;
+      <span class="card__meta">${metaHtml}</span>`;
+    if (item.hideTitle) el.setAttribute('aria-label', `${item.name} — ${meta}`);
     return el;
   }
 
@@ -94,15 +101,149 @@
       episode: r.episode,
       name: r.show || r.title || '',
       poster: r.poster || '',
+      hideTitle: true,
       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" style="height: 1px;">·</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">
+            <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

@@ -1,14 +1,30 @@
 /*
-  CONFIG — where the API lives. Resolution order:
+  CONFIG — where the API lives + which providers to query.
+
+  API base resolution order:
     1. ?api=<url> query param on any page (session override)
-    2. localStorage (saved from the Settings dialog)
+    2. localStorage (saved from Settings)
     3. built-in default
+
+  Providers: until the user toggles anything in Settings, the server's own
+  enabled list is used. Once customized, a {name: bool} map is stored in
+  localStorage; names missing from the map default to enabled.
+
+  TMDB key: search/trending/details/images go straight to TMDB from the
+  browser (the server only serves providers, streams and the media proxy).
+  The key resolves from localStorage (Settings) or the built-in default.
 */
 (function () {
   'use strict';
 
-  const DEFAULT_BASE = 'https://bug-api-test.tuns.sh';
+  const DEFAULT_BASE = 'https://api-tv.bug.tools';
-  const STORAGE_KEY = 'streamreverse.apiBase.v1';
+  const STORAGE_KEY = 'bug-tv.apiBase.v1';
+  const PROVIDER_KEY = 'bug-tv.providers.v1';
+
+  // Search/details/images go straight to TMDB from the browser; this key
+  // only ever reaches api.themoviedb.org.
+  const DEFAULT_TMDB_KEY = 'ac014b130a8e6344c91dff4e68b18d47';
+  const TMDB_KEY_STORAGE_KEY = 'bug-tv.tmdbKey.v1';
 
   function normalize(value) {
     let v = String(value || '').trim();
@@ -47,6 +63,120 @@
     }
   }
 
+  function getTmdbKey() {
+    try {
+      const stored = localStorage.getItem(TMDB_KEY_STORAGE_KEY);
+      if (stored) return stored.trim();
+    } catch (e) {
+      /* private mode etc. */
+    }
+    return DEFAULT_TMDB_KEY;
+  }
+
+  function setTmdbKey(value) {
+    const v = String(value || '').trim();
+    try {
+      localStorage.setItem(TMDB_KEY_STORAGE_KEY, v);
+    } catch (e) {
+      /* ignore */
+    }
+    return v;
+  }
+
+  function clearTmdbKey() {
+    try {
+      localStorage.removeItem(TMDB_KEY_STORAGE_KEY);
+    } catch (e) {
+      /* ignore */
+    }
+  }
+
+  // null → user has not customized; caller should fall back to server defaults
+  function getProviders() {
+    try {
+      const raw = localStorage.getItem(PROVIDER_KEY);
+      if (!raw) return null;
+      const parsed = JSON.parse(raw);
+      return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : null;
+    } catch (e) {
+      return null;
+    }
+  }
+
+  function setProviders(map) {
+    try {
+      localStorage.setItem(PROVIDER_KEY, JSON.stringify(map));
+    } catch (e) {
+      /* ignore */
+    }
+  }
+
+  function clearProviders() {
+    try {
+      localStorage.removeItem(PROVIDER_KEY);
+    } catch (e) {
+      /* ignore */
+    }
+  }
+
+  const PREFERRED_PROVIDERS = ['cineby', 'playimdb', 'vidrock'];
+
+  // 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) {
+      return Object.keys(overrides).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 || {};
-  SR.config = { DEFAULT_BASE, STORAGE_KEY, getBase, setBase, clearBase };
+  SR.config = {
+    DEFAULT_BASE,
+    STORAGE_KEY,
+    PROVIDER_KEY,
+    DEFAULT_TMDB_KEY,
+    TMDB_KEY_STORAGE_KEY,
+    getBase,
+    setBase,
+    clearBase,
+    getTmdbKey,
+    setTmdbKey,
+    clearTmdbKey,
+    getProviders,
+    setProviders,
+    clearProviders,
+    enabledProviders,
+    resolveProviders,
+  };
 })();

web/js/home.js

@@ -1,37 +1,14 @@
 /*
-  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 heroSlot = document.getElementById('heroSlot');
   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);
 
@@ -40,16 +17,63 @@
     sections.appendChild(SR.cards.row(title, data.results.map(SR.cards.normalizeItem)));
   }
 
-  (async () => {
+  function itemsFrom(data) {
-    try {
+    return data && Array.isArray(data.results) ? data.results.map(SR.cards.normalizeItem) : [];
-      appendRow(await SR.api.trending('movie', 'day'), 'Trending movies today');
-    } catch (e) {
-      SR.app.showError(e, 'could not load trending movies');
   }
+
+  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'),
+      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('tv', 'week'), 'Trending shows this week');
+      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);
+        loadHeroLogos(hero, heroData);
+      }
     } catch (e) {
-      SR.app.showError(e, 'could not load trending shows');
+      SR.app.showError(e, 'could not load featured titles');
     }
   })();
 })();

web/js/player.js

@@ -89,7 +89,9 @@
 
     function load(stream, opts = {}) {
       const st = capture();
-      if (typeof opts.resumeAt === 'number' && opts.resumeAt > 10) st.time = opts.resumeAt;
+      const explicitResume = typeof opts.resumeAt === 'number' && opts.resumeAt > 10;
+      if (typeof opts.resumeAt === 'number') st.time = Math.max(0, opts.resumeAt);
+      const readyAt = () => (explicitResume ? st.time : 0);
 
       teardown();
       networkRetry = false;
@@ -126,7 +128,7 @@
         h.attachMedia(video);
         h.on(Hls.Events.MANIFEST_PARSED, guarded(() => {
           restore(st);
-          onReady(st.time > 10 ? st.time : 0);
+          onReady(readyAt());
         }));
         h.on(Hls.Events.ERROR, (evt, data) => {
           if (myToken !== token || !data.fatal) return;
@@ -155,7 +157,7 @@
         'loadedmetadata',
         guarded(() => {
           restore(st);
-          onReady(st.time > 10 ? st.time : 0);
+          onReady(readyAt());
         }),
         { once: true }
       );

web/js/settings.js

@@ -0,0 +1,187 @@
+/*
+  SETTINGS — source provider toggles, API server base URL, TMDB key, local data.
+*/
+(function () {
+  'use strict';
+
+  SR.app.initChrome();
+
+  const providerList = document.getElementById('providerList');
+  const providersStatus = document.getElementById('providersStatus');
+  const apiBaseInput = document.getElementById('apiBaseInput');
+  const connStatus = document.getElementById('connStatus');
+  const tmdbKeyInput = document.getElementById('tmdbKeyInput');
+  const tmdbStatus = document.getElementById('tmdbStatus');
+  const dataStatus = document.getElementById('dataStatus');
+
+  /* ---- nav --------------------------------------------------------------------- */
+
+  const navlinks = Array.from(document.querySelectorAll('.settings__navlink'));
+  navlinks.forEach((link) => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const target = document.querySelector(link.getAttribute('href'));
+      if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      navlinks.forEach((l) => l.classList.toggle('is-active', l === link));
+      history.replaceState(null, '', link.getAttribute('href'));
+    });
+  });
+
+  /* ---- sources ------------------------------------------------------------------- */
+
+  let allProviders = [];
+  let serverEnabled = [];
+  const boxes = new Map(); // provider name -> checkbox
+
+  function setStatus(el, message, kind) {
+    el.textContent = message || '';
+    el.className =
+      kind === 'ok' ? 'settings__status settings__status--ok'
+      : kind === 'err' ? 'settings__status settings__status--err'
+      : 'settings__status';
+  }
+
+  function currentMap() {
+    const map = {};
+    for (const [name, box] of boxes) map[name] = box.checked;
+    return map;
+  }
+
+  function persist(map, message) {
+    SR.config.setProviders(map);
+    if (message) setStatus(providersStatus, message);
+  }
+
+  function renderProviders() {
+    providerList.replaceChildren();
+    boxes.clear();
+    const overrides = SR.config.getProviders();
+    const enabled = SR.config.enabledProviders(allProviders, serverEnabled);
+    for (const name of allProviders) {
+      const checked = enabled.includes(name);
+      const label = document.createElement('label');
+      label.className = 'provider';
+      const input = document.createElement('input');
+      input.type = 'checkbox';
+      input.checked = !!checked;
+      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);
+      providerList.appendChild(label);
+    }
+    const on = boxes.size ? Array.from(boxes.values()).filter((b) => b.checked).length : 0;
+    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}`);
+  }
+
+  function resetProviders(message) {
+    SR.config.clearProviders();
+    renderProviders();
+    if (message) setStatus(providersStatus, message);
+  }
+
+  document.getElementById('allOn').addEventListener('click', () => {
+    if (!boxes.size) return;
+    for (const box of boxes.values()) box.checked = true;
+    persist(currentMap(), 'All sources enabled');
+  });
+
+  document.getElementById('allOff').addEventListener('click', () => {
+    if (!boxes.size) return;
+    for (const box of boxes.values()) box.checked = false;
+    persist(currentMap(), 'All sources disabled');
+  });
+
+  document.getElementById('providersReset').addEventListener('click', () =>
+    resetProviders('Using default sources'));
+
+  async function initSources() {
+    try {
+      const data = await SR.api.providers();
+      allProviders = data.all || [];
+      serverEnabled = data.enabled || [];
+      renderProviders();
+    } catch (e) {
+      setStatus(providersStatus, `Could not load the provider list: ${e.message}`, 'err');
+    }
+  }
+
+  /* ---- server ----------------------------------------------------------------------- */
+
+  apiBaseInput.value = SR.config.getBase();
+
+  async function testConnection() {
+    try {
+      const data = await SR.api.providers();
+      setStatus(connStatus, `Connected — ${data.all ? data.all.length : 0} provider(s) known.`, 'ok');
+      return true;
+    } catch (e) {
+      setStatus(connStatus, `Not reachable: ${e.message}`, 'err');
+      return false;
+    }
+  }
+
+  document.getElementById('apiBaseSave').addEventListener('click', async () => {
+    SR.config.setBase(apiBaseInput.value);
+    apiBaseInput.value = SR.config.getBase();
+    SR.app.initChrome(); // refresh the footer label
+    if (await testConnection()) SR.app.toast('API base URL saved');
+  });
+
+  document.getElementById('apiBaseReset').addEventListener('click', async () => {
+    SR.config.clearBase();
+    apiBaseInput.value = SR.config.getBase();
+    SR.app.initChrome();
+    await testConnection();
+  });
+
+  /* ---- TMDB key ------------------------------------------------------------------- */
+
+  tmdbKeyInput.value = SR.config.getTmdbKey();
+
+  async function testTmdbKey(key) {
+    setStatus(tmdbStatus, 'Testing TMDB key…');
+    try {
+      await SR.api.tmdb('/search/movie', { query: 'The Matrix', page: 1 }, key);
+      setStatus(tmdbStatus, 'TMDB key works — search, details and images load directly from TMDB.', 'ok');
+    } catch (e) {
+      setStatus(tmdbStatus, e.message, 'err');
+    }
+  }
+
+  document.getElementById('tmdbKeySave').addEventListener('click', async () => {
+    SR.config.setTmdbKey(tmdbKeyInput.value);
+    tmdbKeyInput.value = SR.config.getTmdbKey();
+    await testTmdbKey(SR.config.getTmdbKey());
+  });
+
+  document.getElementById('tmdbKeyTest').addEventListener('click', async () => {
+    await testTmdbKey(tmdbKeyInput.value.trim());
+  });
+
+  document.getElementById('tmdbKeyReset').addEventListener('click', async () => {
+    SR.config.clearTmdbKey();
+    tmdbKeyInput.value = SR.config.getTmdbKey();
+    await testTmdbKey(SR.config.getTmdbKey());
+  });
+
+  /* ---- data ---------------------------------------------------------------------------- */
+
+  document.getElementById('clearHistory').addEventListener('click', () => {
+    SR.storage.clear();
+    setStatus(dataStatus, 'Continue-watching history cleared.');
+  });
+
+  document.getElementById('resetProviders').addEventListener('click', () => {
+    resetProviders('');
+    setStatus(dataStatus, 'Source toggles reset to default sources.');
+  });
+
+  initSources();
+})();

web/js/storage.js

@@ -24,7 +24,7 @@
 (function () {
   'use strict';
 
-  const KEY = 'streamreverse.resume.v1';
+  const KEY = 'bug-tv.resume.v1';
   const MAX_RECORDS = 200;
 
   function readAll() {
@@ -68,6 +68,10 @@
     }
   }
 
+  function clear() {
+    writeAll({});
+  }
+
   function list() {
     return Object.values(readAll());
   }
@@ -83,5 +87,5 @@
   }
 
   window.SR = window.SR || {};
-  SR.storage = { KEY, keyFor, get, save, remove, list, latestPerShow };
+  SR.storage = { KEY, keyFor, get, save, remove, clear, list, latestPerShow };
 })();

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

@@ -19,32 +19,72 @@
     return;
   }
 
+  const heroEl = document.getElementById('hero');
+  const heroBackdrop = document.getElementById('heroBackdrop');
+  const heroTitleCard = document.getElementById('heroTitleCard');
+  const heroTitle = document.getElementById('heroTitle');
+  const heroMeta = document.getElementById('heroMeta');
+  const heroGenres = document.getElementById('heroGenres');
+  const heroOverview = document.getElementById('heroOverview');
+  const playButton = document.getElementById('playButton');
+  const playLabel = document.getElementById('playLabel');
+  const episodeSection = document.getElementById('episodeSection');
+  const seasonTabs = document.getElementById('seasonTabs');
+  const episodeShelf = document.getElementById('episodeShelf');
+  const playerOverlay = document.getElementById('playerOverlay');
+  const playerClose = document.getElementById('playerClose');
+
+  // custom player controls
   const video = document.getElementById('video');
   const statusEl = document.getElementById('playerStatus');
   const sourceLabel = document.getElementById('sourceLabel');
   const resumeNote = document.getElementById('resumeNote');
   const sourcesPanel = document.getElementById('sourcesPanel');
-  const changeSourceBtn = document.getElementById('changeSourceBtn');
+  const sourcesClose = document.getElementById('sourcesClose');
-  const episodeSection = document.getElementById('episodes');
+
-  const seasonSelect = document.getElementById('seasonSelect');
+  const playerWrap = document.getElementById('playerWrap');
-  const episodeGrid = document.getElementById('episodeGrid');
+  const bigPlay = document.getElementById('bigPlay');
-  const prevBtn = document.getElementById('prevEpisode');
+  const pcSeek = document.getElementById('pcSeek');
-  const nextBtn = document.getElementById('nextEpisode');
+  const pcPlay = document.getElementById('pcPlay');
+  const pcMute = document.getElementById('pcMute');
+  const pcVol = document.getElementById('pcVol');
+  const pcTime = document.getElementById('pcTime');
+  const pcCc = document.getElementById('pcCc');
+  const pcQuality = document.getElementById('pcQuality');
+  const pcGear = document.getElementById('pcGear');
+  const pcPip = document.getElementById('pcPip');
+  const pcFull = document.getElementById('pcFull');
 
   const state = {
     details: null,
     seasons: [],
     episodes: [],
     streams: [],
+    unsupported: [],
+    providerErrors: {},
+    loadErrors: {},
     sourceIndex: -1,
     season: null,
     episode: null,
+    loadedKey: null,
+    loadToken: 0,
+    overlayOpen: false,
+    lastFocusedElement: null,
+    pendingClose: false,
   };
 
+
   /* ---- 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
       ? `<h3>Playback problem</h3><p>${SR.util.escapeHtml(msg)}</p>`
       : `<div class="spinner"></div><p>${SR.util.escapeHtml(msg)}</p>`;
@@ -52,6 +92,7 @@
 
   function hideStatus() {
     statusEl.hidden = true;
+    syncPaused();
   }
 
   /* ---- player --------------------------------------------------------------- */
@@ -68,37 +109,369 @@
     },
   });
 
+  /* ---- custom player controls -------------------------------------------------- */
+
+  const ICON_PLAY =
+    '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>';
+  const ICON_PAUSE =
+    '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6 4h4v16H6zm8 0h4v16h-4z"></path></svg>';
+  const ICON_VOL =
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path><path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path></svg>';
+  const ICON_VOL_X =
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>';
+
+  let hideTimer = null;
+  let scrubbing = false;
+
+  function paintProgress(el, ratio) {
+    const pct = Math.max(0, Math.min(1, ratio)) * 100;
+    el.style.setProperty('--pc-progress', pct + '%');
+  }
+
+  function timeLabel() {
+    const d = video.duration;
+    const ds = d && isFinite(d) ? SR.util.formatSeconds(d) : '0:00';
+    return `${SR.util.formatSeconds(video.currentTime)} / ${ds}`;
+  }
+
+  function syncPlayIcon() {
+    const playing = !video.paused && !video.ended;
+    pcPlay.innerHTML = playing ? ICON_PAUSE : ICON_PLAY;
+    pcPlay.setAttribute('aria-label', playing ? 'Pause' : 'Play');
+  }
+
+  function syncVolIcon() {
+    const muted = video.muted || video.volume === 0;
+    pcMute.innerHTML = muted ? ICON_VOL_X : ICON_VOL;
+    pcMute.setAttribute('aria-label', muted ? 'Unmute' : 'Mute');
+    pcMute.classList.toggle('is-on', muted);
+    pcVol.value = String(video.muted ? 0 : video.volume);
+    paintProgress(pcVol, video.muted ? 0 : video.volume);
+  }
+
+  function syncTimeUI() {
+    if (scrubbing) return;
+    const d = video.duration;
+    if (d && isFinite(d) && d > 0) {
+      pcSeek.value = String(Math.round((video.currentTime / d) * 1000));
+      paintProgress(pcSeek, video.currentTime / d);
+    }
+    pcTime.textContent = timeLabel();
+  }
+
+  function syncPaused() {
+    playerWrap.classList.toggle('player-wrap--paused', video.paused);
+  }
+
+  function togglePlay() {
+    if (!video.src && !video.currentSrc) return;
+    if (video.paused || video.ended) {
+      video.play().catch(() => {});
+    } else {
+      video.pause();
+    }
+  }
+
+  function showControls() {
+    playerWrap.classList.add('player-wrap--controls');
+    clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => {
+      if (!video.paused && !video.ended && !scrubbing && sourcesPanel.hidden) {
+        playerWrap.classList.remove('player-wrap--controls');
+      }
+    }, 3000);
+  }
+
+  function toggleFullscreen() {
+    const el = playerWrap;
+    const doc = document;
+    if (doc.fullscreenElement || doc.webkitFullscreenElement) {
+      (doc.exitFullscreen || doc.webkitExitFullscreen).call(doc);
+    } else {
+      (el.requestFullscreen || el.webkitRequestFullscreen).call(el);
+    }
+  }
+
+  function togglePip() {
+    if (!document.pictureInPictureEnabled) {
+      SR.app.toast('Picture-in-picture is not supported in this browser', true);
+      return;
+    }
+    if (document.pictureInPictureElement) {
+      document.exitPictureInPicture().catch(() => {});
+    } else {
+      video.requestPictureInPicture().catch(() => {});
+    }
+  }
+
+  function toggleCc() {
+    const tracks = video.textTracks;
+    let target = null;
+    for (let i = 0; i < tracks.length; i++) {
+      if (tracks[i].kind === 'subtitles') {
+        target = tracks[i];
+        break;
+      }
+    }
+    if (!target) {
+      SR.app.toast('This source has no subtitles', true);
+      return;
+    }
+    target.mode = target.mode === 'showing' ? 'hidden' : 'showing';
+    pcCc.classList.toggle('is-on', target.mode === 'showing');
+    pcCc.setAttribute('aria-pressed', String(target.mode === 'showing'));
+  }
+
+  // video events
+  video.addEventListener('click', () => {
+    if (!sourcesPanel.hidden) {
+      closeSources();
+      return;
+    }
+    togglePlay();
+  });
+  video.addEventListener('dblclick', toggleFullscreen);
+  video.addEventListener('play', () => {
+    syncPlayIcon();
+    syncPaused();
+    showControls();
+  });
+  video.addEventListener('pause', () => {
+    syncPlayIcon();
+    syncPaused();
+    showControls();
+  });
+  video.addEventListener('loadedmetadata', () => {
+    syncPlayIcon();
+    syncPaused();
+    syncTimeUI();
+  });
+  video.addEventListener('timeupdate', syncTimeUI);
+  video.addEventListener('volumechange', syncVolIcon);
+
+  // buttons
+  bigPlay.addEventListener('click', (e) => {
+    e.stopPropagation();
+    togglePlay();
+  });
+  pcPlay.addEventListener('click', togglePlay);
+  pcMute.addEventListener('click', () => {
+    video.muted = !video.muted;
+  });
+  pcCc.addEventListener('click', toggleCc);
+  pcGear.addEventListener('click', () => {
+    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);
+
+  // seek + volume scrubbing
+  pcSeek.addEventListener('pointerdown', () => {
+    scrubbing = true;
+    showControls();
+  });
+  pcSeek.addEventListener('input', () => {
+    const d = video.duration;
+    if (d && isFinite(d) && d > 0) {
+      paintProgress(pcSeek, pcSeek.value / 1000);
+      pcTime.textContent = `${SR.util.formatSeconds((pcSeek.value / 1000) * d)} / ${SR.util.formatSeconds(d)}`;
+    }
+  });
+  pcSeek.addEventListener('change', () => {
+    const d = video.duration;
+    if (d && isFinite(d) && d > 0) {
+      video.currentTime = (pcSeek.value / 1000) * d;
+    }
+    scrubbing = false;
+    syncTimeUI();
+  });
+  pcVol.addEventListener('input', () => {
+    video.volume = Number(pcVol.value);
+    video.muted = video.volume === 0;
+  });
+
+  // reveal controls on hover/interaction
+  playerWrap.addEventListener('pointermove', showControls);
+  playerWrap.addEventListener('pointerdown', showControls);
+
+  // keyboard shortcuts
+  document.addEventListener('keydown', (e) => {
+    const tag = (e.target.tagName || '').toLowerCase();
+    if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
+    const d = video.duration;
+    switch (e.key) {
+      case ' ':
+      case 'k':
+        e.preventDefault();
+        togglePlay();
+        break;
+      case 'ArrowRight':
+        if (d && isFinite(d)) video.currentTime = Math.min(d, video.currentTime + 10);
+        break;
+      case 'ArrowLeft':
+        if (d && isFinite(d)) video.currentTime = Math.max(0, video.currentTime - 10);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        video.volume = Math.min(1, video.volume + 0.05);
+        video.muted = false;
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        video.volume = Math.max(0, video.volume - 0.05);
+        break;
+      case 'm':
+        video.muted = !video.muted;
+        break;
+      case 'f':
+        toggleFullscreen();
+        break;
+      case 'c':
+        toggleCc();
+        break;
+      case 'Escape':
+        if (!sourcesPanel.hidden) closeSources();
+        else if (state.overlayOpen) {
+          if (document.fullscreenElement) {
+            state.pendingClose = true;
+            document.exitFullscreen().catch(() => {});
+          } else {
+            closePlayer();
+          }
+        }
+        break;
+
+    }
+    if (video.src || video.currentSrc) showControls();
+  });
+
+  // initial icon state
+  syncPlayIcon();
+  syncVolIcon();
+
   /* ---- hero ------------------------------------------------------------------ */
 
+  function openPlayer() {
+    if (state.overlayOpen) return;
+    state.overlayOpen = true;
+    state.lastFocusedElement = document.activeElement;
+    playerOverlay.hidden = false;
+    document.body.classList.add('player-open');
+    playerClose.focus();
+  }
+
+  function closePlayer() {
+    if (!state.overlayOpen) return;
+    state.overlayOpen = false;
+    state.pendingClose = false;
+    video.pause();
+    playerOverlay.hidden = true;
+    document.body.classList.remove('player-open');
+    if (state.lastFocusedElement && typeof state.lastFocusedElement.focus === 'function') {
+      state.lastFocusedElement.focus();
+    }
+  }
+
+  document.addEventListener('fullscreenchange', () => {
+    if (!document.fullscreenElement && state.pendingClose && state.overlayOpen) closePlayer();
+  });
+
+  function syncHeader() {
+    document.body.classList.toggle('is-scrolled', window.scrollY > 8);
+  }
+  window.addEventListener('scroll', syncHeader, { passive: true });
+  syncHeader();
+
+  function setPlayLabel() {
+    if (type === 'tv' && state.season != null && state.episode != null) {
+      playLabel.textContent = `Play S${state.season} E${state.episode}`;
+    } else {
+      playLabel.textContent = 'Play';
+    }
+  }
+
   function renderHero(d) {
     document.title = `${d.name || d.title} — bug.tv`;
     const isTv = type === 'tv';
     const year = String((isTv ? d.first_air_date : d.release_date) || '').slice(0, 4);
-    const facts = [
+    const facts = [];
-      isTv ? `${d.number_of_seasons || 0} seasons` : SR.util.runtimeLabel(d.runtime),
+    if (isTv) {
-      year,
+      if (d.number_of_seasons) {
-    ]
+        facts.push(`${d.number_of_seasons} season${d.number_of_seasons === 1 ? '' : 's'}`);
-      .filter(Boolean)
-      .map(SR.util.escapeHtml)
-      .join('<span>·</span>');
-    const rating = d.vote_average
-      ? `<span class="watch-hero__rating">★ ${Number(d.vote_average).toFixed(1)}</span>`
-      : '';
-    const genres = (d.genres || [])
-      .map((g) => `<span class="tag">${SR.util.escapeHtml(g.name)}</span>`)
-      .join('');
-    const poster = SR.util.tmdbResize(d.poster_url, 'w500');
-    const backdrop = SR.util.tmdbResize(d.backdrop_url, 'w1280');
-    document.getElementById('hero').innerHTML = `
-      ${backdrop ? `<div class="watch-hero__backdrop"><img src="${backdrop}" alt=""></div>` : ''}
-      ${poster ? `<div class="watch-hero__poster"><img src="${poster}" alt=""></div>` : ''}
-      <div class="watch-hero__body">
-        <h1 class="watch-hero__title">${SR.util.escapeHtml(d.name || d.title)}</h1>
-        <div class="watch-hero__facts">${rating}${rating && facts ? '<span>·</span>' : ''}${facts}</div>
-        ${genres ? `<div class="watch-hero__genres">${genres}</div>` : ''}
-        ${d.overview ? `<p class="watch-hero__overview">${SR.util.escapeHtml(d.overview)}</p>` : ''}
-      </div>`;
       }
+    } else {
+      const runtime = SR.util.runtimeLabel(d.runtime);
+      if (runtime) facts.push(runtime);
+    }
+    if (year) facts.push(year);
+
+    const vote = Number(d.vote_average || 0);
+    const filled = Math.max(0, Math.min(5, Math.round(vote / 2)));
+    const rating = vote
+      ? `<span class="watch-hero__rating" role="img" aria-label="${vote.toFixed(1)} out of 10">${'★'.repeat(filled)}${'☆'.repeat(5 - filled)} ${vote.toFixed(1)}</span>`
+      : '';
+
+    const title = d.name || d.title || '';
+    heroTitle.textContent = title;
+    heroMeta.innerHTML = [rating, ...facts.map((fact) => `<span>${SR.util.escapeHtml(fact)}</span>`)]
+      .filter(Boolean)
+      .join('<span class="watch-hero__dot" aria-hidden="true">·</span>');
+
+    heroGenres.replaceChildren();
+    for (const genre of d.genres || []) {
+      const tag = document.createElement('span');
+      tag.className = 'tag';
+      tag.textContent = genre.name;
+      heroGenres.appendChild(tag);
+    }
+
+    heroOverview.textContent = d.overview || '';
+    heroOverview.hidden = !d.overview;
+
+    const images = d.images || {};
+    const backdrop = d.backdrop_url || (images.backdrops && images.backdrops[0] && images.backdrops[0].url);
+    heroBackdrop.style.backgroundImage = backdrop
+      ? `url("${SR.util.escapeHtml(SR.util.tmdbResize(backdrop, 'w1280'))}")`
+      : '';
+
+    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');
+      heroTitleCard.hidden = false;
+      heroTitle.hidden = true;
+      heroTitleCard.onerror = () => {
+        heroTitleCard.hidden = true;
+        heroTitle.hidden = false;
+      };
+    } else {
+      heroTitleCard.hidden = true;
+      heroTitle.hidden = false;
+    }
+
+    playButton.hidden = false;
+    setPlayLabel();
+  }
+
+  function renderHeroError(message) {
+    heroTitle.textContent = 'Unavailable';
+    heroTitle.hidden = false;
+    heroMeta.textContent = message;
+    heroOverview.textContent = '';
+    heroBackdrop.style.backgroundImage = '';
+    heroTitleCard.hidden = true;
+    playButton.hidden = true;
+    episodeSection.hidden = true;
+  }
+
 
   /* ---- url -------------------------------------------------------------------- */
 
@@ -119,65 +492,170 @@
     return SR.storage.keyFor({ type, tmdbId: Number(id), season: state.season, episode: state.episode });
   }
 
+  let providerCatalog = null; // cached per page load; enabled names are re-read from localStorage every lookup
+
+  async function getProviderCatalog() {
+    if (providerCatalog) return providerCatalog;
+    try {
+      const data = await SR.api.providers();
+      providerCatalog = { all: data.all || [], enabled: data.enabled || [] };
+    } catch (e) {
+      return { all: [], enabled: [] };
+    }
+    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 };
+    const token = ++state.loadToken;
+    const providerInfo = await getProviderInfo();
+    if (token !== state.loadToken) return;
+
+    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;
       query.episode = state.episode;
     }
-    sourcesPanel.hidden = true;
+
-    changeSourceBtn.textContent = 'Change source';
+    closeSources();
+    pcQuality.textContent = '';
     showStatus('Finding streams…');
     sourceLabel.textContent = '';
     resumeNote.textContent = '';
+
     try {
       const data = await SR.api.streams(query);
-      state.streams = data.streams || [];
+      if (token !== state.loadToken) return;
+
+      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();
-      changeSourceBtn.hidden = state.streams.length === 0;
+      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) {
+      if (token !== state.loadToken) return;
       SR.app.showError(e, 'stream lookup failed');
       showStatus('Stream lookup failed.', true);
     }
   }
 
+
+  // 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 =
+    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) {
     const s = state.streams[i];
     if (!s) return;
+    const key = keyFor();
+    // Same episode as the one currently loaded → source switch: carry the
+    // playhead over (resumeAt: null). A different episode → fresh resume:
+    // pick up its own saved record, or start from the top.
+    const resumeAt = state.loadedKey === key ? null : (() => {
+      const rec = SR.storage.get(key);
+      return rec && rec.t > 10 ? rec.t : 0;
+    })();
     state.sourceIndex = i;
+    state.loadedKey = key;
+    closeSources();
     renderSources();
     sourceLabel.textContent = `${s.name} — ${[s.quality, s.provider].filter(Boolean).join(', ')}`;
-    const rec = SR.storage.get(keyFor());
+    pcQuality.textContent = s.quality || '';
-    player.load(s, { resumeAt: rec && rec.t > 10 ? rec.t : null });
+    player.load(s, { resumeAt });
   }
 
-  changeSourceBtn.addEventListener('click', () => {
-    sourcesPanel.hidden = !sourcesPanel;
-    changeSourceBtn.textContent = sourcesPanel.hidden ? 'Change source' : 'Hide sources';
-  });
-
   /* ---- resume persistence ---------------------------------------------------------- */
 
   let lastPersist = 0;
@@ -225,100 +703,133 @@
 
   async function loadSeasons() {
     const data = await SR.api.seasons(id);
-    state.seasons = data.seasons || [];
+    state.seasons = (data.seasons || []).slice().sort((a, b) => a.season_number - b.season_number);
+    renderSeasonTabs();
+  }
+
+  function renderSeasonTabs() {
+    seasonTabs.replaceChildren();
     for (const s of state.seasons) {
-      const opt = document.createElement('option');
+      const b = document.createElement('button');
-      opt.value = s.season_number;
+      b.type = 'button';
-      opt.textContent = `${s.name} (${s.episode_count})`;
+      b.role = 'tab';
-      seasonSelect.appendChild(opt);
+      b.className = s.season_number === state.season ? 'chip chip--active' : 'chip';
+      b.textContent = `Season ${s.season_number}`;
+      b.title = `${s.name || `Season ${s.season_number}`} (${s.episode_count || 0})`;
+      b.addEventListener('click', () => {
+        if (s.season_number !== state.season) loadEpisodes(s.season_number, null);
+      });
+      seasonTabs.appendChild(b);
     }
   }
 
-  function showGridSpinner() {
+  function showShelfSpinner() {
-    episodeGrid.replaceChildren();
+    episodeShelf.replaceChildren();
     const cell = document.createElement('div');
-    cell.className = 'loading-cell';
+    cell.className = 'episode-shelf__loading';
     cell.innerHTML = '<div class="spinner"></div>';
-    episodeGrid.appendChild(cell);
+    episodeShelf.appendChild(cell);
+  }
+
+  function progressFor(season, episode) {
+    const key = SR.storage.keyFor({ type, tmdbId: Number(id), season, episode });
+    const rec = SR.storage.get(key);
+    if (!rec || !rec.t || !rec.d) return 0;
+    return Math.max(0, Math.min(1, rec.t / rec.d));
   }
 
   function renderEpisodes() {
-    episodeGrid.replaceChildren();
+    episodeShelf.replaceChildren();
     if (!state.episodes.length) {
       const empty = SR.cards.emptyState('No episodes listed');
-      empty.style.gridColumn = '1 / -1';
+      empty.className = `${empty.className} episode-shelf__empty`;
-      episodeGrid.appendChild(empty);
+      episodeShelf.appendChild(empty);
       return;
     }
+
     for (const ep of state.episodes) {
+      const current = ep.episode_number === state.episode;
       const b = document.createElement('button');
       b.type = 'button';
-      b.className = ep.episode_number === state.episode ? 'episode episode--current' : 'episode';
+      b.className = current ? 'episode-card episode-card--current' : 'episode-card';
       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') : '');
+      const progress = progressFor(state.season, ep.episode_number);
+
       b.innerHTML = `
-        <span class="episode__thumb"><span class="episode__play">▶</span></span>
+        <span class="episode-card__thumb${still ? '' : ' episode-card__thumb--empty'}">
-        <span class="episode__body">
+          ${still ? `<img src="${still}" alt="" loading="lazy">` : `<span aria-hidden="true">${ep.episode_number}</span>`}
-          <span class="episode__num">S${state.season} · E${ep.episode_number}${date}</span>
+          ${progress > 0 ? `<span class="episode-card__progress" style="width:${Math.round(progress * 100)}%"></span>` : ''}
-          <span class="episode__title">${SR.util.escapeHtml(ep.name || `Episode ${ep.episode_number}`)}</span>
+        </span>
+        <span class="episode-card__body">
+          <span class="episode-card__num">S${state.season} · E${ep.episode_number}${date}</span>
+          <span class="episode-card__title">${SR.util.escapeHtml(ep.name || `Episode ${ep.episode_number}`)}</span>
+          <span class="episode-card__meta">${SR.util.escapeHtml(SR.util.runtimeLabel(ep.runtime) || '')}</span>
         </span>`;
+
+      const img = b.querySelector('.episode-card__thumb img');
+      if (img) {
+        img.addEventListener('error', () => {
+          const thumb = img.closest('.episode-card__thumb');
+          img.remove();
+          thumb.classList.add('episode-card__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);
+      episodeShelf.appendChild(b);
     }
   }
 
   async function loadEpisodes(season, autoplayEpisode) {
+    const token = ++state.loadToken;
     state.season = season;
-    seasonSelect.value = String(season);
+    state.episode = autoplayEpisode != null ? autoplayEpisode : null;
-    showGridSpinner();
+    renderSeasonTabs();
+    showShelfSpinner();
+
     const data = await SR.api.episodes(id, season);
+    if (token !== state.loadToken) return;
+
     state.episodes = data.episodes || [];
+    if (autoplayEpisode != null && state.episodes.some((e) => e.episode_number === autoplayEpisode)) {
+      playEpisode(autoplayEpisode);
+      return;
+    }
+    state.episode = state.episodes.length ? state.episodes[0].episode_number : null;
     renderEpisodes();
     syncUrl();
-    if (autoplayEpisode && state.episodes.some((e) => e.episode_number === autoplayEpisode)) {
+    setPlayLabel();
-      playEpisode(autoplayEpisode);
-    }
   }
 
   function playEpisode(n) {
     state.episode = n;
     syncUrl();
     renderEpisodes();
+    setPlayLabel();
+    openPlayer();
     loadStreams();
-    document.getElementById('playerSection').scrollIntoView({ behavior: 'smooth', block: 'start' });
   }
 
-  seasonSelect.addEventListener('change', async () => {
+  playButton.addEventListener('click', () => {
-    const season = parseInt(seasonSelect.value, 10);
+    if (type === 'tv' && state.episode == null) {
-    if (!season) return;
+      if (state.episodes.length) playEpisode(state.episodes[0].episode_number);
-    try {
-      await loadEpisodes(season);
-    } catch (e) {
-      SR.app.showError(e, 'failed to load episodes');
-    }
-  });
-
-  async function stepEpisode(delta) {
-    if (type !== 'tv') return;
-    const idx = state.episodes.findIndex((e) => e.episode_number === state.episode);
-    if (idx >= 0 && idx + delta >= 0 && idx + delta < state.episodes.length) {
-      playEpisode(state.episodes[idx + delta].episode_number);
       return;
     }
-    const sIdx = state.seasons.findIndex((s) => s.season_number === state.season);
+    if (state.loadedKey === keyFor() && state.streams.length) {
-    if (sIdx < 0 || sIdx + delta < 0 || sIdx + delta >= state.seasons.length) return;
+      openPlayer();
-    try {
+      video.play().catch(() => {});
-      await loadEpisodes(state.seasons[sIdx + delta].season_number);
+      return;
-      const first = state.episodes[0];
-      if (first) playEpisode(first.episode_number);
-    } catch (e) {
-      SR.app.showError(e, 'failed to load episodes');
-    }
     }
+    openPlayer();
+    loadStreams();
+  });
 
-  prevBtn.addEventListener('click', () => stepEpisode(-1));
+  playerClose.addEventListener('click', closePlayer);
-  nextBtn.addEventListener('click', () => stepEpisode(1));
-
-  /* ---- init ------------------------------------------------------------------------------ */
 
   (async function init() {
     let details;
@@ -326,41 +837,54 @@
       details = await SR.api.details(type, id);
     } catch (e) {
       SR.app.showError(e, 'failed to load this title');
-      showStatus('Could not load this title.', true);
+      renderHeroError('Could not load this title.');
       return;
     }
+
     state.details = details;
     renderHero(details);
 
     if (type !== 'tv') {
-      loadStreams();
+      setPlayLabel();
       return;
     }
 
     episodeSection.hidden = false;
-    showStatus('Pick an episode to start.');
+    showStatus('Loading episodes…');
 
     try {
       await loadSeasons();
     } catch (e) {
       SR.app.showError(e, 'failed to load seasons');
+      renderHeroError('Could not load seasons.');
       return;
     }
+
     if (!state.seasons.length) {
-      showStatus('No seasons found for this show.', true);
+      renderHeroError('No seasons found for this show.');
       return;
     }
 
     const sParam = parseInt(params.get('s'), 10);
     const eParam = parseInt(params.get('e'), 10);
-    const season = state.seasons.some((s) => s.season_number === sParam)
+    const hasSeason = (n) => state.seasons.some((s) => s.season_number === n);
-      ? sParam
+    const season = hasSeason(sParam) ? sParam : hasSeason(1) ? 1 : state.seasons[0].season_number;
-      : state.seasons[0].season_number;
+
     try {
-      await loadEpisodes(season, eParam || null);
+      await loadEpisodes(season, null);
     } catch (e) {
       SR.app.showError(e, 'failed to load episodes');
-      showStatus('Failed to load episodes.', true);
+      renderHeroError('Could not load episodes.');
+      return;
+    }
+
+    if (!state.episodes.length) {
+      renderHeroError('No episodes found for this show.');
+      return;
+    }
+
+    if (season === sParam && state.episodes.some((e) => e.episode_number === eParam)) {
+      playEpisode(eParam);
     }
   })();
 })();

web/search.html

@@ -13,10 +13,17 @@
   <header class="site-header">
     <div class="container site-header__inner">
       <a class="brand" href="index.html">bug<span>.tv</span></a>
-      <a class="site-header__nav" href="index.html">Home</a>
+      <nav class="site-header__nav" aria-label="Primary">
-      <a class="site-header__nav" href="search.html">Search</a>
+
-      <span class="site-header__spacer"></span>
+      </nav>
-      <button class="btn btn--ghost btn--sm" id="settingsBtn" type="button">Settings</button>
+      <div class="site-header__actions">
+        <a class="icon-btn is-active" href="search.html" aria-label="Search" title="Search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+        </a>
+        <a class="icon-btn" href="settings.html" aria-label="Settings" title="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>
+        </a>
+      </div>
     </div>
   </header>
 
@@ -37,34 +44,12 @@
 
   <footer class="site-footer">
     <div class="container">
-      <span>bug.tv</span>
+      <span>tv.bug.tools</span>
-      <span>API: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
+      <span>api: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
+      <span>tv.bug.tools doesn't store files, but provides links to external services.</span>
     </div>
   </footer>
 
-  <div class="modal-overlay" id="settingsModal" hidden>
-    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
-      <div class="modal__head">
-        <h2 class="modal__title" id="settingsTitle">Settings</h2>
-        <button class="btn btn--ghost btn--sm" id="settingsClose" type="button">Close</button>
-      </div>
-      <div class="modal__body">
-        <div>
-          <label class="field-label" for="apiBaseInput">API base URL</label>
-          <input class="field" id="apiBaseInput" type="url" placeholder="https://…">
-          <p class="modal__hint">
-            All requests go to this API. You can also override it for one session
-            by adding <code>?api=https://…</code> to any page URL.
-          </p>
-        </div>
-      </div>
-      <div class="modal__actions">
-        <button class="btn" id="apiBaseReset" type="button">Reset to default</button>
-        <button class="btn btn--primary" id="apiBaseSave" type="button">Save</button>
-      </div>
-    </div>
-  </div>
-
   <script src="js/util.js"></script>
   <script src="js/config.js"></script>
   <script src="js/api.js"></script>

web/settings.html

@@ -0,0 +1,101 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>bug.tv — settings</title>
+  <link rel="stylesheet" href="css/tokens.css">
+  <link rel="stylesheet" href="css/base.css">
+  <link rel="stylesheet" href="css/components.css">
+  <link rel="stylesheet" href="css/pages.css">
+</head>
+<body>
+  <header class="site-header">
+    <div class="container site-header__inner">
+      <a class="brand" href="index.html">bug<span>.tv</span></a>
+      <nav class="site-header__nav" aria-label="Primary">
+
+      </nav>
+      <div class="site-header__actions">
+        <a class="icon-btn" href="search.html" aria-label="Search" title="Search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+        </a>
+        <a class="icon-btn is-active" href="settings.html" aria-label="Settings" title="Settings" aria-current="page">
+          <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>
+        </a>
+      </div>
+    </div>
+  </header>
+
+  <main class="page container">
+    <div class="settings">
+      <nav class="settings__nav" aria-label="Settings sections">
+        <a class="settings__navlink is-active" href="#sources">Sources</a>
+        <a class="settings__navlink" href="#server">Server</a>
+        <a class="settings__navlink" href="#data">Data</a>
+      </nav>
+
+      <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 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>
+            <button class="btn btn--ghost" id="providersReset" type="button">Server defaults</button>
+          </div>
+          <p class="settings__status" id="providersStatus"></p>
+          <div class="provider-list" id="providerList"></div>
+        </section>
+
+        <section class="settings__card" id="server">
+          <h2>Server</h2>
+          <p class="settings__hint">The REST API that bug.tv uses for providers, stream lookups and the media proxy. Change this only if you run your own instance.</p>
+          <label class="field-label" for="apiBaseInput">API base URL</label>
+          <input class="field" id="apiBaseInput" type="text" spellcheck="false" autocomplete="off" placeholder="https://api-tv.bug.tools">
+          <div class="settings__actions">
+            <button class="btn btn--primary" id="apiBaseSave" type="button">Save</button>
+            <button class="btn btn--ghost" id="apiBaseReset" type="button">Reset to default</button>
+          </div>
+          <p class="settings__status" id="connStatus"></p>
+          <p class="settings__hint">Search, details and images go straight to TMDB from your browser, using the key below — your server is not involved.</p>
+          <label class="field-label" for="tmdbKeyInput">TMDB API key</label>
+          <input class="field" id="tmdbKeyInput" type="text" spellcheck="false" autocomplete="off" placeholder="32-character TMDB API key">
+          <div class="settings__actions">
+            <button class="btn btn--primary" id="tmdbKeySave" type="button">Save</button>
+            <button class="btn btn--ghost" id="tmdbKeyTest" type="button">Test</button>
+            <button class="btn btn--ghost" id="tmdbKeyReset" type="button">Reset to default</button>
+          </div>
+          <p class="settings__status" id="tmdbStatus"></p>
+        </section>
+
+        <section class="settings__card" id="data">
+          <h2>Data</h2>
+          <p class="settings__hint">Everything bug.tv stores lives in this browser — no accounts, nothing on a server.</p>
+          <div class="settings__actions">
+            <button class="btn btn--ghost" id="clearHistory" type="button">Clear continue-watching</button>
+            <button class="btn btn--ghost" id="resetProviders" type="button">Reset source toggles</button>
+          </div>
+          <p class="settings__status" id="dataStatus"></p>
+        </section>
+      </div>
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container">
+      <span>tv.bug.tools</span>
+      <span>api: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
+      <span>tv.bug.tools doesn't store files, but provides links to external services.</span>
+    </div>
+  </footer>
+
+  <script src="js/util.js"></script>
+  <script src="js/config.js"></script>
+  <script src="js/api.js"></script>
+  <script src="js/storage.js"></script>
+  <script src="js/cards.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/settings.js"></script>
+</body>
+</html>

web/watch.html

@@ -9,26 +9,101 @@
   <link rel="stylesheet" href="css/components.css">
   <link rel="stylesheet" href="css/pages.css">
 </head>
-<body>
+<body class="watch-page">
   <header class="site-header">
     <div class="container site-header__inner">
       <a class="brand" href="index.html">bug<span>.tv</span></a>
-      <a class="site-header__nav" href="index.html">Home</a>
+      <nav class="site-header__nav" aria-label="Primary">
-      <a class="site-header__nav" href="search.html">Search</a>
+
-      <span class="site-header__spacer"></span>
+      </nav>
-      <button class="btn btn--ghost btn--sm" id="settingsBtn" type="button">Settings</button>
+      <div class="site-header__actions">
+        <a class="icon-btn" href="search.html" aria-label="Search" title="Search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+        </a>
+        <a class="icon-btn" href="settings.html" aria-label="Settings" title="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>
+        </a>
+      </div>
     </div>
   </header>
 
-  <main class="container page" id="content">
+  <main class="page page--watch" id="content">
-    <section class="watch-hero" id="hero" aria-busy="true"></section>
+  <section id="hero" class="watch-hero" aria-labelledby="heroTitle">
+    <div id="heroBackdrop" class="watch-hero__backdrop" aria-hidden="true"></div>
+    <div class="watch-hero__scrim" aria-hidden="true"></div>
+    <div class="watch-hero__inner">
+      <img id="heroTitleCard" class="watch-hero__logo" hidden alt="">
+      <h1 id="heroTitle" class="watch-hero__title">Loading…</h1>
+      <div id="heroMeta" class="watch-hero__meta"></div>
+      <div id="heroGenres" class="watch-hero__genres"></div>
+      <p id="heroOverview" class="watch-hero__overview"></p>
+      <div class="watch-hero__actions">
+        <button id="playButton" class="btn btn--primary" type="button">
+            <span id="playLabel">Play</span>
+        </button>
+      </div>
+    </div>
+  </section>
 
-    <section id="playerSection">
+  <section id="episodeSection" class="watch-episodes" hidden>
-      <div class="player-wrap">
+    <div class="container">
-        <video id="video" controls playsinline></video>
+      <h2 class="watch-episodes__title">Episodes</h2>
-        <div class="player-status" id="playerStatus">
+      <div id="seasonTabs" class="season-tabs" role="tablist" aria-label="Seasons"></div>
+      <div id="episodeShelf" class="episode-shelf" role="list"></div>
+    </div>
+  </section>
+</main>
+
+<div id="playerOverlay" class="player-overlay" hidden>
+  <button id="playerClose" class="icon-btn player-overlay__close" type="button" aria-label="Close player">
+    <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 class="player-wrap" id="playerWrap">
+        <video id="video" playsinline preload="metadata"></video>
+
+        <button class="player-bigplay" id="bigPlay" type="button" aria-label="Play">
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
+        </button>
+
+        <div class="player-controls" id="playerControls">
+          <input class="pc-seek" id="pcSeek" type="range" min="0" max="1000" step="1" value="0" aria-label="Seek position">
+          <div class="player-controls__bar">
+            <button class="pc-btn" id="pcPlay" type="button" aria-label="Play or pause">
+              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
+            </button>
+            <button class="pc-btn" id="pcMute" type="button" aria-label="Mute or unmute">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path><path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path></svg>
+            </button>
+            <input class="pc-vol" id="pcVol" type="range" min="0" max="1" step="0.05" value="1" aria-label="Volume">
+            <span class="pc-time" id="pcTime">0:00 / 0:00</span>
+            <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="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">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="14" rx="2"></rect><rect x="12" y="9" width="7" height="5" rx="1" fill="currentColor" stroke="none"></rect></svg>
+            </button>
+            <button class="pc-btn" id="pcFull" type="button" aria-label="Toggle fullscreen">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
+            </button>
+          </div>
+        </div>
+
+        <div class="player-status" id="playerStatus" hidden>
           <div class="spinner"></div>
-          <p>Getting ready…</p>
+          <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>
 
@@ -36,56 +111,17 @@
         <span class="watch-toolbar__source" id="sourceLabel"></span>
         <span id="resumeNote"></span>
         <span class="watch-toolbar__spacer"></span>
-        <button class="btn btn--sm" id="changeSourceBtn" type="button" hidden>Change source</button>
       </div>
-
+</div>
-      <div class="sources" id="sourcesPanel" hidden>
-        <div class="sources__head">Sources <span id="sourcesCount"></span></div>
-        <div id="sourceList"></div>
-      </div>
-    </section>
-
-    <section class="episodes" id="episodes" hidden>
-      <div class="episodes__toolbar">
-        <h2 class="episodes__title">Episodes</h2>
-        <select class="field" id="seasonSelect" aria-label="Season"></select>
-        <button class="btn btn--sm" id="prevEpisode" type="button">Previous</button>
-        <button class="btn btn--sm" id="nextEpisode" type="button">Next</button>
-      </div>
-      <div class="episode-grid" id="episodeGrid"></div>
-    </section>
-  </main>
 
   <footer class="site-footer">
     <div class="container">
-      <span>bug.tv</span>
+      <span>tv.bug.tools</span>
-      <span>API: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
+      <span>api: <a id="apiBaseLabel" href="#" target="_blank" rel="noopener"></a></span>
+      <span>tv.bug.tools doesn't store files, but provides links to external services.</span>
     </div>
   </footer>
 
-  <div class="modal-overlay" id="settingsModal" hidden>
-    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
-      <div class="modal__head">
-        <h2 class="modal__title" id="settingsTitle">Settings</h2>
-        <button class="btn btn--ghost btn--sm" id="settingsClose" type="button">Close</button>
-      </div>
-      <div class="modal__body">
-        <div>
-          <label class="field-label" for="apiBaseInput">API base URL</label>
-          <input class="field" id="apiBaseInput" type="url" placeholder="https://…">
-          <p class="modal__hint">
-            All requests go to this API. You can also override it for one session
-            by adding <code>?api=https://…</code> to any page URL.
-          </p>
-        </div>
-      </div>
-      <div class="modal__actions">
-        <button class="btn" id="apiBaseReset" type="button">Reset to default</button>
-        <button class="btn btn--primary" id="apiBaseSave" type="button">Save</button>
-      </div>
-    </div>
-  </div>
-
   <script src="vendor/hls.min.js"></script>
   <script src="js/util.js"></script>
   <script src="js/config.js"></script>