image-to-pixel 3.0.0 → 3.1.0

package/lib/editor/index.js

@@ -7,7 +7,7 @@ import { parsePalette, toGPL, toHexFile, toPaletteJSON } from '../core/palette/p
 import { fetchLospec } from '../core/palette/lospec.js';
 import { detectGrid } from '../core/export/scale.js';
 import { toHex } from '../core/color.js';
-import { estimateFps, videoReady, seekTo, sniffVideoCodec } from '../core/video/frames.js';
+import { estimateFps, videoReady, seekTo, sniffVideoCodec, hasAudioTrack } from '../core/video/frames.js';
 import { downloadBlob } from '../core/export/canvas.js';
 import { PRESETS } from '../core/presets.js';
 import { h, render, pickFiles } from './dom.js';
@@ -20,6 +20,7 @@ import { createExporter } from './exporter.js';
 import { toast, menu, closeMenu, dialog } from './ui.js';
 import { SAMPLES, loadSample, sampleURL } from './samples.js';
 import * as persist from './persist.js';
+import { saveWorkspace, loadWorkspace, forgetWorkspace, isQuotaError, fmtBytes } from './workspace.js';
 
 const IMAGE_TYPES = /^image\//;
 const VIDEO_TYPES = /^video\//;
@@ -67,6 +68,8 @@ export async function mountEditor(root, options = {}) {
   const btn = (ic, label, onclick, extra = {}) => h('button.itp-btn.icon', { type: 'button', 'aria-label': label, title: label, html: icon(ic), onclick, ...extra });
 
   const fileName = h('span.name', { text: 'No image' });
+  // click the name to rename (F2); the extension stays as it was
+  fileName.addEventListener('click', () => { if (app.current) startRename(app.current); });
   const fileMeta = h('span.meta.num', {});
   const undoBtn = btn('undo', 'Undo (Ctrl+Z)', () => store.undo());
   const redoBtn = btn('redo', 'Redo (Ctrl+Shift+Z)', () => store.redo());
@@ -78,6 +81,8 @@ export async function mountEditor(root, options = {}) {
   const inspBtn = btn('sidebarRight', 'Toggle inspector (/)', () => togglePanel('insp'));
   const helpBtn = btn('keyboard', 'Keyboard shortcuts (?)', () => showHelp());
   const exportBtn = h('button.itp-btn.primary', { type: 'button', 'aria-haspopup': 'menu', html: `${icon('download')}<span>Export</span>`, onclick: e => exportMenu(e.currentTarget) });
+  const saveBtn = h('button.itp-btn.outline', { type: 'button', title: 'Save these files and their settings in this browser', html: `${icon('save')}<span class="hide-sm">Save</span>`, onclick: () => saveNow() });
+  saveBtn.hidden = !usePersist;
   const brand = h('a.itp-brand', { href: options.homeHref || '#', title: 'Image-to-Pixel' }, h('span.itp-mark', { 'aria-hidden': 'true' }, ...Array.from({ length: 9 }, () => h('i'))), h('span.hide-sm', { text: 'Image-to-Pixel' }));
   if (!options.homeHref) brand.addEventListener('click', e => e.preventDefault());
 
@@ -88,7 +93,7 @@ export async function mountEditor(root, options = {}) {
     h('span.hide-sm.contents', {}, undoBtn, redoBtn, h('span.sep')),
     compareBtn, gridBtn, zoomBtn,
     h('span.sep.hide-sm'), h('span.hide-sm.contents', {}, themeBtn, helpBtn), inspBtn,
-    h('span', { style: { width: '6px' } }), exportBtn);
+    h('span', { style: { width: '6px' } }), saveBtn, exportBtn);
 
   // stage extras
   const sampleButtons = options.samples === false ? null : h('div.samples', {}, ...SAMPLES.map(s => h('button', { type: 'button', title: `Try "${s.name}"`, 'aria-label': `Open sample: ${s.name}`, onclick: () => openSample(s) }, h('img', { src: sampleURL(s), alt: '' }))));
@@ -113,9 +118,49 @@ export async function mountEditor(root, options = {}) {
   const timeLabel = h('span.itp-time', {});
   const scrub = h('input.itp-scrub', { type: 'range', min: 0, max: 1000, value: 0, 'aria-label': 'Video position' });
   const fpsLabel = h('span.muted.num', { style: { fontSize: 'var(--fs-xs)', whiteSpace: 'nowrap' } });
+  // sound: muted by default; the choice (and volume) is remembered and applies to every video
+  const sound = { muted: persist.load('muted', true) !== false, volume: Number(persist.load('volume', 1)) };
+  if (!(sound.volume >= 0 && sound.volume <= 1)) sound.volume = 1;
+  // YouTube-style: the speaker button opens a vertical volume slider; all the way down is mute.
+  const muteBtn = btn('volumeOff', 'Volume (M mutes)', () => toggleVolPop(), { 'aria-haspopup': 'true', 'aria-expanded': 'false' });
+  const volFill = h('div.fill');
+  const volThumb = h('div.thumb');
+  const volSlider = h('div.itp-vslider', { role: 'slider', tabindex: '0', 'aria-label': 'Volume', 'aria-orientation': 'vertical', 'aria-valuemin': '0', 'aria-valuemax': '100' }, h('div.track', {}, volFill, volThumb));
+  const volValue = h('span.num', {});
+  const volPop = h('div.itp-volpop', { hidden: true }, volValue, volSlider);
+  const soundBox = h('div.itp-sound', { hidden: true }, volPop, muteBtn);
+  const setLevel = v => setSound(v <= 0.005 ? { muted: true } : { muted: false, volume: Math.min(1, v) });
+  const levelAt = e => { const r = volSlider.querySelector('.track').getBoundingClientRect(); return Math.max(0, Math.min(1, (r.bottom - e.clientY) / r.height)); };
+  volSlider.addEventListener('pointerdown', e => {
+    e.preventDefault(); volSlider.focus(); volSlider.setPointerCapture(e.pointerId);
+    const before = sound.muted ? 0 : sound.volume;
+    setLevel(levelAt(e));
+    const move = ev => setLevel(levelAt(ev));
+    const up = () => {
+      volSlider.removeEventListener('pointermove', move); volSlider.removeEventListener('pointerup', up); volSlider.removeEventListener('pointercancel', up);
+      // dragged down to mute: M brings back the volume it had before the drag
+      if (sound.muted && before > 0) setSound({ muted: true, volume: before });
+    };
+    volSlider.addEventListener('pointermove', move); volSlider.addEventListener('pointerup', up); volSlider.addEventListener('pointercancel', up);
+  });
+  volSlider.addEventListener('keydown', e => {
+    const cur = sound.muted ? 0 : sound.volume;
+    const next = { ArrowUp: cur + 0.05, ArrowRight: cur + 0.05, ArrowDown: cur - 0.05, ArrowLeft: cur - 0.05, PageUp: cur + 0.2, PageDown: cur - 0.2, Home: 0, End: 1 }[e.key];
+    if (next === undefined) { if (e.key === 'Escape') { e.preventDefault(); toggleVolPop(false); muteBtn.focus(); } return; }
+    e.preventDefault(); e.stopPropagation(); setLevel(next);
+  });
+  volSlider.addEventListener('wheel', e => { e.preventDefault(); setLevel((sound.muted ? 0 : sound.volume) - Math.sign(e.deltaY) * 0.05); }, { passive: false });
+  function toggleVolPop(open = volPop.hidden) {
+    volPop.hidden = !open;
+    muteBtn.setAttribute('aria-expanded', String(open));
+    if (open) {
+      const close = e => { if (!soundBox.contains(e.target)) { toggleVolPop(false); document.removeEventListener('pointerdown', close, true); } };
+      document.addEventListener('pointerdown', close, true);
+    }
+  }
   const transport = h('div.itp-transport', { role: 'group', 'aria-label': 'Video' },
     btn('stepBack', 'Previous frame (,)', () => stepFrame(-1)), playBtn, btn('stepForward', 'Next frame (.)', () => stepFrame(1)),
-    timeLabel, scrub, fpsLabel);
+    timeLabel, scrub, soundBox, fpsLabel);
   const stageWrap = h('main.itp-stage', { 'data-video': 'false' }, stage.el, transport);
 
   // on narrow screens the library is a drawer: a tap on the canvas closes it
@@ -224,7 +269,9 @@ export async function mountEditor(root, options = {}) {
   }
 
   async function addVideo(name, file) {
-    const video = h('video', { muted: true, playsInline: true, loop: true, preload: 'auto', crossOrigin: 'anonymous' });
+    // No `loop` attribute: looping by hand on 'ended' is more reliable (some MOV/MP4 files stalled at the
+    // end and lost their sound after Chrome's built-in loop).
+    const video = h('video', { muted: true, playsInline: true, preload: 'auto', crossOrigin: 'anonymous' });
     video.muted = true;
     video.src = URL.createObjectURL(file);
     try {
@@ -246,11 +293,19 @@ export async function mountEditor(root, options = {}) {
     await seekTo(video, Math.min(0.05, video.duration / 2)).catch(() => { });
     item.thumb = await makeThumb(video, item.width, item.height);
     app.items.push(item);
-    estimateFps(video, 30).then(f => { item.fps = f; if (app.current === item) updateTransport(); inspector.syncAnim(); });
+    // measuring plays the video muted for a moment; Play waits for it so the two don't fight
+    item.fpsReady = estimateFps(video, 30).catch(() => 30).then(f => { item.fps = f; item.fpsReady = null; if (app.current === item) updateTransport(); inspector.syncAnim(); });
+    // null = can't tell from the container: the sound controls stay, just in case
+    hasAudioTrack(file).then(a => { item.hasAudio = a; if (app.current === item) updateTransport(); });
     video.addEventListener('timeupdate', () => { if (app.current === item) updateTransport(); });
     video.addEventListener('play', () => { if (app.current === item) { updateTransport(); pumpVideo(item); } });
     video.addEventListener('pause', () => { if (app.current === item) { updateTransport(); schedule(); } });
     video.addEventListener('seeked', () => { if (app.current === item && !app.exporting) schedule(); });
+    video.addEventListener('ended', () => {
+      if (app.current !== item || app.exporting || item.fpsReady) return;
+      video.currentTime = 0;
+      video.play().catch(() => { });
+    });
     return item;
   }
 
@@ -303,7 +358,7 @@ export async function mountEditor(root, options = {}) {
 
   async function openSample(s) {
     const img = await loadSample(s);
-    const item = await addImage(`${s.name}.svg`, img);
+    const item = await addImage(`${s.name}.svg`, img, new File([s.svg], `${s.name}.svg`, { type: 'image/svg+xml' }));
     select(item);
     library.refresh();
   }
@@ -441,6 +496,127 @@ export async function mountEditor(root, options = {}) {
     if (document.activeElement === document.body || document.activeElement?.closest?.('.itp-files')) library.focusFile(item);
   };
 
+  // ================================================================ rename
+  const splitExt = name => { const m = /^(.*?)(\.[^.\s]{1,5})?$/.exec(name); return [m[1], m[2] || '']; };
+  /** Rename a file. The extension is kept: exports are named after it ("<name>@4x.png"). */
+  app.rename = (item, next) => {
+    const [, ext] = splitExt(item.name);
+    let base = String(next || '').trim().replace(/[\\/:*?"<>|]+/g, '-');
+    if (ext && base.toLowerCase().endsWith(ext.toLowerCase())) base = base.slice(0, -ext.length);
+    if (!base || base + ext === item.name) return;
+    item.name = base + ext;
+    library.refresh();
+    updateStatus();
+  };
+  /** Edit the name in place in the header, with the name (not the extension) selected. */
+  function startRename(item) {
+    if (!item || fileName.hidden) return;
+    if (app.current !== item) select(item);
+    const [base] = splitExt(item.name);
+    const input = h('input.itp-name-input', { type: 'text', value: item.name, 'aria-label': 'File name', spellcheck: false });
+    input.style.width = `${Math.min(40, Math.max(12, item.name.length + 2))}ch`;
+    fileName.hidden = true;
+    fileName.after(input);
+    input.focus();
+    input.setSelectionRange(0, base.length);
+    let done = false;
+    const finish = commit => {
+      if (done) return;
+      done = true;
+      if (commit) app.rename(item, input.value);
+      input.remove();
+      fileName.hidden = false;
+    };
+    input.addEventListener('keydown', e => {
+      e.stopPropagation();
+      if (e.key === 'Enter') { e.preventDefault(); finish(true); }
+      if (e.key === 'Escape') { e.preventDefault(); finish(false); }
+    });
+    input.addEventListener('blur', () => finish(true));
+  }
+  app.startRename = startRename;
+
+  // ================================================================ saved workspace
+  // Files (their bytes), names, per-file settings and the shared settings, in this browser's IndexedDB.
+  let savedInfo = null;   // { count, bytes, savedAt } of what is saved, or null
+  app.savedWorkspace = () => savedInfo;
+
+  /** A Blob for a file, for saving: the original bytes, or a PNG of what was added without a file. */
+  async function bytesOf(item) {
+    if (item.file) return item.file;
+    const c = document.createElement('canvas');
+    c.width = item.width; c.height = item.height;
+    c.getContext('2d').drawImage(item.source, 0, 0);
+    return new Promise(res => c.toBlob(b => res(b), 'image/png'));
+  }
+
+  async function saveNow() {
+    if (!usePersist) return;
+    if (!app.items.length) {
+      if (savedInfo) { await forgetSaved(); return; }
+      toast('Add files first, then Save keeps them here for next time.');
+      return;
+    }
+    saveBtn.disabled = true;
+    try {
+      const items = [];
+      for (const it of app.items) items.push({ name: it.name, type: it.type, file: await bytesOf(it), own: it.own ? clone(it.own) : null });
+      const bytes = await saveWorkspace({ shared: clone(app.shared), current: Math.max(0, app.items.indexOf(app.current)), items });
+      const first = !savedInfo;
+      savedInfo = { count: items.length, bytes, savedAt: Date.now() };
+      library.refresh();
+      toast(first
+        ? `Saved ${items.length} file${items.length === 1 ? '' : 's'} (${fmtBytes(bytes)}) in this browser only. They reopen next time; remove them with Forget in the Files list.`
+        : `Saved ${items.length} file${items.length === 1 ? '' : 's'} (${fmtBytes(bytes)})`, { kind: 'ok', timeout: first ? 7000 : 2200 });
+    } catch (e) {
+      console.error(e);
+      toast(isQuotaError(e) ? "Not enough browser storage to save these files. Remove some (videos are large) and try again." : `Couldn't save: ${e.message}`, { kind: 'error' });
+    } finally {
+      saveBtn.disabled = false;
+    }
+  }
+  app.saveWorkspace = saveNow;
+
+  async function forgetSaved() {
+    try { await forgetWorkspace(); } catch (e) { toast(`Couldn't remove the saved files: ${e.message}`, { kind: 'error' }); return; }
+    savedInfo = null;
+    library.refresh();
+    toast('Removed the saved files from this browser. Files open now stay open.');
+  }
+  app.forgetWorkspace = forgetSaved;
+
+  /** Reopen the saved workspace (on start, when nothing else was opened). */
+  async function restoreSaved() {
+    const ws = await loadWorkspace();
+    if (!ws) return;
+    savedInfo = { count: ws.items.length, bytes: ws.items.reduce((a, it) => a + (it.file ? it.file.size : 0), 0), savedAt: ws.savedAt };
+    if (app.items.length || !ws.items.length) { library.refresh(); return; }
+    if (ws.shared && !/[#&]s=/.test(location.hash)) store.setTarget('shared', ws.shared);   // a share link's settings win
+    const t = ws.items.length > 2 ? toast(`Opening ${ws.items.length} saved files`, { progress: true }) : null;
+    const added = [];
+    for (let i = 0; i < ws.items.length; i++) {
+      const s = ws.items[i];
+      try {
+        const file = s.file instanceof File ? s.file : new File([s.file], s.name, { type: s.file.type });
+        let item;
+        if (s.type === 'video') item = await addVideo(s.name, file);
+        else {
+          let drawable;
+          try { drawable = await createImageBitmap(file); } catch { drawable = new Image(); drawable.src = URL.createObjectURL(file); await drawable.decode(); }
+          item = await addImage(s.name, drawable, file);
+        }
+        item.own = s.own || null;
+        added.push(item);
+      } catch (e) { console.warn('[workspace] skipped', s.name, e); }
+      t?.progress((i + 1) / ws.items.length);
+    }
+    t?.close();
+    const cur = added[Math.min(ws.current || 0, added.length - 1)];
+    if (cur) select(cur);
+    library.refresh();
+    if (added.length) toast(`Reopened your saved files (${added.length})`, { timeout: 2200 });
+  }
+
   // ================================================================ video
   function updateTransport() {
     const it = app.current;
@@ -454,6 +630,31 @@ export async function mountEditor(root, options = {}) {
     scrub.value = String(Math.round(v.currentTime / (v.duration || 1) * 1000));
     scrub.style.setProperty('--p', `${scrub.value / 10}%`);
     fpsLabel.textContent = `${it.fps} fps`;
+    soundBox.hidden = it.hasAudio === false;
+    applySound(v);
+  }
+  /** Mute/volume on the current video and in the controls. */
+  function applySound(v) {
+    if (v && !app.exporting && !app.current?.fpsReady) {
+      if (v.muted !== sound.muted) v.muted = sound.muted;
+      if (v.volume !== sound.volume) v.volume = sound.volume;
+    }
+    const level = sound.muted ? 0 : sound.volume;
+    const pct = Math.round(level * 100);
+    muteBtn.innerHTML = icon(level ? 'volume' : 'volumeOff');
+    const label = level ? `Volume ${pct}% (M mutes)` : 'Muted (M unmutes)';
+    muteBtn.setAttribute('aria-label', label); muteBtn.title = label;
+    volSlider.setAttribute('aria-valuenow', String(pct));
+    volSlider.setAttribute('aria-valuetext', level ? `${pct}%` : 'Muted');
+    volSlider.style.setProperty('--v', `${pct}%`);
+    volValue.textContent = level ? String(pct) : 'Off';
+  }
+  function setSound(patch) {
+    Object.assign(sound, patch);
+    // unmuting at zero volume brings the volume back up
+    if (patch.muted === false && !sound.volume) sound.volume = 1;
+    persist.save('muted', sound.muted); persist.save('volume', sound.volume);
+    applySound(app.current && app.current.type === 'video' ? app.current.source : null);
   }
   function pumpVideo(item) {
     const v = item.source;
@@ -464,10 +665,15 @@ export async function mountEditor(root, options = {}) {
     };
     tick();
   }
-  function togglePlay() {
+  async function togglePlay() {
     const it = app.current;
     if (!it || it.type !== 'video') return;
-    if (it.source.paused) it.source.play().catch(e => toast(e.message, { kind: 'error' })); else it.source.pause();
+    if (!it.source.paused) { it.source.pause(); return; }
+    if (it.fpsReady) await it.fpsReady;      // still measuring the frame rate (plays muted for a moment)
+    if (app.current !== it) return;
+    applySound(it.source);
+    if (it.source.ended) it.source.currentTime = 0;
+    it.source.play().catch(e => toast(e.message, { kind: 'error' }));
   }
   function stepFrame(dir) {
     const it = app.current;
@@ -688,7 +894,7 @@ export async function mountEditor(root, options = {}) {
     const keys = [
       ['Open files', 'Ctrl O'], ['Paste image', 'Ctrl V'], ['Export PNG', 'Ctrl S'], ['Undo', 'Ctrl Z'], ['Redo', 'Ctrl Shift Z'],
       ['Compare', 'C'], ['Pixel grid', 'G'], ['Fit', 'F'], ['Zoom in / out', '+ -'], ['Pixel width ±1', '[ ]'], ['Pixel width ±8', 'Shift [ ]'],
-      ['Next / previous dither', 'D  Shift D'], ['Play / pause video', 'Space'], ['Step one frame', ', .'], ['Library', '\\'], ['Inspector', '/'],
+      ['Next / previous dither', 'D  Shift D'], ['Play / pause video', 'Space'], ['Mute / unmute video', 'M'], ['Rename file', 'F2'], ['Step one frame', ', .'], ['Library', '\\'], ['Inspector', '/'],
       ['Theme', 'T'], ['Next / previous file', 'Alt ↓ ↑'], ['Move file down / up', 'Alt Shift ↓ ↑'], ['This list', '?'],
     ];
     dialog('Keyboard shortcuts', [h('div.itp-keys', {}, ...keys.map(([a, k]) => h('div', {}, h('span', { text: a }), h('span', {}, ...k.split(' ').filter(Boolean).map(x => h('kbd', { text: x }))))))]);
@@ -729,6 +935,8 @@ export async function mountEditor(root, options = {}) {
         break;
       }
       case ' ': if (app.current?.type === 'video') { e.preventDefault(); togglePlay(); } break;
+      case 'F2': if (app.current) { e.preventDefault(); startRename(app.current); } break;
+      case 'm': case 'M': if (app.current?.type === 'video' && !soundBox.hidden) { e.preventDefault(); setSound({ muted: !sound.muted }); } break;
       case ',': stepFrame(-1); break;
       case '.': stepFrame(1); break;
       case 'Escape': if (stage.picking) togglePicker(); else closeMenu(); break;
@@ -771,6 +979,7 @@ export async function mountEditor(root, options = {}) {
   library.refresh();
   updateStatus();
   undoBtn.disabled = redoBtn.disabled = true;
+  if (usePersist && options.restore !== false) restoreSaved().catch(e => console.warn('[workspace]', e));
 
   const api = {
     app, store,

package/lib/editor/inspector.js

@@ -148,11 +148,17 @@ export function createInspector(app) {
   const anFps = numberInput({ label: 'Frames per second', min: 1, max: 60, onChange: () => { } });
   const anStart = numberInput({ label: 'Start (s)', min: 0, max: 36000, step: 0.1, onChange: () => { } });
   const anEnd = numberInput({ label: 'End (s)', min: 0, max: 36000, step: 0.1, onChange: () => { } });
+  const anSize = select({ label: 'Video size', options: [
+    { value: '1080', label: 'Full HD (sharp in any player)' }, { value: '720', label: '720p' }, { value: '2160', label: '4K' }, { value: 'scale', label: 'Same scale as PNG' },
+  ], onChange: () => { } });
+  anSize.set('1080');
+  const anAudio = toggle({ label: 'Keep audio', help: "The video's soundtrack, cut to the same start and end. MP4 and WebM only.", onChange: () => syncAnim() });
+  const anAudioInput = anAudio.el.querySelector('input');
   const anNote = h('div.help', {});
   const btnAnim = h('button.itp-btn.primary.block', { type: 'button', html: `${icon('film')}<span>Export animation</span>`, onclick: () => app.exportAnimation(animOpts()) });
-  const secAnim = sec('animation', 'Animation', false, null, anSource.el, anFormat.el, anFps.el, h('div.itp-grid2', {}, anStart.el, anEnd.el), anNote, btnAnim);
-  anFps.set(12); anStart.set(0); anEnd.set(0);
-  const animOpts = () => ({ source: anSource.select.value, format: anFormat.select.value, fps: Number(anFps.input.value) || 12, start: Number(anStart.input.value) || 0, end: Number(anEnd.input.value) || 0 });
+  const secAnim = sec('animation', 'Animation', false, null, anSource.el, anFormat.el, anFps.el, h('div.itp-grid2', {}, anStart.el, anEnd.el), anSize.el, anAudio.el, anNote, btnAnim);
+  anFps.set(12); anStart.set(0); anEnd.set(0); anAudio.set(true);
+  const animOpts = () => ({ source: anSource.select.value, format: anFormat.select.value, fps: Number(anFps.input.value) || 12, start: Number(anStart.input.value) || 0, end: Number(anEnd.input.value) || 0, audio: anAudioInput.checked, videoSize: anSize.select.value });
 
   // sprite sheet
   const shCols = numberInput({ label: 'Columns', min: 0, max: 256, help: '0 = as square as possible.', onChange: () => { } });
@@ -210,9 +216,18 @@ export function createInspector(app) {
     if (hasVideo && !Number(anEnd.input.value)) anEnd.set(Math.round((cur.duration || 0) * 10) / 10);
     if (hasVideo && cur.fps && !anFps.input.dataset.touched) anFps.set(Math.min(30, Math.round(cur.fps)));
     const f = anFormat.select.value;
+    const isVideo = f === 'mp4' || f === 'webm';
+    anAudio.el.hidden = !(src === 'video' && isVideo);
+    anSize.el.hidden = !isVideo;
+    const vs = app.videoSupport;
+    const noAudio = vs && 'opus' in vs && anAudioInput.checked && !anAudio.el.hidden && !(f === 'mp4' ? vs.aac || vs.opus : vs.opus);
     anNote.textContent = !ok
       ? (src === 'video' ? 'Open a video to export an animation.' : 'Add two or more images to animate them.')
-      : (f === 'mp4' || f === 'webm') && !app.videoSupport?.[f] ? `${f.toUpperCase()} encoding isn't available in this browser. GIF and PNG sequence always work.` : '';
+      : isVideo && !vs?.[f] ? `${f.toUpperCase()} encoding isn't available in this browser. GIF and PNG sequence always work.`
+      : noAudio ? "This browser can't encode audio, so the video will be silent."
+      : f === 'mp4' && vs && 'aac' in vs && !vs.aac && vs.opus && anAudioInput.checked && !anAudio.el.hidden
+        ? "This browser can't encode AAC, so the MP4's sound will be Opus, which Windows Media Player and QuickTime may not play. WebM, or Chrome/Edge on Windows or macOS, avoids that."
+      : '';
   }
   anFps.input.addEventListener('change', () => { anFps.input.dataset.touched = '1'; });
 

package/lib/editor/library.js

@@ -9,7 +9,7 @@ import { mergeSettings, defaultSettings } from '../core/settings.js';
 
 export function createLibrary(app) {
   let tab = 'files';
-  const tabBtn = (id, label, ic) => h('button', { type: 'button', role: 'tab', 'aria-selected': String(id === tab), html: `${icon(ic)}<span>${label}</span>`, onclick: () => setTab(id) });
+  const tabBtn = (id, label, ic) => h('button', { type: 'button', role: 'tab', title: label, 'aria-selected': String(id === tab), html: `${icon(ic)}<span>${label}</span>`, onclick: () => setTab(id) });
   const tFiles = tabBtn('files', 'Files', 'files');
   const tPresets = tabBtn('presets', 'Presets', 'presets');
   const tPalettes = tabBtn('palettes', 'Palettes', 'palette');
@@ -45,6 +45,7 @@ export function createLibrary(app) {
       { label: 'Paste settings', sub: app.clipboard ? 'Gives this file its own settings' : 'Copy settings from a file first', icon: 'clipboard', disabled: !app.clipboard, onClick: () => app.pasteSettings(it) },
       { label: 'Apply these settings to all files', icon: 'layers', disabled: !many, onClick: () => app.applyToAll(it) },
       'sep',
+      { label: 'Rename', sub: 'Exports are named after it', icon: 'rename', kbd: 'F2', onClick: () => app.startRename(it) },
       { label: 'Duplicate', sub: 'A copy with its own settings, to compare looks', icon: 'copy', onClick: () => app.duplicate(it) },
       { label: 'Move up', icon: 'arrowUp', kbd: 'Alt Shift ↑', disabled: i <= 0, onClick: () => app.move(it, -1) },
       { label: 'Move down', icon: 'arrowDown', kbd: 'Alt Shift ↓', disabled: i >= app.items.length - 1, onClick: () => app.move(it, 1) },
@@ -67,6 +68,7 @@ export function createLibrary(app) {
         h('div.actions', {}, more,
           h('button.itp-btn.small.icon.danger', { type: 'button', 'aria-label': `Remove ${it.name}`, title: 'Remove', html: icon('x'), onclick: e => { e.stopPropagation(); app.removeItem(it); } })));
       row.addEventListener('click', () => app.select(it));
+      row.addEventListener('dblclick', e => { if (e.target.closest('.title')) app.startRename(it); });
       row.addEventListener('contextmenu', e => { e.preventDefault(); app.select(it); fileMenu(it, more); });
       row.addEventListener('keydown', e => {
         if (e.target !== row) return;
@@ -89,7 +91,11 @@ export function createLibrary(app) {
     const add = h('div', { style: { padding: '4px 12px 12px', display: 'flex', gap: '6px' } },
       h('button.itp-btn.outline.small', { type: 'button', html: `${icon('plus')}<span>Add files</span>`, onclick: () => app.openFiles() }),
       h('button.itp-btn.small', { type: 'button', html: `${icon('clipboard')}<span>Paste</span>`, title: 'Paste an image from the clipboard (Ctrl+V)', onclick: () => app.pasteFromClipboard() }));
-    render(body, head, list, add, h('div.itp-group', {}, h('span', { text: 'Drop images or videos anywhere in the window. Files share one set of settings unless you give one its own (⋯ menu or right-click).' })));
+    const saved = app.savedWorkspace && app.savedWorkspace();
+    const savedNote = saved ? h('div.itp-group.itp-saved', {},
+      h('span', { text: `Saved in this browser: ${saved.count} file${saved.count === 1 ? '' : 's'}`, title: 'Kept in this browser\'s storage, never uploaded. Clearing the site\'s data also removes it.' }),
+      h('button.itp-link', { type: 'button', text: 'Forget', title: 'Remove the saved files from this browser', onclick: () => app.forgetWorkspace() })) : null;
+    render(body, head, list, add, savedNote, h('div.itp-group', {}, h('span', { text: 'Drop images or videos anywhere in the window. Files share one set of settings unless you give one its own (⋯ menu or right-click). Save keeps them in this browser for next time.' })));
   }
 
   // ---- presets (thumbnails rendered from the current image)

package/lib/editor/persist.js

@@ -1,18 +1,18 @@
-// localStorage wrappers. Every access is guarded: storage may be disabled or full.
-
-const PREFIX = 'itp:';
-
-export function load(key, fallback) {
-  try {
-    const v = localStorage.getItem(PREFIX + key);
-    return v == null ? fallback : JSON.parse(v);
-  } catch { return fallback; }
-}
-
-export function save(key, value) {
-  try { localStorage.setItem(PREFIX + key, JSON.stringify(value)); return true; } catch { return false; }
-}
-
-export function remove(key) {
-  try { localStorage.removeItem(PREFIX + key); } catch { /* ignore */ }
-}
+// localStorage wrappers. Every access is guarded: storage may be disabled or full.
+
+const PREFIX = 'itp:';
+
+export function load(key, fallback) {
+  try {
+    const v = localStorage.getItem(PREFIX + key);
+    return v == null ? fallback : JSON.parse(v);
+  } catch { return fallback; }
+}
+
+export function save(key, value) {
+  try { localStorage.setItem(PREFIX + key, JSON.stringify(value)); return true; } catch { return false; }
+}
+
+export function remove(key) {
+  try { localStorage.removeItem(PREFIX + key); } catch { /* ignore */ }
+}