@midscene/visualizer 0.26.2-beta-20250812091127.0 → 0.26.3-beta-20250813021342.0

package/dist/lib/component/player.js

@@ -1,773 +1,662 @@
+'use client';
 "use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-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 __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-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 __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
     };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
     };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-var player_exports = {};
-__export(player_exports, {
-  Player: () => Player
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Player: ()=>Player
 });
-module.exports = __toCommonJS(player_exports);
-var import_buffer = __toESM(require("buffer"));
-var import_browser = __toESM(require("process/browser"));
-var import_console_browserify = __toESM(require("console-browserify"));
-var buffer = {
-  Buffer: import_buffer.default
-};
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_unsafe_eval = require("pixi.js/unsafe-eval");
-var PIXI = __toESM(require("pixi.js"));
-var import_react = require("react");
-var import_player = require("./player.css");
-var import_utils = require("../utils");
-var import_icons = require("@ant-design/icons");
-var import_extractor = require("@midscene/shared/extractor");
-var import_antd = require("antd");
-var import_blackboard = require("./blackboard");
-var import_pixi_loader = require("./pixi-loader");
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("pixi.js/unsafe-eval");
+const external_pixi_js_namespaceObject = require("pixi.js");
+const external_react_namespaceObject = require("react");
+require("./player.css");
+const external_utils_js_namespaceObject = require("../utils.js");
+const icons_namespaceObject = require("@ant-design/icons");
+const extractor_namespaceObject = require("@midscene/shared/extractor");
+const external_antd_namespaceObject = require("antd");
+const external_blackboard_js_namespaceObject = require("./blackboard.js");
+const external_pixi_loader_js_namespaceObject = require("./pixi-loader.js");
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
 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 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 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);
+const cubicImage = (t)=>linear(t);
+const cubicInsightElement = (t)=>cubicBezier(t, 0, 0.5, 0.5, 1);
+const cubicMouse = (t)=>linear(t);
+const linear = (t)=>t;
+const sleep = (ms)=>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;
         }
