push

2026-08-26 13:22:49 -05:00
commit 53b3c1da6c
96 changed files with 6210 additions and 0 deletions
@@ -0,0 +1,108 @@
+/*
+  CARDS — renders poster cards, rows (carousels) and grids.
+  Items can come straight from the API ({tmdb_id, type, name, year, poster})
+  or from storage records; normalizeItem() handles both.
+*/
+(function () {
+  'use strict';
+
+  const { escapeHtml: esc, tmdbResize, formatSeconds } = SR.util;
+
+  function normalizeItem(r) {
+    return {
+      tmdbId: r.tmdb_id != null ? r.tmdb_id : r.tmdbId,
+      type: r.type,
+      season: r.season,
+      episode: r.episode,
+      name: r.name || r.title || '',
+      year: r.year || '',
+      poster: r.poster || r.poster_url || '',
+      overview: r.overview || '',
+    };
+  }
+
+  function watchHref(item) {
+    const p = new URLSearchParams();
+    p.set('id', item.tmdbId);
+    p.set('type', item.type);
+    if (item.type === 'tv') {
+      if (item.season != null) p.set('s', item.season);
+      if (item.episode != null) p.set('e', item.episode);
+    }
+    return `watch.html?${p.toString()}`;
+  }
+
+  function card(item, opts = {}) {
+    const el = document.createElement('a');
+    el.className = 'card';
+    el.href = opts.href || watchHref(item);
+    const poster = tmdbResize(item.poster, 'w342');
+    const progress =
+      opts.progress != null
+        ? `<span class="card__progress"><i style="width:${Math.round(Math.min(1, opts.progress) * 100)}%"></i></span>`
+        : '';
+    const meta =
+      item.meta ||
+      (item.year
+        ? `${item.year} · ${item.type === 'tv' ? 'TV' : 'Movie'}`
+        : item.type === 'tv'
+          ? 'TV'
+          : 'Movie');
+    el.innerHTML = `
+      <span class="card__poster${poster ? '' : ' card__poster--empty'}">
+        ${poster ? `<img src="${poster}" alt="" loading="lazy">` : '?'}
+        ${progress}
+      </span>
+      <span class="card__title">${esc(item.name)}</span>
+      <span class="card__meta">${esc(meta)}</span>`;
+    return el;
+  }
+
+  function row(title, items) {
+    const section = document.createElement('section');
+    section.className = 'row';
+    section.innerHTML = `<div class="row__header"><h2 class="row__title">${esc(title)}</h2></div>`;
+    const scroll = document.createElement('div');
+    scroll.className = 'row__scroll';
+    for (const item of items) scroll.appendChild(card(item));
+    section.appendChild(scroll);
+    return section;
+  }
+
+  function grid(items) {
+    const el = document.createElement('div');
+    el.className = 'grid';
+    for (const item of items) el.appendChild(card(item));
+    return el;
+  }
+
+  function emptyState(title, hint) {
+    const el = document.createElement('div');
+    el.className = 'empty';
+    el.innerHTML = `<h3>${esc(title)}</h3>${hint ? `<p>${esc(hint)}</p>` : ''}`;
+    return el;
+  }
+
+  // "Continue watching" row: latest record per show, with progress bar
+  function continueRow() {
+    const recs = SR.storage.latestPerShow();
+    if (!recs.length) return null;
+    const items = recs.map((r) => ({
+      tmdbId: r.tmdbId,
+      type: r.type,
+      season: r.season,
+      episode: r.episode,
+      name: r.show || r.title || '',
+      poster: r.poster || '',
+      meta:
+        r.type === 'tv'
+          ? `S${r.season}E${r.episode}${r.title ? ` · ${r.title}` : ''} · ${formatSeconds(Math.max(0, r.d - r.t))} left`
+          : `Movie · ${formatSeconds(Math.max(0, r.d - r.t))} left`,
+      progress: r.d ? r.t / r.d : 0,
+    }));
+    return row('Continue watching', items);
+  }
+
+  window.SR = window.SR || {};
+  SR.cards = { normalizeItem, card, row, grid, emptyState, continueRow };
+})();