@midscene/visualizer 0.26.2 → 0.26.3-beta-20250813021342.0

package/dist/es/component/player.js

@@ -1,746 +0,0 @@
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import Buffer2 from "buffer";
-import processBrowser from "process/browser";
-import console from "console-browserify";
-var buffer = {
-  Buffer: Buffer2
-};
-import { jsx, jsxs } from "react/jsx-runtime";
-import "pixi.js/unsafe-eval";
-import * as PIXI from "pixi.js";
-import { useEffect, useMemo, useRef, useState } from "react";
-import "./player.css";
-import { mouseLoading, mousePointer } from "../utils";
-import {
-  CaretRightOutlined,
-  DownloadOutlined,
-  ExportOutlined,
-  LoadingOutlined
-} from "@ant-design/icons";
-import { treeToList } from "@midscene/shared/extractor";
-import { Spin, Tooltip } from "antd";
-import { rectMarkForItem } from "./blackboard";
-import { getTextureFromCache, loadTexture } from "./pixi-loader";
-const canvasPaddingLeft = 0;
-const canvasPaddingTop = 0;
-const cubicBezier = (t, p0, p1, p2, p3) => {
-  const t2 = 1 - t;
-  return p0 * t2 * t2 * t2 + 3 * p1 * t * t2 * t2 + 3 * p2 * t * t * t2 + p3 * t * t * t;
-};
-const cubicImage = (t) => {
-  return linear(t);
-};
-const cubicInsightElement = (t) => {
-  return cubicBezier(t, 0, 0.5, 0.5, 1);
-};
-const cubicMouse = (t) => {
-  return linear(t);
-};
-const linear = (t) => {
-  return t;
-};
-const sleep = (ms) => {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-};
-const ERROR_FRAME_CANCEL = "frame cancel (this is an error on purpose)";
-const frameKit = () => {
-  let cancelFlag = false;
-  return {
-    frame: (callback) => {
-      if (cancelFlag) {
-        throw new Error(ERROR_FRAME_CANCEL);
-      }
-      requestAnimationFrame(() => {
-        if (cancelFlag) {
-          throw new Error(ERROR_FRAME_CANCEL);
-        }
-        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: () => {
-      cancelFlag = true;
-    }
-  };
-};
-const singleElementFadeInDuration = 80;
-const LAYER_ORDER_IMG = 0;
-const LAYER_ORDER_INSIGHT = 1;
-const LAYER_ORDER_POINTER = 2;
-const LAYER_ORDER_SPINNING_POINTER = 3;
-const downloadReport = (content) => {
-  const blob = new Blob([content], { type: "text/html" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = "midscene_report.html";
-  a.click();
-};
-class RecordingSession {
-  constructor(canvas) {
-    __publicField(this, "canvas");
-    __publicField(this, "mediaRecorder", null);
-    __publicField(this, "chunks");
-    __publicField(this, "recording", false);
-    this.canvas = canvas;
-    this.chunks = [];
-  }
-  start() {
-    const stream = this.canvas.captureStream(60);
-    const mediaRecorder = new MediaRecorder(stream, {
-      mimeType: "video/webm"
-    });
-    mediaRecorder.ondataavailable = (event) => {
-      if (event.data.size > 0) {
-        this.chunks.push(event.data);
-      }
-    };
-    this.mediaRecorder = mediaRecorder;
-    this.recording = true;
-    return this.mediaRecorder.start();
-  }
-  stop() {
-    var _a;
-    if (!this.recording || !this.mediaRecorder) {
-      console.warn("not recording");
-      return;
-    }
-    this.mediaRecorder.onstop = () => {
-      const blob = new Blob(this.chunks, { type: "video/webm" });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = "midscene_replay.webm";
-      a.click();
-      URL.revokeObjectURL(url);
-    };
-    (_a = this.mediaRecorder) == null ? void 0 : _a.stop();
-    this.recording = false;
-    this.mediaRecorder = null;
-  }
-}
-function Player(props) {
-  var _a;
-  const [titleText, setTitleText] = useState("");
-  const [subTitleText, setSubTitleText] = useState("");
-  const scripts = props == null ? void 0 : props.replayScripts;
-  const imageWidth = (props == null ? void 0 : props.imageWidth) || 1920;
-  const imageHeight = (props == null ? void 0 : props.imageHeight) || 1080;
-  const fitMode = (props == null ? void 0 : props.fitMode) || "height";
-  const currentImg = useRef(((_a = scripts == null ? void 0 : scripts[0]) == null ? void 0 : _a.img) || null);
-  const divContainerRef = useRef(null);
-  const app = useMemo(() => new PIXI.Application(), []);
-  const pointerSprite = useRef(null);
-  const spinningPointerSprite = useRef(null);
-  const [replayMark, setReplayMark] = useState(0);
-  const triggerReplay = () => {
-    setReplayMark(Date.now());
-  };
-  const windowContentContainer = useMemo(() => {
-    const container = new PIXI.Container();
-    return container;
-  }, []);
-  const insightMarkContainer = useMemo(() => {
-    const container = new PIXI.Container();
-    container.zIndex = LAYER_ORDER_INSIGHT;
-    return container;
-  }, []);
-  const basicCameraState = {
-    left: 0,
-    top: 0,
-    width: imageWidth,
-    pointerLeft: Math.round(imageWidth / 2),
-    pointerTop: Math.round(imageHeight / 2)
-  };
-  const [animationProgress, setAnimationProgress] = useState(-1);
-  const cancelFlag = useRef(false);
-  useEffect(() => {
-    cancelFlag.current = false;
-    return () => {
-      cancelFlag.current = true;
-    };
-  }, []);
-  const cameraState = useRef(__spreadValues({}, basicCameraState));
-  const repaintImage = () => __async(this, null, function* () {
-    const imgToUpdate = currentImg.current;
-    if (!imgToUpdate) {
-      console.warn("no image to update");
-      return;
-    }
-    if (!getTextureFromCache(imgToUpdate)) {
-      console.warn("image not loaded", imgToUpdate);
-      yield loadTexture(imgToUpdate);
-    }
-    const texture = getTextureFromCache(imgToUpdate);
-    if (!texture) {
-      throw new Error("texture not found");
-    }
-    const sprite = PIXI.Sprite.from(texture);
-    if (!sprite) {
-      throw new Error("sprite not found");
-    }
-    const mainImgLabel = "main-img";
-    const child = windowContentContainer.getChildByLabel(mainImgLabel);
-    if (child) {
-      windowContentContainer.removeChild(child);
-    }
-    sprite.label = mainImgLabel;
-    sprite.zIndex = LAYER_ORDER_IMG;
-    sprite.width = imageWidth;
-    sprite.height = imageHeight;
-    windowContentContainer.addChild(sprite);
-  });
-  const spinningPointer = (frame) => {
-    var _a2, _b;
-    if (!spinningPointerSprite.current) {
-      spinningPointerSprite.current = PIXI.Sprite.from(mouseLoading);
-      spinningPointerSprite.current.zIndex = LAYER_ORDER_SPINNING_POINTER;
-      spinningPointerSprite.current.anchor.set(0.5, 0.5);
-      spinningPointerSprite.current.scale.set(0.5);
-      spinningPointerSprite.current.label = "spinning-pointer";
-    }
-    spinningPointerSprite.current.x = ((_a2 = pointerSprite.current) == null ? void 0 : _a2.x) || 0;
-    spinningPointerSprite.current.y = ((_b = pointerSprite.current) == null ? void 0 : _b.y) || 0;
-    windowContentContainer.addChild(spinningPointerSprite.current);
-    let startTime;
-    let isCancelled = false;
-    const animate = (currentTime) => {
-      if (isCancelled)
-        return;
-      if (!startTime)
-        startTime = currentTime;
-      const elapsedTime = currentTime - startTime;
-      const progress = (Math.sin(elapsedTime / 500 - Math.PI / 2) + 1) / 2;
-      const rotation = progress * Math.PI * 2;
-      if (spinningPointerSprite.current) {
-        spinningPointerSprite.current.rotation = rotation;
-      }
-      frame(animate);
-    };
-    frame(animate);
-    const stopFn = () => {
-      if (spinningPointerSprite.current) {
-        windowContentContainer.removeChild(spinningPointerSprite.current);
-      }
-      isCancelled = true;
-    };
-    return stopFn;
-  };
-  const updatePointer = (img, x, y) => __async(this, null, function* () {
-    var _a2, _b;
-    if (!getTextureFromCache(img)) {
-      console.warn("image not loaded", img);
-      yield loadTexture(img);
-    }
-    const texture = getTextureFromCache(img);
-    if (!texture) {
-      throw new Error("texture not found");
-    }
-    const sprite = PIXI.Sprite.from(texture);
-    let targetX = (_a2 = pointerSprite.current) == null ? void 0 : _a2.x;
-    let targetY = (_b = pointerSprite.current) == null ? void 0 : _b.y;
-    if (typeof x === "number") {
-      targetX = x;
-    }
-    if (typeof y === "number") {
-      targetY = y;
-    }
-    if (typeof targetX === "undefined" || typeof targetY === "undefined") {
-      console.warn("invalid pointer position", x, y);
-      return;
-    }
-    if (pointerSprite.current) {
-      const pointer = windowContentContainer.getChildByLabel("pointer");
-      if (pointer) {
-        windowContentContainer.removeChild(pointer);
-      }
-    }
-    pointerSprite.current = sprite;
-    pointerSprite.current.x = targetX;
-    pointerSprite.current.y = targetY;
-    pointerSprite.current.label = "pointer";
-    pointerSprite.current.zIndex = LAYER_ORDER_POINTER;
-    windowContentContainer.addChild(pointerSprite.current);
-  });
-  const updateCamera = (state) => {
-    cameraState.current = state;
-    const newScale = Math.max(1, imageWidth / state.width);
-    windowContentContainer.scale.set(newScale);
-    windowContentContainer.x = Math.round(
-      canvasPaddingLeft - state.left * newScale
-    );
-    windowContentContainer.y = Math.round(
-      canvasPaddingTop - state.top * newScale
-    );
-    const pointer = windowContentContainer.getChildByLabel("pointer");
-    if (pointer) {
-      pointer.scale.set(1 / newScale);
-      if (typeof state.pointerLeft === "number" && typeof state.pointerTop === "number") {
-        pointer.x = state.pointerLeft;
-        pointer.y = state.pointerTop;
-      }
-    }
-  };
-  const cameraAnimation = (targetState, duration, frame) => __async(this, null, function* () {
-    const currentState = __spreadValues({}, cameraState.current);
-    const startLeft = currentState.left;
-    const startTop = currentState.top;
-    const startPointerLeft = currentState.pointerLeft;
-    const startPointerTop = currentState.pointerTop;
-    const startScale = currentState.width / imageWidth;
-    const startTime = performance.now();
-    const shouldMovePointer = typeof targetState.pointerLeft === "number" && typeof targetState.pointerTop === "number" && (targetState.pointerLeft !== startPointerLeft || targetState.pointerTop !== startPointerTop);
-    const pointerMoveDuration = shouldMovePointer ? duration * 0.375 : 0;
-    const cameraMoveStart = pointerMoveDuration;
-    const cameraMoveDuration = duration - pointerMoveDuration;
-    yield new Promise((resolve) => {
-      const animate = (currentTime) => {
-        const nextState = __spreadValues({}, cameraState.current);
-        const elapsedTime = currentTime - startTime;
-        if (shouldMovePointer) {
-          if (elapsedTime <= pointerMoveDuration) {
-            const rawMouseProgress = Math.min(
-              elapsedTime / pointerMoveDuration,
-              1
-            );
-            const mouseProgress = cubicMouse(rawMouseProgress);
-            nextState.pointerLeft = startPointerLeft + (targetState.pointerLeft - startPointerLeft) * mouseProgress;
-            nextState.pointerTop = startPointerTop + (targetState.pointerTop - startPointerTop) * mouseProgress;
-          } else {
-            nextState.pointerLeft = targetState.pointerLeft;
-            nextState.pointerTop = targetState.pointerTop;
-          }
-        }
-        if (elapsedTime > cameraMoveStart) {
-          const cameraElapsedTime = elapsedTime - cameraMoveStart;
-          const rawCameraProgress = Math.min(
-            cameraElapsedTime / cameraMoveDuration,
-            1
-          );
-          const cameraProgress = cubicImage(rawCameraProgress);
-          const targetScale = targetState.width / imageWidth;
-          const progressScale = startScale + (targetScale - startScale) * cameraProgress;
-          const progressWidth = imageWidth * progressScale;
-          const progressHeight = imageHeight * progressScale;
-          nextState.width = progressWidth;
-          const progressLeft = startLeft + (targetState.left - startLeft) * cameraProgress;
-          const progressTop = startTop + (targetState.top - startTop) * cameraProgress;
-          const horizontalExceed = progressLeft + progressWidth - imageWidth;
-          const verticalExceed = progressTop + progressHeight - imageHeight;
-          nextState.left = horizontalExceed > 0 ? progressLeft + horizontalExceed : progressLeft;
-          nextState.top = verticalExceed > 0 ? progressTop + verticalExceed : progressTop;
-        }
-        updateCamera(nextState);
-        if (elapsedTime < duration) {
-          frame(animate);
-        } else {
-          resolve();
-        }
-      };
-      frame(animate);
-    });
-  });
-  const fadeInGraphics = (graphics, duration, frame, targetAlpha = 1) => {
-    return new Promise((resolve) => {
-      const startTime = performance.now();
-      const animate = (currentTime) => {
-        const elapsedTime = currentTime - startTime;
-        const progress = Math.min(elapsedTime / duration, 1);
-        graphics.alpha = targetAlpha === 0 ? 1 - linear(progress) : linear(progress);
-        if (elapsedTime < duration) {
-          frame(animate);
-        } else {
-          resolve();
-        }
-      };
-      frame(animate);
-    });
-  };
-  const fadeOutItem = (graphics, duration, frame) => __async(this, null, function* () {
-    return fadeInGraphics(graphics, duration, frame, 0);
-  });
-  const insightElementsAnimation = (elements, highlightElements, searchArea, duration, frame) => __async(this, null, function* () {
-    insightMarkContainer.removeChildren();
-    const elementsToAdd = [...elements];
-    const totalLength = elementsToAdd.length;
-    let childrenCount = 0;
-    yield new Promise((resolve) => {
-      const startTime = performance.now();
-      const animate = (currentTime) => {
-        const elapsedTime = currentTime - startTime;
-        const progress = cubicInsightElement(
-          Math.min(elapsedTime / duration, 1)
-        );
-        const elementsToAddNow = Math.floor(progress * totalLength);
-        while (childrenCount < elementsToAddNow) {
-          const randomIndex = Math.floor(Math.random() * elementsToAdd.length);
-          const element = elementsToAdd.splice(randomIndex, 1)[0];
-          if (element) {
-            const [insightMarkGraphic] = rectMarkForItem(
-              element.rect,
-              element.content,
-              "element"
-            );
-            insightMarkGraphic.alpha = 0;
-            insightMarkContainer.addChild(insightMarkGraphic);
-            childrenCount++;
-            fadeInGraphics(
-              insightMarkGraphic,
-              singleElementFadeInDuration,
-              frame
-            );
-          }
-        }
-        if (elapsedTime < duration) {
-          frame(animate);
-        } else {
-          while (elementsToAdd.length > 0) {
-            const randomIndex = Math.floor(
-              Math.random() * elementsToAdd.length
-            );
-            const element = elementsToAdd.splice(randomIndex, 1)[0];
-            const [insightMarkGraphic] = rectMarkForItem(
-              element.rect,
-              element.content,
-              "element"
-            );
-            insightMarkGraphic.alpha = 1;
-            insightMarkContainer.addChild(insightMarkGraphic);
-          }
-          if (searchArea) {
-            const [searchAreaGraphic] = rectMarkForItem(
-              searchArea,
-              "Search Area",
-              "searchArea"
-            );
-            searchAreaGraphic.alpha = 1;
-            insightMarkContainer.addChild(searchAreaGraphic);
-          }
-          highlightElements.map((element) => {
-            const [insightMarkGraphic] = rectMarkForItem(
-              element.rect,
-              element.content || "",
-              "highlight"
-            );
-            insightMarkGraphic.alpha = 1;
-            insightMarkContainer.addChild(insightMarkGraphic);
-          });
-          resolve();
-        }
-      };
-      frame(animate);
-    });
-  });
-  const init = () => __async(this, null, function* () {
-    if (!divContainerRef.current || !scripts)
-      return;
-    yield app.init({
-      width: imageWidth,
-      height: imageHeight,
-      background: 16053492,
-      autoDensity: true,
-      antialias: true
-    });
-    if (!divContainerRef.current)
-      return;
-    divContainerRef.current.appendChild(app.canvas);
-    windowContentContainer.x = 0;
-    windowContentContainer.y = 0;
-    app.stage.addChild(windowContentContainer);
-    insightMarkContainer.x = 0;
-    insightMarkContainer.y = 0;
-    windowContentContainer.addChild(insightMarkContainer);
-  });
-  const [isRecording, setIsRecording] = useState(false);
-  const recorderSessionRef = useRef(null);
-  const handleExport = () => {
-    if (recorderSessionRef.current) {
-      console.warn("recorderSession exists");
-      return;
-    }
-    if (!app.canvas) {
-      console.warn("canvas is not initialized");
-      return;
-    }
-    recorderSessionRef.current = new RecordingSession(app.canvas);
-    setIsRecording(true);
-    triggerReplay();
-  };
-  const play = () => {
-    let cancelFn;
-    Promise.resolve(
-      (() => __async(this, null, function* () {
-        var _a2;
-        if (!app) {
-          throw new Error("app is not initialized");
-        }
-        if (!scripts) {
-          throw new Error("scripts is required");
-        }
-        const { frame, cancel, timeout } = frameKit();
-        cancelFn = cancel;
-        const allImages = scripts.filter((item) => !!item.img).map((item) => item.img);
-        yield Promise.all(
-          [...allImages, mouseLoading, mousePointer].map(loadTexture)
-        );
-        insightMarkContainer.removeChildren();
-        yield updatePointer(mousePointer, imageWidth / 2, imageHeight / 2);
-        yield repaintImage();
-        yield updateCamera(__spreadValues({}, basicCameraState));
-        const totalDuration = scripts.reduce((acc, item) => {
-          return acc + item.duration + (item.camera && item.insightCameraDuration ? item.insightCameraDuration : 0);
-        }, 0);
-        const progressUpdateInterval = 200;
-        const startTime = performance.now();
-        setAnimationProgress(0);
-        const updateProgress = () => {
-          const progress = Math.min(
-            (performance.now() - startTime) / totalDuration,
-            1
-          );
-          setAnimationProgress(progress);
-          if (progress < 1) {
-            return timeout(updateProgress, progressUpdateInterval);
-          }
-        };
-        frame(updateProgress);
-        if (recorderSessionRef.current) {
-          recorderSessionRef.current.start();
-        }
-        for (const index in scripts) {
-          const item = scripts[index];
-          setTitleText(item.title || "");
-          setSubTitleText(item.subTitle || "");
-          if (item.type === "sleep") {
-            yield sleep(item.duration);
-          } else if (item.type === "insight") {
-            if (!item.img) {
-              throw new Error("img is required");
-            }
-            currentImg.current = item.img;
-            yield repaintImage();
-            const elements = ((_a2 = item.context) == null ? void 0 : _a2.tree) ? treeToList(item.context.tree) : [];
-            const highlightElements = item.highlightElement ? [item.highlightElement] : [];
-            yield insightElementsAnimation(
-              elements,
-              highlightElements,
-              item.searchArea,
-              item.duration,
-              frame
-            );
-            if (item.camera) {
-              if (!item.insightCameraDuration) {
-                throw new Error("insightCameraDuration is required");
-              }
-              yield cameraAnimation(
-                item.camera,
-                item.insightCameraDuration,
-                frame
-              );
-            }
-          } else if (item.type === "clear-insight") {
-            yield fadeOutItem(insightMarkContainer, item.duration, frame);
-            insightMarkContainer.removeChildren();
-            insightMarkContainer.alpha = 1;
-          } else if (item.type === "img") {
-            if (item.img && item.img !== currentImg.current) {
-              currentImg.current = item.img;
-              yield repaintImage();
-            }
-            if (item.camera) {
-              yield cameraAnimation(item.camera, item.duration, frame);
-            } else {
-              yield sleep(item.duration);
-            }
-          } else if (item.type === "pointer") {
-            if (!item.img) {
-              throw new Error("pointer img is required");
-            }
-            yield updatePointer(item.img);
-          } else if (item.type === "spinning-pointer") {
-            const stop = spinningPointer(frame);
-            yield sleep(item.duration);
-            stop();
-          }
-        }
-        if (recorderSessionRef.current) {
-          recorderSessionRef.current.stop();
-          recorderSessionRef.current = null;
-          setIsRecording(false);
-        }
-      }))().catch((e) => {
-        console.error("player error", e);
-      })
-    );
-    return () => {
-      cancelFn == null ? void 0 : cancelFn();
-    };
-  };
-  useEffect(() => {
-    Promise.resolve(
-      (() => __async(this, null, function* () {
-        yield init();
-        if (divContainerRef.current && imageWidth && imageHeight) {
-          const aspectRatio = imageWidth / imageHeight;
-          divContainerRef.current.style.setProperty(
-            "--canvas-aspect-ratio",
-            aspectRatio.toString()
-          );
-          divContainerRef.current.setAttribute("data-fit-mode", fitMode);
-          const playerContainer = divContainerRef.current.closest(
-            ".player-container"
-          );
-          if (playerContainer) {
-            playerContainer.setAttribute("data-fit-mode", fitMode);
-          }
-        }
-        triggerReplay();
-      }))()
-    );
-    return () => {
-      try {
-        app.destroy(true, { children: true, texture: true });
-      } catch (e) {
-        console.warn("destroy failed", e);
-      }
-    };
-  }, [imageWidth, imageHeight, fitMode]);
-  useEffect(() => {
-    if (replayMark) {
-      return play();
-    }
-  }, [replayMark]);
-  const [mouseOverStatusIcon, setMouseOverStatusIcon] = useState(false);
-  const progressString = Math.round(animationProgress * 100);
-  const transitionStyle = animationProgress === 0 ? "none" : "0.3s";
-  const canReplayNow = animationProgress === 1;
-  useEffect(() => {
-    if (canReplayNow) {
-      const listener = (event) => {
-        if (event.key === " ") {
-          triggerReplay();
-        }
-      };
-      window.addEventListener("keydown", listener);
-      return () => {
-        window.removeEventListener("keydown", listener);
-      };
-    }
-  }, [canReplayNow]);
-  let statusIconElement;
-  let statusOnClick = () => {
-  };
-  if (animationProgress < 1) {
-    statusIconElement = /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true, color: "#333" }), size: "default" });
-  } else if (mouseOverStatusIcon) {
-    statusIconElement = /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(CaretRightOutlined, { color: "#333" }), size: "default" });
-    statusOnClick = () => triggerReplay();
-  } else {
-    statusIconElement = // <Spin indicator={<CheckCircleOutlined />} size="default" />
-    /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(CaretRightOutlined, { color: "#333" }), size: "default" });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "player-container", children: [
-    /* @__PURE__ */ jsx("div", { className: "canvas-container", ref: divContainerRef }),
-    /* @__PURE__ */ jsx("div", { className: "player-timeline-wrapper", children: /* @__PURE__ */ jsx("div", { className: "player-timeline", children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "player-timeline-progress",
-        style: {
-          width: `${progressString}%`,
-          transition: transitionStyle
-        }
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx("div", { className: "player-tools-wrapper", children: /* @__PURE__ */ jsx("div", { className: "player-tools", children: /* @__PURE__ */ jsxs("div", { className: "player-control", children: [
-      /* @__PURE__ */ jsxs("div", { className: "status-text", children: [
-        /* @__PURE__ */ jsx("div", { className: "title", children: titleText }),
-        /* @__PURE__ */ jsx(Tooltip, { title: subTitleText, children: /* @__PURE__ */ jsx("div", { className: "subtitle", children: subTitleText }) })
-      ] }),
-      isRecording ? null : /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "status-icon",
-          onMouseEnter: () => setMouseOverStatusIcon(true),
-          onMouseLeave: () => setMouseOverStatusIcon(false),
-          onClick: statusOnClick,
-          children: statusIconElement
-        }
-      ),
-      (props == null ? void 0 : props.reportFileContent) ? /* @__PURE__ */ jsx(Tooltip, { title: "Download Report", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "status-icon",
-          onMouseEnter: () => setMouseOverStatusIcon(true),
-          onMouseLeave: () => setMouseOverStatusIcon(false),
-          onClick: () => downloadReport(props.reportFileContent),
-          children: /* @__PURE__ */ jsx(DownloadOutlined, { color: "#333" })
-        }
-      ) }) : null,
-      /* @__PURE__ */ jsx(Tooltip, { title: isRecording ? "Generating..." : "Export Video", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "status-icon",
-          onClick: isRecording ? void 0 : handleExport,
-          style: {
-            opacity: isRecording ? 0.5 : 1,
-            cursor: isRecording ? "not-allowed" : "pointer"
-          },
-          children: isRecording ? /* @__PURE__ */ jsx(Spin, { size: "default", percent: progressString }) : /* @__PURE__ */ jsx(ExportOutlined, {})
-        }
-      ) })
-    ] }) }) })
-  ] });
-}
-export {
-  Player
-};