watchparty/client/js/views/library.js

import { getLibraries, getLibraryItems } from '../embyApi.js';
import { createParty } from '../party.js';
import { navigate } from '../router.js';
import { tileHtml, wireTileButtons, escapeHtml } from '../tiles.js';

/**
 * Generic "one library" page, reached from the sidebar. What it renders
 * depends entirely on the library's Emby CollectionType:
 *   - movies/tvshows (or anything else playable): a tile grid, same as the
 *     home page's carousels (Series tiles link into /series/:id instead of
 *     starting a party directly - see tiles.js).
 *   - music: a placeholder for now - see docs/architecture.md, deliberately
 *     out of scope for this pass (needs its own player + collaborative
 *     playlist, not just a grid).
 */
export async function renderLibrary(root, params) {
  root.innerHTML = '<p class="hint">Chargement...</p>';

  let libraries;
  try {
    libraries = await getLibraries();
  } catch (err) {
    root.innerHTML = '<p class="error">Impossible de charger les bibliothèques.</p>';
    return;
  }

  const library = libraries.find((l) => l.id === params.id);
  if (!library) {
    root.innerHTML = '<p class="error">Bibliothèque introuvable.</p>';
    return;
  }

  if (library.collectionType === 'music') {
    root.innerHTML = `
      <div class="pageHeader"><h1>${escapeHtml(library.name)}</h1></div>
      <p class="hint">
        La musique arrive dans une prochaine version : lecteur dédié, navigation
        artiste / album, et une playlist partagée où chaque membre de la party
        peut ajouter des morceaux. Pas encore disponible ici.
      </p>`;
    return;
  }

  root.innerHTML = `
    <div class="pageHeader"><h1>${escapeHtml(library.name)}</h1></div>
    <div id="grid" class="grid"><p class="hint">Chargement...</p></div>`;

  const grid = root.querySelector('#grid');
  let items;
  try {
    items = await getLibraryItems(library.id);
  } catch (err) {
    grid.innerHTML = '<p class="error">Impossible de charger cette bibliothèque.</p>';
    return;
  }
  if (!items.length) {
    grid.innerHTML = '<p class="hint">Bibliothèque vide.</p>';
    return;
  }

  grid.innerHTML = items.map(tileHtml).join('');
  wireTileButtons(grid, async (itemId) => {
    const party = await createParty(itemId);
    navigate(`/party/${party.partyId}`);
  });
}