@midscene/visualizer 1.4.1 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/es/component/screenshot-viewer/index.mjs +13 -6
  2. package/dist/lib/component/screenshot-viewer/index.js +13 -6
  3. package/dist/types/component/screenshot-viewer/index.d.ts +2 -1
  4. package/package.json +5 -5
package/dist/es/component/screenshot-viewer/index.mjs CHANGED
@@ -29,12 +29,13 @@ function _async_to_generator(fn) {
29
29
  });
30
30
  };
31
31
  }
32
- function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUserOperating = false }) {
32
+ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUserOperating = false, mjpegUrl }) {
33
33
  const [screenshot, setScreenshot] = useState(null);
34
34
  const [loading, setLoading] = useState(false);
35
35
  const [error, setError] = useState(null);
36
36
  const [lastUpdateTime, setLastUpdateTime] = useState(0);
37
37
  const [interfaceInfo, setInterfaceInfo] = useState(null);
38
+ const isMjpeg = Boolean(mjpegUrl && serverOnline);
38
39
  const pollingIntervalRef = useRef(null);
39
40
  const isPollingPausedRef = useRef(false);
40
41
  const fetchScreenshot = useCallback((isManual = false)=>_async_to_generator(function*() {
@@ -112,14 +113,16 @@ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUse
112
113
  stopPolling();
113
114
  return;
114
115
  }
115
- fetchScreenshot(false);
116
116
  fetchInterfaceInfo();
117
+ if (isMjpeg) return void stopPolling();
118
+ fetchScreenshot(false);
117
119
  startPolling();
118
120
  return ()=>{
119
121
  stopPolling();
120
122
  };
121
123
  }, [
122
124
  serverOnline,
125
+ isMjpeg,
123
126
  startPolling,
124
127
  stopPolling,
125
128
  fetchScreenshot,
@@ -158,7 +161,7 @@ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUse
158
161
  ]
159
162
  })
160
163
  });
161
- if (loading && !screenshot) return /*#__PURE__*/ jsxs("div", {
164
+ if (!isMjpeg && loading && !screenshot) return /*#__PURE__*/ jsxs("div", {
162
165
  className: "screenshot-viewer loading",
163
166
  children: [
164
167
  /*#__PURE__*/ jsx(Spin, {
@@ -169,7 +172,7 @@ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUse
169
172
  })
170
173
  ]
171
174
  });
172
- if (error && !screenshot) return /*#__PURE__*/ jsx("div", {
175
+ if (!isMjpeg && error && !screenshot) return /*#__PURE__*/ jsx("div", {
173
176
  className: "screenshot-viewer error",
174
177
  children: /*#__PURE__*/ jsxs("div", {
175
178
  className: "screenshot-placeholder",
@@ -223,7 +226,7 @@ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUse
223
226
  })
224
227
  ]
225
228
  }),
226
- /*#__PURE__*/ jsxs("div", {
229
+ !isMjpeg && /*#__PURE__*/ jsxs("div", {
227
230
  className: "screenshot-controls",
228
231
  children: [
229
232
  lastUpdateTime > 0 && /*#__PURE__*/ jsxs("span", {
@@ -257,7 +260,11 @@ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUse
257
260
  }),
258
261
  /*#__PURE__*/ jsx("div", {
259
262
  className: "screenshot-content",
260
- children: screenshot ? /*#__PURE__*/ jsx("img", {
263
+ children: isMjpeg ? /*#__PURE__*/ jsx("img", {
264
+ src: mjpegUrl,
265
+ alt: "Device Live Stream",
266
+ className: "screenshot-image"
267
+ }) : screenshot ? /*#__PURE__*/ jsx("img", {
261
268
  src: screenshot.startsWith('data:image/') ? screenshot : `data:image/png;base64,${screenshot}`,
262
269
  alt: "Device Screenshot",
263
270
  className: "screenshot-image",
package/dist/lib/component/screenshot-viewer/index.js CHANGED
@@ -57,12 +57,13 @@ function _async_to_generator(fn) {
57
57
  });
58
58
  };
59
59
  }
60
- function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUserOperating = false }) {
60
+ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUserOperating = false, mjpegUrl }) {
61
61
  const [screenshot, setScreenshot] = (0, external_react_namespaceObject.useState)(null);
62
62
  const [loading, setLoading] = (0, external_react_namespaceObject.useState)(false);
63
63
  const [error, setError] = (0, external_react_namespaceObject.useState)(null);
64
64
  const [lastUpdateTime, setLastUpdateTime] = (0, external_react_namespaceObject.useState)(0);
65
65
  const [interfaceInfo, setInterfaceInfo] = (0, external_react_namespaceObject.useState)(null);
66
+ const isMjpeg = Boolean(mjpegUrl && serverOnline);
66
67
  const pollingIntervalRef = (0, external_react_namespaceObject.useRef)(null);
67
68
  const isPollingPausedRef = (0, external_react_namespaceObject.useRef)(false);
68
69
  const fetchScreenshot = (0, external_react_namespaceObject.useCallback)((isManual = false)=>_async_to_generator(function*() {
@@ -140,14 +141,16 @@ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUse
140
141
  stopPolling();
141
142
  return;
142
143
  }
143
- fetchScreenshot(false);
144
144
  fetchInterfaceInfo();
145
+ if (isMjpeg) return void stopPolling();
146
+ fetchScreenshot(false);
145
147
  startPolling();
146
148
  return ()=>{
147
149
  stopPolling();
148
150
  };
149
151
  }, [
150
152
  serverOnline,
153
+ isMjpeg,
151
154
  startPolling,
152
155
  stopPolling,
153
156
  fetchScreenshot,
@@ -186,7 +189,7 @@ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUse
186
189
  ]
187
190
  })
188
191
  });
189
- if (loading && !screenshot) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
192
+ if (!isMjpeg && loading && !screenshot) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
190
193
  className: "screenshot-viewer loading",
191
194
  children: [
192
195
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Spin, {
@@ -197,7 +200,7 @@ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUse
197
200
  })
198
201
  ]
199
202
  });
200
- if (error && !screenshot) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
203
+ if (!isMjpeg && error && !screenshot) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
201
204
  className: "screenshot-viewer error",
202
205
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
203
206
  className: "screenshot-placeholder",
@@ -251,7 +254,7 @@ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUse
251
254
  })
252
255
  ]