-        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();
+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) {
-      import_console_browserify.default.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] = (0, import_react.useState)("");
-  const [subTitleText, setSubTitleText] = (0, import_react.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 = (0, import_react.useRef)(((_a = scripts == null ? void 0 : scripts[0]) == null ? void 0 : _a.img) || null);
-  const divContainerRef = (0, import_react.useRef)(null);
-  const app = (0, import_react.useMemo)(() => new PIXI.Application(), []);
-  const pointerSprite = (0, import_react.useRef)(null);
-  const spinningPointerSprite = (0, import_react.useRef)(null);
-  const [replayMark, setReplayMark] = (0, import_react.useState)(0);
-  const triggerReplay = () => {
-    setReplayMark(Date.now());
-  };
-  const windowContentContainer = (0, import_react.useMemo)(() => {
-    const container = new PIXI.Container();
-    return container;
-  }, []);
-  const insightMarkContainer = (0, import_react.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] = (0, import_react.useState)(-1);
-  const cancelFlag = (0, import_react.useRef)(false);
-  (0, import_react.useEffect)(() => {
-    cancelFlag.current = false;
-    return () => {
-      cancelFlag.current = true;
-    };
-  }, []);
-  const cameraState = (0, import_react.useRef)(__spreadValues({}, basicCameraState));
-  const repaintImage = () => __async(this, null, function* () {
-    const imgToUpdate = currentImg.current;
-    if (!imgToUpdate) {
-      import_console_browserify.default.warn("no image to update");
-      return;
-    }
-    if (!(0, import_pixi_loader.getTextureFromCache)(imgToUpdate)) {
-      import_console_browserify.default.warn("image not loaded", imgToUpdate);
-      yield (0, import_pixi_loader.loadTexture)(imgToUpdate);
-    }
-    const texture = (0, import_pixi_loader.getTextureFromCache)(imgToUpdate);
-    if (!texture) {
-      throw new Error("texture not found");
-    }
-    const sprite = PIXI.Sprite.from(texture);
-    if (!sprite) {
-      throw new Error("sprite not found");
+    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();
     }
-    const mainImgLabel = "main-img";
-    const child = windowContentContainer.getChildByLabel(mainImgLabel);
-    if (child) {
-      windowContentContainer.removeChild(child);
+    stop() {
+        var _this_mediaRecorder;
+        if (!this.recording || !this.mediaRecorder) return void console.warn('not recording');
+        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);
+        };
+        null == (_this_mediaRecorder = this.mediaRecorder) || _this_mediaRecorder.stop();
+        this.recording = false;
+        this.mediaRecorder = null;
     }
-    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(import_utils.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";
+    constructor(canvas){
+        _define_property(this, "canvas", void 0);
+        _define_property(this, "mediaRecorder", null);
+        _define_property(this, "chunks", void 0);
+        _define_property(this, "recording", false);
+        this.canvas = canvas;
+        this.chunks = [];
     }
-    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);
+}
+function Player(props) {
+    var _scripts_;
+    const [titleText, setTitleText] = (0, external_react_namespaceObject.useState)('');
+    const [subTitleText, setSubTitleText] = (0, external_react_namespaceObject.useState)('');
+    const scripts = null == props ? void 0 : props.replayScripts;
+    const imageWidth = (null == props ? void 0 : props.imageWidth) || 1920;
+    const imageHeight = (null == props ? void 0 : props.imageHeight) || 1080;
+    const fitMode = (null == props ? void 0 : props.fitMode) || 'height';
+    const currentImg = (0, external_react_namespaceObject.useRef)((null == scripts ? void 0 : null == (_scripts_ = scripts[0]) ? void 0 : _scripts_.img) || null);
+    const divContainerRef = (0, external_react_namespaceObject.useRef)(null);
+    const app = (0, external_react_namespaceObject.useMemo)(()=>new external_pixi_js_namespaceObject.Application(), []);
+    const pointerSprite = (0, external_react_namespaceObject.useRef)(null);
+    const spinningPointerSprite = (0, external_react_namespaceObject.useRef)(null);
+    const [replayMark, setReplayMark] = (0, external_react_namespaceObject.useState)(0);
+    const triggerReplay = ()=>{
+        setReplayMark(Date.now());
     };
-    frame(animate);
-    const stopFn = () => {
-      if (spinningPointerSprite.current) {
-        windowContentContainer.removeChild(spinningPointerSprite.current);
-      }
-      isCancelled = true;
+    const windowContentContainer = (0, external_react_namespaceObject.useMemo)(()=>{
+        const container = new external_pixi_js_namespaceObject.Container();
+        return container;
+    }, []);
+    const insightMarkContainer = (0, external_react_namespaceObject.useMemo)(()=>{
+        const container = new external_pixi_js_namespaceObject.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)
     };
-    return stopFn;
-  };
-  const updatePointer = (img, x, y) => __async(this, null, function* () {
-    var _a2, _b;
-    if (!(0, import_pixi_loader.getTextureFromCache)(img)) {
-      import_console_browserify.default.warn("image not loaded", img);
-      yield (0, import_pixi_loader.loadTexture)(img);
-    }
-    const texture = (0, import_pixi_loader.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") {
-      import_console_browserify.default.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 [animationProgress, setAnimationProgress] = (0, external_react_namespaceObject.useState)(-1);
+    const cancelFlag = (0, external_react_namespaceObject.useRef)(false);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        cancelFlag.current = false;
+        return ()=>{
+            cancelFlag.current = true;
+        };
+    }, []);
+    const cameraState = (0, external_react_namespaceObject.useRef)({
+        ...basicCameraState
     });
-  });
-  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();
+    const repaintImage = async ()=>{
+        const imgToUpdate = currentImg.current;
+        if (!imgToUpdate) return void console.warn('no image to update');
+        if (!(0, external_pixi_loader_js_namespaceObject.getTextureFromCache)(imgToUpdate)) {
+            console.warn('image not loaded', imgToUpdate);
+            await (0, external_pixi_loader_js_namespaceObject.loadTexture)(imgToUpdate);
         }
-      };
-      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] = (0, import_blackboard.rectMarkForItem)(
-              element.rect,
-              element.content,
-              "element"
-            );
-            insightMarkGraphic.alpha = 0;
-            insightMarkContainer.addChild(insightMarkGraphic);
-            childrenCount++;
-            fadeInGraphics(
-              insightMarkGraphic,
-              singleElementFadeInDuration,
-              frame
-            );
-          }
+        const texture = (0, external_pixi_loader_js_namespaceObject.getTextureFromCache)(imgToUpdate);
+        if (!texture) throw new Error('texture not found');
+        const sprite = external_pixi_js_namespaceObject.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 _pointerSprite_current, _pointerSprite_current1;
+        if (!spinningPointerSprite.current) {
+            spinningPointerSprite.current = external_pixi_js_namespaceObject.Sprite.from(external_utils_js_namespaceObject.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';
         }
-        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] = (0, import_blackboard.rectMarkForItem)(
-              element.rect,
-              element.content,
-              "element"
-            );
-            insightMarkGraphic.alpha = 1;
-            insightMarkContainer.addChild(insightMarkGraphic);
-          }
-          if (searchArea) {
-            const [searchAreaGraphic] = (0, import_blackboard.rectMarkForItem)(
-              searchArea,
-              "Search Area",
-              "searchArea"
-            );
-            searchAreaGraphic.alpha = 1;
-            insightMarkContainer.addChild(searchAreaGraphic);
-          }
-          highlightElements.map((element) => {
-            const [insightMarkGraphic] = (0, import_blackboard.rectMarkForItem)(
-              element.rect,
-              element.content || "",
-              "highlight"
-            );
-            insightMarkGraphic.alpha = 1;
-            insightMarkContainer.addChild(insightMarkGraphic);
-          });
-          resolve();
+        spinningPointerSprite.current.x = (null == (_pointerSprite_current = pointerSprite.current) ? void 0 : _pointerSprite_current.x) || 0;
+        spinningPointerSprite.current.y = (null == (_pointerSprite_current1 = pointerSprite.current) ? void 0 : _pointerSprite_current1.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 = async (img, x, y)=>{
+        var _pointerSprite_current, _pointerSprite_current1;
+        if (!(0, external_pixi_loader_js_namespaceObject.getTextureFromCache)(img)) {
+            console.warn('image not loaded', img);
+            await (0, external_pixi_loader_js_namespaceObject.loadTexture)(img);
         }
-      };
-      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] = (0, import_react.useState)(false);
-  const recorderSessionRef = (0, import_react.useRef)(null);
-  const handleExport = () => {
-    if (recorderSessionRef.current) {
-      import_console_browserify.default.warn("recorderSession exists");
-      return;
-    }
-    if (!app.canvas) {
-      import_console_browserify.default.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");
+        const texture = (0, external_pixi_loader_js_namespaceObject.getTextureFromCache)(img);
+        if (!texture) throw new Error('texture not found');
+        const sprite = external_pixi_js_namespaceObject.Sprite.from(texture);
+        let targetX = null == (_pointerSprite_current = pointerSprite.current) ? void 0 : _pointerSprite_current.x;
+        let targetY = null == (_pointerSprite_current1 = pointerSprite.current) ? void 0 : _pointerSprite_current1.y;
+        if ('number' == typeof x) targetX = x;
+        if ('number' == typeof y) targetY = y;
+        if (void 0 === targetX || void 0 === targetY) return void console.warn('invalid pointer position', x, y);
+        if (pointerSprite.current) {
+            const pointer = windowContentContainer.getChildByLabel('pointer');
+            if (pointer) windowContentContainer.removeChild(pointer);
         }
-        if (!scripts) {
-          throw new Error("scripts is required");
+        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 ('number' == typeof state.pointerLeft && 'number' == typeof state.pointerTop) {
+                pointer.x = state.pointerLeft;
+                pointer.y = state.pointerTop;
+            }
         }
-        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, import_utils.mousePointer].map(import_pixi_loader.loadTexture)
-        );
-        insightMarkContainer.removeChildren();
-        yield updatePointer(import_utils.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);
-          }
+    };
+    const cameraAnimation = async (targetState, duration, frame)=>{
+        const currentState = {
+            ...cameraState.current
         };
-        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) ? (0, import_extractor.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);
+        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 = 'number' == typeof targetState.pointerLeft && 'number' == typeof targetState.pointerTop && (targetState.pointerLeft !== startPointerLeft || targetState.pointerTop !== startPointerTop);
+        const pointerMoveDuration = shouldMovePointer ? 0.375 * duration : 0;
+        const cameraMoveStart = pointerMoveDuration;
+        const cameraMoveDuration = duration - pointerMoveDuration;
+        await new Promise((resolve)=>{
+            const animate = (currentTime)=>{
+                const nextState = {
+                    ...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 = function(graphics, duration, frame) {
+        let targetAlpha = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 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 = 0 === targetAlpha ? 1 - linear(progress) : linear(progress);
+                if (elapsedTime < duration) frame(animate);
+                else resolve();
+            };
+            frame(animate);
+        });
+    };
+    const fadeOutItem = async (graphics, duration, frame)=>fadeInGraphics(graphics, duration, frame, 0);
+    const insightElementsAnimation = async (elements, highlightElements, searchArea, duration, frame)=>{
+        insightMarkContainer.removeChildren();
+        const elementsToAdd = [
+            ...elements
+        ];
+        const totalLength = elementsToAdd.length;
+        let childrenCount = 0;
+        await 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] = (0, external_blackboard_js_namespaceObject.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] = (0, external_blackboard_js_namespaceObject.rectMarkForItem)(element.rect, element.content, 'element');
+                        insightMarkGraphic.alpha = 1;
+                        insightMarkContainer.addChild(insightMarkGraphic);
+                    }
+                    if (searchArea) {
+                        const [searchAreaGraphic] = (0, external_blackboard_js_namespaceObject.rectMarkForItem)(searchArea, 'Search Area', 'searchArea');
+                        searchAreaGraphic.alpha = 1;
+                        insightMarkContainer.addChild(searchAreaGraphic);
+                    }
+                    highlightElements.map((element)=>{
+                        const [insightMarkGraphic] = (0, external_blackboard_js_namespaceObject.rectMarkForItem)(element.rect, element.content || '', 'highlight');
+                        insightMarkGraphic.alpha = 1;
+                        insightMarkContainer.addChild(insightMarkGraphic);
+                    });
+                    resolve();
+                }
+            };
+            frame(animate);
+        });
+    };
+    const init = async ()=>{
+        if (!divContainerRef.current || !scripts) return;
+        await app.init({
+            width: imageWidth,
+            height: imageHeight,
+            background: 0xf4f4f4,
+            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] = (0, external_react_namespaceObject.useState)(false);
+    const recorderSessionRef = (0, external_react_namespaceObject.useRef)(null);
+    const handleExport = ()=>{
+        if (recorderSessionRef.current) return void console.warn('recorderSession exists');
+        if (!app.canvas) return void console.warn('canvas is not initialized');
+        recorderSessionRef.current = new RecordingSession(app.canvas);
+        setIsRecording(true);
+        triggerReplay();
+    };
+    const play = ()=>{
+        let cancelFn;
+        Promise.resolve((async ()=>{
+            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);
+            await Promise.all([
+                ...allImages,
+                external_utils_js_namespaceObject.mouseLoading,
+                external_utils_js_namespaceObject.mousePointer
+            ].map(external_pixi_loader_js_namespaceObject.loadTexture));
             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);
+            await updatePointer(external_utils_js_namespaceObject.mousePointer, imageWidth / 2, imageHeight / 2);
+            await repaintImage();
+            await updateCamera({
+                ...basicCameraState
+            });
+            const totalDuration = scripts.reduce((acc, item)=>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 ('sleep' === item.type) await sleep(item.duration);
+                else if ('insight' === item.type) {
+                    var _item_context;
+                    if (!item.img) throw new Error('img is required');
+                    currentImg.current = item.img;
+                    await repaintImage();
+                    const elements = (null == (_item_context = item.context) ? void 0 : _item_context.tree) ? (0, extractor_namespaceObject.treeToList)(item.context.tree) : [];
+                    const highlightElements = item.highlightElement ? [
+                        item.highlightElement
+                    ] : [];
+                    await insightElementsAnimation(elements, highlightElements, item.searchArea, item.duration, frame);
+                    if (item.camera) {
+                        if (!item.insightCameraDuration) throw new Error('insightCameraDuration is required');
+                        await cameraAnimation(item.camera, item.insightCameraDuration, frame);
+                    }
+                } else if ('clear-insight' === item.type) {
+                    await fadeOutItem(insightMarkContainer, item.duration, frame);
+                    insightMarkContainer.removeChildren();
+                    insightMarkContainer.alpha = 1;
+                } else if ('img' === item.type) {
+                    if (item.img && item.img !== currentImg.current) {
+                        currentImg.current = item.img;
+                        await repaintImage();
+                    }
+                    if (item.camera) await cameraAnimation(item.camera, item.duration, frame);
+                    else await sleep(item.duration);
+                } else if ('pointer' === item.type) {
+                    if (!item.img) throw new Error('pointer img is required');
+                    await updatePointer(item.img);
+                } else if ('spinning-pointer' === item.type) {
+                    const stop = spinningPointer(frame);
+                    await sleep(item.duration);
+                    stop();
+                }
             }
-          } else if (item.type === "pointer") {
-            if (!item.img) {
-              throw new Error("pointer img is required");
+            if (recorderSessionRef.current) {
+                recorderSessionRef.current.stop();
+                recorderSessionRef.current = null;
+                setIsRecording(false);
             }
-            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) => {
-        import_console_browserify.default.error("player error", e);
-      })
-    );
-    return () => {
-      cancelFn == null ? void 0 : cancelFn();
-    };
-  };
-  (0, import_react.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) {
-        import_console_browserify.default.warn("destroy failed", e);
-      }
+        })().catch((e)=>{
+            console.error('player error', e);
+        }));
+        return ()=>{
+            null == cancelFn || cancelFn();
+        };
     };
