@midscene/visualizer 0.6.1 → 0.6.2

package/dist/lib/component/player.js

@@ -96,7 +96,7 @@ const linear = (t) => {
 const sleep = (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
-const ERROR_FRAME_CANCEL = "frame cancel";
+const ERROR_FRAME_CANCEL = "frame cancel (this is an error on purpose)";
 const frameKit = () => {
   let cancelFlag = false;
   return {
@@ -123,7 +123,6 @@ const frameKit = () => {
       }, ms);
     },
     cancel: () => {
-      console.log("set frame cancel");
       cancelFlag = true;
     }
   };
@@ -137,13 +136,16 @@ const Player = () => {
   var _a;
   const [titleText, setTitleText] = (0, import_react.useState)("");
   const [subTitleText, setSubTitleText] = (0, import_react.useState)("");
-  const scripts = (0, import_store.useExecutionDump)((store) => store.activeExecutionAnimation);
-  const imageWidth = (0, import_store.useExecutionDump)(
-    (store) => store.activeExecutionScreenshotWidth
+  const taskScripts = (0, import_store.useExecutionDump)(
+    (store) => store.activeExecutionAnimation
   );
-  const imageHeight = (0, import_store.useExecutionDump)(
-    (store) => store.activeExecutionScreenshotHeight
+  const replayAllMode = (0, import_store.useExecutionDump)((store) => store.replayAllMode);
+  const replayAllScripts = (0, import_store.useExecutionDump)(
+    (store) => store.allExecutionAnimation
   );
+  const scripts = replayAllMode ? replayAllScripts : taskScripts;
+  const imageWidth = (0, import_store.useExecutionDump)((store) => store.insightWidth) || 1920;
+  const imageHeight = (0, import_store.useExecutionDump)((store) => store.insightHeight) || 1080;
   const canvasWidth = imageWidth + canvasPaddingLeft * 2;
   const canvasHeight = imageHeight + canvasPaddingTop * 2;
   const currentImg = (0, import_react.useRef)(((_a = scripts == null ? void 0 : scripts[0]) == null ? void 0 : _a.img) || null);
@@ -167,8 +169,8 @@ const Player = () => {
     top: 0,
     width: imageWidth,
     pointer: {
-      left: imageWidth / 2,
-      top: imageHeight / 2
+      left: Math.round(imageWidth / 2),
+      top: Math.round(imageHeight / 2)
     }
   };
   const [animationProgress, setAnimationProgress] = (0, import_react.useState)(-1);
@@ -313,14 +315,18 @@ const Player = () => {
       const animate = (currentTime) => {
         const nextState = __spreadValues({}, cameraState.current);
         const elapsedTime = currentTime - startTime;
-        if (shouldMovePointer && elapsedTime < pointerMoveDuration) {
-          const rawMouseProgress = Math.min(
-            elapsedTime / pointerMoveDuration,
-            1
-          );
-          const mouseProgress = cubicMouse(rawMouseProgress);
-          nextState.pointer.left = startPointer.left + (targetState.pointer.left - startPointer.left) * mouseProgress;
-          nextState.pointer.top = startPointer.top + (targetState.pointer.top - startPointer.top) * mouseProgress;
+        if (shouldMovePointer) {
+          if (elapsedTime <= pointerMoveDuration) {
+            const rawMouseProgress = Math.min(
+              elapsedTime / pointerMoveDuration,
+              1
+            );
+            const mouseProgress = cubicMouse(rawMouseProgress);
+            nextState.pointer.left = startPointer.left + (targetState.pointer.left - startPointer.left) * mouseProgress;
+            nextState.pointer.top = startPointer.top + (targetState.pointer.top - startPointer.top) * mouseProgress;
+          } else {
+            nextState.pointer = targetState.pointer;
+          }
         }
         if (elapsedTime > cameraMoveStart) {
           const cameraElapsedTime = elapsedTime - cameraMoveStart;
@@ -575,13 +581,13 @@ const Player = () => {
   if (animationProgress < 1) {
     statusIconElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, { spin: true }), size: "default" });
   } else if (mouseOverStatusIcon) {
-    statusIconElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlayCircleOutlined, {}), size: "default" });
+    statusIconElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretRightOutlined, {}), size: "default" });
     statusStyle.cursor = "pointer";
     statusStyle.background = "#888";
     statusOnClick = () => setReplayMark(Date.now());
   } else {
     statusIconElement = // <Spin indicator={<CheckCircleOutlined />} size="default" />
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlayCircleOutlined, {}), size: "default" });
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretRightOutlined, {}), size: "default" });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "player-container", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "canvas-container", ref: divContainerRef }),

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

