@midscene/visualizer 0.30.10 → 0.30.11-beta-20251218071621.0

package/dist/es/component/player/index.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "pixi.js/unsafe-eval";
 import { Application, Container, Sprite } from "pixi.js";
@@ -6,14 +6,38 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import "./index.css";
 import { mouseLoading, mousePointer } from "../../utils/index.mjs";
 import { CaretRightOutlined, DownloadOutlined, ExportOutlined, LoadingOutlined } from "@ant-design/icons";
-import { treeToList } from "@midscene/shared/extractor";
-import { Dropdown, Spin, Switch, Tooltip } from "antd";
+import { Dropdown, Spin, Switch, Tooltip, message } from "antd";
 import global_perspective from "../../icons/global-perspective.mjs";
 import player_setting from "../../icons/player-setting.mjs";
-import show_marker from "../../icons/show-marker.mjs";
-import { useBlackboardPreference } from "../../store/store.mjs";
+import { useGlobalPreference } from "../../store/store.mjs";
 import { getTextureFromCache, loadTexture } from "../../utils/pixi-loader.mjs";
 import { rectMarkForItem } from "../blackboard/index.mjs";
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -24,6 +48,38 @@ function _define_property(obj, key, value) {
     else obj[key] = value;
     return obj;
 }
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function player_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else player_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
 const canvasPaddingLeft = 0;
 const canvasPaddingTop = 0;
 const cubicBezier = (t, p0, p1, p2, p3)=>{
@@ -84,17 +140,32 @@ class RecordingSession {
         mediaRecorder.ondataavailable = (event)=>{
             if (event.data.size > 0) this.chunks.push(event.data);
         };
+        mediaRecorder.onerror = (event)=>{
+            console.error('MediaRecorder error:', event);
+            message.error('Video recording failed. Please try again.');
+            this.recording = false;
+            this.mediaRecorder = null;
+        };
         this.mediaRecorder = mediaRecorder;
         this.recording = true;
         return this.mediaRecorder.start();
     }
     stop() {
-        var _this_mediaRecorder;
         if (!this.recording || !this.mediaRecorder) return void console.warn('not recording');
         this.mediaRecorder.onstop = ()=>{
+            if (0 === this.chunks.length) {
+                console.error('No video data captured');
+                message.error('Video export failed: No data captured.');
+                return;
+            }
             const blob = new Blob(this.chunks, {
                 type: 'video/webm'
             });
+            if (0 === blob.size) {
+                console.error('Video blob is empty');
+                message.error('Video export failed: Empty file.');
+                return;
+            }
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
@@ -102,7 +173,7 @@ class RecordingSession {
             a.click();
             URL.revokeObjectURL(url);
         };
-        null == (_this_mediaRecorder = this.mediaRecorder) || _this_mediaRecorder.stop();
+        this.mediaRecorder.stop();
         this.recording = false;
         this.mediaRecorder = null;
     }
@@ -119,19 +190,13 @@ function Player(props) {
     var _scripts_;
     const [titleText, setTitleText] = useState('');
     const [subTitleText, setSubTitleText] = useState('');
-    const { autoZoom, setAutoZoom, elementsVisible, setElementsVisible } = useBlackboardPreference();
+    const { autoZoom, setAutoZoom } = useGlobalPreference();
     useEffect(()=>{
         if ((null == props ? void 0 : props.autoZoom) !== void 0) setAutoZoom(props.autoZoom);
     }, [
         null == props ? void 0 : props.autoZoom,
         setAutoZoom
     ]);
-    useEffect(()=>{
-        if ((null == props ? void 0 : props.elementsVisible) !== void 0) setElementsVisible(props.elementsVisible);
-    }, [
-        null == props ? void 0 : props.elementsVisible,
-        setElementsVisible
-    ]);
     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;
@@ -154,12 +219,6 @@ function Player(props) {
         container.zIndex = LAYER_ORDER_INSIGHT;
         return container;
     }, []);
-    useEffect(()=>{
-        insightMarkContainer.visible = elementsVisible;
-    }, [
-        elementsVisible,
-        insightMarkContainer
-    ]);
     const basicCameraState = {
         left: 0,
         top: 0,
@@ -175,49 +234,47 @@ function Player(props) {
             cancelFlag.current = true;
         };
     }, []);
-    const cameraState = useRef({
-        ...basicCameraState
-    });
-    const resizeCanvasIfNeeded = async (newWidth, newHeight)=>{
-        if (app.screen.width !== newWidth || app.screen.height !== newHeight) {
-            app.renderer.resize(newWidth, newHeight);
-            if (divContainerRef.current) {
-                const aspectRatio = newWidth / newHeight;
-                divContainerRef.current.style.setProperty('--canvas-aspect-ratio', aspectRatio.toString());
+    const cameraState = useRef(_object_spread({}, basicCameraState));
+    const resizeCanvasIfNeeded = (newWidth, newHeight)=>_async_to_generator(function*() {
+            if (app.screen.width !== newWidth || app.screen.height !== newHeight) {
+                app.renderer.resize(newWidth, newHeight);
+                if (divContainerRef.current) {
+                    const aspectRatio = newWidth / newHeight;
+                    divContainerRef.current.style.setProperty('--canvas-aspect-ratio', aspectRatio.toString());
+                }
+                const newBasicCameraState = {
+                    left: 0,
+                    top: 0,
+                    width: newWidth,
+                    pointerLeft: Math.round(newWidth / 2),
+                    pointerTop: Math.round(newHeight / 2)
+                };
+                cameraState.current = newBasicCameraState;
             }
-            const newBasicCameraState = {
-                left: 0,
-                top: 0,
-                width: newWidth,
-                pointerLeft: Math.round(newWidth / 2),
-                pointerTop: Math.round(newHeight / 2)
-            };
-            cameraState.current = newBasicCameraState;
-        }
-    };
-    const repaintImage = async (scriptWidth, scriptHeight)=>{
-        const imgToUpdate = currentImg.current;
-        if (!imgToUpdate) return void console.warn('no image to update');
-        const targetWidth = scriptWidth || imageWidth;
-        const targetHeight = scriptHeight || imageHeight;
-        await resizeCanvasIfNeeded(targetWidth, targetHeight);
-        if (!getTextureFromCache(imgToUpdate)) {
-            console.warn('image not loaded', imgToUpdate);
-            await loadTexture(imgToUpdate);
-        }
-        const texture = getTextureFromCache(imgToUpdate);
-        if (!texture) throw new Error('texture not found');
-        const sprite = 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 = targetWidth;
-        sprite.height = targetHeight;
-        windowContentContainer.addChild(sprite);
-    };
+        })();
+    const repaintImage = (scriptWidth, scriptHeight)=>_async_to_generator(function*() {
+            const imgToUpdate = currentImg.current;
+            if (!imgToUpdate) return void console.warn('no image to update');
+            const targetWidth = scriptWidth || imageWidth;
+            const targetHeight = scriptHeight || imageHeight;
+            yield resizeCanvasIfNeeded(targetWidth, targetHeight);
+            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 = 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 = targetWidth;
+            sprite.height = targetHeight;
+            windowContentContainer.addChild(sprite);
+        })();
     const spinningPointer = (frame)=>{
         var _pointerSprite_current, _pointerSprite_current1;
         if (!spinningPointerSprite.current) {
@@ -248,31 +305,31 @@ function Player(props) {
         };
         return stopFn;
     };
-    const updatePointer = async (img, x, y)=>{
-        var _pointerSprite_current, _pointerSprite_current1;
-        if (!getTextureFromCache(img)) {
-            console.warn('image not loaded', img);
-            await loadTexture(img);
-        }
-        const texture = getTextureFromCache(img);
-        if (!texture) throw new Error('texture not found');
-        const sprite = 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);
-        }
-        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 updatePointer = (img, x, y)=>_async_to_generator(function*() {
+            var _pointerSprite_current, _pointerSprite_current1;
+            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 = 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);
+            }
+            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, currentWidth)=>{
         cameraState.current = state;
         const effectiveWidth = currentWidth || app.screen.width || imageWidth;
@@ -289,90 +346,81 @@ function Player(props) {
             }
         }
     };
