@midscene/visualizer 0.5.2-beta-20241010035503.0 → 0.5.2

package/dist/lib/component/player.js

@@ -111,6 +111,17 @@ const frameKit = () => {
         callback(performance.now());
       });
     },
+    timeout: (callback, ms) => {
+      if (cancelFlag) {
+        throw new Error(ERROR_FRAME_CANCEL);
+      }
+      setTimeout(() => {
+        if (cancelFlag) {
+          throw new Error(ERROR_FRAME_CANCEL);
+        }
+        callback();
+      }, ms);
+    },
     cancel: () => {
       console.log("set frame cancel");
       cancelFlag = true;
@@ -448,7 +459,7 @@ const Player = () => {
         if (!scripts) {
           throw new Error("scripts is required");
         }
-        const { frame, cancel } = frameKit();
+        const { frame, cancel, timeout } = frameKit();
         cancelFn = cancel;
         const allImages = scripts.filter((item) => !!item.img).map((item) => item.img);
         yield Promise.all([...allImages, import_utils.mouseLoading].map(preloadImage));
@@ -459,6 +470,7 @@ const Player = () => {
         const totalDuration = scripts.reduce((acc, item) => {
           return acc + item.duration + (item.insightCameraDuration || 0);
         }, 0);
+        const progressUpdateInterval = 300;
         const startTime = performance.now();
         setAnimationProgress(0);
         const updateProgress = () => {
@@ -467,7 +479,7 @@ const Player = () => {
             1
           );
           setAnimationProgress(progress);
-          return frame(updateProgress);
+          return timeout(updateProgress, progressUpdateInterval);
         };
         frame(updateProgress);
         for (const index in scripts) {
@@ -537,7 +549,7 @@ const Player = () => {
     Promise.resolve(
       (() => __async(void 0, null, function* () {
         yield init();
-        yield play();
+        setReplayMark(Date.now());
       }))()
     );
     return () => {

package/dist/lib/component/replay-scripts.js

@@ -56,7 +56,7 @@ const cameraStateForRect = (rect, imageWidth, imageHeight) => {
   } else {
     rectWidthOnPage = rect.height / imageHeight * imageWidth;
   }
-  const cameraPaddingRatio = rectWidthOnPage < 50 ? 0.3 : 0.2;
+  const cameraPaddingRatio = rectWidthOnPage > 400 ? 0.1 : rectWidthOnPage > 50 ? 0.2 : 0.3;
   const cameraWidth = Math.min(
     imageWidth,
     rectWidthOnPage + imageWidth * cameraPaddingRatio * 2