@midscene/visualizer 0.26.2 → 0.26.3-beta-20250813021342.0

package/dist/es/component/misc.mjs

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { ArrowRightOutlined, CheckOutlined, ClockCircleOutlined, CloseOutlined, LogoutOutlined, MinusOutlined, WarningOutlined } from "@ant-design/icons";
+function timeCostStrElement(timeCost) {
+    let str;
+    str = 'number' != typeof timeCost ? '-' : `${(timeCost / 1000).toFixed(2)}s`;
+    return /*#__PURE__*/ jsx("span", {
+        style: {
+            fontVariantNumeric: 'tabular-nums',
+            fontFeatureSettings: 'tnum'
+        },
+        children: str
+    });
+}
+const iconForStatus = (status)=>{
+    switch(status){
+        case 'finished':
+        case 'passed':
+        case 'success':
+        case 'connected':
+            return /*#__PURE__*/ jsx("span", {
+                style: {
+                    color: '#00AD4B'
+                },
+                children: /*#__PURE__*/ jsx(CheckOutlined, {})
+            });
+        case 'finishedWithWarning':
+            return /*#__PURE__*/ jsx("span", {
+                style: {
+                    color: '#f7bb05'
+                },
+                children: /*#__PURE__*/ jsx(WarningOutlined, {})
+            });
+        case 'failed':
+        case 'closed':
+        case 'timedOut':
+        case 'interrupted':
+            return /*#__PURE__*/ jsx("span", {
+                style: {
+                    color: '#FF0A0A'
+                },
+                children: /*#__PURE__*/ jsx(CloseOutlined, {})
+            });
+        case 'pending':
+            return /*#__PURE__*/ jsx(ClockCircleOutlined, {});
+        case 'cancelled':
+        case 'skipped':
+            return /*#__PURE__*/ jsx(LogoutOutlined, {});
+        case 'running':
+            return /*#__PURE__*/ jsx(ArrowRightOutlined, {});
+        default:
+            return /*#__PURE__*/ jsx(MinusOutlined, {});
+    }
+};
+export { iconForStatus, timeCostStrElement };

package/dist/es/component/pixi-loader.mjs

@@ -0,0 +1,16 @@
+import "pixi.js/unsafe-eval";
+import { Assets } from "pixi.js";
+const globalTextureMap = new Map();
+const loadTexture = async (img)=>{
+    if (globalTextureMap.has(img)) return;
+    return Assets.load(img).then((texture)=>{
+        globalTextureMap.set(img, texture);
+    });
+};
+const getTextureFromCache = (name)=>globalTextureMap.get(name);
+const getTexture = async (name)=>{
+    if (globalTextureMap.has(name)) return globalTextureMap.get(name);
+    await loadTexture(name);
+    return globalTextureMap.get(name);
+};
+export { getTexture, getTextureFromCache, loadTexture };

package/dist/es/component/player.css

@@ -1,167 +1,185 @@
 .player-container {
+  box-sizing: border-box;
+  background: #f2f4f7;
+  border: 1px solid #f2f4f7;
+  border-radius: 8px;
+  flex-direction: column;
   width: 100%;
-  height: 100%;
   max-width: 100%;
+  height: 100%;
+  min-height: 300px;
   max-height: 100%;
+  margin: 0 auto;
   padding: 12px;
-  background: #F2F4F7;
-  box-sizing: border-box;
-  border: 1px solid #F2F4F7;
-  border-radius: 8px;
   line-height: 100%;
-  margin: 0 auto;
   display: flex;
-  flex-direction: column;
-  overflow: visible;
-  min-height: 300px;
   position: relative;
+  overflow: visible;
 }