-    const cameraAnimation = async (targetState, duration, frame)=>{
-        const currentCanvasWidth = app.screen.width || imageWidth;
-        const currentCanvasHeight = app.screen.height || imageHeight;
-        if (!autoZoom) {
-            const currentState = {
-                ...cameraState.current
-            };
+    const cameraAnimation = (targetState, duration, frame)=>_async_to_generator(function*() {
+            const currentCanvasWidth = app.screen.width || imageWidth;
+            const currentCanvasHeight = app.screen.height || imageHeight;
+            if (!autoZoom) {
+                const currentState = _object_spread({}, cameraState.current);
+                const startPointerLeft = currentState.pointerLeft;
+                const startPointerTop = currentState.pointerTop;
+                const startTime = performance.now();
+                const shouldMovePointer = 'number' == typeof targetState.pointerLeft && 'number' == typeof targetState.pointerTop && (targetState.pointerLeft !== startPointerLeft || targetState.pointerTop !== startPointerTop);
+                if (!shouldMovePointer) return;
+                yield new Promise((resolve)=>{
+                    const animate = (currentTime)=>{
+                        const elapsedTime = currentTime - startTime;
+                        const rawProgress = Math.min(elapsedTime / duration, 1);
+                        const progress = cubicMouse(rawProgress);
+                        const nextState = _object_spread_props(_object_spread({}, currentState), {
+                            pointerLeft: startPointerLeft + (targetState.pointerLeft - startPointerLeft) * progress,
+                            pointerTop: startPointerTop + (targetState.pointerTop - startPointerTop) * progress
+                        });
+                        updateCamera(nextState, currentCanvasWidth);
+                        if (elapsedTime < duration) frame(animate);
+                        else resolve();
+                    };
+                    frame(animate);
+                });
+                return;
+            }
+            const currentState = _object_spread({}, cameraState.current);
+            const startLeft = currentState.left;
+            const startTop = currentState.top;
             const startPointerLeft = currentState.pointerLeft;
             const startPointerTop = currentState.pointerTop;
+            const startScale = currentState.width / currentCanvasWidth;
             const startTime = performance.now();
             const shouldMovePointer = 'number' == typeof targetState.pointerLeft && 'number' == typeof targetState.pointerTop && (targetState.pointerLeft !== startPointerLeft || targetState.pointerTop !== startPointerTop);
-            if (!shouldMovePointer) return;
-            await new Promise((resolve)=>{
+            const pointerMoveDuration = shouldMovePointer ? 0.375 * duration : 0;
+            const cameraMoveStart = pointerMoveDuration;
+            const cameraMoveDuration = duration - pointerMoveDuration;
+            yield new Promise((resolve)=>{
                 const animate = (currentTime)=>{
+                    const nextState = _object_spread({}, cameraState.current);
                     const elapsedTime = currentTime - startTime;
-                    const rawProgress = Math.min(elapsedTime / duration, 1);
-                    const progress = cubicMouse(rawProgress);
-                    const nextState = {
-                        ...currentState,
-                        pointerLeft: startPointerLeft + (targetState.pointerLeft - startPointerLeft) * progress,
-                        pointerTop: startPointerTop + (targetState.pointerTop - startPointerTop) * progress
-                    };
+                    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 / currentCanvasWidth;
+                        const progressScale = startScale + (targetScale - startScale) * cameraProgress;
+                        const progressWidth = currentCanvasWidth * progressScale;
+                        const progressHeight = currentCanvasHeight * progressScale;
+                        nextState.width = progressWidth;
+                        const progressLeft = startLeft + (targetState.left - startLeft) * cameraProgress;
+                        const progressTop = startTop + (targetState.top - startTop) * cameraProgress;
+                        const horizontalExceed = progressLeft + progressWidth - currentCanvasWidth;
+                        const verticalExceed = progressTop + progressHeight - currentCanvasHeight;
+                        nextState.left = horizontalExceed > 0 ? progressLeft + horizontalExceed : progressLeft;
+                        nextState.top = verticalExceed > 0 ? progressTop + verticalExceed : progressTop;
+                    }
                     updateCamera(nextState, currentCanvasWidth);
                     if (elapsedTime < duration) frame(animate);
                     else resolve();
                 };
                 frame(animate);
             });
-            return;
-        }
-        const currentState = {
-            ...cameraState.current
-        };
-        const startLeft = currentState.left;
-        const startTop = currentState.top;
-        const startPointerLeft = currentState.pointerLeft;
-        const startPointerTop = currentState.pointerTop;
-        const startScale = currentState.width / currentCanvasWidth;
-        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 / currentCanvasWidth;
-                    const progressScale = startScale + (targetScale - startScale) * cameraProgress;
-                    const progressWidth = currentCanvasWidth * progressScale;
-                    const progressHeight = currentCanvasHeight * progressScale;
-                    nextState.width = progressWidth;
-                    const progressLeft = startLeft + (targetState.left - startLeft) * cameraProgress;
-                    const progressTop = startTop + (targetState.top - startTop) * cameraProgress;
-                    const horizontalExceed = progressLeft + progressWidth - currentCanvasWidth;
-                    const verticalExceed = progressTop + progressHeight - currentCanvasHeight;
-                    nextState.left = horizontalExceed > 0 ? progressLeft + horizontalExceed : progressLeft;
-                    nextState.top = verticalExceed > 0 ? progressTop + verticalExceed : progressTop;
-                }
-                updateCamera(nextState, currentCanvasWidth);
-                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 fadeInGraphics = (graphics, duration, frame, targetAlpha = 1)=>new Promise((resolve)=>{
             const startTime = performance.now();
             const animate = (currentTime)=>{
                 const elapsedTime = currentTime - startTime;
@@ -383,178 +431,195 @@ function Player(props) {
             };
             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] = 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 fadeOutItem = (graphics, duration, frame)=>_async_to_generator(function*() {
+            return fadeInGraphics(graphics, duration, frame, 0);
+        })();
+    const insightElementsAnimation = (elements, highlightElements, searchArea, duration, frame)=>_async_to_generator(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];
-                        const [insightMarkGraphic] = rectMarkForItem(element.rect, element.content, 'element');
-                        insightMarkGraphic.alpha = 1;
-                        insightMarkContainer.addChild(insightMarkGraphic);
+                        if (element) {
+                            const [insightMarkGraphic] = rectMarkForItem(element.rect, element.content, 'element');
+                            insightMarkGraphic.alpha = 0;
+                            insightMarkContainer.addChild(insightMarkGraphic);
+                            childrenCount++;
+                            fadeInGraphics(insightMarkGraphic, singleElementFadeInDuration, frame);
+                        }
                     }
-                    if (searchArea) {
-                        const [searchAreaGraphic] = rectMarkForItem(searchArea, 'Search Area', 'searchArea');
-                        searchAreaGraphic.alpha = 1;
-                        insightMarkContainer.addChild(searchAreaGraphic);
+                    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();
                     }
-                    highlightElements.map((element)=>{
-                        const [insightMarkGraphic] = 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);
-    };
+                };
+                frame(animate);
+            });
+        })();
+    const init = ()=>_async_to_generator(function*() {
+            if (!divContainerRef.current || !scripts) return;
+            yield 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] = useState(false);
     const recorderSessionRef = 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 cancelAnimationRef = useRef(null);
+    const handleExport = ()=>_async_to_generator(function*() {
+            if (recorderSessionRef.current) return void console.warn('recorderSession exists');
+            if (!app.canvas) return void console.warn('canvas is not initialized');
+            if (cancelAnimationRef.current) {
+                cancelAnimationRef.current();
+                cancelAnimationRef.current = null;
+                yield new Promise((resolve)=>setTimeout(resolve, 100));
+            }
+            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,
-                mouseLoading,
-                mousePointer
-            ].map(loadTexture));
-            insightMarkContainer.removeChildren();
-            await updatePointer(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(item.imageWidth, item.imageHeight);
-                    const elements = (null == (_item_context = item.context) ? void 0 : _item_context.tree) ? 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) {
+        Promise.resolve((()=>_async_to_generator(function*() {
+                if (!app) throw new Error('app is not initialized');
+                if (!scripts) throw new Error("scripts is required");
+                const { frame, cancel, timeout } = frameKit();
+                cancelFn = cancel;
+                cancelAnimationRef.current = 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(_object_spread({}, 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) yield sleep(item.duration);
+                    else if ('insight' === item.type) {
+                        if (!item.img) throw new Error('img is required');
                         currentImg.current = item.img;
-                        await repaintImage(item.imageWidth, item.imageHeight);
+                        yield repaintImage(item.imageWidth, item.imageHeight);
+                        const highlightElements = item.highlightElement ? [
+                            item.highlightElement
+                        ] : [];
+                        yield insightElementsAnimation([], 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 ('clear-insight' === item.type) {
+                        yield 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;
+                            yield repaintImage(item.imageWidth, item.imageHeight);
+                        }
+                        if (item.camera) yield cameraAnimation(item.camera, item.duration, frame);
+                        else yield sleep(item.duration);
+                    } else if ('pointer' === item.type) {
+                        if (!item.img) throw new Error('pointer img is required');
+                        yield updatePointer(item.img);
+                    } else if ('spinning-pointer' === item.type) {
+                        const stop = spinningPointer(frame);
+                        yield sleep(item.duration);
+                        stop();
                     }
-                    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();
                 }
-            }
+                if (recorderSessionRef.current) {
+                    yield sleep(1200);
+                    recorderSessionRef.current.stop();
+                    recorderSessionRef.current = null;
+                    setIsRecording(false);
+                }
+            })())().catch((e)=>{
+            console.error('player error', e);
+            if ((null == e ? void 0 : e.message) === ERROR_FRAME_CANCEL) return void console.log('Animation cancelled (expected behavior)');
+            const wasRecording = !!recorderSessionRef.current;
             if (recorderSessionRef.current) {
-                await sleep(1200);
-                recorderSessionRef.current.stop();
+                try {
+                    recorderSessionRef.current.stop();
+                } catch (stopError) {
+                    console.error('Error stopping recorder:', stopError);
+                }
                 recorderSessionRef.current = null;
-                setIsRecording(false);
             }
-        })().catch((e)=>{
-            console.error('player error', e);
+            setIsRecording(false);
+            if (wasRecording) message.error('Failed to export video. Please try again.');
         }));
         return ()=>{
             null == cancelFn || cancelFn();
+            cancelAnimationRef.current = null;
         };
     };
     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();
-        })());
+        Promise.resolve((()=>_async_to_generator(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, {
@@ -770,59 +835,6 @@ function Player(props) {
                                                     })
                                                 ]
                                             })
