image-to-pixel 3.0.0 → 3.1.0

package/lib/editor/workspace.js

@@ -0,0 +1,62 @@
+// The saved workspace: every open file (its bytes, name and own settings) plus the shared settings,
+// kept in this browser's IndexedDB. Nothing is uploaded. One workspace per browser profile.
+
+const DB = 'image-to-pixel';
+const STORE = 'workspace';
+const KEY = 'current';
+const VERSION = 1;
+
+function open() {
+  return new Promise((resolve, reject) => {
+    if (typeof indexedDB === 'undefined') { reject(new Error('This browser has no IndexedDB')); return; }
+    const req = indexedDB.open(DB, 1);
+    req.onupgradeneeded = () => { if (!req.result.objectStoreNames.contains(STORE)) req.result.createObjectStore(STORE); };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+async function run(mode, fn) {
+  const db = await open();
+  try {
+    return await new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE, mode);
+      const req = fn(tx.objectStore(STORE));
+      tx.oncomplete = () => resolve(req && req.result);
+      tx.onerror = () => reject(tx.error || (req && req.error));
+      tx.onabort = () => reject(tx.error || new Error('Saving was cancelled'));
+    });
+  } finally {
+    db.close();
+  }
+}
+
+/**
+ * Save the workspace.
+ * @param {{ shared: object, current: number, items: { name: string, type: 'image'|'video', file: Blob, own: object|null }[] }} ws
+ * @returns {Promise<number>} total bytes of the saved files
+ */
+export async function saveWorkspace(ws) {
+  const record = { version: VERSION, savedAt: Date.now(), ...ws };
+  await run('readwrite', s => s.put(record, KEY));
+  return ws.items.reduce((a, it) => a + (it.file ? it.file.size : 0), 0);
+}
+
+/** The saved workspace, or null. */
+export async function loadWorkspace() {
+  try {
+    const rec = await run('readonly', s => s.get(KEY));
+    return rec && rec.version === VERSION && Array.isArray(rec.items) ? rec : null;
+  } catch (_) {
+    return null;
+  }
+}
+
+export async function forgetWorkspace() {
+  await run('readwrite', s => s.delete(KEY));
+}
+
+/** True when the error means the browser ran out of storage for us. */
+export const isQuotaError = e => !!e && (e.name === 'QuotaExceededError' || /quota|space/i.test(e.message || ''));
+
+export const fmtBytes = n => (n >= 1e9 ? `${(n / 1e9).toFixed(1)} GB` : n >= 1e6 ? `${(n / 1e6).toFixed(1)} MB` : `${Math.max(1, Math.round(n / 1e3))} KB`);

package/lib/index.js