-  }, [imageWidth, imageHeight, fitMode]);
-  (0, import_react.useEffect)(() => {
-    if (replayMark) {
-      return play();
-    }
-  }, [replayMark]);
-  const [mouseOverStatusIcon, setMouseOverStatusIcon] = (0, import_react.useState)(false);
-  const progressString = Math.round(animationProgress * 100);
-  const transitionStyle = animationProgress === 0 ? "none" : "0.3s";
-  const canReplayNow = animationProgress === 1;
-  (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, { spin: true, color: "#333" }), size: "default" });
-  } else if (mouseOverStatusIcon) {
-    statusIconElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretRightOutlined, { color: "#333" }), size: "default" });
-    statusOnClick = () => triggerReplay();
-  } 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.CaretRightOutlined, { color: "#333" }), 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 }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "player-timeline-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "player-timeline", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className: "player-timeline-progress",
-        style: {
-          width: `${progressString}%`,
-          transition: transitionStyle
-        }
-      }
-    ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "player-tools-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "player-tools", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "player-control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "status-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title", children: titleText }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: subTitleText, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "subtitle", children: subTitleText }) })
-      ] }),
-      isRecording ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          className: "status-icon",
-          onMouseEnter: () => setMouseOverStatusIcon(true),
-          onMouseLeave: () => setMouseOverStatusIcon(false),
-          onClick: statusOnClick,
-          children: statusIconElement
-        }
-      ),
-      (props == null ? void 0 : props.reportFileContent) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: "Download Report", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          className: "status-icon",
-          onMouseEnter: () => setMouseOverStatusIcon(true),
-          onMouseLeave: () => setMouseOverStatusIcon(false),
-          onClick: () => downloadReport(props.reportFileContent),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DownloadOutlined, { color: "#333" })
-        }
-      ) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: isRecording ? "Generating..." : "Export Video", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          className: "status-icon",
-          onClick: isRecording ? void 0 : handleExport,
-          style: {
-            opacity: isRecording ? 0.5 : 1,
-            cursor: isRecording ? "not-allowed" : "pointer"
-          },
-          children: isRecording ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { size: "default", percent: progressString }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExportOutlined, {})
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        Promise.resolve((async ()=>{
+            await 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
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (replayMark) return play();
+    }, [
+        replayMark
+    ]);
+    const [mouseOverStatusIcon, setMouseOverStatusIcon] = (0, external_react_namespaceObject.useState)(false);
+    const progressString = Math.round(100 * animationProgress);
+    const transitionStyle = 0 === animationProgress ? 'none' : '0.3s';
+    const canReplayNow = 1 === animationProgress;
+    (0, external_react_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Spin, {
+        indicator: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.LoadingOutlined, {
+            spin: true,
+            color: "#333"
+        }),
+        size: "default"
+    });
+    else if (mouseOverStatusIcon) {
+        statusIconElement = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Spin, {
+            indicator: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.CaretRightOutlined, {
+                color: "#333"
+            }),
+            size: "default"
+        });
+        statusOnClick = ()=>triggerReplay();
+    } else statusIconElement = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Spin, {
+        indicator: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.CaretRightOutlined, {
+            color: "#333"
+        }),
+        size: "default"
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "player-container",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "canvas-container",
+                ref: divContainerRef
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "player-timeline-wrapper",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "player-timeline",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "player-timeline-progress",
+                        style: {
+                            width: `${progressString}%`,
+                            transition: transitionStyle
+                        }
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "player-tools-wrapper",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "player-tools",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "player-control",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "status-text",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "title",
+                                        children: titleText
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+                                        title: subTitleText,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                            className: "subtitle",
+                                            children: subTitleText
+                                        })
+                                    })
+                                ]
+                            }),
+                            isRecording ? null : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "status-icon",
+                                onMouseEnter: ()=>setMouseOverStatusIcon(true),
+                                onMouseLeave: ()=>setMouseOverStatusIcon(false),
+                                onClick: statusOnClick,
+                                children: statusIconElement
+                            }),
+                            (null == props ? void 0 : props.reportFileContent) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+                                title: "Download Report",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: "status-icon",
+                                    onMouseEnter: ()=>setMouseOverStatusIcon(true),
+                                    onMouseLeave: ()=>setMouseOverStatusIcon(false),
+                                    onClick: ()=>downloadReport(props.reportFileContent),
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.DownloadOutlined, {
+                                        color: "#333"
+                                    })
+                                })
+                            }) : null,
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+                                title: isRecording ? 'Generating...' : 'Export Video',
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: "status-icon",
+                                    onClick: isRecording ? void 0 : handleExport,
+                                    style: {
+                                        opacity: isRecording ? 0.5 : 1,
+                                        cursor: isRecording ? 'not-allowed' : 'pointer'
+                                    },
+                                    children: isRecording ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Spin, {
+                                        size: "default",
+                                        percent: progressString
+                                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.ExportOutlined, {})
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Player
+exports.Player = __webpack_exports__.Player;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "Player"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
 });