@3deye-toolkit/react-camera 0.0.1-alpha.20 → 0.0.1-alpha.23

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 +214 -135
  2. package/dist/react-camera.d.ts +138 -36
  3. package/dist/react-camera.js +2 -2
  4. package/dist/tsdoc-metadata.json +1 -1
  5. package/package.json +17 -17
package/dist/react-camera.css CHANGED
@@ -24,79 +24,89 @@
24
24
  }
25
25
 
26
26
  .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;
27
+ color: inherit;
28
+ background: none;
29
+ border: none;
30
+ position: relative;
31
+ padding: 0 8px;
32
+ height: 32px;
33
+ text-transform: uppercase;
34
+ -webkit-user-select: none;
35
+ -moz-user-select: none;
36
+ -ms-user-select: none;
37
+ user-select: none;
38
+ text-align: center;
39
+ align-items: flex-start;
40
+ border-radius: 4px;
40
41
  }
41
42
 
42
43
  .x-3deye-button.fullwidth {
43
- width: 100%;
44
+ width: 100%;
44
45
  }
45
46
 
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);
47
+ .x-3deye-button:focus,
48
+ .x-3deye-button.x-3deye-button:not(:disabled):hover {
49
+ background-color: rgba(var(--surface-highlight-rgb), 0.1);
48
50
  }
49
51
 
50
52
  .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;
53
+ border-radius: 16px;
54
+ padding: 4px;
55
+ width: 32px;
56
+ height: 32px;
57
+ display: inline-flex;
58
+ align-items: center;
59
+ justify-content: center;
57
60
  }
58
61
 
59
62
  .x-3deye-button:disabled {
60
- opacity: 0.6;
63
+ opacity: 0.4;
61
64
  }
62
65
 
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;
66
+ .x-3deye-button.x-3deye-button--ok,
67
+ .x-3deye-button.x-3deye-button--cancel {
68
+ color: white;
69
+ text-transform: none;
70
+ min-width: 80px;
69
71
  }
70
72
 
71
- .x-3deye-button.x-3deye-button--save.fullwidth, .x-3deye-button.x-3deye-button--cancel.fullwidth {
72
- width: calc(100% - 8px);
73
+ .x-3deye-button.x-3deye-button--ok.fullwidth,
74
+ .x-3deye-button.x-3deye-button--cancel.fullwidth {
75
+ width: calc(100% - 8px);
73
76
  }
74
77
 
75
78
  .x-3deye-button:not(:disabled) {
76
- cursor: pointer;
79
+ cursor: pointer;
77
80
  }
78
81
 
79
- .x-3deye-button.x-3deye-button--save {
80
- background-color: #27B9A1;
82
+ .x-3deye-button.x-3deye-button--ok {
83
+ background-color: #27b9a1;
81
84
  }
82
85
 
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);
86
+ .x-3deye-button.x-3deye-button--ok:not(:disabled):hover {
87
+ background-color: #61beaf;
88
+ }
89
+
90
+ .x-3deye-button.x-3deye-button--ok:focus {
91
+ transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
92
+ box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
86
93
  }
87
94
 
88
95
  .x-3deye-button.x-3deye-button--cancel {
89
- background-color: rgb(119, 87, 178);
96
+ background-color: rgb(119, 87, 178);
90
97
  }
91
98
 
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);
99
+ .x-3deye-button.x-3deye-button--cancel:not(:disabled):hover {
100
+ background-color: rgb(142, 122, 180);
95
101
  }
96
102
 
103
+ .x-3deye-button.x-3deye-button--cancel:focus {
104
+ transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
105
+ box-shadow: 0 0 0 2px rgba(119, 87, 178, 0.33);
106
+ }
97
107
 
98
108
  .x-3deye-button canvas {
99
- color: rgb(var(--surface-highlight-rgb));
109
+ color: rgb(var(--surface-highlight-rgb));
100
110
  }
101
111
 
102
112
  :root {
@@ -323,149 +333,154 @@
323
333
  }
324
334
 
325
335
  .x-3deye-player__overlay {
326
- position: absolute;
327
- top: 0;
328
- left: 0;
329
- bottom: 0;
330
- right: 0;
331
- color: white;
336
+ position: absolute;
337
+ top: 0;
338
+ left: 0;
339
+ bottom: 0;
340
+ right: 0;
341
+ color: white;
332
342
  }
333
343
 
334
344
  .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;
345
+ position: absolute;
346
+ left: 0;
347
+ bottom: 0;
348
+ right: 0;
349
+ height: 54px;
350
+ opacity: 0;
351
+ display: flex;
352
+ pointer-events: none;
343
353
  }
344
354
 
345
355
  .x-3deye-player__controls > * {
346
- pointer-events: auto;
356
+ pointer-events: auto;
347
357
  }
348
358
 
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;
359
+ .x-3deye-player__overlay:hover .x-3deye-player__controls,
360
+ .x-3deye-player__controls:focus-within,
361
+ .x-3deye-player--paused .x-3deye-player__controls {
362
+ opacity: 1;
351
363
  }
