@midscene/visualizer 1.7.7-beta-20260429033400.0 → 1.7.7

package/dist/lib/component/player/scenes/export-branded-video.js

@@ -24,13 +24,16 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    resolveExportCamera: ()=>resolveExportCamera,
-    exportBrandedVideo: ()=>exportBrandedVideo
+    exportBrandedVideo: ()=>exportBrandedVideo,
+    isExportRenderStalled: ()=>isExportRenderStalled,
+    projectNativeRectToExportViewport: ()=>projectNativeRectToExportViewport,
+    resolveExportCamera: ()=>resolveExportCamera
 });
 const index_js_namespaceObject = require("../../../utils/index.js");
 const highlight_element_js_namespaceObject = require("../../../utils/highlight-element.js");
 const external_derive_frame_state_js_namespaceObject = require("./derive-frame-state.js");
 const external_playback_layout_js_namespaceObject = require("./playback-layout.js");
+const external_pointer_layout_js_namespaceObject = require("./pointer-layout.js");
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -57,16 +60,64 @@ 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 export_branded_video_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 export_branded_video_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
 const W = 960;
 const H = 540;
 const POINTER_PHASE = 0.375;
 const CROSSFADE_FRAMES = 10;
+const EXPORT_STALL_GRACE_MS = 2000;
+const EXPORT_STALL_GRACE_FRAMES = 10;
+let activeExport = false;
 function clamp(v, lo, hi) {
     return Math.min(Math.max(v, lo), hi);
 }
 function lerp(a, b, t) {
     return a + (b - a) * t;
 }
+function isExportRenderStalled(elapsedSinceLastFrameMs, frameDurationMs) {
+    return elapsedSinceLastFrameMs > Math.max(EXPORT_STALL_GRACE_MS, frameDurationMs * EXPORT_STALL_GRACE_FRAMES);
+}
 function resolveExportCamera(prevCamera, camera, imageWidth, progress, autoZoom) {
     if (!autoZoom) return {
         camLeft: 0,
@@ -88,60 +139,68 @@ function loadImage(src) {
         img.src = src;
     });
 }
-function drawInsightOverlays(ctx, insights, cameraTransform, bx, contentY) {
+function projectNativeRectToExportViewport(rect, cameraTransform, viewport) {
+    const scaleX = viewport.contentWidth / viewport.imageWidth;
+    const scaleY = viewport.contentHeight / viewport.imageHeight;
+    return {
+        left: viewport.offsetX + (rect.left * scaleX + cameraTransform.tx) * cameraTransform.zoom,
+        top: viewport.offsetY + (rect.top * scaleY + cameraTransform.ty) * cameraTransform.zoom,
+        width: rect.width * scaleX * cameraTransform.zoom,
+        height: rect.height * scaleY * cameraTransform.zoom
+    };
+}
+function drawInsightOverlays(ctx, insights, cameraTransform, viewport) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(viewport.offsetX, viewport.offsetY, viewport.contentWidth, viewport.contentHeight);
+    ctx.clip();
     for (const insight of insights)if (!(insight.alpha <= 0)) {
         ctx.save();
         ctx.globalAlpha *= insight.alpha;
         if (insight.highlightElement) {
             const highlightBox = (0, highlight_element_js_namespaceObject.getCenterHighlightBox)(insight.highlightElement);
-            const rx = bx + (highlightBox.left * cameraTransform.zoom + cameraTransform.tx * cameraTransform.zoom);
-            const ry = contentY + (highlightBox.top * cameraTransform.zoom + cameraTransform.ty * cameraTransform.zoom);
-            const highlightWidth = highlightBox.width * cameraTransform.zoom;
-            const highlightHeight = highlightBox.height * cameraTransform.zoom;
+            const projected = projectNativeRectToExportViewport(highlightBox, cameraTransform, viewport);
             ctx.fillStyle = 'rgba(253, 89, 7, 0.4)';
-            ctx.fillRect(rx, ry, highlightWidth, highlightHeight);
+            ctx.fillRect(projected.left, projected.top, projected.width, projected.height);
             ctx.strokeStyle = '#fd5907';
             ctx.lineWidth = 1;
-            ctx.strokeRect(rx, ry, highlightWidth, highlightHeight);
+            ctx.strokeRect(projected.left, projected.top, projected.width, projected.height);
             ctx.shadowColor = 'rgba(51, 51, 51, 0.4)';
             ctx.shadowBlur = 2;
             ctx.shadowOffsetX = 4;
             ctx.shadowOffsetY = 4;
-            ctx.strokeRect(rx, ry, highlightWidth, highlightHeight);
+            ctx.strokeRect(projected.left, projected.top, projected.width, projected.height);
             ctx.shadowBlur = 0;
             ctx.shadowOffsetX = 0;
             ctx.shadowOffsetY = 0;
         }
         if (insight.searchArea) {
-            const r = insight.searchArea;
-            const rx = bx + (r.left * cameraTransform.zoom + cameraTransform.tx * cameraTransform.zoom);
-            const ry = contentY + (r.top * cameraTransform.zoom + cameraTransform.ty * cameraTransform.zoom);
-            const rw = r.width * cameraTransform.zoom;
-            const rh = r.height * cameraTransform.zoom;
+            const projected = projectNativeRectToExportViewport(insight.searchArea, cameraTransform, viewport);
             ctx.fillStyle = 'rgba(2, 131, 145, 0.4)';
-            ctx.fillRect(rx, ry, rw, rh);
+            ctx.fillRect(projected.left, projected.top, projected.width, projected.height);
             ctx.strokeStyle = '#028391';
             ctx.lineWidth = 1;
-            ctx.strokeRect(rx, ry, rw, rh);
+            ctx.strokeRect(projected.left, projected.top, projected.width, projected.height);
         }
         ctx.restore();
     }
+    ctx.restore();
 }