@@ -1,29 +1,31 @@
-// image-to-pixel core: no UI. Works in browsers (WebGL 2 via ShaderMate, CPU fallback) and,
-// for { width, height, data } inputs, in Node on the CPU.
-
-export { createPixelator, pixelate, makeResult } from './core/engine.js';
-export {
-  DEFAULTS, DITHER_METHODS, SETTINGS_VERSION, MAX_SIZE, LEGACY_DITHER,
-  defaultSettings, normalizeSettings, mergeSettings, resolveSize, ditherKind, cropRect, ASPECTS,
-  encodeSettings, decodeSettings, compactSettings, settingsToJSON, settingsFromJSON,
-} from './core/settings.js';
-export { makePlan } from './core/plan.js';
-export { runCPU } from './core/cpu/pipeline.js';
-export { PALETTES, getPalette } from './core/palette/builtin.js';
-export { parsePalette, toGPL, toHexFile, toPaletteJSON } from './core/palette/parse.js';
-export { extractPalette } from './core/palette/extract.js';
-export { fetchLospec, lospecSlug } from './core/palette/lospec.js';
-export { thresholdMap, parseMatrix, bayer } from './core/dither/matrices.js';
-export { KERNELS } from './core/dither/kernels.js';
-export { PRESETS, getPreset } from './core/presets.js';
-export { parseColor, toHex, oklab } from './core/color.js';
-export { toFrame, loadImage } from './core/source.js';
-export { upscale, resizeNearest, uniqueColors, detectGrid, hasTransparency } from './core/export/scale.js';
-export { toCanvas, downloadBlob } from './core/export/canvas.js';
-export { encodePNG } from './core/export/png.js';
-export { encodeGIF } from './core/export/gif.js';
-export { createZip } from './core/export/zip.js';
-export { packSpriteSheet, buildTileset } from './core/export/sheet.js';
-export { forEachFrame, estimateFps, seekTo, frameTimes, videoReady, mediaError, sniffVideoCodec } from './core/video/frames.js';
-
-export const VERSION = '3.0.0';
+// image-to-pixel core: no UI. Works in browsers (WebGL 2 via ShaderMate, CPU fallback) and,
+// for { width, height, data } inputs, in Node on the CPU.
+
+export { createPixelator, pixelate, makeResult } from './core/engine.js';
+export {
+  DEFAULTS, DITHER_METHODS, SETTINGS_VERSION, MAX_SIZE, LEGACY_DITHER,
+  defaultSettings, normalizeSettings, mergeSettings, resolveSize, ditherKind, cropRect, ASPECTS,
+  encodeSettings, decodeSettings, compactSettings, settingsToJSON, settingsFromJSON,
+} from './core/settings.js';
+export { makePlan } from './core/plan.js';
+export { runCPU } from './core/cpu/pipeline.js';
+export { PALETTES, getPalette } from './core/palette/builtin.js';
+export { parsePalette, toGPL, toHexFile, toPaletteJSON } from './core/palette/parse.js';
+export { extractPalette } from './core/palette/extract.js';
+export { fetchLospec, lospecSlug } from './core/palette/lospec.js';
+export { thresholdMap, parseMatrix, bayer } from './core/dither/matrices.js';
+export { KERNELS } from './core/dither/kernels.js';
+export { PRESETS, getPreset } from './core/presets.js';
+export { parseColor, toHex, oklab } from './core/color.js';
+export { toFrame, loadImage } from './core/source.js';
+export { upscale, resizeNearest, uniqueColors, detectGrid, hasTransparency } from './core/export/scale.js';
+export { toCanvas, downloadBlob } from './core/export/canvas.js';
+export { encodePNG } from './core/export/png.js';
+export { encodeGIF } from './core/export/gif.js';
+export { createZip } from './core/export/zip.js';
+export { packSpriteSheet, buildTileset } from './core/export/sheet.js';
+export { forEachFrame, estimateFps, seekTo, frameTimes, videoReady, mediaError, sniffVideoCodec } from './core/video/frames.js';
+
+/* global __ITP_VERSION__ */
+// The build replaces __ITP_VERSION__ with package.json's version; unbundled source reports 'dev'.
+export const VERSION = typeof __ITP_VERSION__ === 'string' ? __ITP_VERSION__ : 'dev';

package/lib/video.js

@@ -1,32 +1,51 @@
-// image-to-pixel/video: encode processed frames to MP4 (H.264) or WebM (VP9/VP8) with WebCodecs.
+// image-to-pixel/video: encode processed frames to MP4 (H.264) or WebM (VP9/VP8) with WebCodecs,
+// optionally with the source's soundtrack (AAC or Opus in MP4, Opus in WebM).
 // The muxers are this project's own (lib/core/video/mux-*.js): MIT, no dependencies.
 
 import { createMp4Muxer } from './core/video/mux-mp4.js';
 import { createWebmMuxer } from './core/video/mux-webm.js';
+import { decodeAudio, encodeAudio, audioCodecSupported, findAudioConfig } from './core/video/audio.js';
 import { upscale } from './core/export/scale.js';
 
 export { forEachFrame, estimateFps, seekTo, frameTimes, videoReady } from './core/video/frames.js';
