@3deye-toolkit/react-camera 0.0.1-alpha.21 → 0.0.1-alpha.24

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 (5) hide show
  1. package/dist/react-camera.css +158 -134
  2. package/dist/react-camera.d.ts +133 -37
  3. package/dist/react-camera.js +2 -2
  4. package/dist/tsdoc-metadata.json +1 -1
  5. package/package.json +13 -13
package/dist/react-camera.css CHANGED
@@ -5,6 +5,11 @@
5
5
  .x-3deye-player {
6
6
  position: relative;
7
7
  background-color: black;
8
+ }
9
+
10
+ .x-3deye-player__zoomable-wrapper {
11
+ width: 100%;
12
+ height: 100%;
8
13
  overflow: hidden;
9
14
  }
10
15
 
@@ -24,79 +29,89 @@
24
29
  }
25
30
 
26
31
  .x-3deye-button {
27
- color: inherit;
28
- background: none;
29
- border: none;
30
- position: relative;
31
- padding: 4px;
32
- text-transform: uppercase;
33
- -webkit-user-select: none;
34
- -moz-user-select: none;
35
- -ms-user-select: none;
36
- user-select: none;
37
- font-family: 'Roboto', sans-serif;
38
- text-align: center;
39
- align-items: flex-start;
32
+ color: inherit;
33
+ background: none;
34
+ border: none;
35
+ position: relative;
36
+ padding: 0 8px;
37
+ height: 32px;
38
+ text-transform: uppercase;
39
+ -webkit-user-select: none;
40
+ -moz-user-select: none;
41
+ -ms-user-select: none;
42
+ user-select: none;
43
+ text-align: center;
44
+ align-items: flex-start;
45
+ border-radius: 4px;
40
46
  }
41
47
 
42
48
  .x-3deye-button.fullwidth {
43
- width: 100%;
49
+ width: 100%;
44
50
  }
45
51
 