-function drawSpinningPointer(ctx, img, x, y, elapsedMs) {
+function drawSpinningPointer(ctx, img, x, y, layout, elapsedMs) {
     const progress = (Math.sin(elapsedMs / 500 - Math.PI / 2) + 1) / 2;
     const rotation = progress * Math.PI * 2;
     ctx.save();
     ctx.translate(x, y);
     ctx.rotate(rotation);
-    ctx.drawImage(img, -11, -14, 22, 28);
+    ctx.drawImage(img, -layout.centerOffsetX, -layout.centerOffsetY, layout.width, layout.height);
     ctx.restore();
 }
-function drawSteps(ctx, stepsFrame, frameMap, imgCache, cursorImg, spinnerImg, autoZoom) {
+function drawSteps(ctx, stepsFrame, frameMap, imgCache, pointerCache, spinnerImg, autoZoom) {
     const { scriptFrames, imageWidth: baseW, imageHeight: baseH, fps } = frameMap;
     const st = (0, external_derive_frame_state_js_namespaceObject.deriveFrameState)(scriptFrames, stepsFrame, baseW, baseH, fps);
     if (!st.img) return;
-    const { img, prevImg, imageWidth: imgW, imageHeight: imgH, camera, prevCamera, pointerMoved, imageChanged, rawProgress, frameInScript: fInScript, spinning, spinningElapsedMs, insights } = st;
-    const pT = pointerMoved ? Math.min(rawProgress / POINTER_PHASE, 1) : rawProgress;
+    const { img, prevImg, imageWidth: imgW, imageHeight: imgH, camera, prevCamera, pointerMoved, imageChanged, rawProgress, frameInScript: fInScript, spinning, spinningElapsedMs, currentPointerImg, pointerVisible, insights } = st;
+    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 { camLeft: camL, camTop: camT2, camWidth: camW } = resolveExportCamera(prevCamera, camera, imgW, cT, autoZoom);
     const ptrX = lerp(prevCamera.pointerLeft, camera.pointerLeft, pT);
@@ -172,15 +231,42 @@ function drawSteps(ctx, stepsFrame, frameMap, imgCache, cursorImg, spinnerImg, a
         zoom,
         tx,
         ty
-    }, offsetX, offsetY);
+    }, {
+        offsetX,
+        offsetY,
+        contentWidth,
+        contentHeight,
+        imageWidth: imgW,
+        imageHeight: imgH
+    });
     const camH = imgH / imgW * camW;
     const sX = offsetX + (ptrX - camL) / camW * contentWidth;
     const sY = offsetY + (ptrY - camT2) / camH * contentHeight;