-                                        },
-                                        {
-                                            key: 'elementsVisible',
-                                            style: {
-                                                height: '39px',
-                                                margin: 0,
-                                                padding: '0 12px'
-                                            },
-                                            label: /*#__PURE__*/ jsxs("div", {
-                                                style: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'space-between',
-                                                    width: '100%',
-                                                    height: '39px'
-                                                },
-                                                children: [
-                                                    /*#__PURE__*/ jsxs("div", {
-                                                        style: {
-                                                            display: 'flex',
-                                                            alignItems: 'center',
-                                                            gap: '4px'
-                                                        },
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(show_marker, {
-                                                                style: {
-                                                                    width: '16px',
-                                                                    height: '16px'
-                                                                }
-                                                            }),
-                                                            /*#__PURE__*/ jsx("span", {
-                                                                style: {
-                                                                    fontSize: '12px',
-                                                                    marginRight: '16px'
-                                                                },
-                                                                children: "Show element markers"
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ jsx(Switch, {
-                                                        size: "small",
-                                                        checked: elementsVisible,
-                                                        onChange: (checked)=>{
-                                                            setElementsVisible(checked);
-                                                            triggerReplay();
-                                                        },
-                                                        onClick: (_, e)=>{
-                                                            var _e_stopPropagation;
-                                                            return null == e ? void 0 : null == (_e_stopPropagation = e.stopPropagation) ? void 0 : _e_stopPropagation.call(e);
-                                                        }
-                                                    })
-                                                ]
-                                            })
                                         }
                                     ]
                                 },