@midscene/visualizer 1.7.7-beta-20260429033400.0 → 1.7.7

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

@@ -198,9 +198,11 @@
 
 .player-container .player-custom-controls {
   flex-direction: row;
+  justify-content: center;
   align-items: center;
-  gap: 8px;
-  margin-right: 8px;
+  gap: 2px;
+  min-width: 58px;
+  margin-left: 4px;
   display: flex;
 }
 
@@ -208,6 +210,23 @@
   color: #fff;
 }
 
+.player-container.player-container-empty {
+  justify-content: center;
+  align-items: center;
+}
+
+.player-container.player-container-empty .player-empty-state {
+  color: #6b7280;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  display: flex;
+}
+
+.player-container.player-container-empty .player-empty-state .player-empty-text {
+  font-size: 14px;
+}
+
 .chapter-tooltip .ant-tooltip-inner {
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
@@ -250,6 +269,12 @@
   margin: 4px 0;
 }
 
+.player-export-label {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+  font-size: 14px;
+}
+
 .player-speed-option:hover, .player-settings-item:hover {
   background: rgba(0, 0, 0, .04);
 }

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

@@ -3,10 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import "./index.css";
 import { CaretRightOutlined, CompressOutlined, DownloadOutlined, ExpandOutlined, ExportOutlined, FontSizeOutlined, PauseOutlined, ThunderboltOutlined } from "@ant-design/icons";
-import { Dropdown, Spin, Switch, Tooltip, message } from "antd";
+import { Button, Dropdown, Progress, 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 { shouldRestartPlaybackFromBeginning } from "./playback-controls.mjs";
 import { triggerReportDownload } from "./report-download.mjs";
 import { StepsTimeline } from "./scenes/StepScene.mjs";
 import { exportBrandedVideo } from "./scenes/export-branded-video.mjs";
@@ -111,20 +112,38 @@ function Player(props) {
         loop: false,
         playbackRate: playbackSpeed
     });
+    const effectiveEndFrame = useMemo(()=>{
+        if (!frameMap) return 0;
+        for(let i = frameMap.scriptFrames.length - 1; i >= 0; i--){
+            const sf = frameMap.scriptFrames[i];
+            if (sf.taskId) return sf.startFrame + sf.durationInFrames - 1;
+        }
+        return Math.max(0, frameMap.totalDurationInFrames - 1);
+    }, [
+        frameMap
+    ]);
+    const handlePlaybackToggle = useCallback(()=>{
+        if (player.playing) return void player.pause();
+        if (shouldRestartPlaybackFromBeginning(player.currentFrame, effectiveEndFrame)) player.seekTo(0);
+        player.play();
+    }, [
+        effectiveEndFrame,
+        player.currentFrame,
+        player.pause,
+        player.play,
+        player.playing,
+        player.seekTo
+    ]);
     useEffect(()=>{
         if (!frameMap || player.playing) return;
-        const { scriptFrames, totalDurationInFrames } = frameMap;
-        if (player.currentFrame < totalDurationInFrames - 1) return;
-        for(let i = scriptFrames.length - 1; i >= 0; i--){
-            const sf = scriptFrames[i];
-            if (sf.taskId) {
-                player.seekTo(sf.startFrame + sf.durationInFrames - 1);
-                break;
-            }
-        }
+        if (player.currentFrame < frameMap.totalDurationInFrames - 1) return;
+        if (effectiveEndFrame > 0) player.seekTo(effectiveEndFrame);
     }, [
+        effectiveEndFrame,
         frameMap,
-        player.playing
+        player.currentFrame,
+        player.playing,
+        player.seekTo
     ]);
     useEffect(()=>{
         if (!frameMap || !(null == props ? void 0 : props.onTaskChange)) return;
@@ -178,21 +197,40 @@ function Player(props) {
     }, [
         currentFrameState
     ]);
+    const [isExporting, setIsExporting] = useState(false);
+    const [exportProgress, setExportProgress] = useState(0);
+    const exportInFlightRef = useRef(false);
     const [controlsVisible, setControlsVisible] = useState(true);
     const hideTimerRef = useRef(null);
     const showControls = useCallback(()=>{
         setControlsVisible(true);
         if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+        if (isExporting) return;
         hideTimerRef.current = setTimeout(()=>setControlsVisible(false), 3000);
-    }, []);
+    }, [
+        isExporting
+    ]);
     const onMouseEnter = useCallback(()=>{
         setControlsVisible(true);
         if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
     }, []);
     const onMouseLeave = useCallback(()=>{
         if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+        if (isExporting) return;
         hideTimerRef.current = setTimeout(()=>setControlsVisible(false), 1000);
-    }, []);
+    }, [
+        isExporting
+    ]);
+    useEffect(()=>{
+        if (!isExporting) return;
+        setControlsVisible(true);
+        if (hideTimerRef.current) {
+            clearTimeout(hideTimerRef.current);
+            hideTimerRef.current = null;
+        }
+    }, [
+        isExporting
+    ]);
     useEffect(()=>{
         const handleKeyDown = (e)=>{
             var _e_target;
@@ -200,13 +238,13 @@ function Player(props) {
             if ('INPUT' === tag || 'TEXTAREA' === tag || 'SELECT' === tag) return;
             if ('Space' === e.code) {
                 e.preventDefault();
-                player.toggle();
+                handlePlaybackToggle();
             }
         };
         document.addEventListener('keydown', handleKeyDown);
         return ()=>document.removeEventListener('keydown', handleKeyDown);
     }, [
-        player
+        handlePlaybackToggle
     ]);
     const seekBarRef = useRef(null);
     const handleSeekPointerDown = useCallback((e)=>{
@@ -216,7 +254,7 @@ function Player(props) {
         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)));
+            player.seekTo(Math.round(ratio * effectiveEndFrame));
         };
         seek(e.clientX);
         const onMove = (ev)=>seek(ev.clientX);