-    const hasPtrData = Math.abs(camera.pointerLeft - Math.round(imgW / 2)) > 1 || Math.abs(camera.pointerTop - Math.round(imgH / 2)) > 1 || Math.abs(prevCamera.pointerLeft - Math.round(imgW / 2)) > 1 || Math.abs(prevCamera.pointerTop - Math.round(imgH / 2)) > 1;
-    if (spinning && spinnerImg) drawSpinningPointer(ctx, spinnerImg, sX, sY, spinningElapsedMs);
-    if (!spinning && hasPtrData && cursorImg) ctx.drawImage(cursorImg, sX - 3, sY - 2, 22, 28);
+    const pointerLayout = (0, external_pointer_layout_js_namespaceObject.resolveExportPointerLayout)(imgW, contentWidth);
+    const spinnerLayout = (0, external_pointer_layout_js_namespaceObject.resolveSpinnerLayout)(pointerLayout);
+    var _pointerCache_get;
+    const cursorImg = null != (_pointerCache_get = pointerCache.get(currentPointerImg)) ? _pointerCache_get : pointerCache.get(index_js_namespaceObject.mousePointer);
+    const showCursor = (0, external_derive_frame_state_js_namespaceObject.shouldRenderCursor)(pointerVisible, camera, prevCamera, imgW, imgH);
+    if (spinning && spinnerImg) drawSpinningPointer(ctx, spinnerImg, sX, sY, _object_spread_props(_object_spread({}, pointerLayout), {
+        width: spinnerLayout.size,
+        height: spinnerLayout.size,
+        centerOffsetX: spinnerLayout.centerOffset,
+        centerOffsetY: spinnerLayout.centerOffset
+    }), spinningElapsedMs);
+    if (!spinning && showCursor && cursorImg) ctx.drawImage(cursorImg, sX - pointerLayout.hotspotX, sY - pointerLayout.hotspotY, pointerLayout.width, pointerLayout.height);
 }
 function exportBrandedVideo(frameMap, options, onProgress) {
+    return _async_to_generator(function*() {
+        if (activeExport) throw new Error('Video export is already in progress');
+        activeExport = true;
+        try {
+            yield runExportBrandedVideo(frameMap, options, onProgress);
+        } finally{
+            activeExport = false;
+        }
+    })();
+}
+function runExportBrandedVideo(frameMap, options, onProgress) {
     return _async_to_generator(function*() {
         const { totalDurationInFrames: total, fps } = frameMap;
         var _options_autoZoom;
@@ -195,11 +281,19 @@ function exportBrandedVideo(frameMap, options, onProgress) {
                     imgCache.set(src, (yield loadImage(src)));
                 } catch (e) {}
             })()));
-        let cursorImg = null;
+        const pointerSrcs = new Set([
+            index_js_namespaceObject.mousePointer
+        ]);
+        for (const sf of frameMap.scriptFrames)if (sf.pointerImg) pointerSrcs.add(sf.pointerImg);
+        const pointerCache = new Map();
+        yield Promise.all([
+            ...pointerSrcs
+        ].map((src)=>_async_to_generator(function*() {
+                try {
+                    pointerCache.set(src, (yield loadImage(src)));
+                } catch (e) {}
+            })()));
         let spinnerImg = null;
-        try {
-            cursorImg = yield loadImage(index_js_namespaceObject.mousePointer);
-        } catch (e) {}
         try {
             spinnerImg = yield loadImage(index_js_namespaceObject.mouseLoading);
         } catch (e) {}