352
364
 
353
365
  .x-3deye-player__indicators {
354
- display: flex;
355
- pointer-events: none;
356
- align-items: center;
366
+ display: flex;
367
+ pointer-events: none;
368
+ align-items: center;
357
369
  }
358
370
 
359
371
  .x-3deye-player__indicators > * {
360
- margin: 5px;
372
+ margin: 5px;
361
373
  }
362
374
 
363
375
  .x-3deye-player__overlay .x-3deye-button--live {
364
- opacity: 0;
365
- margin: 3px 5px;
376
+ opacity: 0;
377
+ margin: 3px 5px;
366
378
  }
367
379
 
368
- .x-3deye-player__overlay:hover .x-3deye-button--live, .x-3deye-button--live:focus {
369
- opacity: 1;
380
+ .x-3deye-player__overlay:hover .x-3deye-button--live,
381
+ .x-3deye-button--live:focus {
382
+ opacity: 1;
370
383
  }
371
384
 
372
385
  .x-3deye-player__overlay .x-3deye-player__camera-name {
373
- pointer-events: auto;
386
+ pointer-events: auto;
374
387
  }
375
388
 
376
389
  .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;
390
+ line-height: 16px;
391
+ font-size: 11px;
392
+ text-shadow: 1px 1px 1px black;
393
+ background-color: rgba(0, 0, 0, 0.25);
394
+ padding: 2px 16px;
395
+ border-radius: 16px;
383
396
  }
384
397
 
385
398
  .x-3deye-player__current-time--synced {
386
- background-color: rgb(147, 221, 30, 0.6);
399
+ background-color: rgb(147, 221, 30, 0.6);
387
400
  }
388
401
 
389
402
  .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;
403
+ display: flex;
404
+ flex-direction: column;
405
+ position: absolute;
406
+ right: 44px;
407
+ top: 50%;
408
+ transform: translateY(-50%);
409
+ background-color: rgba(0, 0, 0, 0.7);
410
+ border: 1px solid white;
398
411
  }
399
412
 
400
413
  .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;
414
+ position: absolute;
415
+ top: 0;
416
+ left: 0;
417
+ right: 0;
418
+ bottom: 0;
419
+ display: flex;
420
+ justify-content: center;
421
+ align-items: center;
422
+ font-family: monospace;
423
+ font-size: 32px;
424
+ font-weight: bold;
425
+ color: white;
426
+ text-shadow: 0 1px 1px black;
414
427
  }
415
428
 
416
429
  .x-3deye-player__zoom-preview .x-3deye-player__zoomable {
417
- position: relative;
418
- flex: 1;
419
- background-color: rgba(255, 255, 255, 0.5);
430
+ position: relative;
431
+ flex: 1;
432
+ background-color: rgba(255, 255, 255, 0.5);
420
433
  }
421
434
 
422
435
  .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);
436
+ position: absolute;
437
+ right: 10px;
438
+ top: 50%;
439
+ transform: translateY(-50%);
440
+ width: 34px;
441
+ padding: 10px 5px;
442
+ background-color: rgba(0, 0, 0, 0.5);
443
+ border: 2px solid rgba(255, 255, 255, 0.25);
444
+ border-radius: 4px;
445
+ -webkit-backdrop-filter: blur(2px);
446
+ backdrop-filter: blur(2px);
433
447
  }
434
448
 
435
449
  .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);
450
+ margin-left: 4px;
451
+ width: 12px;
452
+ height: 10px;
453
+ border-top: 1px solid rgba(255, 255, 255, 0.4);
440
454
  }
441
455
 
442
456
  .x-3deye-player__zoom-slider .tick:nth-child(5n + 1) {
443
- margin-left: 0px;
444
- width: 20px;
445
- border-top-width: 2px;
457
+ margin-left: 0px;
458
+ width: 20px;
459
+ border-top-width: 2px;
446
460
  }
447
461
 
448
462
  .x-3deye-player__zoom-slider .tick:last-child {
449
- height: 0;
463
+ height: 0;
450
464
  }
451
465
 
452
466
  .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;
467
+ padding: 0;
468
+ margin-left: -4px;
469
+ margin-bottom: -4px;
470
+ width: 28px;
471
+ text-align: right;
472
+ color: white;
458
473
  }
459
474
 
460
475
  .x-3deye-player__zoom-preview {
461
- display: none;
476
+ display: none;
462
477
  }
463
478
 
464
479
  .x-3deye-player__zoom-slider:hover + .x-3deye-player__zoom-preview,
465
480
  .x-3deye-player__zoom-slider + .x-3deye-player__zoom-preview:focus,
466
481
  .x-3deye-player__zoom-preview:hover,
467
482
  .x-3deye-player__zoom-preview:focus {
468
- display: block;
483
+ display: block;
469
484
  }
470
485
 
471
486
  .x-3deye-player__controls {
@@ -478,11 +493,12 @@
478
493
  flex: 1;
479
494
  }
480
495
 
