fb-slides 0.8.0 → 0.9.0

package/runtime/assets.js

@@ -0,0 +1,513 @@
+// ---------------------------------------------------------------------------
+// Dropping files into assets/ — the other half of the edit drawer.
+//
+// While the drawer is open, dragging files anywhere over the deck raises a
+// sheet of folders: assets/ itself, every subfolder it already has, and one
+// that asks for a new name. Dropping on one saves the files there — the folder
+// is created if it is new — and the drawer lists what landed, each row a path
+// with two buttons: copy it, or write the markup for it into the slide.
+//
+// Nothing here is a file browser. The list is what *this* drop produced, which
+// is what you need in the ten seconds after dragging a screenshot in; the paths
+// are relative, so they work in dev and in the built deck alike. A row can also
+// delete its file — the wrong screenshot, dropped a moment ago — and that one
+// asks for the word to be typed: it is the only thing here a reload cannot undo.
+//
+// Only the dev server answers /api/assets, so on a static host the sheet never
+// appears — the drawer it belongs to is not there either.
+// ---------------------------------------------------------------------------
+
+const API_HEADERS = { 'x-fb-slides': '1' };
+
+// The folder target that asks for a name instead of being one: `*` is not a
+// character any folder here may carry, so it can never collide with a real one.
+const NEW = '*new*';
+
+// Typed, not clicked: deleting is the one thing in this drawer that leaves no
+// way back, and a button alone is too easy to hit on the way to something else.
+const WORD = 'CONFIRM';
+
+const IMAGE = /\.(png|jpe?g|gif|webp|avif|svg|bmp|ico)$/i;
+const VIDEO = /\.(mp4|webm|mov|m4v|ogv)$/i;
+const AUDIO = /\.(mp3|m4a|wav|ogg|aac|flac)$/i;
+
+// What the slide would say about a file of this kind — the block picker's own
+// markup, with the path already in it. Anything else becomes a plain link: a
+// PDF or a zip is something to hand out, not something to render.
+const blockFor = (path, name) => {
+  if (IMAGE.test(path)) return `![](${path})`;
+  if (VIDEO.test(path)) {
+    return (
+      `<video src="${path}" controls muted playsinline preload="metadata"\n` +
+      `  style="width: 78%; aspect-ratio: 16 / 9;"></video>`
+    );
+  }
+  if (AUDIO.test(path)) return `<audio src="${path}" controls></audio>`;
+  return `[${name}](${path})`;
+};
+
+export const DROP_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M12 15V4" /><path d="M8 8l4-4 4 4" />
+  <path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
+</svg>`;
+
+const COPY_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
+  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <rect x="9" y="9" width="11" height="11" rx="2" />
+  <path d="M5 15H4a1 1 0 0 1-1-1V5a2 2 0 0 1 2-2h9a1 1 0 0 1 1 1v1" />
+</svg>`;
+
+const INSERT_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
+  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M20 5v6a3 3 0 0 1-3 3H5" /><path d="M9 10l-4 4 4 4" />
+</svg>`;
+
+const CLOSE_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+  stroke-linecap="round" aria-hidden="true">
+  <path d="M6 6l12 12" /><path d="M18 6L6 18" />
+</svg>`;
+
+const TRASH_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
+  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M4 7h16" /><path d="M10 5h4" />
+  <path d="M6.5 7l.8 12a1 1 0 0 0 1 1h7.4a1 1 0 0 0 1-1l.8-12" />
+</svg>`;
+
+const hasFiles = (event) => [...(event.dataTransfer?.types ?? [])].includes('Files');
+
+const bytes = (size) => (size < 1024 * 1024 ? `${Math.round(size / 1024)} KB` : `${(size / 1048576).toFixed(1)} MB`);
+
+// One file, streamed. XHR rather than fetch for the one thing fetch cannot do:
+// tell you how far a 60 MB screen recording has got.
+const upload = (file, dir, onProgress) =>
+  new Promise((done, fail) => {
+    const request = new XMLHttpRequest();
+    request.open('POST', '/api/assets');
+    request.setRequestHeader('x-fb-slides', '1');
+    // A filename is not latin-1 and a header is: encoded here, decoded there.
+    request.setRequestHeader('x-fb-name', encodeURIComponent(file.name));
+    request.setRequestHeader('x-fb-dir', encodeURIComponent(dir));
+    request.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
+    request.upload.addEventListener('progress', (event) => {
+      if (event.lengthComputable) onProgress(event.loaded / event.total);
+    });
+    request.addEventListener('load', () => {
+      let answer = {};
+      try {
+        answer = JSON.parse(request.responseText);
+      } catch {
+        /* a body that is not JSON is a failure whatever it says */
+      }
+      if (request.status === 200 && answer.path) done(answer);
+      else fail(new Error(answer.error ?? `the server said ${request.status}`));
+    });
+    request.addEventListener('error', () => fail(new Error('the server is not answering')));
+    request.send(file);
+  });
+
+// ---------------------------------------------------------------------------
+// `paste` writes a block into the slide the way the picker does; `active` says
+// whether the drawer is open, which is the only time a drop means this.
+// ---------------------------------------------------------------------------
+
+export const createAssets = ({ paste, active }) => {
+  // ---- the drawer panel -------------------------------------------------
+
+  const element = document.createElement('div');
+  element.className = 'deck-assets';
+  element.hidden = true;
+  element.innerHTML = `
+    <header>
+      <span class="deck-assets-title">Assets</span>
+      <button type="button" class="deck-assets-close" aria-label="Close">${CLOSE_ICON}</button>
+    </header>
+    <div class="deck-assets-where">
+      <label for="deck-assets-dir">folder</label>
+      <select id="deck-assets-dir" class="deck-assets-dir"></select>
+    </div>
+    <div class="deck-assets-name-row" hidden>
+      <input class="deck-assets-new" type="text" spellcheck="false" autocomplete="off"
+        placeholder="new/folder" aria-label="New folder" />
+      <button type="button" class="deck-assets-go">Save here</button>
+    </div>
+    <p class="deck-assets-waiting" hidden></p>
+    <button type="button" class="deck-assets-zone">
+      Drop files anywhere on the deck<small>— or click to choose them</small>
+    </button>
+    <input type="file" class="deck-assets-input" multiple hidden />
+    <ul class="deck-assets-list"></ul>
+    <div class="deck-assets-confirm" hidden>
+      <p>Delete <code></code> from disk?<br />There is no undo, and any slide
+        pointing at it will come up empty.</p>
+      <input class="deck-assets-word" type="text" spellcheck="false" autocomplete="off"
+        placeholder="${WORD}" aria-label="Type ${WORD} to delete" />
+      <div>
+        <button type="button" class="deck-assets-cancel">Cancel</button>
+        <button type="button" class="deck-assets-confirm-delete" disabled>Delete</button>
+      </div>
+    </div>
+  `;
+
+  const select = element.querySelector('.deck-assets-dir');
+  const nameRow = element.querySelector('.deck-assets-name-row');
+  const nameInput = element.querySelector('.deck-assets-new');
+  const goButton = element.querySelector('.deck-assets-go');
+  const waiting = element.querySelector('.deck-assets-waiting');
+  const zone = element.querySelector('.deck-assets-zone');
+  const fileInput = element.querySelector('.deck-assets-input');
+  const list = element.querySelector('.deck-assets-list');
+  const confirmBox = element.querySelector('.deck-assets-confirm');
+  const wordInput = confirmBox.querySelector('.deck-assets-word');
+  const confirmButton = confirmBox.querySelector('.deck-assets-confirm-delete');
+
+  // ---- the full-page sheet ----------------------------------------------
+
+  const overlay = document.createElement('div');
+  overlay.id = 'deck-drop';
+  overlay.hidden = true;
+  overlay.innerHTML = `
+    <div class="deck-drop-sheet">
+      <h2>Drop into <code class="deck-drop-root">assets/</code></h2>
+      <ul class="deck-drop-targets"></ul>
+    </div>
+  `;
+  const targets = overlay.querySelector('.deck-drop-targets');
+  const rootLabel = overlay.querySelector('.deck-drop-root');
+
+  // ---- state ------------------------------------------------------------
+
+  let root = 'assets'; // the folder as the browser writes it
+  let dirs = []; // its subfolders, as the server last listed them
+  let chosen = ''; // where the next drop goes, remembered between drops
+  let pending = null; // files waiting for a folder that has yet to be named
+  let asking = null; // { path, row } — the delete question standing over the list
+
+  // The root, what the server last listed, and — however that listing raced
+  // with the upload that made it — the folder this drop actually went to.
+  const folders = () => {
+    const all = new Set(['', ...dirs]);
+    if (chosen) all.add(chosen);
+    return [...all];
+  };
+
+  const drawSelect = () => {
+    select.innerHTML = folders()
+      .map((dir) => `<option value="${dir}">${root}/${dir ? `${dir}/` : ''}</option>`)
+      .join('');
+    select.insertAdjacentHTML('beforeend', `<option value="${NEW}">＋ new folder…</option>`);
+    select.value = pending ? NEW : folders().includes(chosen) ? chosen : '';
+    nameRow.hidden = select.value !== NEW;
+    goButton.hidden = !pending;
+  };
+
+  const drawTargets = () => {
+    rootLabel.textContent = `${root}/`;
+    targets.innerHTML = folders()
+      .map(
+        (dir) =>
+          `<li data-dir="${dir}"${dir === chosen ? ' class="is-last"' : ''}>` +
+          `${dir ? `${dir}/` : `${root}/`}</li>`,
+      )
+      .join('');
+    targets.insertAdjacentHTML('beforeend', `<li data-dir="${NEW}" class="is-new">＋ new folder…</li>`);
+  };
+
+  // The folder list as it is right now: a drop is often the second one, and the
+  // folder the first one made should be there to aim at.
+  const refresh = async () => {
+    try {
+      const response = await fetch('/api/assets', { headers: API_HEADERS, cache: 'no-cache' });
+      if (response.ok) {
+        const answer = await response.json();
+        root = answer.dir ?? root;
+        dirs = Array.isArray(answer.dirs) ? answer.dirs : [];
+      }
+    } catch {
+      /* no listing: assets/ itself is always there to drop into */
+    }
+    drawSelect();
+    drawTargets();
+  };
+
+  // ---- open and close ---------------------------------------------------
+
+  const open = () => {
+    element.hidden = false;
+    refresh();
+  };
+
+  const closeConfirm = () => {
+    asking = null;
+    confirmBox.hidden = true;
+    wordInput.value = '';
+    confirmButton.disabled = true;
+  };
+
+  const close = () => {
+    element.hidden = true;
+    pending = null;
+    nameRow.hidden = true;
+    waiting.hidden = true;
+    closeConfirm();
+  };
+
+  // ---- the rows ---------------------------------------------------------
+
+  const copy = async (text, button) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      button.classList.add('is-done');
+      setTimeout(() => button.classList.remove('is-done'), 900);
+    } catch {
+      // No clipboard permission: select the path instead, so ⌘C still works.
+      const range = document.createRange();
+      range.selectNodeContents(button.closest('li').querySelector('code'));
+      const selection = getSelection();
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  };
+
+  const addRow = (file) => {
+    const row = document.createElement('li');
+    row.innerHTML = `<span class="deck-assets-file"></span><span class="deck-assets-pct"></span>`;
+    row.querySelector('.deck-assets-file').textContent = file.name;
+    const pct = row.querySelector('.deck-assets-pct');
+    pct.textContent = bytes(file.size);
+    list.append(row);
+    row.scrollIntoView({ block: 'nearest' });
+
+    return {
+      progress: (share) => {
+        pct.textContent = `${Math.round(share * 100)}%`;
+      },
+      failed: (message) => {
+        row.classList.add('is-failed');
+        pct.textContent = message;
+      },
+      done: ({ path, name }) => {
+        row.classList.add('is-done');
+        row.innerHTML =
+          `<code></code>` +
+          `<span class="deck-assets-acts">` +
+          `<button type="button" class="deck-assets-copy" title="Copy the path">${COPY_ICON}</button>` +
+          `<button type="button" class="deck-assets-insert" title="Write it into the slide">${INSERT_ICON}</button>` +
+          `<button type="button" class="deck-assets-trash" title="Delete the file">${TRASH_ICON}</button>` +
+          `</span>`;
+        row.querySelector('code').textContent = path;
+        row.querySelector('.deck-assets-copy').addEventListener('click', (event) =>
+          copy(path, event.currentTarget),
+        );
+        row.querySelector('.deck-assets-insert').addEventListener('click', () => {
+          paste(blockFor(path, name));
+          close();
+        });
+        row.querySelector('.deck-assets-trash').addEventListener('click', () => askDelete(path, row));
+      },
+    };
+  };
+
+  // One at a time: a folder of screenshots dropped at once should not open ten
+  // sockets, and the rows then fill in the order they were dropped.
+  const send = async (files, dir) => {
+    if (!files.length) return;
+    chosen = dir;
+    open();
+    for (const file of files) {
+      const row = addRow(file);
+      try {
+        const answer = await upload(file, dir, row.progress);
+        row.done(answer);
+        // The folder as the server spells it — `talk 2026` was typed, and what
+        // exists on disk is `talk-2026`. The list should say the latter.
+        chosen = answer.dir;
+        if (answer.dir && !dirs.includes(answer.dir)) {
+          dirs = [...dirs, answer.dir].sort((a, b) => a.localeCompare(b, 'en', { numeric: true }));
+        }
+        drawSelect();
+        drawTargets();
+      } catch (error) {
+        row.failed(error.message);
+      }
+    }
+  };
+
+  const askDelete = (path, row) => {
+    asking = { path, row };
+    confirmBox.querySelector('code').textContent = path;
+    wordInput.value = '';
+    confirmButton.disabled = true;
+    confirmBox.hidden = false;
+    wordInput.focus();
+  };
+
+  const doDelete = async () => {
+    if (!asking || confirmButton.disabled) return;
+    const { path, row } = asking;
+    confirmButton.disabled = true;
+    try {
+      const response = await fetch(`/api/assets?path=${encodeURIComponent(path)}`, {
+        method: 'DELETE',
+        headers: API_HEADERS,
+      });
+      if (!response.ok) throw new Error((await response.json()).error ?? response.status);
+      row.remove();
+      closeConfirm();
+      // The folder may have been the file's only reason to exist; the list says
+      // what is there now either way.
+      refresh();
+    } catch (error) {
+      confirmBox.querySelector('code').textContent = error.message;
+      confirmButton.disabled = false;
+    }
+  };
+
+  // A drop that named no folder yet: hold the files, ask, and send on the answer.
+  const askName = (files) => {
+    pending = files;
+    open();
+    drawSelect();
+    nameRow.hidden = false;
+    goButton.hidden = false;
+    waiting.hidden = false;
+    waiting.textContent = `${files.length} file${files.length === 1 ? '' : 's'} waiting for a folder name.`;
+    nameInput.focus();
+    nameInput.select();
+  };
+
+  const confirmName = () => {
+    const dir = nameInput.value.trim().replace(/^\/+|\/+$/g, '');
+    if (!dir) return nameInput.focus();
+    const files = pending;
+    pending = null;
+    nameInput.value = '';
+    nameRow.hidden = true;
+    goButton.hidden = true;
+    waiting.hidden = true;
+    if (files) send(files, dir);
+    else {
+      chosen = dir;
+      drawSelect();
+    }
+  };
+
+  const drop = (files, dir) => {
+    if (!files.length) return;
+    if (dir === NEW) askName(files);
+    else send(files, dir);
+  };
+
+  // ---- wiring: the panel -------------------------------------------------
+
+  element.querySelector('.deck-assets-close').addEventListener('click', close);
+
+  select.addEventListener('change', () => {
+    if (select.value === NEW) {
+      nameRow.hidden = false;
+      nameInput.focus();
+      return;
+    }
+    nameRow.hidden = true;
+    chosen = select.value;
+  });
+
+  wordInput.addEventListener('input', () => {
+    confirmButton.disabled = wordInput.value.trim() !== WORD;
+  });
+  wordInput.addEventListener('keydown', (event) => {
+    if (event.key !== 'Enter') return;
+    event.preventDefault();
+    doDelete();
+  });
+  confirmBox.querySelector('.deck-assets-cancel').addEventListener('click', closeConfirm);
+  confirmButton.addEventListener('click', doDelete);
+
+  goButton.addEventListener('click', confirmName);
+  nameInput.addEventListener('keydown', (event) => {
+    if (event.key !== 'Enter') return;
+    event.preventDefault();
+    confirmName();
+  });
+
+  zone.addEventListener('click', () => {
+    if (select.value === NEW && !nameInput.value.trim()) return nameInput.focus();
+    fileInput.click();
+  });
+  fileInput.addEventListener('change', () => {
+    const files = [...fileInput.files];
+    fileInput.value = '';
+    drop(files, select.value === NEW ? nameInput.value.trim() : select.value);
+  });
+
+  // ---- wiring: the sheet -------------------------------------------------
+  // `dragover` is the only event a drag repeats — every few milliseconds, for
+  // as long as it is over the page. So the sheet is raised by it and dropped by
+  // its absence: a watchdog restarted on each one, firing shortly after the
+  // last. Counting dragenter against dragleave is the usual way, and it is the
+  // one that goes wrong here — the sheet appears under the cursor mid-drag,
+  // which is itself a change of target, and the pair that follows does not
+  // arrive in a fixed order.
+
+  let watchdog = 0;
+
+  const show = () => {
+    clearTimeout(watchdog);
+    watchdog = setTimeout(hide, 240);
+    if (!overlay.hidden) return;
+    drawTargets();
+    overlay.hidden = false;
+    refresh();
+  };
+
+  const hide = () => {
+    clearTimeout(watchdog);
+    watchdog = 0;
+    overlay.hidden = true;
+    for (const target of targets.children) target.classList.remove('is-over');
+  };
+
+  const over = (event) => {
+    if (!active() || !hasFiles(event)) return;
+    // Without this the browser takes the drop and navigates to the file.
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+    show();
+    const under = event.target.closest?.('[data-dir]');
+    for (const target of targets.children) target.classList.toggle('is-over', target === under);
+  };
+
+  // Both, so the sheet is up on the first frame of the drag rather than on the
+  // first repeat — they do the same thing, and `show` is idempotent.
+  document.addEventListener('dragenter', over);
+  document.addEventListener('dragover', over);
+  // A drag that ends anywhere else — Escape, or a drop outside the window.
+  document.addEventListener('dragend', hide);
+
+  document.addEventListener('drop', (event) => {
+    if (!active() || !hasFiles(event)) return;
+    event.preventDefault();
+    const target = event.target.closest?.('[data-dir]');
+    hide();
+    drop([...event.dataTransfer.files], target?.dataset.dir ?? chosen);
+  });
+
+  document.body.append(overlay);
+
+  return {
+    element,
+    open,
+    close,
+    isOpen: () => !element.hidden,
+    hideSheet: hide,
+    // One layer per press, innermost first — the drawer asks this before it
+    // decides whether Escape was meant for it.
+    escape: () => {
+      if (!confirmBox.hidden) return closeConfirm(), true;
+      if (!element.hidden) return close(), true;
+      return false;
+    },
+  };
+};
+
+export default createAssets;