-.player-container[data-fit-mode=height] {
+
+.player-container[data-fit-mode="height"] {
   background: #fff;
 }
-.player-container[data-fit-mode=height] .canvas-container {
-  background-color: #F2F4F7;
+
+.player-container[data-fit-mode="height"] .canvas-container {
+  background-color: #f2f4f7;
 }
+
 .player-container .canvas-container {
-  flex: 0 0 auto;
-  min-height: 200px;
   width: 100%;
-  display: flex;
+  min-height: 200px;
+  aspect-ratio: var(--canvas-aspect-ratio, 16 / 9);
+  background-color: #fff;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  flex: none;
   justify-content: center;
   align-items: center;
-  overflow: hidden;
+  display: flex;
   position: relative;
-  background-color: #fff;
-  border-top-right-radius: 16px;
-  border-top-left-radius: 16px;
-  aspect-ratio: var(--canvas-aspect-ratio, 16/9);
+  overflow: hidden;
 }
+
 .player-container .canvas-container canvas {
+  box-sizing: border-box;
+  object-fit: contain;
+  border: none;
   width: 100%;
-  height: auto;
   max-width: 100%;
+  height: auto;
   max-height: 100%;
-  box-sizing: border-box;
-  display: block;
   margin: 0 auto;
-  object-fit: contain;
-  border: none;
+  display: block;
 }
-.player-container .canvas-container[data-fit-mode=height] {
-  flex: 1 1 auto;
+
+.player-container .canvas-container[data-fit-mode="height"] {
   aspect-ratio: unset;
-  min-height: 0;
+  flex: auto;
   height: auto;
+  min-height: 0;
 }
-.player-container .canvas-container[data-fit-mode=height] canvas {
-  height: 100%;
+
+.player-container .canvas-container[data-fit-mode="height"] canvas {
   width: auto;
   max-width: 100%;
+  height: 100%;
   max-height: 100%;
 }
-.player-container .canvas-container[data-fit-mode=width] {
-  aspect-ratio: var(--canvas-aspect-ratio, 16/9);
+
+.player-container .canvas-container[data-fit-mode="width"] {
+  aspect-ratio: var(--canvas-aspect-ratio, 16 / 9);
 }
-.player-container .canvas-container[data-fit-mode=width] canvas {
+
+.player-container .canvas-container[data-fit-mode="width"] canvas {
   width: 100%;
   height: auto;
 }
+
 .player-container .player-timeline-wrapper {
+  flex: none;
   width: 100%;
   height: 4px;
-  flex: none;
   margin-bottom: 2px;
   position: relative;
 }
+
 .player-container .player-timeline {
+  background: #666;
+  flex-shrink: 0;
   width: 100%;
   height: 4px;
-  background: #666;
   position: relative;
-  flex-shrink: 0;
 }
+
 .player-container .player-timeline .player-timeline-progress {
+  background: #2b83ff;
+  height: 4px;
   transition-timing-function: linear;
   position: absolute;
   top: 0;
   left: 0;
-  height: 4px;
-  background: #2B83FF;
 }
+
 .player-container .player-tools-wrapper {
+  box-sizing: border-box;
+  flex: none;
   width: 100%;
   height: 72px;
-  flex: none;
+  padding: 15px 16px;
   position: relative;
-  padding-top: 15px;
-  padding-bottom: 15px;
-  padding-left: 16px;
-  padding-right: 16px;
-  box-sizing: border-box;
 }
+
 .player-container .player-tools {
-  width: 100%;
-  height: 42px;
-  max-width: 100%;
-  overflow: hidden;
   color: #000;
-  font-size: 14px;
   box-sizing: border-box;
-  display: flex;
   flex-direction: row;
-  justify-content: space-between;
   flex-shrink: 0;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 100%;
+  height: 42px;
+  font-size: 14px;
+  display: flex;
+  overflow: hidden;
 }
+
 .player-container .player-tools .ant-spin {
   color: #333;
 }
+
 .player-container .player-tools .player-control {
-  flex-grow: 1;
-  display: flex;
   flex-direction: row;
+  flex-grow: 1;
   align-items: center;
+  display: flex;
   overflow: hidden;
 }
+
 .player-container .player-tools .status-icon {
-  transition: 0.2s;
-  width: 32px;
-  height: 32px;
   border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
   margin-left: 10px;
+  transition: all .2s;
+  display: flex;
 }
+
 .player-container .player-tools .status-icon:hover {
   cursor: pointer;
-  background: #F0f0f0;
+  background: #f0f0f0;
 }
+
 .player-container .player-tools .status-text {
+  flex-direction: column;
   flex-grow: 1;
   flex-shrink: 1;
+  justify-content: space-between;
+  width: 0;
   min-width: 0;
-  overflow: hidden;
-  position: relative;
   height: 100%;
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 0;
+  position: relative;
+  overflow: hidden;
 }
+
 .player-container .player-tools .title {
   font-weight: 600;
 }
-.player-container .player-tools .title,
-.player-container .player-tools .subtitle {
+
+.player-container .player-tools .title, .player-container .player-tools .subtitle {
   text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
   width: 100%;
+  overflow: hidden;
 }
+
 .player-container .player-tools .player-tools-item {
-  height: 100%;
-  display: flex;
   flex-direction: column;
   justify-content: center;
+  height: 100%;
+  display: flex;
 }
+