@@ -216,8 +310,41 @@ function exportBrandedVideo(frameMap, options, onProgress) {
             if (e.data.size > 0) chunks.push(e.data);
         };
         return new Promise((resolve, reject)=>{
-            recorder.onerror = ()=>reject(new Error('MediaRecorder error'));
+            let stoppedByError = null;
+            let settled = false;
+            let nextFrame = 0;
+            let nextFrameDueAt = performance.now();
+            let lastFrameAt = nextFrameDueAt;
+            let stopTimer = null;
+            let renderTimer = null;
+            const frameDuration = 1000 / fps;
+            const cleanup = ()=>{
+                if (stopTimer) clearTimeout(stopTimer);
+                if (renderTimer) clearTimeout(renderTimer);
+                document.removeEventListener('visibilitychange', handleVisibilityChange);
+                stream.getTracks().forEach((track)=>track.stop());
+            };
+            const finishWithError = (error)=>{
+                if (settled || stoppedByError) return;
+                stoppedByError = error;
+                if ('inactive' !== recorder.state) recorder.stop();
+                else {
+                    cleanup();
+                    settled = true;
+                    reject(error);
+                }
+            };
+            const handleVisibilityChange = ()=>{
+                if (document.hidden) finishWithError(new Error('Video export was interrupted because the report tab was hidden'));
+            };
+            recorder.onerror = ()=>{
+                finishWithError(new Error('MediaRecorder error'));
+            };
             recorder.onstop = ()=>{
+                cleanup();
+                if (settled) return;
+                settled = true;
+                if (stoppedByError) return void reject(stoppedByError);
                 if (0 === chunks.length) return void reject(new Error('No video data'));
                 const blob = new Blob(chunks, {
                     type: 'video/webm'
@@ -227,34 +354,48 @@ function exportBrandedVideo(frameMap, options, onProgress) {
                 a.href = url;
                 a.download = 'midscene_replay.webm';
                 a.click();
-                stream.getTracks().forEach((track)=>track.stop());
                 setTimeout(()=>URL.revokeObjectURL(url), 1000);
                 resolve();
             };
+            document.addEventListener('visibilitychange', handleVisibilityChange);
             recorder.start();
-            const frameDuration = 1000 / fps;
-            const startTime = performance.now();
-            let lastFrame = -1;
-            const tick = ()=>{
-                const elapsed = performance.now() - startTime;
-                const targetFrame = Math.min(Math.floor(elapsed / frameDuration), total - 1);
-                if (targetFrame > lastFrame) {
-                    lastFrame = targetFrame;
-                    ctx.clearRect(0, 0, W, H);
-                    drawSteps(ctx, targetFrame, frameMap, imgCache, cursorImg, spinnerImg, autoZoom);
-                    null == onProgress || onProgress((targetFrame + 1) / total);
-                }
-                if (targetFrame < total - 1) requestAnimationFrame(tick);
-                else setTimeout(()=>recorder.stop(), 2 * frameDuration);
+            const scheduleNextFrame = ()=>{
+                const delay = Math.max(0, nextFrameDueAt - performance.now());
+                renderTimer = setTimeout(()=>{
+                    requestAnimationFrame(renderFrame);
+                }, delay);
+            };
+            const renderFrame = (timestamp)=>{
+                if (settled || 'inactive' === recorder.state) return;
+                if (nextFrame > 0 && isExportRenderStalled(timestamp - lastFrameAt, frameDuration)) return void finishWithError(new Error('Video export was interrupted because rendering stalled'));
+                lastFrameAt = timestamp;
+                ctx.clearRect(0, 0, W, H);
+                drawSteps(ctx, nextFrame, frameMap, imgCache, pointerCache, spinnerImg, autoZoom);
+                null == onProgress || onProgress((nextFrame + 1) / total);
+                nextFrame += 1;
+                if (nextFrame < total) {
+                    nextFrameDueAt += frameDuration;
+                    scheduleNextFrame();
+                } else stopTimer = setTimeout(()=>{
+                    if ('inactive' !== recorder.state) recorder.stop();
+                }, 2 * frameDuration);
             };
-            requestAnimationFrame(tick);
+            requestAnimationFrame((timestamp)=>{
+                lastFrameAt = timestamp;
+                nextFrameDueAt = timestamp;
+                renderFrame(timestamp);
+            });
         });
     })();
 }
 exports.exportBrandedVideo = __webpack_exports__.exportBrandedVideo;
+exports.isExportRenderStalled = __webpack_exports__.isExportRenderStalled;
+exports.projectNativeRectToExportViewport = __webpack_exports__.projectNativeRectToExportViewport;
 exports.resolveExportCamera = __webpack_exports__.resolveExportCamera;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "exportBrandedVideo",
+    "isExportRenderStalled",
+    "projectNativeRectToExportViewport",
     "resolveExportCamera"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/lib/component/player/scenes/pointer-layout.js

@@ -0,0 +1,88 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    POINTER_HEIGHT: ()=>POINTER_HEIGHT,
+    POINTER_HOTSPOT_X: ()=>POINTER_HOTSPOT_X,
+    POINTER_HOTSPOT_Y: ()=>POINTER_HOTSPOT_Y,
+    POINTER_WIDTH: ()=>POINTER_WIDTH,
+    resolveExportPointerLayout: ()=>resolveExportPointerLayout,
+    resolvePointerLayout: ()=>resolvePointerLayout,
+    resolveSpinnerLayout: ()=>resolveSpinnerLayout
+});
+const POINTER_REFERENCE_IMAGE_WIDTH = 1920;
+const POINTER_WIDTH = 44;
+const POINTER_HEIGHT = 56;
+const POINTER_HOTSPOT_X = 6;
+const POINTER_HOTSPOT_Y = 4;
+function assertPositiveFinite(value, name) {
+    if (!Number.isFinite(value) || value <= 0) throw new Error(`${name} must be a positive finite number`);
+}
+function buildPointerLayout(scale) {
+    return {
+        scale,
+        width: POINTER_WIDTH * scale,
+        height: POINTER_HEIGHT * scale,
+        hotspotX: POINTER_HOTSPOT_X * scale,
+        hotspotY: POINTER_HOTSPOT_Y * scale,
+        centerOffsetX: POINTER_WIDTH * scale / 2,
+        centerOffsetY: POINTER_HEIGHT * scale / 2
+    };
+}
+function resolvePointerLayout(imageWidth) {
+    assertPositiveFinite(imageWidth, 'imageWidth');
+    return buildPointerLayout(Math.max(1, Math.sqrt(imageWidth / POINTER_REFERENCE_IMAGE_WIDTH)));
+}
+function resolveExportPointerLayout(imageWidth, contentWidth) {
+    assertPositiveFinite(contentWidth, 'contentWidth');
+    const liveLayout = resolvePointerLayout(imageWidth);
+    return buildPointerLayout(liveLayout.scale * (contentWidth / imageWidth));
+}
+function resolveSpinnerLayout(pointerLayout) {
+    const size = pointerLayout.height;
+    return {
+        size,
+        centerOffset: size / 2
+    };
+}
+exports.POINTER_HEIGHT = __webpack_exports__.POINTER_HEIGHT;
+exports.POINTER_HOTSPOT_X = __webpack_exports__.POINTER_HOTSPOT_X;
+exports.POINTER_HOTSPOT_Y = __webpack_exports__.POINTER_HOTSPOT_Y;
+exports.POINTER_WIDTH = __webpack_exports__.POINTER_WIDTH;
+exports.resolveExportPointerLayout = __webpack_exports__.resolveExportPointerLayout;
+exports.resolvePointerLayout = __webpack_exports__.resolvePointerLayout;
+exports.resolveSpinnerLayout = __webpack_exports__.resolveSpinnerLayout;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "POINTER_HEIGHT",
+    "POINTER_HOTSPOT_X",
+    "POINTER_HOTSPOT_Y",
+    "POINTER_WIDTH",
+    "resolveExportPointerLayout",
+    "resolvePointerLayout",
+    "resolveSpinnerLayout"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/types/component/player/index.d.ts

