@twick/2d 0.15.7 → 0.15.8

package/dist/index.cjs

@@ -9944,6 +9944,10 @@ async function getFileInfo(uri) {
       found = true;
       controller.abort();
       const track = info.videoTracks[0];
+      if (!track) {
+        rej("No video track found");
+        return;
+      }
       const config = {
         // Browser doesn't support parsing full vp8 codec (eg: `vp08.00.41.08`),
         // they only support `vp8`.
@@ -9974,25 +9978,35 @@ async function getFileInfo(uri) {
       file.start();
       res({ file, edits, config });
     };
+    file.onError = (e) => rej(e);
     return fetch(uri, { signal: controller.signal }).then(async (response) => {
+      if (!response.ok) {
+        rej(`HTTP ${response.status}: ${response.statusText}`);
+        return;
+      }
       if (!response.body) {
-        throw new Error("Response body is null");
+        rej("Response body is null");
+        return;
       }
       const reader = response.body.getReader();
       const sink = new MP4FileSink(file, () => {
       });
+      let bytesRead = 0;
+      let chunks = 0;
       while (!found) {
         await reader.read().then(({ done, value }) => {
           if (done) {
             file.flush();
             controller.abort();
-            rej("Could not find moov");
+            if (!found) rej("Could not find moov box in video file");
             return;
           }
+          bytesRead += value.byteLength;
+          chunks++;
           sink.write(value);
         });
       }
-    });
+    }).catch((err) => rej(err));
   });
 }
 var Mp4Parser = class {
@@ -10016,9 +10030,7 @@ var Mp4Parser = class {
         const segmentDurationInSeconds = this.getSecondDurationOfSegment(
           this.edits[this.nextSegment]
         );
-        if (startTimeWithinSegment < segmentDurationInSeconds) {
-          break;
-        }
+        if (startTimeWithinSegment < segmentDurationInSeconds) break;
         startTimeWithinSegment -= segmentDurationInSeconds;
         this.nextSegment++;
       }
@@ -10110,8 +10122,94 @@ var Mp4Parser = class {
   }
 };
 
+// src/lib/utils/video/html-video-extractor.ts
+var HTMLVideoFrameExtractor = class {
+  constructor(src) {
+    this.src = src;
+    this.lastTime = -1;
+    this.video = document.createElement("video");
+    this.video.crossOrigin = "anonymous";
+    this.video.preload = "auto";
+    this.video.src = src;
+    this.video.muted = true;
+    this.canvas = document.createElement("canvas");
+    this.ctx = this.canvas.getContext("2d", { willReadFrequently: true });
+  }
+  async start() {
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(new Error("Timeout loading video metadata"));
+      }, 3e4);
+      this.video.addEventListener("loadedmetadata", () => {
+        clearTimeout(timeout);
+        this.canvas.width = this.video.videoWidth;
+        this.canvas.height = this.video.videoHeight;
+        resolve();
+      }, { once: true });
+      this.video.addEventListener("error", () => {
+        clearTimeout(timeout);
+        reject(new Error("Failed to load video"));
+      }, { once: true });
+    });
+  }
+  async getFrameAt(time) {
+    if (Math.abs(this.video.currentTime - time) > 0.016) {
+      await this.seekTo(time);
+    }
+    this.ctx.drawImage(this.video, 0, 0);
+    return createImageBitmap(this.canvas);
+  }
+  async seekTo(time) {
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(new Error(`Seek timeout at ${time}s`));
+      }, 5e3);
+      const onSeeked = () => {
+        clearTimeout(timeout);
+        this.video.removeEventListener("seeked", onSeeked);
+        resolve();
+      };
+      this.video.addEventListener("seeked", onSeeked, { once: true });
+      this.video.currentTime = time;
+    });
+  }
+  getDuration() {
+    return this.video.duration || 0;
+  }
+  getTime() {
+    return this.video.currentTime;
+  }
+  getLastTime() {
+    return this.lastTime;
+  }
+  close() {
+    this.video.src = "";
+    this.video.load();
+  }
+};
+var htmlVideoExtractors = /* @__PURE__ */ new Map();
+async function getFrameHTML(id, filePath, time, fps) {
+  const extractorId = filePath + "-" + id;
+  let extractor = htmlVideoExtractors.get(extractorId);
+  if (!extractor) {
+    extractor = new HTMLVideoFrameExtractor(filePath);
+    await extractor.start();
+    htmlVideoExtractors.set(extractorId, extractor);
+  }
+  return extractor.getFrameAt(time);
+}
+function dropHTMLExtractor(id, filePath) {
+  const extractorId = filePath + "-" + id;
+  const extractor = htmlVideoExtractors.get(extractorId);
+  if (extractor) {
+    extractor.close();
+    htmlVideoExtractors.delete(extractorId);
+  }
+}
+
 // src/lib/utils/video/mp4-parser-manager.ts
 var videoFrameExtractors = /* @__PURE__ */ new Map();
+var htmlFallbackVideos = /* @__PURE__ */ new Set();
 async function dropExtractor(id, filePath) {
   const extractorId = filePath + "-" + id;
   const extractor = videoFrameExtractors.get(extractorId);
@@ -10119,9 +10217,16 @@ async function dropExtractor(id, filePath) {
     extractor.close();
     videoFrameExtractors.delete(extractorId);
   }
+  if (htmlFallbackVideos.has(extractorId)) {
+    dropHTMLExtractor(id, filePath);
+    htmlFallbackVideos.delete(extractorId);
+  }
 }
 async function getFrame(id, filePath, time, fps) {
   const extractorId = filePath + "-" + id;
+  if (htmlFallbackVideos.has(extractorId)) {
+    return getFrameHTML(id, filePath, time, fps);
+  }
   let extractor = videoFrameExtractors.get(extractorId);
   const frameDuration = 1 / fps;
   const duration = extractor?.getDuration();
@@ -10131,9 +10236,7 @@ async function getFrame(id, filePath, time, fps) {
   const isOldFrame = extractor && Math.abs(time - extractor.getLastTime()) < frameDuration / 2;
   if (extractor && isOldFrame) {
     const lastFrame = extractor.getLastFrame();
-    if (!lastFrame) {
-      throw new Error("No last frame");
-    }
+    if (!lastFrame) throw new Error("No last frame");
     return lastFrame;
   }
   if (extractor && time + frameDuration < extractor.getTime()) {
@@ -10148,7 +10251,22 @@ async function getFrame(id, filePath, time, fps) {
   }
   if (!extractor) {
     extractor = new Mp4Parser(filePath, fps, time);
-    await extractor.start();
+    try {
+      await extractor.start();
+    } catch {
+      htmlFallbackVideos.add(extractorId);
+      return getFrameHTML(id, filePath, time, fps);
+    }
+    const duration2 = extractor.getDuration();
+    if (duration2 === 0) {
+      extractor.close();
+      videoFrameExtractors.delete(extractorId);
+      htmlFallbackVideos.add(extractorId);
+      return getFrameHTML(id, filePath, time, fps);
+    }
+    if (duration2 > 0 && time > duration2) {
+      throw new Error(`Requested time ${time}s exceeds video duration ${duration2}s`);
+    }
     videoFrameExtractors.set(extractorId, extractor);
   }
   return extractor.getNextFrame();