push

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

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',

web/css/components.css

@@ -246,7 +246,7 @@ select.field {
 }
 
 .card__ep {
-  color: var(--color-text);
+  color: var(--color-text-dim);
   font-weight: var(--font-weight-semibold);
   letter-spacing: 0.03em;
   white-space: nowrap;

web/css/pages.css

@@ -97,6 +97,13 @@
   text-transform: uppercase;
 }
 
+.hero__logo {
+  max-width: min(420px, 60vw);
+  max-height: 140px;
+  object-fit: contain;
+  margin-bottom: var(--space-4);
+}
+
 .hero__title {
   font-size: clamp(2.2rem, 5vw, 3.6rem);
   line-height: 1.05;
@@ -258,99 +265,6 @@
   color: var(--color-text-faint);
 }
 
-/* ---- watch: hero ------------------------------------------------------------- */
-
-.watch-hero {
-  position: relative;
-  display: flex;
-  gap: var(--space-5);
-  align-items: flex-end;
-  margin-bottom: var(--space-5);
-  padding: var(--space-5);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  background: var(--color-surface);
-}
-
-.watch-hero__backdrop {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-}
-
-.watch-hero__backdrop img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  opacity: 0.25;
-}
-
-.watch-hero__poster {
-  position: relative;
-  z-index: 1;
-  flex: 0 0 180px;
-  width: 180px;
-  aspect-ratio: var(--poster-aspect);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  border: 1px solid var(--color-border-strong);
-  box-shadow: var(--shadow-2);
-  background: var(--color-surface-2);
-}
-
-.watch-hero__poster img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.watch-hero__body {
-  position: relative;
-  z-index: 1;
-  min-width: 0;
-  flex: 1;
-}
-
-.watch-hero__title {
-  font-size: var(--text-3xl);
-  letter-spacing: -0.02em;
-  margin-bottom: var(--space-2);
-}
-
-.watch-hero__facts {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--space-3);
-  font-size: var(--text-sm);
-  color: var(--color-text-dim);
-}
-
-.watch-hero__rating {
-  color: var(--color-star);
-  font-weight: var(--font-weight-semibold);
-}
-
-.watch-hero__genres {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-  margin-top: var(--space-3);
-}
-
-.watch-hero__overview {
-  margin-top: var(--space-4);
-  max-width: 72ch;
-  color: var(--color-text-dim);
-  font-size: var(--text-sm);
-  display: -webkit-box;
-  -webkit-line-clamp: 4;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
 /* ---- watch: player (.player-wrap + controls live in components.css) ------------- */
 
 .player-status {
@@ -399,138 +313,6 @@
   flex: 1;
 }
 
-.loading-cell {
-  grid-column: 1 / -1;
-  display: flex;
-  justify-content: center;
-  padding: var(--space-8) 0;
-}
-
-/* ---- watch: episodes --------------------------------------------------------- */
-
-.episodes {
-  margin-top: var(--space-7);
-}
-
-.episodes__toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  flex-wrap: wrap;
-  margin-bottom: var(--space-4);
-}
-
-.episodes__title {
-  font-size: var(--text-xl);
-  font-weight: var(--font-weight-semibold);
-  margin-right: auto;
-}
-
-.episodes__toolbar select.field {
-  width: auto;
-}
-
-.episode-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: var(--space-3);
-}
-
-.episode {
-  display: flex;
-  gap: var(--space-3);
-  padding: var(--space-3);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  cursor: pointer;
-  transition: border-color 120ms ease, background 120ms ease;
-}
-
-.episode:hover {
-  border-color: var(--color-border-strong);
-  background: var(--color-surface-hover);
-}
-
-.episode--current {
-  border-color: var(--color-accent);
-}
-
-.episode__thumb {
-  position: relative;
-  flex: 0 0 108px;
-  width: 108px;
-  aspect-ratio: 16 / 9;
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-  background: var(--color-surface-2);
-}
-
-.episode__thumb img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.episode__thumb--empty {
-  display: grid;
-  place-items: center;
-  color: var(--color-text-faint);
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-semibold);
-  background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface));
-}
-
-.episode__play {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--text-lg);
-  color: #fff;
-  background: rgba(0, 0, 0, 0.35);
-  opacity: 0;
-  transition: opacity 120ms ease;
-}
-
-.episode:hover .episode__play {
-  opacity: 1;
-}
-
-.episode--current .episode__play {
-  opacity: 1;
-  background: color-mix(in srgb, var(--color-accent) 35%, rgba(0, 0, 0, 0.35));
-}
-
-.episode__body {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.episode__num {
-  font-size: var(--text-xs);
-  color: var(--color-text-faint);
-}
-
-.episode__title {
-  font-size: var(--text-sm);
-  font-weight: var(--font-weight-medium);
-  line-height: 1.3;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.episode__meta {
-  margin-top: 2px;
-  font-size: var(--text-xs);
-  color: var(--color-text-faint);
-}
-
 /* ---- settings ------------------------------------------------------------------ */
 
 .settings {
@@ -677,21 +459,6 @@
     display: none;
   }
 
-  .watch-hero {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: var(--space-4);
-  }
-
-  .watch-hero__poster {
-    flex-basis: auto;
-    width: 132px;
-  }
-
-  .watch-hero__title {
-    font-size: var(--text-2xl);
-  }
-
   .search-bar__form {
     flex-direction: column;
   }
@@ -711,3 +478,305 @@
     padding: var(--space-4);
   }
 }
