@3deye-toolkit/react-camera 0.0.1-alpha.29 → 0.0.1-alpha.30

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/react-camera.css +114 -91
  2. package/dist/react-camera.d.ts +59 -502
  3. package/dist/react-camera.js +2 -2
  4. package/package.json +9 -10
package/dist/react-camera.css CHANGED
@@ -34,24 +34,23 @@
34
34
  border: none;
35
35
  position: relative;
36
36
  padding: 0 8px;
37
- height: 32px;
38
- text-transform: uppercase;
37
+ height: 32px;
39
38
  -webkit-user-select: none;
40
39
  -moz-user-select: none;
41
40
  -ms-user-select: none;
42
41
  user-select: none;
43
- display: inline-flex;
42
+ display: inline-flex;
44
43
  justify-content: center;
45
44
  align-items: center;
46
- border-radius: 4px;
47
- letter-spacing: .0107142857em;
48
- font-weight: 500;
45
+ border-radius: 4px;
46
+ letter-spacing: 0.0107142857em;
47
+ font-weight: 500;
49
48
  }
50
49
 
51
50
  .x-3deye-button sup {
52
- position: relative;
53
- top: -0.5em;
54
- left: 0.25em;
51
+ position: relative;
52
+ top: -0.5em;
53
+ left: 0.25em;
55
54
  }
56
55
 
