@midscene/visualizer 1.5.2 → 1.5.3-beta-20260305031416.0

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

@@ -1,17 +1,17 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import "pixi.js/unsafe-eval";
-import { Application, Container, Sprite } from "pixi.js";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import "./index.css";
-import { mouseLoading, mousePointer } from "../../utils/index.mjs";
-import { CaretRightOutlined, DownloadOutlined, ExportOutlined, LoadingOutlined, ThunderboltOutlined } from "@ant-design/icons";
+import { CaretRightOutlined, CompressOutlined, DownloadOutlined, ExpandOutlined, ExportOutlined, FontSizeOutlined, PauseOutlined, ThunderboltOutlined } from "@ant-design/icons";
 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 { useGlobalPreference } from "../../store/store.mjs";
-import { getTextureFromCache, loadTexture } from "../../utils/pixi-loader.mjs";
-import { rectMarkForItem } from "../blackboard/index.mjs";
+import { StepsTimeline } from "./remotion/StepScene.mjs";
+import { deriveFrameState } from "./remotion/derive-frame-state.mjs";
+import { exportBrandedVideo } from "./remotion/export-branded-video.mjs";
+import { calculateFrameMap } from "./remotion/frame-calculator.mjs";
+import { useFramePlayer } from "./use-frame-player.mjs";
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -38,101 +38,6 @@ function _async_to_generator(fn) {
         });
     };
 }
-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;
-}
-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)=>{
-    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)=>linear(t);
-const cubicInsightElement = (t)=>cubicBezier(t, 0, 0.5, 0.5, 1);
-const cubicMouse = (t)=>linear(t);
-const linear = (t)=>t;
-const ERROR_FRAME_CANCEL = 'frame cancel (this is an error on purpose)';
-const frameKit = ()=>{
-    let cancelFlag = false;
-    const pendingTimeouts = [];
-    return {
-        frame: (callback)=>{
-            if (cancelFlag) throw new Error(ERROR_FRAME_CANCEL);
-            requestAnimationFrame(()=>{
-                if (cancelFlag) return;
-                callback(performance.now());
-            });
-        },
-        timeout: (callback, ms)=>{
-            if (cancelFlag) throw new Error(ERROR_FRAME_CANCEL);
-            const timeoutId = window.setTimeout(()=>{
-                if (cancelFlag) return;
-                callback();
-            }, ms);
-            pendingTimeouts.push(timeoutId);
-        },
-        sleep: (ms)=>{
-            if (cancelFlag) return Promise.reject(new Error(ERROR_FRAME_CANCEL));
-            return new Promise((resolve, reject)=>{
-                const timeoutId = window.setTimeout(()=>{
-                    if (cancelFlag) reject(new Error(ERROR_FRAME_CANCEL));
-                    else resolve();
-                }, ms);
-                pendingTimeouts.push(timeoutId);
-            });
-        },
-        isCancelled: ()=>cancelFlag,
-        cancel: ()=>{
-            cancelFlag = true;
-            for (const id of pendingTimeouts)clearTimeout(id);
-            pendingTimeouts.length = 0;
-        }
-    };
-};
-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
@@ -144,67 +49,32 @@ const downloadReport = (content)=>{
     a.href = url;
     a.download = 'midscene_report.html';
     a.click();
+    setTimeout(()=>URL.revokeObjectURL(url), 0);
 };
-class RecordingSession {
-    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);
-        };
-        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() {
-        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;
+function deriveTaskId(scriptFrames, stepsFrame) {
+    let taskId = null;
+    for (const sf of scriptFrames){
+        if (0 === sf.durationInFrames) {
+            if (sf.startFrame <= stepsFrame) {
+                var _sf_taskId;
+                taskId = null != (_sf_taskId = sf.taskId) ? _sf_taskId : taskId;
             }
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'midscene_replay.webm';
-            a.click();
-            URL.revokeObjectURL(url);
-        };
-        this.mediaRecorder.stop();
-        this.recording = false;
-        this.mediaRecorder = null;
-    }
-    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 = [];
+            continue;
+        }
+        if (stepsFrame < sf.startFrame) break;
+        var _sf_taskId1;
+        taskId = null != (_sf_taskId1 = sf.taskId) ? _sf_taskId1 : taskId;
     }
