@midscene/visualizer 0.5.2-beta-20241009023204.0 → 0.5.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 (26) hide show
  1. package/dist/es/component/detail-panel.js +1 -1
  2. package/dist/es/component/player.css +76 -30
  3. package/dist/es/component/player.js +188 -47
  4. package/dist/es/component/{player-scripts.js → replay-scripts.js} +7 -5
  5. package/dist/es/component/store.js +1 -1
  6. package/dist/es/index.css +1 -1
  7. package/dist/es/index.js +1 -1
  8. package/dist/index.css +77 -31
  9. package/dist/index.js +1 -1
  10. package/dist/lib/component/detail-panel.js +1 -1
  11. package/dist/lib/component/player.css +76 -30
  12. package/dist/lib/component/player.js +185 -47
  13. package/dist/lib/component/{player-scripts.js → replay-scripts.js} +10 -8
  14. package/dist/lib/component/store.js +2 -2
  15. package/dist/lib/index.css +1 -1
  16. package/dist/lib/index.js +1 -1
  17. package/dist/report/demo-mobile.html +78 -32
  18. package/dist/report/demo.html +78 -32
  19. package/dist/report/empty-error.html +78 -32
  20. package/dist/report/index.css +77 -31
  21. package/dist/report/index.html +78 -32
  22. package/dist/report/index.js +1 -1
  23. package/dist/report/multi.html +78 -32
  24. package/dist/types/component/{player-scripts.d.ts → replay-scripts.d.ts} +1 -0
  25. package/dist/types/component/store.d.ts +1 -1
  26. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -126,7 +126,7 @@ footer.mt-8 {
126
126
  text-align: center;
127
127
  margin-top: 10px;
128
128
  }
129
- .main-right .main-canvas-container {
129
+ .main-right .main-content-container {
130
130
  flex-grow: 1;
131
131
  height: 100%;
132
132
  background: #ffffff;
@@ -259,55 +259,101 @@ footer.mt-8 {
259
259
 
260
260
  /* src/component/player.less */
261
261
  .player-container {
262
- width: 100%;
263
- height: 100%;
262
+ width: fit-content;
263
+ max-width: 100%;
264
+ max-height: 100%;
265
+ padding: 12px;
266
+ padding-bottom: 0;
267
+ background: #434443DD;
268
+ box-sizing: border-box;
269
+ border: 1px solid #979797;
270
+ border-radius: 6px;
271
+ line-height: 100%;
272
+ margin: 0 auto;
264
273
  display: flex;
265
274
  flex-direction: column;
266
- justify-content: center;
267
- position: relative;
268
- }
269
- .player-container .player-top-placeholder {
270
- width: 100%;
271
- height: 1px;
275
+ overflow: hidden;
272
276
  }
273
277
  .player-container .canvas-container {
274
- width: 100%;
275
- height: 90%;
276
- text-align: center;
277
- position: relative;
278
+ flex-grow: 1;
279
+ display: flex;
280
+ align-items: center;
281
+ justify-content: center;
282
+ overflow: hidden;
278
283
  }
279
- .player-container canvas {
280
- border: 1px solid #06B1AB;
284
+ .player-container .canvas-container canvas {
281
285
  max-width: 100%;
282
286
  max-height: 100%;
283
287
  box-sizing: border-box;
284
- position: absolute;
285
- top: 50%;
286
- left: 50%;
287
- transform: translate(-50%, -50%);
288
+ display: block;
289
+ margin: 0 auto;
288
290
  }
289
- .player-container .player-controls {
291
+ .player-container .player-timeline {
292
+ width: 100%;
293
+ height: 4px;
294
+ background: #666;
295
+ position: relative;
296
+ margin-top: -2px;
297
+ }
298
+ .player-container .player-timeline .player-timeline-progress {
299
+ transition-timing-function: linear;
290
300
  position: absolute;
291
- bottom: 20px;
301
+ top: 0;
292
302
  left: 0;
293
- width: 100%;
294
- background: rgba(0, 0, 0, 0.7);
295
- border-radius: 8px;
296
- padding: 20px 15px;
303
+ height: 4px;
304
+ background: #06b1ab;
305
+ }
306
+ .player-container .player-controls {
307
+ margin-top: calc(12px * 1.2);
308
+ margin-bottom: calc(12px * 1.2);
309
+ max-width: 100%;
310
+ overflow: hidden;
297
311
  color: #FFF;
298
- font-size: 18px;
299
- line-height: 1.2;
300
- transition: 0.2s;
312
+ font-size: 16px;
301
313
  box-sizing: border-box;
314
+ display: flex;
315
+ flex-direction: row;
316
+ flex-shrink: 0;
317
+ }
318
+ .player-container .player-controls .status-icon {
319
+ transition: 0.2s;
320
+ width: 40px;
321
+ height: 40px;
322
+ margin-right: 12px;
323
+ background: #666;
324
+ border-radius: 6px;
325
+ display: flex;
326
+ align-items: center;
327
+ justify-content: center;
328
+ flex-shrink: 0;
329
+ }
330
+ .player-container .player-controls .status-text {
331
+ flex-grow: 1;
332
+ overflow: hidden;
333
+ position: relative;
302
334
  }
303
335
  .player-container .player-controls .title {
304
336
  font-weight: bold;
337
+ height: 20px;
338
+ line-height: 20px;
339
+ overflow: hidden;
340
+ text-overflow: ellipsis;
341
+ white-space: nowrap;
342
+ position: absolute;
343
+ top: 0;
344
+ left: 0;
345
+ width: 100%;
305
346
  }
306
347
  .player-container .player-controls .subtitle {
307
- white-space: nowrap;
308
- text-overflow: ellipsis;
309
- overflow: hidden;
348
+ height: 20px;
349
+ line-height: 20px;
310
350
  width: 100%;
351
+ overflow: hidden;
352
+ text-overflow: ellipsis;
353
+ white-space: nowrap;
354
+ position: absolute;
355
+ top: 18px;
356
+ left: 0;
311
357
  }
312
358
 
313
359
  /* src/component/sidebar.less */