-export { createMp4Muxer, createWebmMuxer };
+export { createMp4Muxer, createWebmMuxer, decodeAudio, encodeAudio, audioCodecSupported, findAudioConfig };
 
 const AVC = ['avc1.640033', 'avc1.4d0033', 'avc1.42003e', 'avc1.640028', 'avc1.42001f'];
 const VP = [['vp09.00.10.08', 'vp9'], ['vp8', 'vp8']];
 
-/** Which formats this browser can encode. */
+/** Which formats this browser can encode. `aac` / `opus`: audio for MP4 (either) and WebM (Opus). */
 export async function videoSupport(width = 640, height = 480) {
-  const out = { mp4: false, webm: false, webcodecs: typeof VideoEncoder !== 'undefined' };
+  const out = { mp4: false, webm: false, webcodecs: typeof VideoEncoder !== 'undefined', aac: false, opus: false };
   if (out.webcodecs) {
     for (const codec of AVC) if ((await VideoEncoder.isConfigSupported({ codec, width, height }).catch(() => ({}))).supported) { out.mp4 = true; break; }
     for (const [codec] of VP) if ((await VideoEncoder.isConfigSupported({ codec, width, height }).catch(() => ({}))).supported) { out.webm = true; break; }
   }
+  out.aac = await audioCodecSupported('aac');
+  out.opus = await audioCodecSupported('opus');
   return out;
 }
 
 const even = n => n + (n & 1);
 