@@ -73,9 +73,9 @@ const cameraStateForRect = (rect, imageWidth, imageHeight) => {
   );
   top = Math.max(top, 0);
   return {
-    left,
-    top,
-    width: cameraWidth
+    left: Math.round(left),
+    top: Math.round(top),
+    width: Math.round(cameraWidth)
   };
 };
 const mergeTwoCameraState = (cameraState1, cameraState2) => {
@@ -231,7 +231,7 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
     title: "Done",
     subTitle: initSubTitle,
     type: "img",
-    duration: stillDuration * 0.5,
+    duration: stillDuration,
     camera: fullPageCameraState
   });
   return scripts;

package/dist/lib/component/store.js

@@ -69,11 +69,13 @@ const useExecutionDump = create((set, get) => {
   const initData = {
     dump: null,
     activeTask: null,
+    replayAllMode: false,
+    allExecutionAnimation: null,
+    insightWidth: null,
+    insightHeight: null,
     activeExecution: null,
     activeExecutionAnimation: null,
     // TODO: get from dump
-    activeExecutionScreenshotWidth: 0,
-    activeExecutionScreenshotHeight: 0,
     hoverTask: null,
     hoverTimestamp: null,
     hoverPreviewConfig: null
@@ -86,22 +88,75 @@ const useExecutionDump = create((set, get) => {
     const { reset } = useInsightDump.getState();
     reset();
   };
+  const resetActiveExecution = () => {
+    set({
+      activeExecution: null,
+      activeExecutionAnimation: null,
+      _executionDumpLoadId: ++_executionDumpLoadId
+    });
+    resetInsightDump();
+  };
   return __spreadProps(__spreadValues({}, initData), {
     _executionDumpLoadId,
+    setReplayAllMode: (replayAllMode) => {
+      const state = get();
+      if (state.allExecutionAnimation) {
+        set({ replayAllMode });
+        if (replayAllMode) {
+          resetActiveExecution();
+        }
+      } else {
+        console.error(
+          "allExecutionAnimation not found, failed to set replayAllMode"
+        );
+      }
+    },
     setGroupedDump: (dump) => {
       console.log("will set ExecutionDump", dump);
       set(__spreadProps(__spreadValues({}, initData), {
         dump
       }));
       resetInsightDump();
-      if (dump && dump.executions.length > 0 && dump.executions[0].tasks.length > 0) {
-        get().setActiveTask(dump.executions[0].tasks[0]);
+      if (dump && dump.executions.length > 0) {
+        let width = 0;
+        let height = 0;
+        dump.executions.forEach((execution) => {
+          execution.tasks.forEach((task) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (task.type === "Insight") {
+              const insightTask = task;
+              width = ((_d = (_c = (_b = (_a = insightTask.log) == null ? void 0 : _a.dump) == null ? void 0 : _b.context) == null ? void 0 : _c.size) == null ? void 0 : _d.width) || 1920;
+              height = ((_h = (_g = (_f = (_e = insightTask.log) == null ? void 0 : _e.dump) == null ? void 0 : _f.context) == null ? void 0 : _g.size) == null ? void 0 : _h.height) || 1080;
+            }
+          });
+        });
+        if (!width || !height) {
+          console.warn(
+            "width or height not found, failed to generate animation"
+          );
+          return;
+        }
+        const allScripts = [];
+        dump.executions.forEach((execution) => {
+          const scripts = (0, import_replay_scripts.generateAnimationScripts)(execution, width, height);
+          if (scripts) {
+            allScripts.push(...scripts);
+          }
+        });
+        set({
+          allExecutionAnimation: allScripts,
+          _executionDumpLoadId: ++_executionDumpLoadId,
+          replayAllMode: true,
+          insightWidth: width,
+          insightHeight: height
+        });
       }
     },
     setActiveTask(task) {
       var _a;
       let parentExecution;
-      const dump = get().dump;
+      const state = get();
+      const dump = state.dump;
       if (dump) {
         parentExecution = dump.executions.find(
           (execution) => execution.tasks.includes(task)
@@ -110,27 +165,14 @@ const useExecutionDump = create((set, get) => {
       if (!parentExecution) {
         throw new Error("parentExecution not found");
       }
-      let width = 0;
-      let height = 0;
-      parentExecution.tasks.forEach((t) => {
-        var _a2, _b, _c, _d, _e, _f, _g, _h;
-        if (t.type === "Insight") {
-          const insightTask = t;
-          width = ((_d = (_c = (_b = (_a2 = insightTask.log) == null ? void 0 : _a2.dump) == null ? void 0 : _b.context) == null ? void 0 : _c.size) == null ? void 0 : _d.width) || 1920;
-          height = ((_h = (_g = (_f = (_e = insightTask.log) == null ? void 0 : _e.dump) == null ? void 0 : _f.context) == null ? void 0 : _g.size) == null ? void 0 : _h.height) || 1080;
-        }
-      });
+      const width = state.insightWidth;
+      const height = state.insightHeight;
       set({
+        replayAllMode: false,
         activeTask: task,
         activeExecution: parentExecution,
         _executionDumpLoadId: ++_executionDumpLoadId,
-        activeExecutionAnimation: (0, import_replay_scripts.generateAnimationScripts)(
-          parentExecution,
-          width,
-          height
-        ),
-        activeExecutionScreenshotWidth: width,
-        activeExecutionScreenshotHeight: height
+        activeExecutionAnimation: width && height ? (0, import_replay_scripts.generateAnimationScripts)(parentExecution, width, height) : null
       });
       console.log("will set task", task);
       if (task.type === "Insight") {

package/dist/lib/index.css

@@ -78,6 +78,17 @@ footer.mt-8 {
   display: flex;
   flex-direction: row;
   background: #F8F8F8;
+  justify-content: space-between;
+}
+.page-nav .page-nav-left {
+  display: flex;
+  flex-direction: row;
+}
+.page-nav .page-nav-toolbar {
+  margin-left: 20px;
+}
+.page-nav .page-nav-toolbar .ant-btn {
+  background: #E9E9E9;
 }
 .page-nav .logo img {
   height: 20px;
@@ -103,6 +114,15 @@ footer.mt-8 {
   height: 100%;
   box-sizing: border-box;
 }
+.main-right .replay-all-mode-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 22px;
+  box-sizing: border-box;
+  margin: 0 auto;
+}
 .main-right .main-content {
   display: flex;
   flex-direction: row;

package/dist/lib/index.js

@@ -64,12 +64,21 @@ var import_logo_plain_0f78df8a = __toESM(require("./assets/logo-plain.0f78df8a.p
 var import_detail_panel = __toESM(require("./component/detail-panel"));
 var import_global_hover_preview = __toESM(require("./component/global-hover-preview"));
 var import_misc = require("./component/misc");
+var import_player = __toESM(require("./component/player"));
 var import_timeline = __toESM(require("./component/timeline"));
 const { Dragger } = import_antd.Upload;
 let globalRenderCount = 1;
 function Visualizer(props) {
   const { dumps, hideLogo = false } = props;
   const executionDump = (0, import_store.useExecutionDump)((store) => store.dump);
+  const executionDumpLoadId = (0, import_store.useExecutionDump)(
+    (store) => store._executionDumpLoadId
+  );
+  const replayAllMode = (0, import_store.useExecutionDump)((store) => store.replayAllMode);
+  const setReplayAllMode = (0, import_store.useExecutionDump)((store) => store.setReplayAllMode);
+  const replayAllScripts = (0, import_store.useExecutionDump)(
+    (store) => store.allExecutionAnimation
+  );
   const setGroupedDump = (0, import_store.useExecutionDump)((store) => store.setGroupedDump);
   const reset = (0, import_store.useExecutionDump)((store) => store.reset);
   const [mainLayoutChangeFlag, setMainLayoutChangeFlag] = (0, import_react.useState)(0);
@@ -149,6 +158,11 @@ function Visualizer(props) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ant-upload-text", children: "All data will be processed locally by the browser. No data will be sent to the server." })
     ] })) });
   } else {
+    const content = replayAllMode ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "replay-all-mode-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_player.default, {}, executionDumpLoadId) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_resizable_panels.PanelGroup, { autoSaveId: "page-detail-layout-v2", direction: "horizontal", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { defaultSize: 75, maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-content-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_panel.default, {}) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.PanelResizeHandle, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-side", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_side.default, {}) }) })
+    ] });
     mainContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_react_resizable_panels.PanelGroup,
       {
@@ -174,18 +188,7 @@ function Visualizer(props) {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { defaultSize: 80, maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "main-right", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_timeline.default, {}, mainLayoutChangeFlag),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-content", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              import_react_resizable_panels.PanelGroup,
-              {
-                autoSaveId: "page-detail-layout-v2",
-                direction: "horizontal",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { defaultSize: 75, maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-content-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_panel.default, {}) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.PanelResizeHandle, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-side", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_side.default, {}) }) })
-                ]
-              }
-            ) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-content", children: content })
           ] }) })
         ]
       }