+
+.watch-page .page--watch {
+  padding-top: 0;
+}
+
+.watch-page .site-header {
+  background: transparent;
+  border-bottom-color: transparent;
+  backdrop-filter: none;
+}
+
+.watch-page.is-scrolled .site-header {
+  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
+  border-bottom-color: var(--color-border);
+  backdrop-filter: blur(12px);
+}
+
+.watch-hero {
+  position: relative;
+  isolation: isolate;
+  margin-top: calc(var(--header-height) * -1);
+  min-height: min(85svh, 900px);
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+  background: var(--color-surface);
+}
+
+.watch-hero__backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  background-size: cover;
+  background-position: center;
+  background-color: var(--color-surface);
+}
+
+.watch-hero__scrim {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--color-bg) 20%, transparent) 0%,
+      color-mix(in srgb, var(--color-bg) 55%, transparent) 55%,
+      var(--color-bg) 100%
+    ),
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--color-bg) 85%, transparent) 0%,
+      transparent 65%
+    );
+}
+
+.watch-hero__inner {
+  width: 100%;
+  max-width: var(--container-max);
+  margin: 0 auto;
+  padding: calc(var(--header-height) + var(--space-8)) var(--container-pad) var(--space-8);
+}
+
+.watch-hero__logo {
+  max-width: min(420px, 60vw);
+  max-height: 140px;
+  object-fit: contain;
+  margin-bottom: var(--space-4);
+}
+
+.watch-hero__title {
+  margin: 0;
+  font-size: clamp(2.2rem, 6vw, 4.5rem);
+  line-height: 1.02;
+  letter-spacing: -0.035em;
+}
+
+.watch-hero__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2) var(--space-3);
+  margin-top: var(--space-4);
+  color: var(--color-text-dim);
+  font-size: var(--text-sm);
+}
+
+.watch-hero__rating {
+  color: var(--color-star);
+  letter-spacing: 2px;
+}
+
+.watch-hero__dot {
+  color: var(--color-text-faint);
+}
+
+.watch-hero__genres {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-top: var(--space-4);
+}
+
+.watch-hero__overview {
+  max-width: 72ch;
+  margin: var(--space-4) 0 0;
+  color: var(--color-text-dim);
+  line-height: 1.55;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.watch-hero__actions {
+  margin-top: var(--space-6);
+  display: flex;
+}
+
+.watch-hero__actions .btn--primary {
+  padding: var(--space-3) var(--space-6);
+  font-size: var(--text-md);
+}
+
+.watch-episodes {
+  padding: var(--space-8) 0;
+}
+
+.watch-episodes__title {
+  margin: 0 0 var(--space-4);
+  font-size: var(--text-xl);
+}
+
+.season-tabs {
+  display: flex;
+  gap: var(--space-2);
+  overflow-x: auto;
+  padding-bottom: var(--space-2);
+  margin-bottom: var(--space-5);
+}
+
+.episode-shelf {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(220px, 1fr);
+  gap: var(--space-4);
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  padding: var(--space-2) var(--space-2) var(--space-3);
+  scroll-padding: var(--space-2);
+}
+
+.episode-shelf__loading,
+.episode-shelf__empty {
+  grid-column: 1 / -1;
+  display: grid;
+  place-items: center;
+  min-height: 180px;
+}
+
+.episode-card {
+  scroll-snap-align: start;
+  text-align: left;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  padding: 0;
+  cursor: pointer;
+}
+
+.episode-card--current {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.episode-card__thumb {
+  position: relative;
+  display: block;
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  background: var(--color-surface-2);
+}
+
+.episode-card__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.episode-card__thumb--empty {
+  display: grid;
+  place-items: center;
+  font-size: var(--text-2xl);
+  color: var(--color-text-faint);
+}
+
+.episode-card__progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 3px;
+  background: var(--color-accent);
+}
+
+.episode-card__body {
+  display: grid;
+  gap: var(--space-1);
+  padding: var(--space-3);
+}
+
+.episode-card__num {
+  color: var(--color-text-faint);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.episode-card__title {
+  font-weight: 600;
+  color: var(--color-text-dim);
+}
+
+.episode-card__meta {
+  color: var(--color-text-dim);
+  font-size: var(--text-xs);
+}
+
+.player-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: #000;
+  display: grid;
+  place-items: center;
+}
+
+.player-overlay[hidden] {
+  display: none;
+}
+
+body.player-open {
+  overflow: hidden;
+}
+
+body.player-open .player-overlay {
+  display: grid;
+}
+
+.player-overlay__close {
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  z-index: 20;
+  background: color-mix(in srgb, #000 60%, transparent);
+  color: #fff;
+  border: 1px solid rgb(255 255 255 / 20%);
+}
+
+#playerOverlay .player-wrap {
+  width: 100vw;
+  height: 100vh;
+  height: 100dvh;
+  aspect-ratio: auto;
+  border: none;
+  border-radius: 0;
+}
+
+#playerOverlay .watch-toolbar {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--space-5);
+  z-index: 2;
+  background: color-mix(in srgb, #000 65%, transparent);
+  border: 1px solid rgb(255 255 255 / 10%);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+}
+
+@media (max-width: 720px) {
+  .watch-hero {
+    min-height: 70svh;
+  }
+
+  .watch-hero__inner {
+    padding-bottom: var(--space-6);
+  }
+
+  .watch-hero__actions .btn--primary {
+    width: 100%;
+  }
+
+  .episode-shelf {
+    grid-auto-columns: minmax(160px, 80vw);
+  }
+
+  .player-overlay__close {
+    top: var(--space-2);
+    right: var(--space-2);
+  }
+}

web/index.html

@@ -9,13 +9,12 @@
   <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>
       <nav class="site-header__nav" aria-label="Primary">
-        <a href="index.html" class="is-active" aria-current="page">Home</a>
+
-        <a href="search.html">Search</a>
       </nav>
       <div class="site-header__actions">
         <a class="icon-btn" href="search.html" aria-label="Search" title="Search">
@@ -37,8 +36,9 @@
 
   <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>
 

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,87 @@
     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 || [])
