@midscene/visualizer 1.7.7-beta-20260429033400.0 → 1.7.7

package/dist/es/component/player/scenes/export-branded-video.mjs

@@ -1,7 +1,8 @@
 import { mouseLoading, mousePointer } 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 { resolveExportPointerLayout, resolveSpinnerLayout } from "./pointer-layout.mjs";
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -28,16 +29,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,
@@ -59,60 +108,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 = 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 = 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);
@@ -143,15 +200,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 = resolveExportPointerLayout(imgW, contentWidth);
+    const spinnerLayout = resolveSpinnerLayout(pointerLayout);
+    var _pointerCache_get;
+    const cursorImg = null != (_pointerCache_get = pointerCache.get(currentPointerImg)) ? _pointerCache_get : pointerCache.get(mousePointer);
+    const showCursor = 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;
@@ -166,11 +250,19 @@ function exportBrandedVideo(frameMap, options, onProgress) {
                     imgCache.set(src, (yield loadImage(src)));
                 } catch (e) {}
             })()));
-        let cursorImg = null;
+        const pointerSrcs = new Set([
+            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(mousePointer);
-        } catch (e) {}
         try {
             spinnerImg = yield loadImage(mouseLoading);
         } catch (e) {}
@@ -187,8 +279,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'
@@ -198,28 +323,38 @@ 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);
+            });
         });
     })();
 }
-export { exportBrandedVideo, resolveExportCamera };
+export { exportBrandedVideo, isExportRenderStalled, projectNativeRectToExportViewport, resolveExportCamera };

package/dist/es/component/player/scenes/pointer-layout.mjs

@@ -0,0 +1,36 @@
+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
+    };
+}
+export { POINTER_HEIGHT, POINTER_HOTSPOT_X, POINTER_HOTSPOT_Y, POINTER_WIDTH, resolveExportPointerLayout, resolvePointerLayout, resolveSpinnerLayout };

package/dist/lib/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);
 }