`public/server-load.js`

59 lines
/* ClipReviewbyDave — "Load from server" picker (additive; not part of Dave's original).
   Populates the #srv dropdown from GET /api/videos and loads a chosen file by URL,
   reusing the page's global buildCardFromUrl/loaded/order (declared in index.html's
   inline <script>, so they're in the shared global scope this file runs after). */
(function () {
  const sel = document.getElementById('srv');
  const filter = document.getElementById('srvFilter');
  if (!sel) return;

  let all = [];

  // Add a server video by URL, mirroring addFiles()'s bookkeeping so notes,
  // export order, and the drop-zone hide all behave identically to drag-drop.
  function addServerVideo(name, url) {
    if (typeof loaded === 'undefined') return;          // page not ready
    if (loaded.has(name)) { const el = document.getElementById('v_' + idFor(name)); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' }); return; }
    loaded.add(name);
    order.push(name);
    buildCardFromUrl(name, url);
    drop.style.display = loaded.size ? 'none' : '';
  }
  window.addServerVideo = addServerVideo;

  function render(list) {
    sel.innerHTML = '<option value="">— pick a video —</option>';
    list.forEach((v) => {
      const o = document.createElement('option');
      o.value = v.url;
      o.dataset.name = v.name;
      o.textContent = `${v.name}  ·  ${v.folder}  ·  ${v.when}`;
      sel.appendChild(o);
    });
    if (!list.length) sel.innerHTML = '<option value="">— none found —</option>';
  }

  fetch('/api/videos')
    .then((r) => r.json())
    .then((list) => {
      all = list;
      render(all);
      if (filter && all.length) filter.style.display = '';
    })
    .catch(() => { sel.innerHTML = '<option value="">— server list unavailable —</option>'; });

  sel.addEventListener('change', () => {
    const o = sel.selectedOptions[0];
    if (!o || !o.value) return;
    addServerVideo(o.dataset.name, o.value);
    sel.value = '';
  });

  if (filter) {
    filter.addEventListener('input', () => {
      const q = filter.value.trim().toLowerCase();
      render(q ? all.filter((v) => (v.name + ' ' + v.folder).toLowerCase().includes(q)) : all);
    });
  }
})();