57
56
  .x-3deye-button.x-3deye-button--fullwidth {
@@ -65,7 +64,7 @@
65
64
 
66
65
  .x-3deye-button--icon {
67
66
  border-radius: 16px;
68
- padding: 4px;
67
+ padding: 4px;
69
68
  width: 32px;
70
69
  height: 32px;
71
70
  display: inline-flex;
@@ -83,22 +82,22 @@
83
82
 
84
83
  .x-3deye-button.x-3deye-button--filled,
85
84
  .x-3deye-button.x-3deye-button--text {
86
- min-width: 80px;
87
- text-transform: capitalize;
88
- font-family: 'Roboto', sans-serif;
89
- font-size: 0.875rem;
90
- font-weight: 500;
91
- border-radius: 0.25rem;
92
- padding: 0 1rem;
85
+ min-width: 80px;
86
+ text-transform: capitalize;
87
+ font-family: 'Roboto', sans-serif;
88
+ font-size: 0.875rem;
89
+ font-weight: 500;
90
+ border-radius: 0.25rem;
91
+ padding: 0 1rem;
93
92
  }
94
93
 
95
94
  .x-3deye-button.x-3deye-button--filled {
96
- background-color: #27b9a1;
97
- color: white;
95
+ background-color: rgb(39, 185, 161);
96
+ color: white;
98
97
  }
99
98
 
100
99
  .x-3deye-button.x-3deye-button--filled:not(:disabled):hover {
101
- background-color: #61beaf;
100
+ background-color: rgb(34, 163, 142);
102
101
  }
103
102
 
104
103
  .x-3deye-button.x-3deye-button--filled:focus {
@@ -117,26 +116,25 @@
117
116
  color: white;
118
117
  }
119
118
 
120
- .x-3deye-button.x-3deye-button--overlay:focus, .x-3deye-button.x-3deye-button--overlay:not(:disabled):hover {
121
- background: rgba(0, 0, 0, 0.5);
119
+ .x-3deye-button.x-3deye-button--overlay:focus,
120
+ .x-3deye-button.x-3deye-button--overlay:not(:disabled):hover {
121
+ background: rgba(0, 0, 0, 0.5);
122
122
  border: 2px solid rgba(255, 255, 255, 0.5);
123
123
  }
124
124
 
125
- :root {
126
- --reach-tooltip: 1;
125
+ .x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(:disabled),
126
+ .x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(:disabled):hover {
127
+ background-color: rgba(156, 51, 49, 0.5);
127
128
  }
128
129
 
129
- [data-reach-tooltip] {
130
- z-index: 1;
131
- pointer-events: none;
132
- position: absolute;
133
- padding: 0.25em 0.5em;
134
- box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);
135
- white-space: nowrap;
136
- font-size: 85%;
137
- background: #f0f0f0;
138
- color: #444;
139
- border: solid 1px #ccc;
130
+ .x-3deye-tooltip {
131
+ background: rgb(0 0 0 / 0.9);
132
+ color: white;
133
+ border: none;
134
+ border-radius: 4px;
135
+ padding: 0.5em 1em;
136
+ font-size: 12px;
137
+ border: rgb(255 255 255 / 0.15) 1px solid;
140
138
  }
141
139
 
142
140
  .spinner {
@@ -200,52 +198,66 @@
200
198
  }
201
199
  }
202
200
 
203
- .x-3deye-player__camera-name-popover.x-3deye-popover-body {
204
- border-radius: 2px;
205
- background-color: rgba(15, 15, 20, 0.8);
206
- box-shadow: none;
207
- color: white;
208
- white-space: nowrap;
201
+ .x-3deye-player__camera-name-popover {
202
+ background-color: rgba(15, 15, 20, 0.8);
203
+ box-shadow: none;
204
+ color: white;
205
+ white-space: nowrap;
209
206
  }
210
207
 
211
- .x-3deye-player__camera-name-popover.x-3deye-popover-body svg {
212
- fill: rgba(15, 15, 20, 0.8);
208
+ .x-3deye-popover-container.x-3deye-player__camera-name-popover svg {
209
+ --tip-background: rgb(15, 15, 20);
210
+ opacity: 0.8;
213
211
  }
214
212
 
215
- .x-3deye-player__camera-name-popover.x-3deye-popover-body button.x-3deye-button {
216
- pointer-events: auto;
217
- font-size: inherit;
213
+ .x-3deye-player__camera-name-popover button.x-3deye-button {
214
+ pointer-events: auto;
215
+ font-size: inherit;
218
216
  }
219
217
 
220
- .x-3deye-player__camera-name-popover.x-3deye-popover-body button.x-3deye-button:hover {
221
- text-decoration: underline;
218
+ .x-3deye-player__camera-name-popover button.x-3deye-button:hover {
219
+ text-decoration: underline;
222
220
  }
223
221
 
224
222
  .x-3deye-player__camera-name {
225
- background-color: rgba(0, 0, 0, 0.25);
226
- text-shadow: 1px 1px 1px black;
227
- opacity: 0.8;
228
- padding: 2px 16px;
229
- border-radius: 16px;
230
- line-height: 16px;
231
- cursor: pointer;
232
- -webkit-backdrop-filter: blur(3px);
233
- backdrop-filter: blur(3px);
223
+ background-color: rgba(0, 0, 0, 0.25);
224
+ text-shadow: 1px 1px 1px black;
225
+ opacity: 0.8;
226
+ padding: 2px 16px;
227
+ border-radius: 16px;
228
+ line-height: 16px;
229
+ cursor: pointer;
230
+ -webkit-backdrop-filter: blur(3px);
231
+ backdrop-filter: blur(3px);
234
232
  }
235
233
 
236
234
  .x-3deye-player__camera-name:hover {
237
- text-decoration: underline;
235
+ text-decoration: underline;
238
236
  }
239
237
 
240
- .x-3deye-popover {
241
- position: relative;
238
+ .x-3deye-popover-container {
239
+ background: #222;
240
+ box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgb(0 0 0 / 0.1),
241
+ inset 0 0 0 1px rgb(255 255 255 /0.05);
242
+ color: white;
243
+ border-radius: 6px;
244
+ padding: 8px;
245
+ text-align: left;
246
+ -webkit-animation: slide-in 0.15s ease-in;
247
+ animation: slide-in 0.15s ease-in;
242
248
  }
243
249
 
244
- .x-3deye-popover-body {
245
- background-color: white;
246
- padding: 8px;
247
- border-radius: 8px;
248
- box-shadow: 0 0 8px 0px black;
250
+ @media(prefers-reduced-motion: reduce) {
251
+ .x-3deye-popover-container {
252
+ -webkit-animation: none;
253
+ animation: none;
254
+ }
255
+ }
256
+
257
+
258
+ .x-3deye-popover-container .tip {
259
+ --tip-background: #222;
260
+ --tip-border: rgb(255 255 255 /0.05);
249
261
  }
250
262
 
251
263
  .x-3deye-player__stats > summary:hover {
@@ -269,40 +281,41 @@
269
281
  }
270
282
 
271
283
  .x-3deye-live-indicator {
272
- -webkit-user-select: none;
273
- -moz-user-select: none;
274
- -ms-user-select: none;
275
- user-select: none;
276
- padding: 0 5px;
277
- color: rgba(0, 0, 0, 0.7);
278
- background-color: white;
279
- font-weight: bold;
280
- text-transform: uppercase;
281
- opacity: 0.8;
284
+ -webkit-user-select: none;
285
+ -moz-user-select: none;
286
+ -ms-user-select: none;
287
+ user-select: none;
288
+ padding: 0 5px;
289
+ color: rgba(0, 0, 0, 0.7);
290
+ background-color: white;
291
+ font-weight: bold;
292
+ text-transform: uppercase;
293
+ opacity: 0.8;
282
294
  }
283
295
 
284
296
  .x-3deye-button--live {
285
- height: 24px;
286
- padding: 0 12px;
287
- background-color: rgba(0, 0, 0, 0.25);
288
- border-radius: 15px;
289
- margin: 0;
290
- color: orange;
291
- text-shadow: 1px 1px 1px black;
297
+ height: 24px;
298
+ padding: 0 12px;
299
+ background-color: rgba(0, 0, 0, 0.25);
300
+ border-radius: 15px;
301
+ margin: 0;
302
+ color: orange;
303
+ text-shadow: 1px 1px 1px black;
304
+ text-transform: uppercase;
292
305
  }
293
306
 
294
307
  .x-3deye-player__overlay .x-3deye-button-go-live:focus {
295
- box-shadow: 0 0 2px orange;
308
+ box-shadow: 0 0 2px orange;
296
309
  }
297
310
 
298
311
  .x-3deye-delay-indicator:hover {
299
- text-decoration: underline;
312
+ text-decoration: underline;
300
313
  }
301
314
 
302
315
  .x-3deye-delay-indicator {
303
- background-color: rgba(0, 0, 0, 0.25);
304
- border-radius: 15px;
305
- padding: 2px 8px;
316
+ background-color: rgba(0, 0, 0, 0.25);
317
+ border-radius: 15px;
318
+ padding: 2px 8px;
306
319
  }
307
320
 
308
321
  .x-3deye-player__playback-indicator {
@@ -590,6 +603,16 @@
590
603
  box-shadow: 0 0 0 0.2rem rgba(20, 69, 101, 0.5);
591
604
  }
592
605
 
606
+ .x-3deye-popover-container.popover-playbackrate {
607
+ background: white;
608
+ color: black;
609
+ }
610
+
611
+ .x-3deye-popover-container.popover-playbackrate .tip {
612
+ --tip-background: white;
613
+ --tip-border: transparent;
614
+ }
615
+
593
616
  .volume-control:hover .volume-range,
594
617
  .volume-control:focus .volume-range,
595
618
  .volume-control:focus-within .volume-range {
@@ -742,7 +765,7 @@
742
765
  border-top: 5px solid var(--primary-color, #0067ac);
743
766
  }
744
767
 
745
- .ptz-popover.x-3deye-popover-body {
768
+ .ptz-popover.x-3deye-popover-container {
746
769
  border-radius: 6px;
747
770
  background-color: rgba(15, 15, 20, 0.7);
748
771
  box-shadow: none;
@@ -753,11 +776,12 @@
753
776
  }
754
777
 
755
778
  .ptz-popover .tip {
756
- fill: rgba(15, 15, 20, 0.5);
779
+ --tip-background: rgba(15, 15, 20, 0.5);
780
+ --tip-border: rgba(255, 255, 255, 0.2);
757
781
  }
758
782
 
759
783
  .ptz-popover {
760
- --surface-inverse: rgba(255, 255, 255, 0.15);
784
+ --surface-inverse: rgba(255, 255, 255, 0.15);
761
785
  --surface-highlight-rgb: 255, 255, 255;
762
786
  --primary-color: #0067ac;
763
787
  --on-primary-color: white;
@@ -766,7 +790,6 @@
766
790
  .segmented-control-wrapper {
767
791
  display: inline-grid;
768
792
  border-radius: 6px;
769
- /* background: rgba(0, 0, 0, 0.065); */
770
793
  background-color: var(--surface-inverse);
771
794
  }
772
795