@kkcompany/ott-player 0.6.0-canary.21 → 0.6.0-canary.22

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.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ## [0.6.0-canary.22](https://gitlab.kkinternal.com/kks-web/blahaj/compare/v0.6.0-canary.21...v0.6.0-canary.22) (2026-09-22)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * downgrade radix-ui dependency from 1.6.7 to 1.6.4 ([b248258](https://gitlab.kkinternal.com/kks-web/blahaj/commit/b248258d36f6173b1e29ef5b847a4660b71c1d31))
11
+
5
12
  ## [0.6.0-canary.21](https://gitlab.kkinternal.com/kks-web/blahaj/compare/v0.6.0-canary.20...v0.6.0-canary.21) (2026-09-22)
6
13
 
7
14
 
package/dist/main.css CHANGED
@@ -41,6 +41,190 @@
41
41
  padding: 0.05em 0.2em;
42
42
  }
43
43
 
44
+ .player-footer {
45
+ position: absolute;
46
+ bottom: 0;
47
+ left: 0;
48
+ display: flex;
49
+ flex-wrap: wrap;
50
+ align-items: center;
51
+ opacity: 0;
52
+ transition: opacity 0.6s;
53
+ padding: 0 32px 32px;
54
+ width: 100%;
55
+ pointer-events: none;
56
+ }
57
+ @media screen and (max-width: 767px) {
58
+ .player-footer {
59
+ padding: 0 16px 12px;
60
+ }
61
+ }
62
+ .player-footer.--shown {
63
+ opacity: 1;
64
+ pointer-events: auto;
65
+ }
66
+
67
+ .player-mask {
68
+ position: absolute;
69
+ top: 0;
70
+ left: 0;
71
+ width: 100%;
72
+ height: 100%;
73
+ pointer-events: none;
74
+ background: linear-gradient(
75
+ 0deg,
76
+ rgba(0, 0, 0, 0.5) 0,
77
+ rgba(0, 0, 0, 0) 30%,rgba(0, 0, 0, 0) 70%,
78
+ rgba(0, 0, 0, 0.5) 100%
79
+ );
80
+ background: linear-gradient(
81
+ 0deg,
82
+ rgba(0, 0, 0, 0.5) 0,
83
+ rgba(0, 0, 0, 0) 30% 70%,
84
+ rgba(0, 0, 0, 0.5) 100%
85
+ );
86
+ opacity: 0;
87
+ transition: opacity 0.6s;
88
+ }
89
+ .player-mask.--shown {
90
+ opacity: 1;
91
+ }
92
+
93
+ .player-rewind {
94
+ }
95
+
96
+ .player-rewind__icon {
97
+ display: flex;
98
+ }
99
+
100
+ .player-forward {
101
+ }
102
+
103
+ .player-forward__icon {
104
+ display: flex;
105
+ }
106
+
107
+ .player-icon {
108
+ width: 1em;
109
+ height: 1em;
110
+ fill: currentColor;
111
+ }
112
+
113
+ .player-slider {
114
+ --track-size: 4px;
115
+ --track-background-color: rgba(255, 255, 255, 0.5);
116
+ --thumb-size: 12px;
117
+ --thumb-color: var(--player-primary);
118
+
119
+ position: relative;
120
+ display: flex;
121
+ touch-action: none;
122
+ -webkit-user-select: none;
123
+ -moz-user-select: none;
124
+ user-select: none;
125
+ align-items: center;
126
+ width: 100%;
127
+ }
128
+
129
+ .player-slider[data-orientation='horizontal'] {
130
+ padding: 8px 0;
131
+ }
132
+
133
+ .player-slider[data-orientation='vertical'] {
134
+ padding: 0 8px;
135
+ height: 100%;
136
+ min-height: 40px;
137
+ width: auto;
138
+ flex-direction: column;
139
+ }
140
+
141
+ .player-slider[data-disabled] {
142
+ opacity: 0.5;
143
+ }
144
+
145
+ .player-slider__track {
146
+ position: absolute;
147
+ flex-grow: 1;
148
+ overflow: hidden;
149
+ background: var(--track-background-color);
150
+ }
151
+
152
+ .player-slider[data-orientation='horizontal'] .player-slider__track {
153
+ top: 50%;
154
+ left: 0;
155
+ transform: translate(0, -50%);
156
+ height: var(--track-size);
157
+ width: 100%;
158
+ transition: height 0.3s;
159
+ }
160
+
161
+ .player-slider[data-orientation='vertical'] .player-slider__track {
162
+ height: 100%;
163
+ top: 0;
164
+ left: 50%;
165
+ transform: translate(-50%, 0);
166
+ width: var(--track-size);
167
+ transition: width 0.3s;
168
+ }
169
+
170
+ .player-slider[data-orientation='horizontal']:hover .player-slider__track {
171
+ height: calc(var(--track-size) * 1.5);
172
+ }
173
+
174
+ .player-slider[data-orientation='vertical']:hover .player-slider__track {
175
+ width: calc(var(--track-size) * 1.5);
176
+ }
177
+
178
+ .player-slider__range {
179
+ position: absolute;
180
+ -webkit-user-select: none;
181
+ -moz-user-select: none;
182
+ user-select: none;
183
+ }
184
+
185
+ .player-slider[data-orientation='horizontal'] .player-slider__range {
186
+ height: 100%;
187
+ }
188
+
189
+ .player-slider[data-orientation='vertical'] .player-slider__range {
190
+ width: 100%;
191
+ }
192
+
193
+ .player-slider__thumb {
194
+ position: relative;
195
+ display: block;
196
+ width: var(--thumb-size);
197
+ height: var(--thumb-size);
198
+ flex-shrink: 0;
199
+ -webkit-user-select: none;
200
+ -moz-user-select: none;
201
+ user-select: none;
202
+ border-radius: 9999px;
203
+ background: var(--thumb-color);
204
+ transition: opacity 0.3s;
205
+ outline: none;
206
+ opacity: 0;
207
+ pointer-events: none;
208
+ }
209
+
210
+ .player-slider__thumb::after {
211
+ content: '';
212
+ position: absolute;
213
+ top: -8px;
214
+ right: -8px;
215
+ bottom: -8px;
216
+ left: -8px;
217
+ }
218
+
219
+ .player-slider__thumb[disabled] {
220
+ pointer-events: none;
221
+ opacity: 0.5;
222
+ }
223
+
224
+ .player-slider:hover .player-slider__thumb {
225
+ opacity: 1;
226
+ }
227
+
44
228
  .player-drawer__overlay {
45
229
  position: absolute;
46
230
  top: 0;
@@ -165,184 +349,58 @@
165
349
  }