253
256
  }),
254
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
257
+ !isMjpeg && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
255
258
  className: "screenshot-controls",
256
259
  children: [
257
260
  lastUpdateTime > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
@@ -285,7 +288,11 @@ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUse
285
288
  }),
286
289
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
287
290
  className: "screenshot-content",
288
- children: screenshot ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
291
+ children: isMjpeg ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
292
+ src: mjpegUrl,
293
+ alt: "Device Live Stream",
294
+ className: "screenshot-image"
295
+ }) : screenshot ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
289
296
  src: screenshot.startsWith('data:image/') ? screenshot : `data:image/png;base64,${screenshot}`,
290
297
  alt: "Device Screenshot",
291
298
  className: "screenshot-image",
package/dist/types/component/screenshot-viewer/index.d.ts CHANGED
@@ -10,6 +10,7 @@ interface ScreenshotViewerProps {
10
10
  } | null>;
11
11
  serverOnline: boolean;
12
12
  isUserOperating?: boolean;
13
+ mjpegUrl?: string;
13
14
  }
14
- export default function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUserOperating, }: ScreenshotViewerProps): import("react").JSX.Element;
15
+ export default function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUserOperating, mjpegUrl, }: ScreenshotViewerProps): import("react").JSX.Element;
15
16
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@midscene/visualizer",
3
- "version": "1.4.1",
3
+ "version": "1.4.2",
4
4
  "repository": "https://github.com/web-infra-dev/midscene",
5
5
  "homepage": "https://midscenejs.com/",
6
6
  "types": "./dist/types/index.d.ts",
@@ -60,10 +60,10 @@
60
60
  "antd": "^5.21.6",
61
61
  "buffer": "6.0.3",
62
62
  "dayjs": "^1.11.11",
63
- "@midscene/core": "1.4.1",
64
- "@midscene/playground": "1.4.1",
65
- "@midscene/web": "1.4.1",
66
- "@midscene/shared": "1.4.1"
63
+ "@midscene/core": "1.4.2",
64
+ "@midscene/web": "1.4.2",
65
+ "@midscene/playground": "1.4.2",
66
+ "@midscene/shared": "1.4.2"
67
67
  },
68
68
  "license": "MIT",
69
69
  "scripts": {