@@ -228,7 +266,8 @@ function Player(props) {
         bar.addEventListener('pointerup', onUp);
     }, [
         frameMap,
-        player
+        player,
+        effectiveEndFrame
     ]);
     const [isFullscreen, setIsFullscreen] = useState(false);
     const toggleFullscreen = useCallback(()=>{
@@ -242,10 +281,9 @@ function Player(props) {
         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;
+            if (!frameMap || exportInFlightRef.current) return;
+            exportInFlightRef.current = true;
             setIsExporting(true);
             setExportProgress(0);
             try {
@@ -255,25 +293,24 @@ function Player(props) {
                 message.success('Video exported');
             } catch (e) {
                 console.error('Export failed:', e);
-                message.error('Export failed');
+                const errorMessage = e instanceof Error ? e.message : 'Export failed';
+                message.error(errorMessage);
             } finally{
+                exportInFlightRef.current = false;
                 setIsExporting(false);
                 setExportProgress(0);
             }
         })(), [
         autoZoom,
-        frameMap,
-        isExporting
+        frameMap
     ]);
     const chapterMarkers = useMemo(()=>{
-        if (!frameMap) return [];
-        const { scriptFrames, totalDurationInFrames } = frameMap;
-        if (0 === totalDurationInFrames) return [];
+        if (!frameMap || effectiveEndFrame <= 0) return [];
         const markers = [];
-        for (const sf of scriptFrames){
+        for (const sf of frameMap.scriptFrames){
             if ('img' !== sf.type && 'insight' !== sf.type || 0 === sf.durationInFrames) continue;
             const globalFrame = sf.startFrame;
-            const percent = globalFrame / totalDurationInFrames * 100;
+            const percent = globalFrame / effectiveEndFrame * 100;
             if (percent > 1 && percent < 99) {
                 const parts = [
                     sf.title,
@@ -288,16 +325,38 @@ function Player(props) {
         }
         return markers;
     }, [
-        frameMap
+        frameMap,
+        effectiveEndFrame
     ]);
-    if (!scripts || 0 === scripts.length || !frameMap) return /*#__PURE__*/ jsx("div", {
-        className: "player-container"
-    });
+    var _props_reportFileContent;
+    const reportFileContent = null != (_props_reportFileContent = null == props ? void 0 : props.reportFileContent) ? _props_reportFileContent : null;
+    const canDownloadReport = (null == props ? void 0 : props.canDownloadReport) !== false;
+    if (!scripts || 0 === scripts.length || !frameMap) {
+        if (reportFileContent && canDownloadReport) return /*#__PURE__*/ jsx("div", {
+            className: "player-container player-container-empty",
+            children: /*#__PURE__*/ jsxs("div", {
+                className: "player-empty-state",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "player-empty-text",
+                        children: "No replay available"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(DownloadOutlined, {}),
+                        onClick: ()=>{
+                            handleDownloadReport();
+                        },
+                        children: "Download report"
+                    })
+                ]
+            })
+        });
+        return null;
+    }
     const compositionWidth = (null == currentFrameState ? void 0 : currentFrameState.imageWidth) || frameMap.imageWidth;
     const compositionHeight = (null == currentFrameState ? void 0 : currentFrameState.imageHeight) || frameMap.imageHeight;
     const isPortraitCanvas = compositionHeight > compositionWidth;
-    const totalFrames = frameMap.totalDurationInFrames;
-    const seekPercent = totalFrames > 1 ? player.currentFrame / (totalFrames - 1) * 100 : 0;
+    const seekPercent = effectiveEndFrame > 0 ? Math.min(100, player.currentFrame / effectiveEndFrame * 100) : 0;
     return /*#__PURE__*/ jsx("div", {
         className: "player-container",
         "data-fit-mode": null == props ? void 0 : props.fitMode,
@@ -324,7 +383,7 @@ function Player(props) {
                             height: '100%',
                             overflow: 'hidden'
                         },
-                        onClick: player.toggle,
+                        onClick: handlePlaybackToggle,
                         children: (()=>{
                             const scale = containerSize.width > 0 && containerSize.height > 0 ? Math.min(containerSize.width / compositionWidth, containerSize.height / compositionHeight) : 1;
                             return /*#__PURE__*/ jsx("div", {
@@ -374,16 +433,16 @@ function Player(props) {
                     children: [
                         /*#__PURE__*/ jsx("div", {
                             className: "status-icon",
-                            onClick: player.toggle,
+                            onClick: handlePlaybackToggle,
                             children: player.playing ? /*#__PURE__*/ jsx(PauseOutlined, {}) : /*#__PURE__*/ jsx(CaretRightOutlined, {})
                         }),
                         /*#__PURE__*/ jsxs("span", {
                             className: "time-display",
                             children: [
-                                formatTime(player.currentFrame, frameMap.fps),
-                                " /",
+                                formatTime(Math.min(player.currentFrame, effectiveEndFrame), frameMap.fps),
                                 ' ',
-                                formatTime(totalFrames, frameMap.fps)
+                                "/ ",
+                                formatTime(effectiveEndFrame + 1, frameMap.fps)
                             ]
                         }),
                         /*#__PURE__*/ jsxs("div", {
@@ -422,7 +481,7 @@ function Player(props) {
                         /*#__PURE__*/ jsxs("div", {
                             className: "player-custom-controls",
                             children: [
-                                (null == props ? void 0 : props.reportFileContent) && (null == props ? void 0 : props.canDownloadReport) !== false ? /*#__PURE__*/ jsx(Tooltip, {
+                                reportFileContent && canDownloadReport ? /*#__PURE__*/ jsx(Tooltip, {
                                     title: "Download Report",
                                     children: /*#__PURE__*/ jsx("div", {
                                         className: "status-icon",
@@ -458,18 +517,32 @@ function Player(props) {
                                                     },
                                                     onClick: isExporting ? void 0 : handleExportVideo,
                                                     children: [
-                                                        isExporting ? /*#__PURE__*/ jsx(Spin, {
-                                                            size: "small"
-                                                        }) : /*#__PURE__*/ jsx(ExportOutlined, {
-                                                            style: {
-                                                                width: '16px',
-                                                                height: '16px'
-                                                            }
-                                                        }),
                                                         /*#__PURE__*/ jsx("span", {
                                                             style: {
-                                                                fontSize: '14px'
+                                                                width: 16,
+                                                                height: 16,
+                                                                display: 'inline-flex',
+                                                                alignItems: 'center',
+                                                                justifyContent: 'center',
+                                                                flexShrink: 0
                                                             },
+                                                            children: isExporting ? /*#__PURE__*/ jsx(Progress, {
+                                                                type: "circle",
+                                                                percent: exportProgress,
+                                                                size: 16,
+                                                                strokeWidth: 14,
+                                                                showInfo: false,
+                                                                strokeColor: "#1677ff",
+                                                                trailColor: "rgba(0, 0, 0, 0.12)"
+                                                            }) : /*#__PURE__*/ jsx(ExportOutlined, {
+                                                                style: {
+                                                                    width: '16px',
+                                                                    height: '16px'
+                                                                }
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            className: "player-export-label",
                                                             children: isExporting ? `Exporting ${exportProgress}%` : 'Export video'
                                                         })
                                                     ]
@@ -593,7 +666,7 @@ function Player(props) {
                                                         style: {
                                                             height: '32px',
                                                             lineHeight: '32px',
-                                                            padding: '0 8px 0 24px',
+                                                            padding: '0 8px 0 28px',
                                                             fontSize: '14px',
                                                             cursor: 'pointer',
                                                             borderRadius: '4px'

package/dist/es/component/player/playback-controls.mjs

@@ -0,0 +1,4 @@
+function shouldRestartPlaybackFromBeginning(currentFrame, effectiveEndFrame) {
+    return effectiveEndFrame > 0 && currentFrame >= effectiveEndFrame;
+}
+export { shouldRestartPlaybackFromBeginning };

package/dist/es/component/player/scenes/StepScene.mjs

@@ -2,8 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { mouseLoading } from "../../../utils/index.mjs";
 import { getCenterHighlightBox } from "../../../utils/highlight-element.mjs";
-import { deriveFrameState } from "./derive-frame-state.mjs";
+import { deriveFrameState, shouldRenderCursor } from "./derive-frame-state.mjs";
 import { getPlaybackViewport } from "./playback-layout.mjs";
+import { resolvePointerLayout, resolveSpinnerLayout } from "./pointer-layout.mjs";
 const POINTER_PHASE = 0.375;
 const CROSSFADE_FRAMES = 10;
 const StepsTimeline = ({ frameMap, autoZoom, frame, width: compWidth, height: compHeight, fps })=>{
@@ -16,8 +17,8 @@ const StepsTimeline = ({ frameMap, autoZoom, frame, width: compWidth, height: co
         fps
     ]);
     if (!state.img) return null;
-    const { img, imageWidth: imgW, imageHeight: imgH, prevImg, camera, prevCamera, insights, spinning: spinningPointer, spinningElapsedMs, currentPointerImg, title, subTitle, frameInScript, imageChanged, pointerMoved, rawProgress } = state;
-    const pT = pointerMoved ? Math.min(rawProgress / POINTER_PHASE, 1) : rawProgress;
+    const { img, imageWidth: imgW, imageHeight: imgH, prevImg, camera, prevCamera, insights, spinning: spinningPointer, spinningElapsedMs, currentPointerImg, pointerVisible, title, subTitle, frameInScript, imageChanged, pointerMoved, rawProgress } = state;
+    const pT = autoZoom ? pointerMoved ? Math.min(rawProgress / POINTER_PHASE, 1) : rawProgress : 1;
     const cT = pointerMoved ? rawProgress <= POINTER_PHASE ? 0 : Math.min((rawProgress - POINTER_PHASE) / (1 - POINTER_PHASE), 1) : rawProgress;
     const pointerLeft = prevCamera.pointerLeft + (camera.pointerLeft - prevCamera.pointerLeft) * pT;
     const pointerTop = prevCamera.pointerTop + (camera.pointerTop - prevCamera.pointerTop) * pT;
@@ -32,8 +33,10 @@ const StepsTimeline = ({ frameMap, autoZoom, frame, width: compWidth, height: co
     const camH = imgH / imgW * cameraWidth;
     const ptrX = (pointerLeft - cameraLeft) / cameraWidth * contentWidth;
     const ptrY = (pointerTop - cameraTop) / camH * contentHeight;
-    const showCursor = camera.pointerLeft !== Math.round(imgW / 2) || camera.pointerTop !== Math.round(imgH / 2) || prevCamera.pointerLeft !== Math.round(imgW / 2) || prevCamera.pointerTop !== Math.round(imgH / 2);
-    const resScale = Math.max(1, Math.sqrt(imgW / 1920));
+    const showCursor = shouldRenderCursor(pointerVisible, camera, prevCamera, imgW, imgH);
+    const pointerLayout = resolvePointerLayout(imgW);
+    const spinnerLayout = resolveSpinnerLayout(pointerLayout);
+    const resScale = pointerLayout.scale;
     const crossfadeAlpha = imageChanged ? Math.min(frameInScript / CROSSFADE_FRAMES, 1) : 1;
     const spinRotation = spinningPointer ? (Math.sin(spinningElapsedMs / 500 - Math.PI / 2) + 1) / 2 * Math.PI * 2 : 0;
     const renderInsightOverlays = ()=>{
@@ -143,10 +146,10 @@ const StepsTimeline = ({ frameMap, autoZoom, frame, width: compWidth, height: co
                     src: mouseLoading,
                     style: {
                         position: 'absolute',
-                        left: ptrX - 22 * resScale,
-                        top: ptrY - 28 * resScale,
-                        width: 44 * resScale,
-                        height: 56 * resScale,
+                        left: ptrX - spinnerLayout.centerOffset,
+                        top: ptrY - spinnerLayout.centerOffset,
+                        width: spinnerLayout.size,
+                        height: spinnerLayout.size,
                         transform: `rotate(${spinRotation}rad)`,
                         transformOrigin: 'center center',
                         filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.3))'
@@ -157,10 +160,10 @@ const StepsTimeline = ({ frameMap, autoZoom, frame, width: compWidth, height: co
                     src: currentPointerImg,
                     style: {
                         position: 'absolute',
-                        left: ptrX - 6 * resScale,
-                        top: ptrY - 4 * resScale,
-                        width: 44 * resScale,
-                        height: 56 * resScale,
+                        left: ptrX - pointerLayout.hotspotX,
+                        top: ptrY - pointerLayout.hotspotY,
+                        width: pointerLayout.width,
+                        height: pointerLayout.height,
                         filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.3))'
                     }
                 })

package/dist/es/component/player/scenes/derive-frame-state.mjs

@@ -72,6 +72,11 @@ function updateImage(acc, sf, baseW, baseH) {
 function checkPointerMoved(prev, cur) {
     return Math.abs(prev.pointerLeft - cur.pointerLeft) > 1 || Math.abs(prev.pointerTop - cur.pointerTop) > 1;
 }
+function shouldRenderCursor(pointerVisible, camera, prevCamera, imageWidth, imageHeight) {
+    const centerX = Math.round(imageWidth / 2);
+    const centerY = Math.round(imageHeight / 2);
+    return pointerVisible || Math.abs(camera.pointerLeft - centerX) > 1 || Math.abs(camera.pointerTop - centerY) > 1 || Math.abs(prevCamera.pointerLeft - centerX) > 1 || Math.abs(prevCamera.pointerTop - centerY) > 1;
+}
 function handleImg(acc, sf, frame, baseW, baseH) {
     updateImage(acc, sf, baseW, baseH);
     const sfEnd = sf.startFrame + sf.durationInFrames;
@@ -132,6 +137,7 @@ function deriveFrameState(scriptFrames, frame, baseW, baseH, fps) {
         spinning: false,
         spinningElapsedMs: 0,
         pointerImg: mousePointer,
+        pointerVisible: false,
         title: '',
         subTitle: '',
         taskId: void 0,
@@ -146,7 +152,10 @@ function deriveFrameState(scriptFrames, frame, baseW, baseH, fps) {
         const sfEnd = sf.startFrame + sf.durationInFrames;
         if (0 === sf.durationInFrames) {
             if (sf.startFrame <= frame) {
-                if ('pointer' === sf.type && sf.pointerImg) acc.pointerImg = sf.pointerImg;
+                if ('pointer' === sf.type && sf.pointerImg) {
+                    acc.pointerImg = sf.pointerImg;
+                    acc.pointerVisible = true;
+                }
                 acc.title = sf.title || acc.title;
                 acc.subTitle = sf.subTitle || acc.subTitle;
                 var _sf_taskId;
@@ -206,6 +215,7 @@ function deriveFrameState(scriptFrames, frame, baseW, baseH, fps) {
         spinning: acc.spinning,
         spinningElapsedMs: acc.spinningElapsedMs,
         currentPointerImg: acc.pointerImg,
+        pointerVisible: acc.pointerVisible,
         title: acc.title,
         subTitle: acc.subTitle,
         taskId: acc.taskId,
@@ -216,4 +226,4 @@ function deriveFrameState(scriptFrames, frame, baseW, baseH, fps) {
         rawProgress: acc.rawProgress
     };
 }
-export { deriveFrameState };
+export { deriveFrameState, shouldRenderCursor };