166
350
  }
167
351
 
168
- .player-forward {
352
+ .player-status {
353
+ position: absolute;
354
+ top: 0;
355
+ right: 0;
356
+ bottom: 0;
357
+ left: 0;
358
+ pointer-events: none;
169
359
  }
170
360
 
171
- .player-forward__icon {
361
+ .player-status__icon {
172
362
  display: flex;
363
+ color: #fff;
364
+ position: absolute;
365
+ top: 50%;
366
+ left: 50%;
367
+ transform: translate(-50%, -50%);
173
368
  }
174
369
 
175
- .player-fullscreen {
176
- }
370
+ .player-status__icon.--play .player-status__icon-container,.player-status__icon.--pause .player-status__icon-container {
371
+ font-size: max(48px, min(10cqmin, 72px));
372
+ animation: player-status-in-out 1s cubic-bezier(0.05, 0, 0, 1) forwards;
373
+ background-color: rgba(0, 0, 0, 0.8);
374
+ border-radius: 50%;
375
+ padding: max(8px, min(1.66cqmin, 12px));
376
+ }
177
377
 
178
- .player-fullscreen__icon {
179
- display: flex;
180
- }
378
+ .player-status__icon.--loading {
379
+ opacity: 0;
380
+ transition: opacity 0.15s;
381
+ }
181
382
 
182
- .player-time-duration {
183
- font-size: 15px;
184
- color: #fff;
185
- white-space: nowrap;
186
- }
187
- @media screen and (max-width: 767px) {
188
- .player-time-duration {
189
- font-size: 12px;
190
- }
383
+ .player-status__icon.--loading.--active {
384
+ opacity: 1;
385
+ }
386
+
387
+ .player-status__icon.--loading .player-status__icon-container {
388
+ color: var(--player-primary);
389
+ font-size: max(48px, min(10cqmin, 72px));
390
+ animation: player-status-spin 1s linear infinite;
391
+ }
392
+
393
+ .player-status__icon.--play .player-status__icon-container svg {
394
+ transform: translate(5%, 0);
191
395
  }
192
396
 
193
- .player-footer {
194
- position: absolute;
195
- bottom: 0;
196
- left: 0;
397
+ .player-status__icon-container {
197
398
  display: flex;
198
- flex-wrap: wrap;
199
- align-items: center;
200
- opacity: 0;
201
- transition: opacity 0.6s;
202
- padding: 0 32px 32px;
203
- width: 100%;
204
- pointer-events: none;
205
- }
206
- @media screen and (max-width: 767px) {
207
- .player-footer {
208
- padding: 0 16px 12px;
209
399
  }
210
- }
211
- .player-footer.--shown {
212
- opacity: 1;
213
- pointer-events: auto;
214
- }
215
-
216
- .player-playback-rate {
217
- }
218
-
219
- .player-playback-rate__icon {
220
- display: flex;
221
- align-items: center;
222
- }
223
-
224
- .player-playback-rate__icon span {
225
- font-size: 20px;
226
- font-weight: 600;
227
- }
228
-
229
- @media screen and (max-width: 767px) {
230
-
231
- .player-playback-rate__icon span {
232
- font-size: 16px;
233
- }
234
- }
235
-
236
- .player-playback-rate__content {
237
- padding-left: 16px;
238
- padding-right: 16px;
239
- }
240
-
241
- .player-playback-rate__content-tracks {
242
- display: flex;
243
- flex-direction: column;
244
- }
245
-
246
- .player-playback-rate__content-track {
247
- display: flex;
248
- align-items: center;
249
- gap: 8px;
250
- background: transparent;
251
- border: none;
252
- outline: none;
253
- color: rgba(255, 255, 255, 0.8);
254
- font-size: 14px;
255
- cursor: pointer;
256
- padding-top: 8px;
257
- padding-bottom: 8px;
258
- transition: color 0.3s;
259
- }
260
-
261
- .player-playback-rate__content-track.--active {
262
- color: var(--player-primary);
263
- }
264
-
265
- @media (hover: hover) {
266
- .player-playback-rate__content-track:not(.--active):hover {
267
- color: rgba(255, 255, 255, 1);
268
- }
269
- }
270
-
271
- .player-playback-rate__content-track-indicator {
272
- display: flex;
273
- opacity: 0;
274
- font-size: 18px;
275
- }
276
-
277
- .player-playback-rate__content-track.--active .player-playback-rate__content-track-indicator {
278
- opacity: 1;
279
- }
280
-
281
- .player-play-pause {
282
- }
283
-
284
- .player-play-pause__icon {
285
- display: flex;
286
- }
287
-
288
- .player-icon {
289
- width: 1em;
290
- height: 1em;
291
- fill: currentColor;
292
- }
293
-
294
- .player-status {
295
- position: absolute;
296
- top: 0;
297
- right: 0;
298
- bottom: 0;
299
- left: 0;
300
- pointer-events: none;
301
- }
302
-
303
- .player-status__icon {
304
- display: flex;
305
- color: #fff;
306
- position: absolute;
307
- top: 50%;
308
- left: 50%;
309
- transform: translate(-50%, -50%);
310
- }
311
-
312
- .player-status__icon.--play .player-status__icon-container,.player-status__icon.--pause .player-status__icon-container {
313
- font-size: max(48px, min(10cqmin, 72px));
314
- animation: player-status-in-out 1s cubic-bezier(0.05, 0, 0, 1) forwards;
315
- background-color: rgba(0, 0, 0, 0.8);
316
- border-radius: 50%;
317
- padding: max(8px, min(1.66cqmin, 12px));
318
- }
319
-
320
- .player-status__icon.--loading {
321
- opacity: 0;
322
- transition: opacity 0.15s;
323
- }
324
-
325
- .player-status__icon.--loading.--active {
326
- opacity: 1;
327
- }
328
-
329
- .player-status__icon.--loading .player-status__icon-container {
330
- color: var(--player-primary);
331
- font-size: max(48px, min(10cqmin, 72px));
332
- animation: player-status-spin 1s linear infinite;
333
- }
334
-
335
- .player-status__icon.--play .player-status__icon-container svg {
336
- transform: translate(5%, 0);
337
- }
338
-
339
- .player-status__icon-container {
340
- display: flex;
341
- }
342
-
343
- @keyframes player-status-in-out {
344
- 0% {
345
- opacity: 0;
400
+
401
+ @keyframes player-status-in-out {
402
+ 0% {
403
+ opacity: 0;
346
404
  }
347
405
 
348
406
  25%,
@@ -367,191 +425,32 @@
367
425
  }
368
426
  }
369
427
 
370
- .player-popover__content {
371
- z-index: 50;
372
- border-radius: 16px;
373
- background: rgba(0, 0, 0, 0.8);
374
- color: #fff;
375
- box-shadow:
376
- 0 4px 6px -1px rgba(0, 0, 0, 0.1),
377
- 0 2px 4px -2px rgba(0, 0, 0, 0.1);
378
- display: flex;
379
- flex-direction: column;
380
- transform-origin: var(--radix-popover-content-transform-origin);
381
- outline: none;
382
- max-height: 70cqh;
383
- min-height: 180px;
384
- min-width: 280px;
428
+ .player-fullscreen {
385
429
  }
386
430
 
387
- .player-popover__content[data-state='open'] {
388
- animation: player-popover-in 0.15s ease-out forwards;
389
- }
390
-
391
- .player-popover__content[data-state='closed'] {
392
- animation: player-popover-out 0.15s ease-in forwards;
393
- }
394
-
395
- .player-popover__header {
431
+ .player-fullscreen__icon {
396
432
  display: flex;
397
- flex-direction: column;
398
- padding: 16px;
399
- font-size: 16px;
400
- }
401
-
402
- @keyframes player-popover-in {
403
- from {
404
- opacity: 0;
405
- transform: scale(0.95);
406
- }
407
- }
408
-
409
- @keyframes player-popover-out {
410
- to {
411
- opacity: 0;
412
- transform: scale(0.95);
413
- }
414
433
  }
415
434
 
416
- .player-mask {
435
+ .player-header {
417
436
  position: absolute;
418
437
  top: 0;
419
438
  left: 0;
420
- width: 100%;
421
- height: 100%;
422
- pointer-events: none;
423
- background: linear-gradient(
424
- 0deg,
425
- rgba(0, 0, 0, 0.5) 0,
426
- rgba(0, 0, 0, 0) 30%,rgba(0, 0, 0, 0) 70%,
427
- rgba(0, 0, 0, 0.5) 100%
428
- );
429
- background: linear-gradient(
430
- 0deg,
431
- rgba(0, 0, 0, 0.5) 0,
432
- rgba(0, 0, 0, 0) 30% 70%,
433
- rgba(0, 0, 0, 0.5) 100%
434
- );
439
+ display: flex;
435
440
  opacity: 0;
436
441
  transition: opacity 0.6s;
437
- }
438
- .player-mask.--shown {
439
- opacity: 1;
440
- }
441
-
442
- .player-slider {
443
- --track-size: 4px;
444
- --track-background-color: rgba(255, 255, 255, 0.5);
445
- --thumb-size: 12px;
446
- --thumb-color: var(--player-primary);
447
-
448
- position: relative;
449
- display: flex;
450
- touch-action: none;
451
- -webkit-user-select: none;
452
- -moz-user-select: none;
453
- user-select: none;
454
- align-items: center;
442
+ padding: 24px 24px 0;
455
443
  width: 100%;
456
- }
457
-
458
- .player-slider[data-orientation='horizontal'] {
459
- padding: 8px 0;
460
- }
461
-
462
- .player-slider[data-orientation='vertical'] {
463
- padding: 0 8px;
464
- height: 100%;
465
- min-height: 40px;
466
- width: auto;
467
- flex-direction: column;
468
- }
469
-
470
- .player-slider[data-disabled] {
471
- opacity: 0.5;
472
- }
473
-
474
- .player-slider__track {
475
- position: absolute;
476
- flex-grow: 1;
477
- overflow: hidden;
478
- background: var(--track-background-color);
479
- }
480
-
481
- .player-slider[data-orientation='horizontal'] .player-slider__track {
482
- top: 50%;
483
- left: 0;
484
- transform: translate(0, -50%);
485
- height: var(--track-size);
486
- width: 100%;
487
- transition: height 0.3s;
488
- }
489
-
490
- .player-slider[data-orientation='vertical'] .player-slider__track {
491
- height: 100%;
492
- top: 0;
493
- left: 50%;
494
- transform: translate(-50%, 0);
495
- width: var(--track-size);
496
- transition: width 0.3s;
497
- }
498
-
499
- .player-slider[data-orientation='horizontal']:hover .player-slider__track {
500
- height: calc(var(--track-size) * 1.5);
501
- }
502
-
503
- .player-slider[data-orientation='vertical']:hover .player-slider__track {
504
- width: calc(var(--track-size) * 1.5);
505
- }
506
-
507
- .player-slider__range {
508
- position: absolute;
509
- -webkit-user-select: none;
510
- -moz-user-select: none;
511
- user-select: none;
512
- }
513
-
514
- .player-slider[data-orientation='horizontal'] .player-slider__range {
515
- height: 100%;
516
- }
517
-
518
- .player-slider[data-orientation='vertical'] .player-slider__range {
519
- width: 100%;
520
- }
521
-
522
- .player-slider__thumb {
523
- position: relative;
524
- display: block;
525
- width: var(--thumb-size);
526
- height: var(--thumb-size);
527
- flex-shrink: 0;
528
- -webkit-user-select: none;
529
- -moz-user-select: none;
530
- user-select: none;
531
- border-radius: 9999px;
532
- background: var(--thumb-color);
533
- transition: opacity 0.3s;
534
- outline: none;
535
- opacity: 0;
536
444
  pointer-events: none;
537
445
  }
538
-
539
- .player-slider__thumb::after {
540
- content: '';
541
- position: absolute;
542
- top: -8px;
543
- right: -8px;
544
- bottom: -8px;
545
- left: -8px;
546
- }
547
-
548
- .player-slider__thumb[disabled] {
549
- pointer-events: none;
550
- opacity: 0.5;
446
+ @media screen and (max-width: 767px) {
447
+ .player-header {
448
+ padding: 16px 16px 0;
449
+ }
551
450
  }
552
-
553
- .player-slider:hover .player-slider__thumb {
451
+ .player-header.--shown {
554
452
  opacity: 1;
453
+ pointer-events: auto;
555
454
  }
556
455
 
557
456
  .player-ui-button {
@@ -582,41 +481,6 @@
582
481
  }
583
482
  }
584
483
 
585
- .player-rewind {
586
- }
587
-
588
- .player-rewind__icon {
589
- display: flex;
590
- }
591
-
592
- .player-header {
593
- position: absolute;
594
- top: 0;
595
- left: 0;
596
- display: flex;
597
- opacity: 0;
598
- transition: opacity 0.6s;
599
- padding: 24px 24px 0;
600
- width: 100%;
601
- pointer-events: none;
602
- }
603
- @media screen and (max-width: 767px) {
604
- .player-header {
605
- padding: 16px 16px 0;
606
- }
607
- }
608
- .player-header.--shown {
609
- opacity: 1;
610
- pointer-events: auto;
611
- }
612
-
613
- .player-volume {
614
- }
615
-
616
- .player-volume__icon {
617
- display: flex;
618
- }
619
-
620
484
  :root {
621
485
  --player-primary: #eb5505;
622
486
 
@@ -660,125 +524,41 @@
660
524
  cursor: none;
661
525
  }
662
526
 
663
- .player-ui-controls-container[data-shown='true'] ~ .shaka-text-container {
664
- /* bottom is the height of the .player-footer */
665
- bottom: 94px;
666
- transition-delay: 0s;
667
- }
668
-
669
- @media screen and (max-width: 767px) {
670
-
671
- .player-ui-controls-container[data-shown='true'] ~ .shaka-text-container {
672
- bottom: 60px;
673
- }
674
- }
675
-
676
- .sr-only {
677
- position: absolute;
678
- width: 1px;
679
- height: 1px;
680
- padding: 0;
681
- margin: -1px;
682
- overflow: hidden;
683
- clip-path: inset(50%);
684
- white-space: nowrap;
685
- border-width: 0;
686
- }
687
-
688
- .player-subtitle {
689
- }
690
-
691
- .player-subtitle__icon {
692
- display: flex;
693
- }
694
-
695
- .player-subtitle__content {
696
- padding-left: 16px;
697
- padding-right: 16px;
698
- }
699
-
700
- .player-subtitle__content-tracks {
701
- display: flex;
702
- flex-direction: column;
703
- }
704
-
705
- .player-subtitle__content-track {
706
- display: flex;
707
- align-items: center;
708
- gap: 8px;
709
- background: transparent;
710
- border: none;
711
- outline: none;
712
- color: rgba(255, 255, 255, 0.8);
713
- font-size: 14px;
714
- cursor: pointer;
715
- padding-top: 8px;
716
- padding-bottom: 8px;
717
- transition: color 0.3s;
718
- }
719
-
720
- .player-subtitle__content-track.--active {
721
- color: var(--player-primary);
722
- }
723
-
724
- @media (hover: hover) {
725
- .player-subtitle__content-track:not(.--active):hover {
726
- color: rgba(255, 255, 255, 1);
727
- }
728
- }
729
-
730
- .player-subtitle__content-track-indicator {
731
- display: flex;
732
- opacity: 0;
733
- font-size: 18px;
734
- }
735
-
736
- .player-subtitle__content-track.--active .player-subtitle__content-track-indicator {
737
- opacity: 1;
738
- }
739
-
740
- .player-subtitle__empty {
741
- padding: 8px 16px;
742
- display: flex;
743
- align-items: center;
744
- gap: 8px;
745
- color: var(--player-primary);
746
- font-size: 14px;
747
- }
748
-
749
- .player-subtitle__empty-indicator {
750
- display: flex;
751
- font-size: 18px;
752
- }
753
-
754
- .player-volume-bar {
755
- width: 80px;
756
- }
757
-
758
- .player-volume-bar .player-slider {
759
- --track-size: var(--player-volume-bar-track-size);
760
- --thumb-size: var(--player-volume-bar-thumb-size);
761
- --thumb-color: var(--player-volume-bar-thumb-color);
762
-
763
- --progress-ratio: var(--player-volume-bar-progress, 0);
764
- --progress-position: calc(var(--progress-ratio) * 100%);
765
-
766
- --track-background-color:
767
- linear-gradient(
768
- to right,
769
- var(--player-volume-bar-progress-color) var(--progress-position),
770
- transparent var(--progress-position)
771
- ),
772
- var(--player-volume-bar-background-color);
773
- }
774
-
775
- .player-volume-bar .player-slider__track {
776
- border-radius: 9999px;
527
+ .player-ui-controls-container[data-shown='true'] ~ .shaka-text-container {
528
+ /* bottom is the height of the .player-footer */
529
+ bottom: 94px;
530
+ transition-delay: 0s;
777
531
  }
778
532
 
779
- .player-volume-bar__icon {
780
- display: flex;
533
+ @media screen and (max-width: 767px) {
534
+
535
+ .player-ui-controls-container[data-shown='true'] ~ .shaka-text-container {
536
+ bottom: 60px;
537
+ }
538
+ }
539
+
540
+ .sr-only {
541
+ position: absolute;
542
+ width: 1px;
543
+ height: 1px;
544
+ padding: 0;
545
+ margin: -1px;
546
+ overflow: hidden;
547
+ clip-path: inset(50%);
548
+ white-space: nowrap;
549
+ border-width: 0;
550
+ }
551
+
552
+ .player-time-duration {
553
+ font-size: 15px;
554
+ color: #fff;
555
+ white-space: nowrap;
556
+ }
557
+ @media screen and (max-width: 767px) {
558
+ .player-time-duration {
559
+ font-size: 12px;
781
560
  }
561
+ }
782
562
 
783
563
  .player-tooltip__content {
784
564
  z-index: 50;
@@ -817,6 +597,78 @@
817
597
  }
818
598
  }
819
599
 
600
+ .player-play-pause {
601
+ }
602
+
603
+ .player-play-pause__icon {
604
+ display: flex;
605
+ }
606
+
607
+ .player-playback-rate {
608
+ }
609
+
610
+ .player-playback-rate__icon {
611
+ display: flex;
612
+ align-items: center;
613
+ }
614
+
615
+ .player-playback-rate__icon span {
616
+ font-size: 20px;
617
+ font-weight: 600;
618
+ }
619
+
620
+ @media screen and (max-width: 767px) {
621
+
622
+ .player-playback-rate__icon span {
623
+ font-size: 16px;
624
+ }
625
+ }
626
+
627
+ .player-playback-rate__content {
628
+ padding-left: 16px;
629
+ padding-right: 16px;
630
+ }
631
+
632
+ .player-playback-rate__content-tracks {
633
+ display: flex;
634
+ flex-direction: column;
635
+ }
636
+
637
+ .player-playback-rate__content-track {
638
+ display: flex;
639
+ align-items: center;
640
+ gap: 8px;
641
+ background: transparent;
642
+ border: none;
643
+ outline: none;
644
+ color: rgba(255, 255, 255, 0.8);
645
+ font-size: 14px;
646
+ cursor: pointer;
647
+ padding-top: 8px;
648
+ padding-bottom: 8px;
649
+ transition: color 0.3s;
650
+ }
651
+
652
+ .player-playback-rate__content-track.--active {
653
+ color: var(--player-primary);
654
+ }
655
+
656
+ @media (hover: hover) {
657
+ .player-playback-rate__content-track:not(.--active):hover {
658
+ color: rgba(255, 255, 255, 1);
659
+ }
660
+ }
661
+
662
+ .player-playback-rate__content-track-indicator {
663
+ display: flex;
664
+ opacity: 0;
665
+ font-size: 18px;
666
+ }
667
+
668
+ .player-playback-rate__content-track.--active .player-playback-rate__content-track-indicator {
669
+ opacity: 1;
670
+ }
671
+
820
672
  .player-seek-bar {
821
673
  display: flex;
822
674
  width: 100%;
@@ -1006,3 +858,151 @@
1006
858
  border-radius: 8px;
1007
859
  background: rgba(0, 0, 0, 0.8);
1008
860
  }
861
+
862
+ .player-volume-bar {
863
+ width: 80px;
864
+ }
865
+
866
+ .player-volume-bar .player-slider {
867
+ --track-size: var(--player-volume-bar-track-size);
868
+ --thumb-size: var(--player-volume-bar-thumb-size);
869
+ --thumb-color: var(--player-volume-bar-thumb-color);
870
+
871
+ --progress-ratio: var(--player-volume-bar-progress, 0);
872
+ --progress-position: calc(var(--progress-ratio) * 100%);
873
+
874
+ --track-background-color:
875
+ linear-gradient(
876
+ to right,
877
+ var(--player-volume-bar-progress-color) var(--progress-position),
878
+ transparent var(--progress-position)
879
+ ),
880
+ var(--player-volume-bar-background-color);
881
+ }
882
+
883
+ .player-volume-bar .player-slider__track {
884
+ border-radius: 9999px;
885
+ }
886
+
887
+ .player-volume-bar__icon {
888
+ display: flex;
889
+ }
890
+
891
+ .player-subtitle {
892
+ }
893
+
894
+ .player-subtitle__icon {
895
+ display: flex;
896
+ }
897
+
898
+ .player-subtitle__content {
899
+ padding-left: 16px;
900
+ padding-right: 16px;
901
+ }
902
+
903
+ .player-subtitle__content-tracks {
904
+ display: flex;
905
+ flex-direction: column;
906
+ }
907
+
908
+ .player-subtitle__content-track {
909
+ display: flex;
910
+ align-items: center;
911
+ gap: 8px;
912
+ background: transparent;
913
+ border: none;
914
+ outline: none;
915
+ color: rgba(255, 255, 255, 0.8);
916
+ font-size: 14px;
917
+ cursor: pointer;
918
+ padding-top: 8px;
919
+ padding-bottom: 8px;
920
+ transition: color 0.3s;
921
+ }
922
+
923
+ .player-subtitle__content-track.--active {
924
+ color: var(--player-primary);
925
+ }
926
+
927
+ @media (hover: hover) {
928
+ .player-subtitle__content-track:not(.--active):hover {
929
+ color: rgba(255, 255, 255, 1);
930
+ }
931
+ }
932
+
933
+ .player-subtitle__content-track-indicator {
934
+ display: flex;
935
+ opacity: 0;
936
+ font-size: 18px;
937
+ }
938
+
939
+ .player-subtitle__content-track.--active .player-subtitle__content-track-indicator {
940
+ opacity: 1;
941
+ }
942
+
943
+ .player-subtitle__empty {
944
+ padding: 8px 16px;
945
+ display: flex;
946
+ align-items: center;
947
+ gap: 8px;
948
+ color: var(--player-primary);
949
+ font-size: 14px;
950
+ }
951
+
952
+ .player-subtitle__empty-indicator {
953
+ display: flex;
954
+ font-size: 18px;
955
+ }
956
+
957
+ .player-volume {
958
+ }
959
+
960
+ .player-volume__icon {
961
+ display: flex;
962
+ }
963
+
964
+ .player-popover__content {
965
+ z-index: 50;
966
+ border-radius: 16px;
967
+ background: rgba(0, 0, 0, 0.8);
968
+ color: #fff;
969
+ box-shadow:
970
+ 0 4px 6px -1px rgba(0, 0, 0, 0.1),
971
+ 0 2px 4px -2px rgba(0, 0, 0, 0.1);
972
+ display: flex;
973
+ flex-direction: column;
974
+ transform-origin: var(--radix-popover-content-transform-origin);
975
+ outline: none;
976
+ max-height: 70cqh;
977
+ min-height: 180px;
978
+ min-width: 280px;
979
+ }
980
+
981
+ .player-popover__content[data-state='open'] {
982
+ animation: player-popover-in 0.15s ease-out forwards;
983
+ }
984
+
985
+ .player-popover__content[data-state='closed'] {
986
+ animation: player-popover-out 0.15s ease-in forwards;
987
+ }
988
+
989
+ .player-popover__header {
990
+ display: flex;
991
+ flex-direction: column;
992
+ padding: 16px;
993
+ font-size: 16px;
994
+ }
995
+
996
+ @keyframes player-popover-in {
997
+ from {
998
+ opacity: 0;
999
+ transform: scale(0.95);
1000
+ }
1001
+ }
1002
+
1003
+ @keyframes player-popover-out {
1004
+ to {
1005
+ opacity: 0;
1006
+ transform: scale(0.95);
1007
+ }
1008
+ }
@@ -1,4 +1,4 @@
1
- import { i as useAmplitudeLogger_default, n as validateBrowser, r as PremiumPlusPlayer_default, t as dispatchPlaybackError } from "./playerUtils-2S2ovNJc.js";
1
+ import { i as useAmplitudeLogger_default, n as validateBrowser, r as PremiumPlusPlayer_default, t as dispatchPlaybackError } from "./playerUtils-BwTDHNpP.js";
2
2
  import { castMedia, handleIOSHeadphonesDisconnection, initSender, linkCast, selectHlsQualities, stopCast, subscribeCastState } from "@kkcompany/player/modules";
3
3
  import { ImaDaiPlugin } from "@kkcompany/player/plugins";
4
4
  import { Button, CastSender, ClassicLayout, ClassicSettingsContainer, InfoBarExtension, LanguageMenu, MenuItem, OverlayPanel, SkipButton, classicStyleProps } from "@kkcompany/player/react";
@@ -1,4 +1,4 @@
1
- import { i as useAmplitudeLogger_default, n as validateBrowser, r as PremiumPlusPlayer_default, t as dispatchPlaybackError } from "./playerUtils-2S2ovNJc.js";
1
+ import { i as useAmplitudeLogger_default, n as validateBrowser, r as PremiumPlusPlayer_default, t as dispatchPlaybackError } from "./playerUtils-BwTDHNpP.js";
2
2
  import { castMedia, handleIOSHeadphonesDisconnection, initSender, linkCast, selectHlsQualities, stopCast, subscribeCastState } from "@kkcompany/player/modules";
3
3
  import { ImaDaiPlugin } from "@kkcompany/player/plugins";
4
4
  import { Button, CastSender, ClassicLayout, ClassicSettingsContainer, InfoBarExtension, LanguageMenu, MenuItem, OverlayPanel, SkipButton, classicStyleProps } from "@kkcompany/player/react";
@@ -933,7 +933,7 @@ var preload_default = preload;
933
933
 
934
934
  //#endregion
935
935
  //#region package.json
936
- var version = "0.6.0-canary.21";
936
+ var version = "0.6.0-canary.22";
937
937
 
938
938
  //#endregion
939
939
  //#region lib/origin/constants.js
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kkcompany/ott-player",
3
- "version": "0.6.0-canary.21",
3
+ "version": "0.6.0-canary.22",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "files": [
@@ -43,7 +43,7 @@
43
43
  "clsx": "^2.1.1",
44
44
  "lodash-es": "^4.17.22",
45
45
  "mitt": "^3.0.0",
46
- "radix-ui": "^1.6.7",
46
+ "radix-ui": "^1.6.4",
47
47
  "react": "^18.3.1",
48
48
  "react-dom": "^18.3.1",
49
49
  "tailwind-merge": "^3.4.0",