@@ -12,4 +12,4 @@ export declare function Player(props?: {
     canDownloadReport?: boolean;
     onDownloadReport?: ReportDownloadHandler;
     onTaskChange?: (taskId: string | null) => void;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

package/dist/types/component/player/playback-controls.d.ts

@@ -0,0 +1 @@
+export declare function shouldRestartPlaybackFromBeginning(currentFrame: number, effectiveEndFrame: number): boolean;

package/dist/types/component/player/scenes/derive-frame-state.d.ts

@@ -26,6 +26,7 @@ export interface FrameState {
     spinning: boolean;
     spinningElapsedMs: number;
     currentPointerImg: string;
+    pointerVisible: boolean;
     title: string;
     subTitle: string;
     taskId: string | undefined;
@@ -35,4 +36,5 @@ export interface FrameState {
     pointerMoved: boolean;
     rawProgress: number;
 }
+export declare function shouldRenderCursor(pointerVisible: boolean, camera: CameraState, prevCamera: CameraState, imageWidth: number, imageHeight: number): boolean;
 export declare function deriveFrameState(scriptFrames: ScriptFrame[], frame: number, baseW: number, baseH: number, fps: number): FrameState;

package/dist/types/component/player/scenes/export-branded-video.d.ts

@@ -1,4 +1,14 @@
+import type { Rect } from '@midscene/core';
 import type { FrameMap } from './frame-calculator';
+interface ExportOverlayViewport {
+    offsetX: number;
+    offsetY: number;
+    contentWidth: number;
+    contentHeight: number;
+    imageWidth: number;
+    imageHeight: number;
+}
+export declare function isExportRenderStalled(elapsedSinceLastFrameMs: number, frameDurationMs: number): boolean;
 export declare function resolveExportCamera(prevCamera: {
     left: number;
     top: number;
@@ -12,6 +22,12 @@ export declare function resolveExportCamera(prevCamera: {
     camTop: number;
     camWidth: number;
 };
+export declare function projectNativeRectToExportViewport(rect: Rect, cameraTransform: {
+    zoom: number;
+    tx: number;
+    ty: number;
+}, viewport: ExportOverlayViewport): Rect;
 export declare function exportBrandedVideo(frameMap: FrameMap, options?: {
     autoZoom?: boolean;
 }, onProgress?: (pct: number) => void): Promise<void>;
+export {};

package/dist/types/component/player/scenes/pointer-layout.d.ts

@@ -0,0 +1,20 @@
+export declare const POINTER_WIDTH = 44;
+export declare const POINTER_HEIGHT = 56;
+export declare const POINTER_HOTSPOT_X = 6;
+export declare const POINTER_HOTSPOT_Y = 4;
+export interface PointerLayout {
+    scale: number;
+    width: number;
+    height: number;
+    hotspotX: number;
+    hotspotY: number;
+    centerOffsetX: number;
+    centerOffsetY: number;
+}
+export interface SpinnerLayout {
+    size: number;
+    centerOffset: number;
+}
+export declare function resolvePointerLayout(imageWidth: number): PointerLayout;
+export declare function resolveExportPointerLayout(imageWidth: number, contentWidth: number): PointerLayout;
+export declare function resolveSpinnerLayout(pointerLayout: PointerLayout): SpinnerLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "1.7.7-beta-20260429033400.0",
+  "version": "1.7.7",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",
@@ -58,10 +58,10 @@
     "antd": "^5.21.6",
     "buffer": "6.0.3",
     "dayjs": "^1.11.11",
-    "@midscene/playground": "1.7.7-beta-20260429033400.0",
-    "@midscene/shared": "1.7.7-beta-20260429033400.0",
-    "@midscene/core": "1.7.7-beta-20260429033400.0",
-    "@midscene/web": "1.7.7-beta-20260429033400.0"
+    "@midscene/core": "1.7.7",
+    "@midscene/playground": "1.7.7",
+    "@midscene/web": "1.7.7",
+    "@midscene/shared": "1.7.7"
   },
   "license": "MIT",
   "scripts": {