+    return taskId;
+}
+function formatTime(frame, fps) {
+    const totalSeconds = Math.floor(frame / fps);
+    const m = Math.floor(totalSeconds / 60);
+    const s = totalSeconds % 60;
+    return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
 }
 function Player(props) {
-    var _scripts_;
-    const [titleText, setTitleText] = useState('');
-    const [subTitleText, setSubTitleText] = useState('');
-    const { autoZoom, setAutoZoom, playbackSpeed, setPlaybackSpeed } = useGlobalPreference();
+    const { autoZoom, setAutoZoom, playbackSpeed, setPlaybackSpeed, subtitleEnabled, setSubtitleEnabled } = useGlobalPreference();
     useEffect(()=>{
         if ((null == props ? void 0 : props.autoZoom) !== void 0) setAutoZoom(props.autoZoom);
     }, [
@@ -212,628 +82,330 @@ function Player(props) {
         setAutoZoom
     ]);
     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 = useRef((null == scripts ? void 0 : null == (_scripts_ = scripts[0]) ? void 0 : _scripts_.img) || null);
-    const divContainerRef = useRef(null);
-    const app = useMemo(()=>new Application(), []);
-    const pointerSprite = useRef(null);
-    const spinningPointerSprite = useRef(null);
-    const [replayMark, setReplayMark] = useState(0);
-    const triggerReplay = ()=>{
-        setReplayMark(Date.now());
-    };
-    const windowContentContainer = useMemo(()=>{
-        const container = new Container();
-        return container;
-    }, []);
-    const insightMarkContainer = useMemo(()=>{
-        const container = new Container();
-        container.zIndex = LAYER_ORDER_INSIGHT;
-        return container;
-    }, []);
-    const basicCameraState = {
-        left: 0,
-        top: 0,
-        width: imageWidth,
-        pointerLeft: Math.round(imageWidth / 2),
-        pointerTop: Math.round(imageHeight / 2)
-    };
-    const [animationProgress, setAnimationProgress] = useState(-1);
-    const cancelFlag = useRef(false);
-    const appInitialized = useRef(false);
+    const frameMap = useMemo(()=>{
+        if (!scripts || 0 === scripts.length) return null;
+        return calculateFrameMap(scripts);
+    }, [
+        scripts
+    ]);
+    const wrapperRef = useRef(null);
+    const renderLayerRef = useRef(null);
+    const lastTaskIdRef = useRef(null);
+    const [containerSize, setContainerSize] = useState({
+        width: 0,
+        height: 0
+    });
     useEffect(()=>{
-        cancelFlag.current = false;
-        return ()=>{
-            cancelFlag.current = true;
-        };
-    }, []);
-    const cameraState = useRef(_object_spread({}, basicCameraState));
-    const resizeCanvasIfNeeded = (newWidth, newHeight)=>_async_to_generator(function*() {
-            if (!appInitialized.current || !app.screen) return;
-            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 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 el = renderLayerRef.current;
+        if (!el) return;
+        const ro = new ResizeObserver((entries)=>{
+            for (const entry of entries){
+                const { width, height } = entry.contentRect;
+                setContainerSize((prev)=>prev.width === width && prev.height === height ? prev : {
+                        width,
+                        height
+                    });
             }
-            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) {
-            spinningPointerSprite.current = Sprite.from(mouseLoading);
-            spinningPointerSprite.current.zIndex = LAYER_ORDER_SPINNING_POINTER;
-            spinningPointerSprite.current.anchor.set(0.5, 0.5);
-            spinningPointerSprite.current.scale.set(0.5);
-            spinningPointerSprite.current.label = 'spinning-pointer';
+        });
+        ro.observe(el);
+        return ()=>ro.disconnect();
+    }, []);
+    var _frameMap_totalDurationInFrames, _frameMap_fps;
+    const player = useFramePlayer({
+        durationInFrames: Math.max(null != (_frameMap_totalDurationInFrames = null == frameMap ? void 0 : frameMap.totalDurationInFrames) ? _frameMap_totalDurationInFrames : 1, 1),
+        fps: null != (_frameMap_fps = null == frameMap ? void 0 : frameMap.fps) ? _frameMap_fps : 30,
+        autoPlay: true,
+        loop: false,
+        playbackRate: playbackSpeed
+    });
+    useEffect(()=>{
+        if (!frameMap || !(null == props ? void 0 : props.onTaskChange)) return;
+        const taskId = deriveTaskId(frameMap.scriptFrames, player.currentFrame);
+        if (taskId !== lastTaskIdRef.current) {
+            lastTaskIdRef.current = taskId;
+            props.onTaskChange(taskId);
         }
-        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;
+    }, [
+        frameMap,
+        null == props ? void 0 : props.onTaskChange,
+        player.currentFrame
+    ]);
+    const subtitle = useMemo(()=>{
+        if (!frameMap) return null;
+        const state = deriveFrameState(frameMap.scriptFrames, player.currentFrame, frameMap.imageWidth, frameMap.imageHeight, frameMap.fps);
+        if (!state.title && !state.subTitle) return null;
+        return {
+            title: state.title,
+            subTitle: state.subTitle
         };
-        return stopFn;
-    };
-    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)=>{
-        var _app_screen;
-        cameraState.current = state;
-        const effectiveWidth = currentWidth || (null == (_app_screen = app.screen) ? void 0 : _app_screen.width) || imageWidth;
-        const newScale = autoZoom ? Math.max(1, effectiveWidth / state.width) : 1;
-        windowContentContainer.scale.set(newScale);
-        windowContentContainer.x = autoZoom ? Math.round(canvasPaddingLeft - state.left * newScale) : canvasPaddingLeft;
-        windowContentContainer.y = autoZoom ? Math.round(canvasPaddingTop - state.top * newScale) : canvasPaddingTop;
-        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 cameraAnimation = (targetState, duration, frame)=>_async_to_generator(function*() {
-            var _app_screen, _app_screen1;
-            const currentCanvasWidth = (null == (_app_screen = app.screen) ? void 0 : _app_screen.width) || imageWidth;
-            const currentCanvasHeight = (null == (_app_screen1 = app.screen) ? void 0 : _app_screen1.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);
-            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;
-                    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 = (graphics, duration, frame, targetAlpha = 1)=>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 = (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];
-                        if (element) {
-                            const [insightMarkGraphic] = rectMarkForItem(element.rect, element.content, 'element');
-                            insightMarkGraphic.alpha = 0;
-                            insightMarkContainer.addChild(insightMarkGraphic);
-                            childrenCount++;
-                            fadeInGraphics(insightMarkGraphic, singleElementFadeInDuration, frame);
-                        }
-                    }
-                    if (elapsedTime < duration) frame(animate);
-                    else {
-                        while(elementsToAdd.length > 0){
-                            const randomIndex = Math.floor(Math.random() * elementsToAdd.length);
-                            const element = elementsToAdd.splice(randomIndex, 1)[0];
-                            const [insightMarkGraphic] = rectMarkForItem(element.rect, element.content, 'element');
-                            insightMarkGraphic.alpha = 1;
-                            insightMarkContainer.addChild(insightMarkGraphic);
-                        }
-                        if (searchArea) {
-                            const [searchAreaGraphic] = rectMarkForItem(searchArea, 'Search Area', 'searchArea');
-                            searchAreaGraphic.alpha = 1;
-                            insightMarkContainer.addChild(searchAreaGraphic);
-                        }
-                        highlightElements.map((element)=>{
-                            const [insightMarkGraphic] = rectMarkForItem(element.rect, element.content || '', 'highlight');
-                            insightMarkGraphic.alpha = 1;
-                            insightMarkContainer.addChild(insightMarkGraphic);
-                        });
-                        resolve();
-                    }
-                };
-                frame(animate);
-            });
-        })();
-    const init = ()=>_async_to_generator(function*() {
-            if (!divContainerRef.current || !scripts) return;
-            yield app.init({
-                width: imageWidth,
-                height: imageHeight,
-                background: 0xf4f4f4,
-                autoDensity: true,
-                antialias: true
-            });
-            appInitialized.current = 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 cancelAnimationRef = useRef(null);
-    const playbackSessionIdRef = useRef(0);
-    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;
-        const currentSessionId = ++playbackSessionIdRef.current;
-        const safeOnTaskChange = (taskId)=>{
-            if (playbackSessionIdRef.current === currentSessionId) {
-                var _props_onTaskChange;
-                null == props || null == (_props_onTaskChange = props.onTaskChange) || _props_onTaskChange.call(props, taskId);
-            }
+    }, [
+        frameMap,
+        player.currentFrame
+    ]);
+    const [controlsVisible, setControlsVisible] = useState(true);
+    const hideTimerRef = useRef(null);
+    const showControls = useCallback(()=>{
+        setControlsVisible(true);
+        if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+        hideTimerRef.current = setTimeout(()=>setControlsVisible(false), 3000);
+    }, []);
+    const onMouseEnter = useCallback(()=>{
+        setControlsVisible(true);
+        if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    }, []);
+    const onMouseLeave = useCallback(()=>{
+        if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+        hideTimerRef.current = setTimeout(()=>setControlsVisible(false), 1000);
+    }, []);
+    const seekBarRef = useRef(null);
+    const handleSeekPointerDown = useCallback((e)=>{
+        if (!frameMap || !seekBarRef.current) return;
+        const bar = seekBarRef.current;
+        bar.setPointerCapture(e.pointerId);
+        const seek = (clientX)=>{
+            const rect = bar.getBoundingClientRect();
+            const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+            player.seekTo(Math.round(ratio * (frameMap.totalDurationInFrames - 1)));
         };
-        Promise.resolve((()=>_async_to_generator(function*() {
-                var _scripts_;
-                if (!app || !appInitialized.current) throw new Error('app is not initialized');
-                if (!scripts) throw new Error("scripts is required");
-                const { frame, cancel, timeout, sleep: baseSleep } = frameKit();
-                const scaleByPlaybackSpeed = (duration)=>duration / playbackSpeed;
-                const sleep = (ms)=>baseSleep(scaleByPlaybackSpeed(ms));
-                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 = scaleByPlaybackSpeed(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();
-                let currentTaskId = null;
-                var _scripts__taskId;
-                const firstTaskId = null != (_scripts__taskId = null == (_scripts_ = scripts[0]) ? void 0 : _scripts_.taskId) ? _scripts__taskId : null;
-                if (firstTaskId) {
-                    currentTaskId = firstTaskId;
-                    safeOnTaskChange(currentTaskId);
-                }
-                for(const index in scripts){
-                    const item = scripts[index];
-                    setTitleText(item.title || '');
-                    setSubTitleText(item.subTitle || '');
-                    var _item_taskId;
-                    const newTaskId = null != (_item_taskId = item.taskId) ? _item_taskId : null;
-                    if (newTaskId !== currentTaskId) {
-                        currentTaskId = newTaskId;
-                        safeOnTaskChange(currentTaskId);
-                    }
-                    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;
-                        yield repaintImage(item.imageWidth, item.imageHeight);
-                        const highlightElements = item.highlightElement ? [
-                            item.highlightElement
-                        ] : [];
-                        yield insightElementsAnimation([], highlightElements, item.searchArea, scaleByPlaybackSpeed(item.duration), frame);
-                        if (item.camera) {
-                            if (!item.insightCameraDuration) throw new Error('insightCameraDuration is required');
-                            yield cameraAnimation(item.camera, scaleByPlaybackSpeed(item.insightCameraDuration), frame);
-                        }
-                    } else if ('clear-insight' === item.type) {
-                        yield fadeOutItem(insightMarkContainer, scaleByPlaybackSpeed(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, scaleByPlaybackSpeed(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();
-                    }
-                }
-                safeOnTaskChange(null);
-                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) {
-                console.log('Animation cancelled (expected behavior)');
-                safeOnTaskChange(null);
-                return;
-            }
-            const wasRecording = !!recorderSessionRef.current;
-            if (recorderSessionRef.current) {
-                try {
-                    recorderSessionRef.current.stop();
-                } catch (stopError) {
-                    console.error('Error stopping recorder:', stopError);
-                }
-                recorderSessionRef.current = null;
-            }
-            setIsRecording(false);
-            safeOnTaskChange(null);
-            if (wasRecording) message.error('Failed to export video. Please try again.');
-        }));
-        return ()=>{
-            null == cancelFn || cancelFn();
-            cancelAnimationRef.current = null;
+        seek(e.clientX);
+        const onMove = (ev)=>seek(ev.clientX);
+        const onUp = ()=>{
+            bar.removeEventListener('pointermove', onMove);
+            bar.removeEventListener('pointerup', onUp);
         };
-    };
+        bar.addEventListener('pointermove', onMove);
+        bar.addEventListener('pointerup', onUp);
+    }, [
+        frameMap,
+        player
+    ]);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const toggleFullscreen = useCallback(()=>{
+        const el = wrapperRef.current;
+        if (!el) return;
+        if (document.fullscreenElement) document.exitFullscreen().then(()=>setIsFullscreen(false));
+        else el.requestFullscreen().then(()=>setIsFullscreen(true));
+    }, []);
     useEffect(()=>{
-        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 ()=>{
-            appInitialized.current = false;
+        const handler = ()=>setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener('fullscreenchange', handler);
+        return ()=>document.removeEventListener('fullscreenchange', handler);
+    }, []);
+    const [isExporting, setIsExporting] = useState(false);
+    const [exportProgress, setExportProgress] = useState(0);
+    const handleExportVideo = useCallback(()=>_async_to_generator(function*() {
+            if (!frameMap || isExporting) return;
+            setIsExporting(true);
+            setExportProgress(0);
             try {
-                app.destroy(true, {
-                    children: true,
-                    texture: true
-                });
+                yield exportBrandedVideo(frameMap, (pct)=>setExportProgress(Math.round(100 * pct)));
+                message.success('Video exported');
             } catch (e) {
-                console.warn('destroy failed', e);
+                console.error('Export failed:', e);
+                message.error('Export failed');
+            } finally{
+                setIsExporting(false);
+                setExportProgress(0);
             }
-        };
-    }, [
-        imageWidth,
-        imageHeight,
-        fitMode
+        })(), [
+        frameMap,
+        isExporting
     ]);
-    useEffect(()=>{
-        if (replayMark) return play();
-    }, [
-        replayMark
-    ]);
-    const [mouseOverStatusIcon, setMouseOverStatusIcon] = useState(false);
-    const [mouseOverSettingsIcon, setMouseOverSettingsIcon] = useState(false);
-    const progressString = Math.round(100 * animationProgress);
-    const transitionStyle = 0 === animationProgress ? 'none' : '0.3s';
-    const canReplayNow = 1 === animationProgress;
-    useEffect(()=>{
-        if (canReplayNow) {
-            const listener = (event)=>{
-                if (' ' === event.key) triggerReplay();
-            };
-            window.addEventListener('keydown', listener);
-            return ()=>{
-                window.removeEventListener('keydown', listener);
-            };
+    const chapterMarkers = useMemo(()=>{
+        if (!frameMap) return [];
+        const { scriptFrames, totalDurationInFrames } = frameMap;
+        if (0 === totalDurationInFrames) return [];
+        const markers = [];
+        for (const sf of scriptFrames){
+            if ('img' !== sf.type && 'insight' !== sf.type || 0 === sf.durationInFrames) continue;
+            const globalFrame = sf.startFrame;
+            const percent = globalFrame / totalDurationInFrames * 100;
+            if (percent > 1 && percent < 99) {
+                const parts = [
+                    sf.title,
+                    sf.subTitle
+                ].filter(Boolean);
+                markers.push({
+                    percent,
+                    title: parts.length > 0 ? parts.join(': ') : `Chapter ${markers.length + 1}`,
+                    frame: globalFrame
+                });
+            }
         }
+        return markers;
     }, [
-        canReplayNow
+        frameMap
     ]);
-    let statusIconElement;
-    let statusOnClick = ()=>{};
-    if (animationProgress < 1) statusIconElement = /*#__PURE__*/ jsx(Spin, {
-        indicator: /*#__PURE__*/ jsx(LoadingOutlined, {
-            spin: true,
-            color: "#333"
-        }),
-        size: "default"
+    if (!scripts || 0 === scripts.length || !frameMap) return /*#__PURE__*/ jsx("div", {
+        className: "player-container"
     });
-    else {
-        statusIconElement = /*#__PURE__*/ jsx(Spin, {
-            indicator: /*#__PURE__*/ jsx(CaretRightOutlined, {
-                color: "#333"
-            }),
-            size: "default"
-        });
-        statusOnClick = ()=>triggerReplay();
-    }
-    return /*#__PURE__*/ jsxs("div", {
+    const imgW = frameMap.imageWidth;
+    const imgH = frameMap.imageHeight;
+    const compositionWidth = imgW;
+    const compositionHeight = imgH;
+    const isPortraitCanvas = imgH > imgW;
+    const totalFrames = frameMap.totalDurationInFrames;
+    const seekPercent = totalFrames > 1 ? player.currentFrame / (totalFrames - 1) * 100 : 0;
+    return /*#__PURE__*/ jsx("div", {
         className: "player-container",
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: "canvas-container",
-                ref: divContainerRef
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "player-timeline-wrapper",
-                children: /*#__PURE__*/ jsx("div", {
-                    className: "player-timeline",
-                    children: /*#__PURE__*/ jsx("div", {
-                        className: "player-timeline-progress",
+        "data-fit-mode": null == props ? void 0 : props.fitMode,
+        children: /*#__PURE__*/ jsx("div", {
+            className: "canvas-container",
+            children: /*#__PURE__*/ jsxs("div", {
+                className: "player-wrapper",
+                ref: wrapperRef,
+                "data-portrait": isPortraitCanvas ? '' : void 0,
+                style: {
+                    aspectRatio: `${compositionWidth}/${compositionHeight}`
+                },
+                onMouseMove: showControls,
+                onMouseEnter: onMouseEnter,
+                onMouseLeave: onMouseLeave,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        ref: renderLayerRef,
                         style: {
-                            width: `${progressString}%`,
-                            transition: transitionStyle
-                        }
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "player-tools-wrapper",
-                children: /*#__PURE__*/ jsx("div", {
-                    className: "player-tools",
-                    children: /*#__PURE__*/ jsxs("div", {
-                        className: "player-control",
-                        children: [
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "status-text",
-                                children: [
-                                    /*#__PURE__*/ jsx("div", {
-                                        className: "title",
-                                        children: titleText
-                                    }),
-                                    /*#__PURE__*/ jsx(Tooltip, {
-                                        title: subTitleText,
-                                        children: /*#__PURE__*/ jsx("div", {
-                                            className: "subtitle",
-                                            children: subTitleText
-                                        })
-                                    })
-                                ]
-                            }),
-                            isRecording ? null : /*#__PURE__*/ jsx("div", {
-                                className: "status-icon",
-                                onMouseEnter: ()=>setMouseOverStatusIcon(true),
-                                onMouseLeave: ()=>setMouseOverStatusIcon(false),
-                                onClick: statusOnClick,
-                                children: statusIconElement
-                            }),
-                            (null == props ? void 0 : props.reportFileContent) && (null == props ? void 0 : props.canDownloadReport) !== false ? /*#__PURE__*/ jsx(Tooltip, {
-                                title: "Download Report",
-                                children: /*#__PURE__*/ jsx("div", {
-                                    className: "status-icon",
-                                    onMouseEnter: ()=>setMouseOverStatusIcon(true),
-                                    onMouseLeave: ()=>setMouseOverStatusIcon(false),
-                                    onClick: ()=>downloadReport(props.reportFileContent),
-                                    children: /*#__PURE__*/ jsx(DownloadOutlined, {
-                                        color: "#333"
-                                    })
-                                })
-                            }) : null,
-                            /*#__PURE__*/ jsx(Tooltip, {
-                                title: isRecording ? 'Generating...' : 'Export Video',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            width: '100%',
+                            height: '100%',
+                            overflow: 'hidden'
+                        },
+                        onClick: player.toggle,
+                        children: (()=>{
+                            const scale = containerSize.width > 0 && containerSize.height > 0 ? Math.min(containerSize.width / compositionWidth, containerSize.height / compositionHeight) : 1;
+                            return /*#__PURE__*/ jsx("div", {
+                                style: {
+                                    width: compositionWidth * scale,
+                                    height: compositionHeight * scale,
+                                    flexShrink: 0,
+                                    position: 'relative',
+                                    overflow: 'hidden'
+                                },
                                 children: /*#__PURE__*/ jsx("div", {
-                                    className: "status-icon",
-                                    onClick: isRecording ? void 0 : handleExport,
                                     style: {
-                                        opacity: isRecording ? 0.5 : 1,
-                                        cursor: isRecording ? 'not-allowed' : 'pointer'
+                                        width: compositionWidth,
+                                        height: compositionHeight,
+                                        transformOrigin: '0 0',
+                                        transform: `scale(${scale})`
                                     },
-                                    children: isRecording ? /*#__PURE__*/ jsx(Spin, {
-                                        size: "default",
-                                        percent: progressString
-                                    }) : /*#__PURE__*/ jsx(ExportOutlined, {})
+                                    children: /*#__PURE__*/ jsx(StepsTimeline, {
+                                        frameMap: frameMap,
+                                        autoZoom: autoZoom,
+                                        frame: player.currentFrame,
+                                        width: compositionWidth,
+                                        height: compositionHeight,
+                                        fps: frameMap.fps
+                                    })
                                 })
+                            });
+                        })()
+                    }),
+                    subtitleEnabled && subtitle && /*#__PURE__*/ jsxs("div", {
+                        className: "player-subtitle",
+                        children: [
+                            subtitle.title && /*#__PURE__*/ jsx("span", {
+                                className: "player-subtitle-badge",
+                                children: subtitle.title
                             }),
-                            /*#__PURE__*/ jsx(Dropdown, {
-                                trigger: [
-                                    'hover',
-                                    'click'
-                                ],
-                                placement: "bottomRight",
-                                overlayStyle: {
-                                    minWidth: '148px'
-                                },
-                                dropdownRender: ()=>/*#__PURE__*/ jsxs("div", {
-                                        className: "player-settings-dropdown",
-                                        children: [
-                                            /*#__PURE__*/ jsxs("div", {
-                                                className: "player-settings-item",
+                            subtitle.subTitle && /*#__PURE__*/ jsx("span", {
+                                className: "player-subtitle-text",
+                                children: subtitle.subTitle
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: `control-bar ${controlsVisible ? '' : 'hidden'}`,
+                        onClick: (e)=>e.stopPropagation(),
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "status-icon",
+                                onClick: player.toggle,
+                                children: player.playing ? /*#__PURE__*/ jsx(PauseOutlined, {}) : /*#__PURE__*/ jsx(CaretRightOutlined, {})
+                            }),
+                            /*#__PURE__*/ jsxs("span", {
+                                className: "time-display",
+                                children: [
+                                    formatTime(player.currentFrame, frameMap.fps),
+                                    " /",
+                                    ' ',
+                                    formatTime(totalFrames, frameMap.fps)
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "seek-bar-track",
+                                ref: seekBarRef,
+                                onPointerDown: handleSeekPointerDown,
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "seek-bar-fill",
+                                        style: {
+                                            width: `${seekPercent}%`
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "seek-bar-knob",
+                                        style: {
+                                            left: `${seekPercent}%`
+                                        }
+                                    }),
+                                    chapterMarkers.map((marker)=>/*#__PURE__*/ jsx(Tooltip, {
+                                            title: marker.title,
+                                            overlayClassName: "chapter-tooltip",
+                                            children: /*#__PURE__*/ jsx("div", {
+                                                className: "chapter-marker",
                                                 style: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'space-between',
-                                                    height: '32px',
-                                                    padding: '0 8px',
-                                                    borderRadius: '4px'
+                                                    left: `${marker.percent}%`
                                                 },
+                                                onClick: (e)=>{
+                                                    e.stopPropagation();
+                                                    player.seekTo(marker.frame);
+                                                }
+                                            })
+                                        }, marker.percent))
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "player-custom-controls",
+                                children: [
+                                    (null == props ? void 0 : props.reportFileContent) && (null == props ? void 0 : props.canDownloadReport) !== false ? /*#__PURE__*/ jsx(Tooltip, {
+                                        title: "Download Report",
+                                        children: /*#__PURE__*/ jsx("div", {
+                                            className: "status-icon",
+                                            onClick: ()=>downloadReport(props.reportFileContent),
+                                            children: /*#__PURE__*/ jsx(DownloadOutlined, {})
+                                        })
+                                    }) : null,
+                                    /*#__PURE__*/ jsx(Dropdown, {
+                                        trigger: [
+                                            'hover',
+                                            'click'
+                                        ],
+                                        placement: "topRight",
+                                        overlayStyle: {
+                                            minWidth: '148px'
+                                        },
+                                        dropdownRender: ()=>/*#__PURE__*/ jsxs("div", {
+                                                className: "player-settings-dropdown",
                                                 children: [
                                                     /*#__PURE__*/ jsxs("div", {
+                                                        className: "player-settings-item",
                                                         style: {
                                                             display: 'flex',
                                                             alignItems: 'center',
-                                                            gap: '4px'
+                                                            gap: '4px',
+                                                            height: '32px',
+                                                            padding: '0 8px',
+                                                            borderRadius: '4px',
+                                                            cursor: isExporting ? 'not-allowed' : 'pointer',
+                                                            opacity: isExporting ? 0.5 : 1
                                                         },
+                                                        onClick: isExporting ? void 0 : handleExportVideo,
                                                         children: [
-                                                            /*#__PURE__*/ jsx(global_perspective, {
+                                                            isExporting ? /*#__PURE__*/ jsx(Spin, {
+                                                                size: "small"
+                                                            }) : /*#__PURE__*/ jsx(ExportOutlined, {
                                                                 style: {
                                                                     width: '16px',
                                                                     height: '16px'
@@ -841,103 +413,169 @@ function Player(props) {
                                                             }),
                                                             /*#__PURE__*/ jsx("span", {
                                                                 style: {
-                                                                    fontSize: '12px',
-                                                                    marginRight: '16px'
+                                                                    fontSize: '12px'
                                                                 },
-                                                                children: "Focus on cursor"
+                                                                children: isExporting ? `Exporting ${exportProgress}%` : 'Export video'
                                                             })
                                                         ]
                                                     }),
-                                                    /*#__PURE__*/ jsx(Switch, {
-                                                        size: "small",
-                                                        checked: autoZoom,
-                                                        onChange: (checked)=>{
-                                                            setAutoZoom(checked);
-                                                            triggerReplay();
-                                                        }
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx("div", {
-                                                className: "player-settings-divider"
-                                            }),
-                                            /*#__PURE__*/ jsxs("div", {
-                                                style: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: '4px',
-                                                    height: '32px',
-                                                    padding: '0 8px'
-                                                },
-                                                children: [
-                                                    /*#__PURE__*/ jsx(ThunderboltOutlined, {
+                                                    /*#__PURE__*/ jsx("div", {
+                                                        className: "player-settings-divider"
+                                                    }),
+                                                    /*#__PURE__*/ jsxs("div", {
+                                                        className: "player-settings-item",
                                                         style: {
-                                                            width: '16px',
-                                                            height: '16px'
-                                                        }
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            justifyContent: 'space-between',
+                                                            height: '32px',
+                                                            padding: '0 8px',
+                                                            borderRadius: '4px'
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ jsxs("div", {
+                                                                style: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    gap: '4px'
+                                                                },
+                                                                children: [
+                                                                    /*#__PURE__*/ jsx(global_perspective, {
+                                                                        style: {
+                                                                            width: '16px',
+                                                                            height: '16px'
+                                                                        }
+                                                                    }),
+                                                                    /*#__PURE__*/ jsx("span", {
+                                                                        style: {
+                                                                            fontSize: '12px',
+                                                                            marginRight: '16px'
+                                                                        },
+                                                                        children: "Focus on cursor"
+                                                                    })
+                                                                ]
+                                                            }),
+                                                            /*#__PURE__*/ jsx(Switch, {
+                                                                size: "small",
+                                                                checked: autoZoom,
+                                                                onChange: (checked)=>setAutoZoom(checked)
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsxs("div", {
+                                                        className: "player-settings-item",
+                                                        style: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            justifyContent: 'space-between',
+                                                            height: '32px',
+                                                            padding: '0 8px',
+                                                            borderRadius: '4px'
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ jsxs("div", {
+                                                                style: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    gap: '4px'
+                                                                },
+                                                                children: [
+                                                                    /*#__PURE__*/ jsx(FontSizeOutlined, {
+                                                                        style: {
+                                                                            width: '16px',
+                                                                            height: '16px'
+                                                                        }
+                                                                    }),
+                                                                    /*#__PURE__*/ jsx("span", {
+                                                                        style: {
+                                                                            fontSize: '12px',
+                                                                            marginRight: '16px'
+                                                                        },
+                                                                        children: "Subtitle"
+                                                                    })
+                                                                ]
+                                                            }),
+                                                            /*#__PURE__*/ jsx(Switch, {
+                                                                size: "small",
+                                                                checked: subtitleEnabled,
+                                                                onChange: (checked)=>setSubtitleEnabled(checked)
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx("div", {
+                                                        className: "player-settings-divider"
                                                     }),
-                                                    /*#__PURE__*/ jsx("span", {
+                                                    /*#__PURE__*/ jsxs("div", {
                                                         style: {
-                                                            fontSize: '12px'
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            gap: '4px',
+                                                            height: '32px',
+                                                            padding: '0 8px'
                                                         },
-                                                        children: "Playback speed"
-                                                    })
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(ThunderboltOutlined, {
+                                                                style: {
+                                                                    width: '16px',
+                                                                    height: '16px'
+                                                                }
+                                                            }),
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                style: {
+                                                                    fontSize: '12px'
+                                                                },
+                                                                children: "Playback speed"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    [
+                                                        0.5,
+                                                        1,
+                                                        1.5,
+                                                        2
+                                                    ].map((speed)=>/*#__PURE__*/ jsxs("div", {
+                                                            onClick: ()=>setPlaybackSpeed(speed),
+                                                            style: {
+                                                                height: '32px',
+                                                                lineHeight: '32px',
+                                                                padding: '0 8px 0 24px',
+                                                                fontSize: '12px',
+                                                                cursor: 'pointer',
+                                                                borderRadius: '4px'
+                                                            },
+                                                            className: `player-speed-option${playbackSpeed === speed ? ' active' : ''}`,
+                                                            children: [
+                                                                speed,
+                                                                "x"
+                                                            ]
+                                                        }, speed))
                                                 ]
                                             }),
-                                            [
-                                                0.5,
-                                                1,
-                                                1.5,
-                                                2
-                                            ].map((speed)=>/*#__PURE__*/ jsxs("div", {
-                                                    onClick: ()=>{
-                                                        setPlaybackSpeed(speed);
-                                                        triggerReplay();
-                                                    },
-                                                    style: {
-                                                        height: '32px',
-                                                        lineHeight: '32px',
-                                                        padding: '0 8px 0 24px',
-                                                        fontSize: '12px',
-                                                        cursor: 'pointer',
-                                                        borderRadius: '4px'
-                                                    },
-                                                    className: `player-speed-option${playbackSpeed === speed ? ' active' : ''}`,
-                                                    children: [
-                                                        speed,
-                                                        "x"
-                                                    ]
-                                                }, speed))
-                                        ]
+                                        menu: {
+                                            items: []
+                                        },
+                                        children: /*#__PURE__*/ jsx("div", {
+                                            className: "status-icon",
+                                            children: /*#__PURE__*/ jsx(player_setting, {
+                                                style: {
+                                                    width: '16px',
+                                                    height: '16px'
+                                                }
+                                            })
+                                        })
                                     }),
-                                menu: {
-                                    items: []
-                                },
-                                children: /*#__PURE__*/ jsx("div", {
-                                    className: "status-icon",
-                                    onMouseEnter: ()=>setMouseOverSettingsIcon(true),
-                                    onMouseLeave: ()=>setMouseOverSettingsIcon(false),
-                                    style: {
-                                        cursor: 'pointer',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        opacity: mouseOverSettingsIcon ? 1 : 0.7,
-                                        transition: 'opacity 0.2s'
-                                    },
-                                    children: /*#__PURE__*/ jsx(player_setting, {
-                                        style: {
-                                            width: '16px',
-                                            height: '16px'
-                                        }
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "status-icon",
+                                        onClick: toggleFullscreen,
+                                        children: isFullscreen ? /*#__PURE__*/ jsx(CompressOutlined, {}) : /*#__PURE__*/ jsx(ExpandOutlined, {})
                                     })
-                                })
+                                ]
                             })
                         ]
                     })
-                })
+                ]
             })
-        ]
+        })
     });
 }
 export { Player };