+/** The audio codec and encoder config for a container, or null when the browser can't encode a suitable one. */
+async function pickAudio(format, pcm, bitrate) {
+  const order = format === 'mp4' ? ['aac', 'opus'] : ['opus'];   // WebM only holds Opus (or Vorbis)
+  for (const codec of order) {
+    const config = await findAudioConfig(codec, pcm.sampleRate, pcm.numberOfChannels, bitrate);
+    if (config) return { codec, config };
+  }
+  return null;
+}
+
 /**
  * Start an encoder; add frames one at a time (so a long clip never sits in memory), then finish().
- * @param {{ format: 'mp4' | 'webm', fps: number, width: number, height: number, scale?: number, bitrate?: number }} opts
+ * @param {{ format: 'mp4' | 'webm', fps: number, width: number, height: number, scale?: number, bitrate?: number,
+ *           audio?: { sampleRate: number, numberOfChannels: number, channels: Float32Array[] } | null,
+ *           audioBitrate?: number }} opts
  *   width/height: size of the frames you will add (before scaling)
+ *   audio: PCM to add as a soundtrack, e.g. from decodeAudio(file, { start, end }). It is cut to the
+ *          video's length. When the browser can't encode audio the video is still made, without it
+ *          (check `encoder.audioCodec`).
  */
 export async function createVideoEncoder(opts) {
   const scale = Math.max(1, Math.round(opts.scale || 1));
@@ -43,9 +62,14 @@ export async function createVideoEncoder(opts) {
   }
   if (!codec) throw new Error(`No ${opts.format.toUpperCase()} encoder available in this browser at ${W}×${H}.`);
 
+  const pcm = opts.audio && opts.audio.channels && opts.audio.channels.length ? opts.audio : null;
+  const picked = pcm ? await pickAudio(opts.format, pcm, opts.audioBitrate || 128000) : null;
+  const audioCodec = picked ? picked.codec : null;
+  const audioTrack = picked ? { codec: audioCodec, sampleRate: picked.config.sampleRate, numberOfChannels: picked.config.numberOfChannels, bitrate: picked.config.bitrate || 128000 } : null;
+
   const muxer = opts.format === 'mp4'
-    ? createMp4Muxer({ width: W, height: H })
-    : createWebmMuxer({ width: W, height: H, codec: muxCodec, fps });
+    ? createMp4Muxer({ width: W, height: H, audio: audioTrack })
+    : createWebmMuxer({ width: W, height: H, codec: muxCodec, fps, audio: audioTrack });
 
   let error = null;
   const encoder = new VideoEncoder({
@@ -62,6 +86,8 @@ export async function createVideoEncoder(opts) {
 
   return {
     width: W, height: H, codec,
+    /** 'aac' or 'opus' when the soundtrack will be included, null otherwise. */
+    audioCodec,
     /** @param {{ width, height, data }} img */
     async add(img) {
       if (error) throw error;
@@ -79,6 +105,10 @@ export async function createVideoEncoder(opts) {
       await encoder.flush();
       if (error) throw error;
       encoder.close();
+      if (audioCodec && i > 0) {
+        // the soundtrack ends with the last frame
+        await encodeAudio(pcm, { config: picked.config, maxDuration: i / fps, onChunk: (chunk, meta) => muxer.addAudioChunk(chunk, meta) });
+      }
       return new Blob([muxer.finish()], { type: opts.format === 'mp4' ? 'video/mp4' : 'video/webm' });
     },
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-to-pixel",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Turn images and video into pixel art: dithering, palettes, batch and video. A WebGL engine (via ShaderMate) with a CPU fallback, plus a full editor.",
   "type": "module",
   "license": "MIT",

package/types/editor.d.ts

@@ -1,34 +1,34 @@
-// image-to-pixel/editor
-import type { Settings, SettingsInput, PixelResult, Source } from './index';
-
-export interface EditorOptions {
-  settings?: SettingsInput;
-  /** Remember settings, theme and palettes in localStorage (default true). */
-  persist?: boolean;
-  /** Show sample images in the empty state (default true). */
-  samples?: boolean;
-  /** Turn the logo into a link. */
-  homeHref?: string;
-}
-export interface EditorStore {
-  readonly settings: Settings;
-  update(patch: SettingsInput, opts?: { key?: string; history?: boolean }): void;
-  replace(settings: SettingsInput): void;
-  subscribe(fn: (settings: Settings, why: string) => void): () => void;
-  undo(): boolean;
-  redo(): boolean;
-  readonly canUndo: boolean;
-  readonly canRedo: boolean;
-}
-export interface Editor {
-  store: EditorStore;
-  addFiles(files: File[]): Promise<void>;
-  addImage(source: Source, name?: string): Promise<unknown>;
-  openSample(id: 'dusk' | 'still-life' | 'potion'): Promise<void>;
-  applyPreset(id: string): void;
-  setTheme(theme: 'dark' | 'light'): void;
-  readonly result: PixelResult | null;
-  idle(): Promise<void>;
-}
-export function mountEditor(root: HTMLElement, options?: EditorOptions): Promise<Editor>;
-export const SAMPLES: { id: string; name: string; svg: string }[];
+// image-to-pixel/editor
+import type { Settings, SettingsInput, PixelResult, Source } from './index';
+
+export interface EditorOptions {
+  settings?: SettingsInput;
+  /** Remember settings, theme and palettes in localStorage (default true). */
+  persist?: boolean;
+  /** Show sample images in the empty state (default true). */
+  samples?: boolean;
+  /** Turn the logo into a link. */
+  homeHref?: string;
+}
+export interface EditorStore {
+  readonly settings: Settings;
+  update(patch: SettingsInput, opts?: { key?: string; history?: boolean }): void;
+  replace(settings: SettingsInput): void;
+  subscribe(fn: (settings: Settings, why: string) => void): () => void;
+  undo(): boolean;
+  redo(): boolean;
+  readonly canUndo: boolean;
+  readonly canRedo: boolean;
+}
+export interface Editor {
+  store: EditorStore;
+  addFiles(files: File[]): Promise<void>;
+  addImage(source: Source, name?: string): Promise<unknown>;
+  openSample(id: 'dusk' | 'still-life' | 'potion'): Promise<void>;
+  applyPreset(id: string): void;
+  setTheme(theme: 'dark' | 'light'): void;
+  readonly result: PixelResult | null;
+  idle(): Promise<void>;
+}
+export function mountEditor(root: HTMLElement, options?: EditorOptions): Promise<Editor>;
+export const SAMPLES: { id: string; name: string; svg: string }[];