46
- .x-3deye-button:focus, .x-3deye-button.x-3deye-button--icon:not(:disabled):hover {
47
- background-color: rgba(var(--surface-highlight-rgb), 0.1);
52
+ .x-3deye-button:focus,
53
+ .x-3deye-button.x-3deye-button:not(:disabled):hover {
54
+ background-color: rgba(var(--surface-highlight-rgb), 0.1);
48
55
  }
49
56
 
50
57
  .x-3deye-button--icon {
51
- border-radius: 16px;
52
- width: 32px;
53
- height: 32px;
54
- display: inline-flex;
55
- align-items: center;
56
- justify-content: center;
58
+ border-radius: 16px;
59
+ padding: 4px;
60
+ width: 32px;
61
+ height: 32px;
62
+ display: inline-flex;
63
+ align-items: center;
64
+ justify-content: center;
57
65
  }
58
66
 
59
67
  .x-3deye-button:disabled {
60
- opacity: 0.4;
68
+ opacity: 0.4;
61
69
  }
62
70
 
63
- .x-3deye-button.x-3deye-button--save, .x-3deye-button.x-3deye-button--cancel {
64
- color: white;
65
- border-radius: 4px;
66
- text-transform: none;
67
- margin: 4px;
68
- min-width: 80px;
71
+ .x-3deye-button.x-3deye-button--ok,
72
+ .x-3deye-button.x-3deye-button--cancel {
73
+ color: white;
74
+ text-transform: none;
75
+ min-width: 80px;
69
76
  }
70
77
 
71
- .x-3deye-button.x-3deye-button--save.fullwidth, .x-3deye-button.x-3deye-button--cancel.fullwidth {
72
- width: calc(100% - 8px);
78
+ .x-3deye-button.x-3deye-button--ok.fullwidth,
79
+ .x-3deye-button.x-3deye-button--cancel.fullwidth {
80
+ width: calc(100% - 8px);
73
81
  }
74
82
 
75
83
  .x-3deye-button:not(:disabled) {
76
- cursor: pointer;
84
+ cursor: pointer;
85
+ }
86
+
87
+ .x-3deye-button.x-3deye-button--ok {
88
+ background-color: #27b9a1;
77
89
  }
78
90
 
79
- .x-3deye-button.x-3deye-button--save {
80
- background-color: #27B9A1;
91
+ .x-3deye-button.x-3deye-button--ok:not(:disabled):hover {
92
+ background-color: #61beaf;
81
93
  }
82
94
 
83
- .x-3deye-button.x-3deye-button--save:focus {
84
- transition: box-shadow 0.2s cubic-bezier(0.215, 0.610, 0.355, 1);
85
- box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
95
+ .x-3deye-button.x-3deye-button--ok:focus {
96
+ transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
97
+ box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
86
98
  }
87
99
 
88
100
  .x-3deye-button.x-3deye-button--cancel {
89
- background-color: rgb(119, 87, 178);
101
+ background-color: rgb(119, 87, 178);
90
102
  }
91
103
 
92
- .x-3deye-button.x-3deye-button--cancel:focus {
93
- transition: box-shadow 0.2s cubic-bezier(0.215, 0.610, 0.355, 1);
94
- box-shadow: 0 0 0 2px rgba(119, 87, 178, 0.33);
104
+ .x-3deye-button.x-3deye-button--cancel:not(:disabled):hover {
105
+ background-color: rgb(142, 122, 180);
95
106
  }
96
107
 
108
+ .x-3deye-button.x-3deye-button--cancel:focus {
109
+ transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
110
+ box-shadow: 0 0 0 2px rgba(119, 87, 178, 0.33);
111
+ }
97
112
 
98
113
  .x-3deye-button canvas {
99
- color: rgb(var(--surface-highlight-rgb));
114
+ color: rgb(var(--surface-highlight-rgb));
100
115
  }
101
116
 
102
117
  :root {
@@ -323,149 +338,154 @@
323
338
  }
324
339
 
325
340
  .x-3deye-player__overlay {
326
- position: absolute;
327
- top: 0;
328
- left: 0;
329
- bottom: 0;
330
- right: 0;
331
- color: white;
341
+ position: absolute;
342
+ top: 0;
343
+ left: 0;
344
+ bottom: 0;
345
+ right: 0;
346
+ color: white;
332
347
  }
333
348
 
334
349
  .x-3deye-player__controls {
335
- position: absolute;
336
- left: 0;
337
- bottom: 0;
338
- right: 0;
339
- height: 54px;
340
- opacity: 0;
341
- display: flex;
342
- pointer-events: none;
350
+ position: absolute;
351
+ left: 0;
352
+ bottom: 0;
353
+ right: 0;
354
+ height: 54px;
355
+ opacity: 0;
356
+ display: flex;
357
+ pointer-events: none;
343
358
  }
344
359
 
345
360
  .x-3deye-player__controls > * {
346
- pointer-events: auto;
361
+ pointer-events: auto;
347
362
  }
348
363
 
349
- .x-3deye-player__overlay:hover .x-3deye-player__controls, .x-3deye-player__controls:focus-within, .x-3deye-player--paused .x-3deye-player__controls {
350
- opacity: 1;
364
+ .x-3deye-player__overlay:hover .x-3deye-player__controls,
365
+ .x-3deye-player__controls:focus-within,
366
+ .x-3deye-player--paused .x-3deye-player__controls {
367
+ opacity: 1;
351
368
  }
352
369
 
353
370
  .x-3deye-player__indicators {
354
- display: flex;
355
- pointer-events: none;
356
- align-items: center;
371
+ display: flex;
372
+ pointer-events: none;
373
+ align-items: center;
357
374
  }
358
375
 
359
376
  .x-3deye-player__indicators > * {
360
- margin: 5px;
377
+ margin: 5px;
361
378
  }
362
379
 
363
380
  .x-3deye-player__overlay .x-3deye-button--live {
364
- opacity: 0;
365
- margin: 3px 5px;
381
+ opacity: 0;
382
+ margin: 3px 5px;
366
383
  }
367
384
 
368
- .x-3deye-player__overlay:hover .x-3deye-button--live, .x-3deye-button--live:focus {
369
- opacity: 1;
385
+ .x-3deye-player__overlay:hover .x-3deye-button--live,
386
+ .x-3deye-button--live:focus {
387
+ opacity: 1;
370
388
  }
371
389
 
372
390
  .x-3deye-player__overlay .x-3deye-player__camera-name {
373
- pointer-events: auto;
391
+ pointer-events: auto;
374
392
  }
375
393
 
376
394
  .x-3deye-player__current-time {
377
- line-height: 16px;
378
- font-size: 11px;
379
- text-shadow: 1px 1px 1px black;
380
- background-color: rgba(0, 0, 0, 0.25);
381
- padding: 2px 16px;
382
- border-radius: 16px;
395
+ line-height: 16px;
396
+ font-size: 11px;
397
+ text-shadow: 1px 1px 1px black;
398
+ background-color: rgba(0, 0, 0, 0.25);
399
+ padding: 2px 16px;
400
+ border-radius: 16px;
383
401
  }
384
402
 
385
403
  .x-3deye-player__current-time--synced {
386
- background-color: rgb(147, 221, 30, 0.6);
404
+ background-color: rgb(147, 221, 30, 0.6);
387
405
  }
388
406
 
389
407
  .x-3deye-player__zoom-preview {
390
- display: flex;
391
- flex-direction: column;
392
- position: absolute;
393
- right: 40px;
394
- top: 50%;
395
- transform: translateY(-50%);
396
- background-color: rgba(0, 0, 0, 0.7);
397
- border: 1px solid white;
408
+ display: flex;
409
+ flex-direction: column;
410
+ position: absolute;
411
+ right: 44px;
412
+ top: 50%;
413
+ transform: translateY(-50%);
414
+ background-color: rgba(0, 0, 0, 0.7);
415
+ border: 1px solid white;
398
416
  }
399
417
 
400
418
  .x-3deye-player__zoom-preview .zoom-value {
401
- position: absolute;
402
- top: 0;
403
- left: 0;
404
- right: 0;
405
- bottom: 0;
406
- display: flex;
407
- justify-content: center;
408
- align-items: center;
409
- font-family: monospace;
410
- font-size: 32px;
411
- font-weight: bold;
412
- color: white;
413
- text-shadow: 0 1px 1px black;
419
+ position: absolute;
420
+ top: 0;
421
+ left: 0;
422
+ right: 0;
423
+ bottom: 0;
424
+ display: flex;
425
+ justify-content: center;
426
+ align-items: center;
427
+ font-family: monospace;
428
+ font-size: 32px;
429
+ font-weight: bold;
430
+ color: white;
431
+ text-shadow: 0 1px 1px black;
414
432
  }
415
433
 
416
434
  .x-3deye-player__zoom-preview .x-3deye-player__zoomable {
417
- position: relative;
418
- flex: 1;
419
- background-color: rgba(255, 255, 255, 0.5);
435
+ position: relative;
436
+ flex: 1;
437
+ background-color: rgba(255, 255, 255, 0.5);
420
438
  }
421
439
 
422
440
  .x-3deye-player__zoom-slider {
423
- position: absolute;
424
- right: 10px;
425
- top: 50%;
426
- transform: translateY(-50%);
427
- width: 30px;
428
- padding: 10px 5px;
429
- background-color: rgba(0, 0, 0, 0.5);
430
- border-radius: 4px;
431
- -webkit-backdrop-filter: blur(2px);
432
- backdrop-filter: blur(2px);
441
+ position: absolute;
442
+ right: 10px;
443
+ top: 50%;
444
+ transform: translateY(-50%);
445
+ width: 34px;
446
+ padding: 10px 5px;
447
+ background-color: rgba(0, 0, 0, 0.5);
448
+ border: 2px solid rgba(255, 255, 255, 0.25);
449
+ border-radius: 4px;
450
+ -webkit-backdrop-filter: blur(2px);
451
+ backdrop-filter: blur(2px);
433
452
  }
434
453
 
435
454
  .x-3deye-player__zoom-slider .tick {
436
- margin-left: 4px;
437
- width: 12px;
438
- height: 10px;
439
- border-top: 1px solid rgba(255, 255, 255, 0.4);
455
+ margin-left: 4px;
456
+ width: 12px;
457
+ height: 10px;
458
+ border-top: 1px solid rgba(255, 255, 255, 0.4);
440
459
  }
441
460
 
442
461
  .x-3deye-player__zoom-slider .tick:nth-child(5n + 1) {
443
- margin-left: 0px;
444
- width: 20px;
445
- border-top-width: 2px;
462
+ margin-left: 0px;
463
+ width: 20px;
464
+ border-top-width: 2px;
446
465
  }
447
466
 
448
467
  .x-3deye-player__zoom-slider .tick:last-child {
449
- height: 0;
468
+ height: 0;
450
469
  }
451
470
 
452
471
  .x-3deye-player__zoom-slider .rotation-button {
453
- margin-left: -4px;
454
- margin-bottom: -4px;
455
- width: 28px;
456
- text-align: right;
457
- color: white;
472
+ padding: 0;
473
+ margin-left: -4px;
474
+ margin-bottom: -4px;
475
+ width: 28px;
476
+ text-align: right;
477
+ color: white;
458
478
  }
459
479
 
460
480
  .x-3deye-player__zoom-preview {
461
- display: none;
481
+ display: none;
462
482
  }
463
483
 
464
484
  .x-3deye-player__zoom-slider:hover + .x-3deye-player__zoom-preview,
465
485
  .x-3deye-player__zoom-slider + .x-3deye-player__zoom-preview:focus,
466
486
  .x-3deye-player__zoom-preview:hover,
467
487
  .x-3deye-player__zoom-preview:focus {
468
- display: block;
488
+ display: block;
469
489
  }
470
490
 
471
491
  .x-3deye-player__controls {
@@ -478,11 +498,12 @@
478
498
  flex: 1;
479
499
  }
480
500
 
481
- .x-3deye-player__control {
501
+ .x-3deye-button.x-3deye-player__control {
482
502
  width: 38px;
483
503
  height: 38px;
484
504
  background-color: rgb(26,30,29, 0.8);
485
505
  color: rgba(255, 255, 255, 0.6);
506
+ border-radius: 0;
486
507
  display: flex;
487
508
  justify-content: center;
488
509
  align-items: center;
@@ -500,12 +521,12 @@
500
521
  border-left: 1px solid rgb(26,30,29);
501
522
  }
502
523
 
503
- .x-3deye-player__control:hover {
524
+ .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control:hover {
504
525
  background-color: #2a2e2d;
505
526
  color: white;
506
527
  }
507
528
 
508
- .x-3deye-player__control:focus {
529
+ .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control:focus {
509
530
  box-shadow: 0 0 0 0.2rem rgba(52,58,64,.5);
510
531
  background-color: rgb(26,30,29, 0.8);
511
532
  z-index: 1;
@@ -531,28 +552,28 @@
531
552
  border-bottom-right-radius: 4px;
532
553
  }
533
554
 
534
- .x-3deye-player__control-close {
555
+ .x-3deye-button.x-3deye-player__control-close {
535
556
  background-color: rgba(156, 51, 49, 0.8);
536
557
  }
537
558
 
538
- .x-3deye-player__control-close:hover {
559
+ .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-close:hover {
539
560
  background-color: rgba(156, 51, 49);
540
561
  }
541
562
 
542
- .x-3deye-player__control-close:focus {
563
+ .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-close:focus {
543
564
  background-color: rgba(156, 51, 49, 0.8);
544
565
  box-shadow: 0 0 0 0.2rem rgba(101, 20, 46, 0.5);
545
566
  }
546
567
 
547
- .x-3deye-player--paused .x-3deye-player__control-playpause {
568
+ .x-3deye-player--paused .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-playpause {
548
569
  background-color: rgba(49, 106, 156, 0.8);
549
570
  }
550
571
 
551
- .x-3deye-player--paused .x-3deye-player__control-playpause:hover {
572
+ .x-3deye-player--paused .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-playpause:hover {
552
573
  background-color: rgba(49, 106, 156);
553
574
  }
554
575
 
555
- .x-3deye-player--paused .x-3deye-player__control-playpause:focus {
576
+ .x-3deye-player--paused .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-playpause:focus {
556
577
  background-color: rgba(49, 106, 156, 0.8);
557
578
  box-shadow: 0 0 0 0.2rem rgba(20, 69, 101, 0.5);
558
579
  }
@@ -668,9 +689,12 @@
668
689
 
669
690
  .ptz-popover.x-3deye-popover-body {
670
691
  border-radius: 6px;
671
- background-color: rgba(15, 15, 20, 0.5);
692
+ background-color: rgba(15, 15, 20, 0.7);
672
693
  box-shadow: none;
673
694
  color: rgba(255, 255, 255, 0.8);
695
+ border: 1px solid rgba(255, 255, 255, 0.2);
696
+ -webkit-backdrop-filter: blur(1px);
697
+ backdrop-filter: blur(1px);
674
698
  }
675
699
 
676
700
  .ptz-popover .tip {