watchparty/client/js/tiles.js

// Shared poster-tile rendering - used by the home carousels and the library
// grid, so the two stay visually/behaviorally identical instead of drifting.

export function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

export function tileHtml(item) {
  const seriesHref = item.type === 'Series' ? `#/series/${item.id}` : null;
  return `
    <div class="tile">
      ${seriesHref ? `<a href="${seriesHref}" class="tileLink" aria-label="${escapeHtml(item.name)}"></a>` : ''}
      <img src="${item.imageUrl}" alt="" loading="lazy" onerror="this.classList.add('noImage')" />
      <div class="tileOverlay">
        ${item.canWatchParty ? `<button class="tileBtn startPartyBtn" data-item-id="${item.id}">Lancer une watch party</button>` : ''}
        ${seriesHref ? `<a class="tileBtn" href="${seriesHref}">Voir les épisodes</a>` : ''}
        <a class="tileBtn tileBtnLink" href="${item.embyUrl}" target="_blank" rel="noopener">Voir sur Emby</a>
      </div>
      <span class="tileLabel">${escapeHtml(item.name)}${item.year ? ` (${item.year})` : ''}</span>
    </div>`;
}

/**
 * Wires up every "Lancer une watch party" button inside `container`.
 * `onStart(itemId)` does the actual work (create the party + navigate) - kept
 * as a caller-supplied callback so this module doesn't need to depend on
 * party.js/router.js itself.
 */
export function wireTileButtons(container, onStart) {
  container.querySelectorAll('.startPartyBtn').forEach((btn) => {
    btn.addEventListener('click', async (e) => {
      e.preventDefault();
      btn.disabled = true;
      btn.textContent = 'Démarrage...';
      try {
        await onStart(btn.dataset.itemId);
      } catch (err) {
        alert(err.message);
        btn.disabled = false;
        btn.textContent = 'Lancer une watch party';
      }
    });
  });
}