+          .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,

web/js/cards.js

@@ -51,13 +51,17 @@
           ? '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">${metaHtml}</span>`;
+    if (item.hideTitle) el.setAttribute('aria-label', `${item.name} — ${meta}`);
     return el;
   }
 
@@ -97,6 +101,7 @@
       episode: r.episode,
       name: r.show || r.title || '',
       poster: r.poster || '',
+      hideTitle: true,
       meta:
         r.type === 'tv'
           ? `S${r.season} · E${r.episode} · ${formatSeconds(Math.max(0, r.d - r.t))} left`
@@ -138,7 +143,7 @@
         `<span class="badge">${esc(typeLabel)}</span>`,
       ]
         .filter(Boolean)
-        .join('<span class="hero__dot">·</span>');
+        .join('<span class="hero__dot" style="height: 1px;">·</span>');
 
       slide.innerHTML = `
         <img class="hero__backdrop" src="${item.backdrop}" alt="" loading="${i === 0 ? 'eager' : 'lazy'}">
@@ -146,7 +151,6 @@
         <div class="hero__fade"></div>
         <div class="container hero__inner">
           <div class="hero__content">
-            <span class="hero__kicker">Trending now</span>
             <h1 class="hero__title">${esc(item.name)}</h1>
             <div class="hero__meta">${metaBits}</div>
             ${item.overview ? `<p class="hero__overview">${esc(item.overview)}</p>` : ''}

web/js/config.js

@@ -9,13 +9,22 @@
   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://api-tv.bug.tools';
-  const STORAGE_KEY = 'streamreverse.apiBase.v1';
+  const STORAGE_KEY = 'bug-tv.apiBase.v1';
-  const PROVIDER_KEY = 'streamreverse.providers.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();
@@ -54,6 +63,34 @@
     }
   }
 
+  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 {
@@ -82,7 +119,7 @@
     }
   }
 
-  const PREFERRED_PROVIDERS = ['cineby', 'videasy', 'vidfast'];
+  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.
@@ -128,9 +165,14 @@
     DEFAULT_BASE,
     STORAGE_KEY,
     PROVIDER_KEY,
+    DEFAULT_TMDB_KEY,
+    TMDB_KEY_STORAGE_KEY,
     getBase,
     setBase,
     clearBase,
+    getTmdbKey,
+    setTmdbKey,
+    clearTmdbKey,
     getProviders,
     setProviders,
     clearProviders,

web/js/home.js

@@ -21,6 +21,36 @@
     return data && Array.isArray(data.results) ? data.results.map(SR.cards.normalizeItem) : [];
   }
 
+  function loadHeroLogos(section, items) {
+    const slides = section.querySelectorAll('.hero__slide');
+    items.forEach((item, i) => {
+      const slide = slides[i];
+      if (!slide || !item || item.tmdbId == null) return;
+      const titleEl = slide.querySelector('.hero__title');
+      if (!titleEl) return;
+      const logo = document.createElement('img');
+      logo.className = 'hero__logo';
+      logo.alt = item.name;
+      logo.hidden = true;
+      titleEl.insertAdjacentElement('beforebegin', logo);
+      SR.api.details(item.type, item.tmdbId)
+        .then((details) => {
+          const images = (details && details.images) || {};
+          const logos = images.logos || [];
+          const url = (logos.find((l) => l && l.url && String(l.iso_639_1 || '').toLowerCase() === 'en') || {}).url;
+          if (!url) return;
+          logo.onerror = () => {
+            logo.hidden = true;
+            titleEl.hidden = false;
+          };
+          logo.src = SR.util.tmdbResize(url, 'w500');
+          logo.hidden = false;
+          titleEl.hidden = true;
+        })
+        .catch(() => {});
+    });
+  }
+
   (async () => {
     const [movieRes, tvRes] = await Promise.allSettled([
       SR.api.trending('movie', 'day'),
@@ -38,7 +68,10 @@
         .filter((item) => item.backdrop && item.overview && item.name)
         .slice(0, 6);
       const hero = SR.cards.heroCarousel(heroData);
-      if (hero) heroSlot.appendChild(hero);
+      if (hero) {
+        heroSlot.appendChild(hero);
+        loadHeroLogos(hero, heroData);
+      }
     } catch (e) {
       SR.app.showError(e, 'could not load featured titles');
     }

web/js/settings.js

@@ -1,5 +1,5 @@
 /*
-  SETTINGS — source provider toggles, API server base URL, local data.
+  SETTINGS — source provider toggles, API server base URL, TMDB key, local data.
 */
 (function () {
   'use strict';
@@ -10,6 +10,8 @@
   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 --------------------------------------------------------------------- */
@@ -139,6 +141,36 @@
     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', () => {

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

web/js/watch.js

@@ -19,15 +19,29 @@
     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 sourcesClose = document.getElementById('sourcesClose');
-  const episodeSection = document.getElementById('episodes');
 
-  // custom player controls
   const playerWrap = document.getElementById('playerWrap');
   const bigPlay = document.getElementById('bigPlay');
   const pcSeek = document.getElementById('pcSeek');
@@ -40,10 +54,6 @@
   const pcGear = document.getElementById('pcGear');
   const pcPip = document.getElementById('pcPip');
   const pcFull = document.getElementById('pcFull');
-  const seasonSelect = document.getElementById('seasonSelect');
-  const episodeGrid = document.getElementById('episodeGrid');
-  const prevBtn = document.getElementById('prevEpisode');
-  const nextBtn = document.getElementById('nextEpisode');
 
   const state = {
     details: null,
@@ -57,8 +67,13 @@
     season: null,
     episode: null,
     loadedKey: null,
+    loadToken: 0,
+    overlayOpen: false,
+    lastFocusedElement: null,
+    pendingClose: false,
   };
 
+
   /* ---- status overlay ------------------------------------------------------ */
 
   function closeSources() {
@@ -323,7 +338,16 @@
         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();
   });
@@ -334,35 +358,120 @@
 
   /* ---- 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 -------------------------------------------------------------------- */
 
@@ -402,7 +511,10 @@
   }
 
   async function loadStreams() {
+    const token = ++state.loadToken;
     const providerInfo = await getProviderInfo();
+    if (token !== state.loadToken) return;
+
     if (!providerInfo.useServerDefaults && providerInfo.names.length === 0) {
       closeSources();
       pcQuality.textContent = '';
@@ -411,6 +523,7 @@
       showStatus('No sources are enabled. Open Settings → Sources and enable at least one provider.', true);
       return;
     }
+
     const query = {
       tmdb: id,
       type,
@@ -421,13 +534,17 @@
       query.season = state.season;
       query.episode = state.episode;
     }
+
     closeSources();
     pcQuality.textContent = '';
     showStatus('Finding streams…');
     sourceLabel.textContent = '';
     resumeNote.textContent = '';
+
     try {
       const data = await SR.api.streams(query);
+      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));
@@ -449,11 +566,13 @@
         }
       }
     } 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() {
@@ -584,116 +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${still ? '' : ' episode__thumb--empty'}">
+        <span class="episode-card__thumb${still ? '' : ' episode-card__thumb--empty'}">
           ${still ? `<img src="${still}" alt="" loading="lazy">` : `<span aria-hidden="true">${ep.episode_number}</span>`}
-          <span class="episode__play">▶</span>
+          ${progress > 0 ? `<span class="episode-card__progress" style="width:${Math.round(progress * 100)}%"></span>` : ''}
         </span>
-        <span class="episode__body">
+        <span class="episode-card__body">
-          <span class="episode__num">S${state.season} · E${ep.episode_number}${date}</span>
+          <span class="episode-card__num">S${state.season} · E${ep.episode_number}${date}</span>
-          <span class="episode__title">${SR.util.escapeHtml(ep.name || `Episode ${ep.episode_number}`)}</span>
+          <span 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__thumb img');
+
+      const img = b.querySelector('.episode-card__thumb img');
       if (img) {
         img.addEventListener('error', () => {
-          const thumb = img.closest('.episode__thumb');
+          const thumb = img.closest('.episode-card__thumb');
           img.remove();
-          thumb.classList.add('episode__thumb--empty');
+          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;
@@ -701,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

@@ -14,8 +14,7 @@
     <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">
-        <a href="index.html">Home</a>
+
-        <a href="search.html" class="is-active" aria-current="page">Search</a>
       </nav>
       <div class="site-header__actions">
         <a class="icon-btn is-active" href="search.html" aria-label="Search" title="Search">
@@ -45,8 +44,9 @@
 
   <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>
 

web/settings.html

@@ -14,8 +14,7 @@
     <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">
-        <a href="index.html">Home</a>
+
-        <a href="search.html">Search</a>
       </nav>
       <div class="site-header__actions">
         <a class="icon-btn" href="search.html" aria-label="Search" title="Search">
@@ -51,7 +50,7 @@
 
         <section class="settings__card" id="server">
           <h2>Server</h2>
-          <p class="settings__hint">The REST API that bug.tv queries. Change this only if you run your own instance.</p>
+          <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">
@@ -59,6 +58,15 @@
             <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">
@@ -76,8 +84,9 @@
 
   <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>
 

web/watch.html

@@ -9,13 +9,12 @@
   <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>
       <nav class="site-header__nav" aria-label="Primary">
-        <a href="index.html">Home</a>
+
-        <a href="search.html">Search</a>
       </nav>
       <div class="site-header__actions">
         <a class="icon-btn" href="search.html" aria-label="Search" title="Search">
@@ -28,17 +27,40 @@
     </div>
   </header>
 
-  <main class="page" id="content">
+  <main class="page page--watch" id="content">
-    <section id="hero" class="watch-hero container"></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" class="container">
+  <section id="episodeSection" class="watch-episodes" hidden>
+    <div class="container">
+      <h2 class="watch-episodes__title">Episodes</h2>
+      <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>
 
-        <a class="player-back" href="index.html" aria-label="Back to home" title="Back to home">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-        </a>
-
         <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>
@@ -90,25 +112,13 @@
         <span id="resumeNote"></span>
         <span class="watch-toolbar__spacer"></span>
       </div>
-
-      <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>
-          <div class="chips">
-            <button class="chip" id="prevEpisode" type="button">← Previous</button>
-            <button class="chip" id="nextEpisode" type="button">Next →</button>
 </div>
-        </div>
-        <div class="episode-grid" id="episodeGrid"></div>
-      </section>
-    </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>