481
- .x-3deye-player__control {
496
+ .x-3deye-button.x-3deye-player__control {
482
497
  width: 38px;
483
498
  height: 38px;
484
499
  background-color: rgb(26,30,29, 0.8);
485
500
  color: rgba(255, 255, 255, 0.6);
501
+ border-radius: 0;
486
502
  display: flex;
487
503
  justify-content: center;
488
504
  align-items: center;
@@ -500,12 +516,12 @@
500
516
  border-left: 1px solid rgb(26,30,29);
501
517
  }
502
518
 
503
- .x-3deye-player__control:hover {
519
+ .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control:hover {
504
520
  background-color: #2a2e2d;
505
521
  color: white;
506
522
  }
507
523
 
508
- .x-3deye-player__control:focus {
524
+ .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control:focus {
509
525
  box-shadow: 0 0 0 0.2rem rgba(52,58,64,.5);
510
526
  background-color: rgb(26,30,29, 0.8);
511
527
  z-index: 1;
@@ -535,24 +551,24 @@
535
551
  background-color: rgba(156, 51, 49, 0.8);
536
552
  }
537
553
 
538
- .x-3deye-player__control-close:hover {
554
+ .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-close:hover {
539
555
  background-color: rgba(156, 51, 49);
540
556
  }
541
557
 
542
- .x-3deye-player__control-close:focus {
558
+ .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-close:focus {
543
559
  background-color: rgba(156, 51, 49, 0.8);
544
560
  box-shadow: 0 0 0 0.2rem rgba(101, 20, 46, 0.5);
545
561
  }
546
562
 
547
- .x-3deye-player--paused .x-3deye-player__control-playpause {
563
+ .x-3deye-player--paused .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-playpause {
548
564
  background-color: rgba(49, 106, 156, 0.8);
549
565
  }
550
566
 
551
- .x-3deye-player--paused .x-3deye-player__control-playpause:hover {
567
+ .x-3deye-player--paused .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-playpause:hover {
552
568
  background-color: rgba(49, 106, 156);
553
569
  }
554
570
 
555
- .x-3deye-player--paused .x-3deye-player__control-playpause:focus {
571
+ .x-3deye-player--paused .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-playpause:focus {
556
572
  background-color: rgba(49, 106, 156, 0.8);
557
573
  box-shadow: 0 0 0 0.2rem rgba(20, 69, 101, 0.5);
558
574
  }
@@ -667,13 +683,76 @@
667
683
  }
668
684
 
669
685
  .ptz-popover.x-3deye-popover-body {
670
- border-radius: 2px;
671
- background-color: rgba(15, 15, 20, 0.5);
686
+ border-radius: 6px;
687
+ background-color: rgba(15, 15, 20, 0.7);
672
688
  box-shadow: none;
673
689
  color: rgba(255, 255, 255, 0.8);
674
- white-space: nowrap;
690
+ border: 1px solid rgba(255, 255, 255, 0.2);
691
+ -webkit-backdrop-filter: blur(1px);
692
+ backdrop-filter: blur(1px);
675
693
  }
676
694
 
677
695
  .ptz-popover .tip {
678
696
  fill: rgba(15, 15, 20, 0.5);
679
697
  }
698
+
699
+ .segmented-control-wrapper {
700
+ display: inline-grid;
701
+ border-radius: 6px;
702
+ background: rgba(0, 0, 0, 0.065);
703
+ }
704
+
705
+ .segmented-control {
706
+ display: grid;
707
+ margin: 2px;
708
+ position: relative;
709
+ grid-auto-flow: column;
710
+ grid-auto-columns: 1fr;
711
+ --indicator-offset: 0%;
712
+ }
713
+
714
+ .segmented-control-indicator {
715
+ position: absolute;
716
+ height: 100%;
717
+ pointer-events: none;
718
+ transform: translateX(var(--indicator-offset));
719
+ transition: 0.2s ease-in-out;
720
+ }
721
+
722
+ .segmented-control-indicator-inner {
723
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.16);
724
+ border-radius: 6px;
725
+ background: #fff;
726
+ transition: 0.2s;
727
+ transform: scale(1);
728
+ position: absolute;
729
+ inset: 0;
730
+ }
731
+
732
+ .segmented-control-indicator.active .segmented-control-indicator-inner {
733
+ transform: scale(0.95);
734
+ }
735
+
736
+ .segmented-control-button {
737
+ font-family: inherit;
738
+ min-height: 24px;
739
+ margin: 2px;
740
+ background: none;
741
+ border: none;
742
+ color: currentColor;
743
+ -webkit-user-select: none;
744
+ -moz-user-select: none;
745
+ -ms-user-select: none;
746
+ user-select: none;
747
+ text-overflow: ellipsis;
748
+ overflow: hidden;
749
+ z-index: 1;
750
+ }
751
+
752
+ .segmented-control-button:not(.current):hover {
753
+ opacity: 0.6;
754
+ }
755
+
756
+ .segmented-control-button.current {
757
+ color: black;
758
+ }