asciify-engine 1.0.43 → 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 = {}, onReady, onFrame } = {}) {
+async function asciifyLiveVideo(source, canvas, { fontSize = 10, artStyle = "classic", options = {}, autoSize = false, onReady, onFrame } = {}) {
   let video;
   let ownedVideo = false;
   if (typeof source === "string") {
@@ -1105,13 +1105,16 @@ async function asciifyLiveVideo(source, canvas, { fontSize = 10, artStyle = "cla
     });
     await video.play().catch(() => {
     });
-    onReady?.(video);
   } else {
     video = source;
     if (video.paused) await video.play().catch(() => {
     });
-    onReady?.(video);
   }
+  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.");