asciify-engine 1.0.42 → 1.0.44

package/README.md

@@ -87,14 +87,33 @@ setInterval(() => {
 import { asciifyLiveVideo } from 'asciify-engine';
 
 const canvas = document.getElementById('ascii') as HTMLCanvasElement;
-const stop   = await asciifyLiveVideo('/clip.mp4', canvas);
 
-// With options:
+// Sizes canvas to the video's native dimensions automatically:
+const stop = await asciifyLiveVideo('/clip.mp4', canvas, { autoSize: true });
+
+// With art style:
 const stop = await asciifyLiveVideo('/clip.mp4', canvas, {
+  autoSize: true,
   fontSize: 6,
   artStyle: 'matrix',
 });
 
+// With lifecycle hooks — useful for sizing the canvas, loading indicators, timers:
+const stop = await asciifyLiveVideo('/clip.mp4', canvas, {
+  fontSize: 6,
+  onReady: (video) => {
+    // Called once when metadata is loaded and playback has started.
+    // Resize the canvas to match the video here, update your UI, etc.
+    canvas.width  = video.videoWidth;
+    canvas.height = video.videoHeight;
+    setReady(true);
+  },
+  onFrame: () => {
+    // Called after every rendered frame.
+    setElapsed(Math.floor(performance.now() / 1000));
+  },
+});
+
 // Clean up:
 stop();
 ```

package/dist/index.cjs

@@ -1077,7 +1077,7 @@ async function asciifyVideo(source, canvas, { fontSize = 10, artStyle = "classic
     cancelAnimationFrame(animId);
   };
 }
-async function asciifyLiveVideo(source, canvas, { fontSize = 10, artStyle = "classic", options = {} } = {}) {
+async function asciifyLiveVideo(source, canvas, { fontSize = 10, artStyle = "classic", options = {}, autoSize = false, onReady, onFrame } = {}) {
   let video;
   let ownedVideo = false;
   if (typeof source === "string") {
@@ -1103,13 +1103,18 @@ async function asciifyLiveVideo(source, canvas, { fontSize = 10, artStyle = "cla
       video.onloadedmetadata = () => resolve();
       video.onerror = () => reject(new Error(`asciifyLiveVideo: failed to load "${source}"`));
     });
-    video.play().catch(() => {
+    await video.play().catch(() => {
     });
   } else {
     video = source;
-    if (video.paused) video.play().catch(() => {
+    if (video.paused) await video.play().catch(() => {
     });
   }
+  if (autoSize) {
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+  }
+  onReady?.(video);
   const merged = { ...DEFAULT_OPTIONS, ...ART_STYLE_PRESETS[artStyle], ...options, fontSize };
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("asciifyLiveVideo: could not get 2d context from canvas.");
@@ -1120,7 +1125,10 @@ async function asciifyLiveVideo(source, canvas, { fontSize = 10, artStyle = "cla
     animId = requestAnimationFrame(tick);
     if (video.readyState < 2 || canvas.width === 0 || canvas.height === 0) return;
     const { frame } = imageToAsciiFrame(video, merged, canvas.width, canvas.height);
-    if (frame.length > 0) renderFrameToCanvas(ctx, frame, merged, canvas.width, canvas.height, 0, null);
+    if (frame.length > 0) {
+      renderFrameToCanvas(ctx, frame, merged, canvas.width, canvas.height, 0, null);
+      onFrame?.();
+    }
   };
   animId = requestAnimationFrame(tick);
   return () => {