@@ -217,25 +220,6 @@ function Visualizer(props) {
       globalRenderCount += 1;
     };
   }, []);
-  const selectOptions = dumps == null ? void 0 : dumps.map((dump, index) => ({
-    value: index,
-    label: `${dump.groupName} - ${dump.groupDescription}`,
-    groupName: dump.groupName,
-    groupDescription: dump.groupDescription
-  }));
-  const selectWidget = selectOptions && selectOptions.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_antd.Select,
-    {
-      options: selectOptions,
-      defaultValue: 0,
-      onChange: (value) => {
-        const dump = dumps[value];
-        setGroupedDump(dump);
-      },
-      defaultOpen: true,
-      style: { width: "100%" }
-    }
-  ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_antd.ConfigProvider,
     {
@@ -258,13 +242,40 @@ function Visualizer(props) {
             style: { height: containerHeight },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "page-nav", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "logo", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "img",
-                  {
-                    alt: "Midscene_logo",
-                    src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/logo-light-with-text.png"
-                  }
-                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "page-nav-left", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "logo", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "img",
+                    {
+                      alt: "Midscene_logo",
+                      src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/logo-light-with-text.png"
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "page-nav-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_antd.ConfigProvider,
+                    {
+                      theme: {
+                        components: {
+                          Button: { textHoverBg: "#bfc4da80" }
+                        }
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_antd.Button,
+                        {
+                          type: "text",
+                          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretRightOutlined, {}),
+                          disabled: !replayAllScripts || replayAllScripts.length === 0,
+                          style: {
+                            background: replayAllMode ? "#bfc4da80" : void 0
+                          },
+                          onClick: () => {
+                            setReplayAllMode(true);
+                          },
+                          children: "Replay All"
+                        }
+                      )
+                    }
+                  ) })
+                ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   PlaywrightCaseSelector,
                   {