feat(anime): add anime browser powered by Aniyomi extensions

- Add `subminer anime` / `--anime` and a tray entry to open a browser that searches installed Aniyomi extension sources, shows cover art and episodes, and plays into mpv with overlay/mining attached - Add an Extensions tab to add repos and install/update/remove sources, and per-source settings for sources needing config - Support searching all sources at once with streaming, per-source results and status - Prefer Japanese audio/subtitle tracks from the source and keep the primary subtitle slot reserved for Japanese - Fix window/tray/Dock handling so the browser and mpv can be switched between without quitting the app or losing the Dock icon - Add anime.repos, anime.extensionsDir, anime.preferredQuality config keys (no bundled repos or discovery)
2026-08-01 19:21:34 -07:00 · 2026-07-31 17:16:49 -07:00
parent b204d4dd6e
commit e64ff1a0ee
117 changed files with 7565 additions and 529 deletions
@@ -0,0 +1,505 @@
+import { describe, el } from './dom';
+import { sourceOptionLabel, summarizeSearch } from './format';
+import { applySearchUpdate, idleSearchProgress, summarizeProgress } from './search-progress';
+import { createExtensionsPanel } from './extensions-panel';
+import { renderPreferences, renderPreferencesUnavailable } from './preferences-fields';
+import { ALL_SOURCES_ID } from '../types/anime-browser';
+import type {
+  AnimeBrowserAPI,
+  AnimeBrowserBridgeState,
+  AnimeBrowserEntry,
+  AnimeBrowserEpisode,
+  AnimeBrowserSource,
+} from '../types/anime-browser';
+
+declare global {
+  interface Window {
+    animeBrowserAPI: AnimeBrowserAPI;
+  }
+}
+
+const api = window.animeBrowserAPI;
+
+const searchForm = el<HTMLFormElement>('search-form');
+const searchInput = el<HTMLInputElement>('search-input');
+const searchButton = el<HTMLButtonElement>('search-button');
+const sourceSelect = el<HTMLSelectElement>('source-select');
+const grid = el<HTMLDivElement>('grid');
+const gridEmpty = el<HTMLParagraphElement>('grid-empty');
+const results = el<HTMLElement>('results');
+const detail = el<HTMLElement>('detail');
+const detailBack = el<HTMLButtonElement>('detail-back');
+const detailCover = el<HTMLImageElement>('detail-cover');
+const detailTitle = el<HTMLHeadingElement>('detail-title');
+const detailChips = el<HTMLDivElement>('detail-chips');
+const detailDescription = el<HTMLParagraphElement>('detail-description');
+const episodes = el<HTMLOListElement>('episodes');
+const episodesCount = el<HTMLSpanElement>('episodes-count');
+const banner = el<HTMLDivElement>('bridge-banner');
+const bannerMessage = el<HTMLSpanElement>('bridge-message');
+const bannerMeter = el<HTMLSpanElement>('bridge-meter');
+const bannerMeterFill = el<HTMLElement>('bridge-meter-fill');
+const statusMessage = el<HTMLSpanElement>('status-message');
+const browseTab = el<HTMLButtonElement>('tab-browse');
+const extensionsTab = el<HTMLButtonElement>('tab-extensions');
+const settingsTab = el<HTMLButtonElement>('tab-settings');
+const layout = el<HTMLElement>('layout');
+const extensionsPanel = el<HTMLElement>('extensions');
+const settingsPanel = el<HTMLElement>('settings');
+const settingsFields = el<HTMLDivElement>('settings-fields');
+const settingsTitle = el<HTMLHeadingElement>('settings-title');
+
+/** The anime the detail page is showing, with the source that produced it. */
+let selectedAnime: { url: string; title: string; sourceId: string } | null = null;
+
+/** Where the results grid was scrolled to before the detail page covered it. */
+let resultsScrollTop = 0;
+
+/* ---------- tabs ---------- */
+
+type View = 'browse' | 'extensions' | 'settings';
+
+let currentView: View = 'browse';
+
+/**
+ * Show one view at a time. The panels used to sit above the results, which left
+ * a long extension list scrolling inside a sliver of the window; as tabs each
+ * one gets the whole content region.
+ */
+function setView(view: View): void {
+  currentView = view;
+  layout.classList.toggle('hidden', view !== 'browse');
+  extensionsPanel.classList.toggle('hidden', view !== 'extensions');
+  settingsPanel.classList.toggle('hidden', view !== 'settings');
+  browseTab.setAttribute('aria-selected', String(view === 'browse'));
+  extensionsTab.setAttribute('aria-selected', String(view === 'extensions'));
+  settingsTab.setAttribute('aria-selected', String(view === 'settings'));
+}
+
+function setStatus(message: string, tone: 'info' | 'ok' | 'error' = 'info'): void {
+  statusMessage.textContent = message;
+  statusMessage.parentElement?.setAttribute('data-tone', tone);
+}
+
+const BRIDGE_LABELS: Record<AnimeBrowserBridgeState['stage'], string> = {
+  idle: 'Starting the extension bridge',
+  locating: 'Looking up the extension bridge release',
+  downloading: 'Downloading the extension bridge',
+  verifying: 'Verifying the download',
+  extracting: 'Unpacking the extension bridge',
+  starting: 'Starting the extension bridge',
+  ready: 'Bridge ready',
+  failed: 'Bridge failed to start',
+};
+
+const BUSY_STAGES = new Set([
+  'idle',
+  'locating',
+  'downloading',
+  'verifying',
+  'extracting',
+  'starting',
+]);
+
+function renderBridgeState(state: AnimeBrowserBridgeState): void {
+  const busy = BUSY_STAGES.has(state.stage);
+  banner.dataset.stage = state.stage;
+  banner.dataset.busy = String(busy);
+
+  // Once ready with nothing to report, the banner has nothing to say.
+  const hide = state.stage === 'ready' && state.message === null;
+  banner.classList.toggle('hidden', hide);
+  bannerMessage.textContent = state.message ?? BRIDGE_LABELS[state.stage];
+
+  const showMeter = state.progress !== null;
+  bannerMeter.classList.toggle('hidden', !showMeter);
+  if (state.progress !== null) {
+    bannerMeterFill.style.width = `${Math.round(state.progress * 100)}%`;
+  }
+
+  const ready = state.stage === 'ready';
+  searchInput.disabled = !ready;
+  searchButton.disabled = !ready;
+}
+
+/* ---------- source picker ---------- */
+
+/**
+ * The picker lists every installed source, plus an "All sources" entry that
+ * searches them together. That entry only earns its place with more than one
+ * source installed.
+ */
+function renderSources(sources: AnimeBrowserSource[], selectedId: string | null): void {
+  const options: HTMLOptionElement[] = [];
+
+  if (sources.length > 1) {
+    const all = document.createElement('option');
+    all.value = ALL_SOURCES_ID;
+    all.textContent = `All sources (${sources.length})`;
+    all.selected = selectedId === ALL_SOURCES_ID;
+    options.push(all);
+  }
+
+  for (const source of sources) {
+    const option = document.createElement('option');
+    option.value = source.id;
+    option.textContent = sourceOptionLabel(source);
+    option.selected = source.id === selectedId;
+    options.push(option);
+  }
+
+  sourceSelect.replaceChildren(...options);
+  sourceSelect.disabled = options.length <= 1;
+}
+
+function searchingAllSources(): boolean {
+  return sourceSelect.value === ALL_SOURCES_ID;
+}
+
+/* ---------- results ---------- */
+
+function createCard(entry: AnimeBrowserEntry, showSource: boolean): HTMLButtonElement {
+  const card = document.createElement('button');
+  card.type = 'button';
+  card.className = 'card';
+
+  const art = document.createElement('div');
+  art.className = 'card-art';
+  if (entry.thumbnailUrl) {
+    const img = document.createElement('img');
+    img.src = entry.thumbnailUrl;
+    img.alt = '';
+    img.loading = 'lazy';
+    // A dead cover should fall back to the initial, not a broken-image icon.
+    img.addEventListener('error', () => {
+      img.remove();
+      art.classList.add('is-empty');
+    });
+    art.append(img);
+  } else {
+    art.classList.add('is-empty');
+  }
+  art.dataset.initial = entry.title.trim().charAt(0).toUpperCase() || '?';
+
+  if (showSource) {
+    const badge = document.createElement('span');
+    badge.className = 'card-source';
+    badge.textContent = entry.sourceName;
+    art.append(badge);
+  }
+
+  const title = document.createElement('div');
+  title.className = 'card-title';
+  title.textContent = entry.title;
+
+  card.append(art, title);
+  card.title = showSource ? `${entry.title} — ${entry.sourceName}` : entry.title;
+  card.addEventListener('click', () => {
+    void openDetail(entry);
+  });
+  return card;
+}
+
+function renderEntries(entries: AnimeBrowserEntry[], emptyMessage: string): void {
+  // Which source a cover came from only matters when they are mixed together.
+  const showSource = searchingAllSources();
+  grid.replaceChildren(...entries.map((entry) => createCard(entry, showSource)));
+
+  const empty = entries.length === 0;
+  gridEmpty.classList.toggle('hidden', !empty);
+  gridEmpty.textContent = emptyMessage;
+}
+
+/** Streamed results land at the end of the grid, in arrival order. */
+function appendEntries(entries: AnimeBrowserEntry[]): void {
+  const showSource = searchingAllSources();
+  grid.append(...entries.map((entry) => createCard(entry, showSource)));
+}
+
+function formatEpisodeIndex(episode: AnimeBrowserEpisode, fallbackIndex: number): string {
+  const value = episode.number ?? fallbackIndex;
+  return Number.isInteger(value) ? String(value).padStart(2, '0') : value.toFixed(1);
+}
+
+function renderEpisodes(list: AnimeBrowserEpisode[]): void {
+  episodesCount.textContent = list.length === 0 ? '' : `${list.length}`;
+  episodes.replaceChildren(
+    ...list.map((episode, index) => {
+      const item = document.createElement('li');
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'cue';
+
+      const cueIndex = document.createElement('span');
+      cueIndex.className = 'cue-index';
+      cueIndex.textContent = formatEpisodeIndex(episode, list.length - index);
+
+      const name = document.createElement('span');
+      name.className = 'cue-name';
+      name.textContent = episode.name;
+      if (episode.uploadedAt !== null) {
+        const sub = document.createElement('span');
+        sub.className = 'cue-sub';
+        sub.textContent = new Date(episode.uploadedAt).toISOString().slice(0, 10);
+        name.append(sub);
+      }
+
+      button.append(cueIndex, name);
+      button.addEventListener('click', () => {
+        void playEpisode(button, episode);
+      });
+      item.append(button);
+      return item;
+    }),
+  );
+}
+
+/**
+ * The detail page replaces the results grid rather than squeezing in beside
+ * it. The grid stays in the DOM with its scroll position remembered, so Back
+ * returns to the same results without re-running the search.
+ */
+async function openDetail(entry: AnimeBrowserEntry): Promise<void> {
+  selectedAnime = { url: entry.url, title: entry.title, sourceId: entry.sourceId };
+  resultsScrollTop = results.scrollTop;
+  results.classList.add('hidden');
+  detail.classList.remove('hidden');
+  detail.scrollTop = 0;
+  detailTitle.textContent = entry.title;
+  detailDescription.textContent = 'Loading…';
+  detailChips.replaceChildren();
+  episodes.replaceChildren();
+  episodesCount.textContent = '';
+  detailCover.src = entry.thumbnailUrl ?? '';
+
+  try {
+    // Always ask the entry's own source: after an all-sources search the
+    // picker's selection says nothing about where this cover came from.
+    const [details, episodeList] = await Promise.all([
+      api.getDetails(entry.url, entry.sourceId),
+      api.getEpisodes(entry.url, entry.sourceId),
+    ]);
+
+    detailTitle.textContent = details.title;
+    detailDescription.textContent = details.description ?? 'No description from this source.';
+    if (details.thumbnailUrl) detailCover.src = details.thumbnailUrl;
+
+    const chips: HTMLSpanElement[] = [];
+    const source = document.createElement('span');
+    source.className = 'chip source';
+    source.textContent = entry.sourceName;
+    chips.push(source);
+    if (details.status !== 'unknown') {
+      const status = document.createElement('span');
+      status.className = 'chip status';
+      status.textContent = details.status.replace(/-/g, ' ');
+      chips.push(status);
+    }
+    for (const genre of details.genres.slice(0, 6)) {
+      const chip = document.createElement('span');
+      chip.className = 'chip';
+      chip.textContent = genre;
+      chips.push(chip);
+    }
+    detailChips.replaceChildren(...chips);
+
+    renderEpisodes(episodeList);
+    setStatus(`${details.title} · ${episodeList.length} episodes`);
+  } catch (error) {
+    detailDescription.textContent = '';
+    setStatus(describe(error), 'error');
+  }
+}
+
+function closeDetail(): void {
+  detail.classList.add('hidden');
+  results.classList.remove('hidden');
+  results.scrollTop = resultsScrollTop;
+  selectedAnime = null;
+}
+
+async function playEpisode(button: HTMLButtonElement, episode: AnimeBrowserEpisode): Promise<void> {
+  if (!selectedAnime) return;
+
+  for (const other of episodes.querySelectorAll<HTMLButtonElement>('.cue')) {
+    other.removeAttribute('data-state');
+  }
+  button.dataset.state = 'loading';
+  setStatus(`Resolving ${episode.name}…`);
+
+  const result = await api.playEpisode({
+    sourceId: selectedAnime.sourceId,
+    animeUrl: selectedAnime.url,
+    animeTitle: selectedAnime.title,
+    episodeUrl: episode.url,
+    episodeName: episode.name,
+  });
+
+  if (result.ok) {
+    button.dataset.state = 'playing';
+    setStatus(
+      result.quality ? `Playing ${episode.name} · ${result.quality}` : `Playing ${episode.name}`,
+      'ok',
+    );
+  } else {
+    button.removeAttribute('data-state');
+    setStatus(result.error ?? 'Could not play that episode.', 'error');
+  }
+}
+
+/* ---------- streamed search ---------- */
+
+/**
+ * Results are pushed per source while the search call is still pending, so a
+ * fast source is on screen before a slow one answers. The grid is built from
+ * those pushes; the awaited result then settles the final status line (and
+ * backfills the grid if no push ever arrived).
+ */
+let progress = idleSearchProgress();
+
+/** Orders runSearch calls so a slow search cannot finish over a newer one. */
+let searchRequest = 0;
+
+api.onSearchUpdate((update) => {
+  const applied = applySearchUpdate(progress, update);
+  if (!applied) return; // A superseded search; let it run out quietly.
+  progress = applied.progress;
+
+  if (applied.started) {
+    grid.replaceChildren();
+    gridEmpty.classList.add('hidden');
+    return;
+  }
+  if (applied.entries.length > 0) appendEntries(applied.entries);
+  if (!progress.done) {
+    setStatus(summarizeProgress(progress), progress.failures.length > 0 ? 'error' : 'info');
+  }
+});
+
+async function runSearch(query: string): Promise<void> {
+  const request = ++searchRequest;
+  // A new search means new results; leave the detail page for them.
+  if (!detail.classList.contains('hidden')) closeDetail();
+  setStatus(query ? `Searching for “${query}”…` : 'Loading popular…');
+  grid.replaceChildren();
+  gridEmpty.classList.add('hidden');
+
+  try {
+    const result = query ? await api.search(query) : await api.getPopular();
+    // A newer search owns the grid now; this one's result is history.
+    if (request !== searchRequest) return;
+
+    // Every source failing is an error, not an empty result set.
+    if (result.entries.length === 0 && result.failures.length > 0) {
+      const first = result.failures[0];
+      renderEntries([], `${first?.sourceName}: ${first?.error}`);
+      setStatus(summarizeSearch(result), 'error');
+      return;
+    }
+
+    // The stream already filled the grid; only render from the result when no
+    // update arrived (covers a host without streaming wired up).
+    if (grid.childElementCount === 0 || result.entries.length === 0) {
+      renderEntries(
+        result.entries,
+        query ? `Nothing found for “${query}”.` : 'This source returned nothing.',
+      );
+    }
+    setStatus(summarizeSearch(result), result.failures.length > 0 ? 'error' : 'info');
+  } catch (error) {
+    if (request !== searchRequest) return;
+    renderEntries([], describe(error));
+    setStatus(describe(error), 'error');
+  }
+}
+
+/* ---------- source settings ---------- */
+
+async function openSettings(): Promise<void> {
+  const option = sourceSelect.selectedOptions[0];
+  settingsTitle.textContent = option ? `${option.textContent} settings` : 'Source settings';
+  settingsFields.replaceChildren();
+  setView('settings');
+
+  // Settings belong to one extension, so there is nothing coherent to show for
+  // "All sources".
+  if (searchingAllSources()) {
+    renderPreferencesUnavailable(
+      settingsFields,
+      'Pick a single source in the Source picker to edit its settings.',
+    );
+    return;
+  }
+
+  const sourceId = sourceSelect.value;
+  try {
+    renderPreferences(settingsFields, await api.getPreferences(sourceId), (key, value) =>
+      api.setPreference(sourceId, key, value),
+    );
+  } catch (error) {
+    setStatus(describe(error), 'error');
+    setView('browse');
+  }
+}
+
+/* ---------- wiring ---------- */
+
+async function refreshSources(): Promise<void> {
+  const snapshot = await api.getSnapshot();
+  renderSources(snapshot.sources, snapshot.selectedSourceId);
+}
+
+const extensions = createExtensionsPanel({ api, setStatus, onSourcesChanged: refreshSources });
+
+browseTab.addEventListener('click', () => setView('browse'));
+
+settingsTab.addEventListener('click', () => void openSettings());
+
+extensionsTab.addEventListener('click', () => {
+  setView('extensions');
+  void extensions.refresh();
+});
+
+searchForm.addEventListener('submit', (event) => {
+  event.preventDefault();
+  // Searching is a browse action, whichever tab it was typed from.
+  setView('browse');
+  void runSearch(searchInput.value.trim());
+});
+
+sourceSelect.addEventListener('change', () => {
+  void (async () => {
+    await api.selectSource(sourceSelect.value);
+    // Settings belong to the source, so reload them rather than showing stale fields.
+    if (currentView === 'settings') await openSettings();
+    await runSearch(searchInput.value.trim());
+  })();
+});
+
+detailBack.addEventListener('click', closeDetail);
+
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape' && !detail.classList.contains('hidden')) {
+    closeDetail();
+  }
+});
+
+api.onBridgeState(renderBridgeState);
+
+void (async () => {
+  renderBridgeState({ stage: 'idle', progress: null, message: null });
+  const state = await api.ensureBridge();
+  renderBridgeState(state);
+
+  const snapshot = await api.getSnapshot();
+  renderSources(snapshot.sources, snapshot.selectedSourceId);
+
+  if (state.stage === 'ready' && snapshot.sources.length > 0) {
+    searchInput.focus();
+    await runSearch('');
+  } else if (state.stage === 'ready') {
+    setStatus(state.message ?? 'No extensions installed.', 'error');
+  } else {
+    setStatus(state.message ?? 'The extension bridge is not available.', 'error');
+  }
+})();