@gcorevideo/player 2.29.0 → 2.30.1

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 (54) hide show
  1. package/README.md +108 -0
  2. package/dist/core.js +81 -22
  3. package/dist/index.css +370 -370
  4. package/dist/index.embed.js +80 -23
  5. package/dist/index.js +459 -87
  6. package/docs/api/player.md +37 -0
  7. package/docs/api/player.player.getplugin.md +59 -0
  8. package/docs/api/player.player.md +14 -0
  9. package/docs/api/player.tokenrefreshoptions.gettoken.md +13 -0
  10. package/docs/api/player.tokenrefreshoptions.ipbound.md +13 -0
  11. package/docs/api/player.tokenrefreshoptions.md +115 -0
  12. package/docs/api/player.tokenrefreshoptions.ontokenrefreshed.md +13 -0
  13. package/docs/api/player.tokenrefreshoptions.refreshleadseconds.md +13 -0
  14. package/docs/api/player.tokenrefreshplugin.md +50 -0
  15. package/docs/api/player.tokenresponse.client_ip.md +13 -0
  16. package/docs/api/player.tokenresponse.expires.md +13 -0
  17. package/docs/api/player.tokenresponse.md +153 -0
  18. package/docs/api/player.tokenresponse.token.md +13 -0
  19. package/docs/api/player.tokenresponse.token_ip.md +13 -0
  20. package/docs/api/player.tokenresponse.url.md +13 -0
  21. package/docs/api/player.tokenresponse.url_ip.md +13 -0
  22. package/lib/Player.d.ts +9 -0
  23. package/lib/Player.d.ts.map +1 -1
  24. package/lib/Player.js +11 -0
  25. package/lib/index.plugins.d.ts +1 -0
  26. package/lib/index.plugins.d.ts.map +1 -1
  27. package/lib/index.plugins.js +1 -0
  28. package/lib/playback/dash-playback/DashPlayback.d.ts.map +1 -1
  29. package/lib/playback/dash-playback/DashPlayback.js +5 -1
  30. package/lib/playback/hls-playback/HlsPlayback.d.ts +1 -1
  31. package/lib/playback/hls-playback/HlsPlayback.d.ts.map +1 -1
  32. package/lib/playback/hls-playback/HlsPlayback.js +23 -20
  33. package/lib/playback/hls-playback/RangesList.d.ts +7 -0
  34. package/lib/playback/hls-playback/RangesList.d.ts.map +1 -0
  35. package/lib/playback/hls-playback/RangesList.js +41 -0
  36. package/lib/plugins/subtitles/ClosedCaptions.d.ts.map +1 -1
  37. package/lib/plugins/subtitles/ClosedCaptions.js +0 -2
  38. package/lib/plugins/token-refresh/TokenRefreshPlugin.d.ts +119 -0
  39. package/lib/plugins/token-refresh/TokenRefreshPlugin.d.ts.map +1 -0
  40. package/lib/plugins/token-refresh/TokenRefreshPlugin.js +318 -0
  41. package/lib/plugins/token-refresh/index.d.ts +2 -0
  42. package/lib/plugins/token-refresh/index.d.ts.map +1 -0
  43. package/lib/plugins/token-refresh/index.js +1 -0
  44. package/package.json +1 -1
  45. package/src/Player.ts +12 -0
  46. package/src/index.plugins.ts +1 -0
  47. package/src/playback/dash-playback/DashPlayback.ts +6 -1
  48. package/src/playback/hls-playback/HlsPlayback.ts +40 -37
  49. package/src/playback/hls-playback/RangesList.ts +45 -0
  50. package/src/playback/hls-playback/__tests__/RangesList.test.ts +60 -0
  51. package/src/plugins/subtitles/ClosedCaptions.ts +0 -5
  52. package/src/plugins/token-refresh/TokenRefreshPlugin.ts +425 -0
  53. package/src/plugins/token-refresh/index.ts +5 -0
  54. package/tsconfig.tsbuildinfo +1 -1
package/dist/index.css CHANGED
@@ -122,114 +122,6 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }*,
126
- :focus,
127
- :visited {
128
- outline: none !important;
129
- }
130
-
131
- .gear-wrapper .go-back {
132
- font-weight: 600;
133
- font-size: 14px;
134
- line-height: 20px;
135
- width: 100%;
136
- text-align: left;
137
- padding: 12px;
138
- }
139
- .gear-wrapper .go-back .arrow-left-icon {
140
- float: left;
141
- padding-top: 2px;
142
- padding-right: 2px;
143
- }
144
- .gear-wrapper .go-back .arrow-left-icon svg {
145
- height: 16px;
146
- }
147
- .gear-wrapper .gear-options-list,
148
- .gear-wrapper .gear-sub-menu {
149
- list-style-type: none;
150
- }
151
- .gear-wrapper ul.gear-sub-menu {
152
- width: 100%;
153
- min-width: 60px;
154
- border-top: 2px solid rgb(36, 36, 36);
155
- overflow-y: auto;
156
- }
157
- .gear-wrapper ul.gear-sub-menu li {
158
- font-size: 12px;
159
- text-align: left;
160
- }
161
- .gear-wrapper ul.gear-sub-menu li a {
162
- display: block;
163
- text-decoration: none;
164
- height: 30px;
165
- padding: 5px 10px;
166
- line-height: 22px;
167
- color: var(--gplayer-mc-text-dim-color);
168
- }
169
- .gear-wrapper ul.gear-sub-menu li a:hover {
170
- color: var(--gplayer-mc-text-color);
171
- background-color: rgba(0, 0, 0, 0.4);
172
- }
173
- .gear-wrapper ul.gear-sub-menu li a:hover a {
174
- color: var(--gplayer-mc-text-color);
175
- text-decoration: none;
176
- }
177
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
178
- width: 30px;
179
- height: 20px;
180
- float: left;
181
- display: block;
182
- }
183
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
184
- display: none;
185
- }
186
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
187
- display: inline;
188
- }.media-control-skin-1 .media-control-item.media-control-gear {
189
- order: 99;
190
- }
191
- .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
192
- position: absolute;
193
- right: 16px;
194
- bottom: 52px;
195
- width: 250px;
196
- min-height: 48px;
197
- z-index: 9999;
198
- border-radius: 4px;
199
- box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
200
- }
201
- .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
202
- padding: 8px 0;
203
- }
204
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
205
- margin: 0;
206
- text-align: left;
207
- line-height: 22px;
208
- padding: 5px 14px;
209
- width: 250px;
210
- font-size: 12px;
211
- display: flex;
212
- align-items: center;
213
- justify-content: flex-start;
214
- gap: 8px;
215
- }
216
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
217
- flex: 24px 0 0;
218
- height: 20px;
219
- }
220
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
221
- visibility: hidden;
222
- display: inline-block;
223
- }
224
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
225
- flex: 0 1 100%;
226
- }
227
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
228
- flex: 0 0 14px;
229
- height: 20px;
230
- }
231
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
232
- flex: 1 0 auto;
233
125
  }.big-mute-icon-wrapper[data-big-mute] {
234
126
  position: absolute;
235
127
  z-index: 9998;
@@ -279,29 +171,6 @@
279
171
  }
280
172
  .big-mute-icon[data-big-mute-icon]:hover svg path {
281
173
  fill: #151515 !important;
282
- }@charset "UTF-8";
283
- .gplayer-mc-clips {
284
- display: flex;
285
- gap: 6px;
286
- }
287
- .gplayer-mc-clips .gplayer-mc-clips-text {
288
- text-overflow: ellipsis;
289
- white-space: nowrap;
290
- overflow: hidden;
291
- display: inline-block;
292
- text-overflow: ellipsis;
293
- color: white;
294
- cursor: default;
295
- line-height: var(--bottom-panel);
296
- position: relative;
297
- max-width: 150px;
298
- }
299
- .gplayer-mc-clips .gplayer-mc-clips-text::before {
300
- content: "•";
301
- padding-right: 6px;
302
- }
303
- .gplayer-mc-clips .gplayer-mc-clips-text.compact {
304
- max-width: 100px;
305
174
  }:root {
306
175
  --primary-background-color: #000;
307
176
  --secondary-background-color: #262626;
@@ -666,6 +535,110 @@
666
535
  .fullscreen .clappr-nerd-stats .stats-box {
667
536
  top: unset;
668
537
  }
538
+ }.context-menu {
539
+ z-index: 999;
540
+ position: absolute;
541
+ top: 0;
542
+ left: 0;
543
+ text-align: center;
544
+ }
545
+ .context-menu .context-menu-list {
546
+ font-family: "Proxima Nova", sans-serif;
547
+ font-size: 12px;
548
+ line-height: 12px;
549
+ list-style-type: none;
550
+ text-align: left;
551
+ padding: 5px;
552
+ margin-left: auto;
553
+ margin-right: auto;
554
+ background-color: rgba(0, 0, 0, 0.75);
555
+ border: 1px solid #666;
556
+ border-radius: 4px;
557
+ }
558
+ .context-menu .context-menu-list-item button {
559
+ border: none;
560
+ background-color: transparent;
561
+ padding: 0;
562
+ color: white;
563
+ display: flex;
564
+ gap: 8px;
565
+ align-items: center;
566
+ justify-content: center;
567
+ cursor: pointer;
568
+ padding: 5px;
569
+ width: 100%;
570
+ }
571
+ .context-menu .context-menu-list-item_icon {
572
+ width: 20px;
573
+ height: 20px;
574
+ }@charset "UTF-8";
575
+ .gplayer-mc-clips {
576
+ display: flex;
577
+ gap: 6px;
578
+ }
579
+ .gplayer-mc-clips .gplayer-mc-clips-text {
580
+ text-overflow: ellipsis;
581
+ white-space: nowrap;
582
+ overflow: hidden;
583
+ display: inline-block;
584
+ text-overflow: ellipsis;
585
+ color: white;
586
+ cursor: default;
587
+ line-height: var(--bottom-panel);
588
+ position: relative;
589
+ max-width: 150px;
590
+ }
591
+ .gplayer-mc-clips .gplayer-mc-clips-text::before {
592
+ content: "•";
593
+ padding-right: 6px;
594
+ }
595
+ .gplayer-mc-clips .gplayer-mc-clips-text.compact {
596
+ max-width: 100px;
597
+ }.media-control-skin-1 .media-control-item.media-control-gear {
598
+ order: 99;
599
+ }
600
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
601
+ position: absolute;
602
+ right: 16px;
603
+ bottom: 52px;
604
+ width: 250px;
605
+ min-height: 48px;
606
+ z-index: 9999;
607
+ border-radius: 4px;
608
+ box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
609
+ }
610
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
611
+ padding: 8px 0;
612
+ }
613
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
614
+ margin: 0;
615
+ text-align: left;
616
+ line-height: 22px;
617
+ padding: 5px 14px;
618
+ width: 250px;
619
+ font-size: 12px;
620
+ display: flex;
621
+ align-items: center;
622
+ justify-content: flex-start;
623
+ gap: 8px;
624
+ }
625
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
626
+ flex: 24px 0 0;
627
+ height: 20px;
628
+ }
629
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
630
+ visibility: hidden;
631
+ display: inline-block;
632
+ }
633
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
634
+ flex: 0 1 100%;
635
+ }
636
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
637
+ flex: 0 0 14px;
638
+ height: 20px;
639
+ }
640
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
641
+ flex: 1 0 auto;
669
642
  }.dvr-controls {
670
643
  --disabled-opacity: 0.3;
671
644
  --circle-radius: 5px;
@@ -723,42 +696,69 @@
723
696
  .dvr-controls .live-button:hover {
724
697
  opacity: 1;
725
698
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
726
- }.context-menu {
727
- z-index: 999;
728
- position: absolute;
729
- top: 0;
730
- left: 0;
731
- text-align: center;
699
+ }*,
700
+ :focus,
701
+ :visited {
702
+ outline: none !important;
732
703
  }
733
- .context-menu .context-menu-list {
734
- font-family: "Proxima Nova", sans-serif;
735
- font-size: 12px;
736
- line-height: 12px;
737
- list-style-type: none;
704
+
705
+ .gear-wrapper .go-back {
706
+ font-weight: 600;
707
+ font-size: 14px;
708
+ line-height: 20px;
709
+ width: 100%;
738
710
  text-align: left;
739
- padding: 5px;
740
- margin-left: auto;
741
- margin-right: auto;
742
- background-color: rgba(0, 0, 0, 0.75);
743
- border: 1px solid #666;
744
- border-radius: 4px;
711
+ padding: 12px;
745
712
  }
746
- .context-menu .context-menu-list-item button {
747
- border: none;
748
- background-color: transparent;
749
- padding: 0;
750
- color: white;
751
- display: flex;
752
- gap: 8px;
753
- align-items: center;
754
- justify-content: center;
755
- cursor: pointer;
756
- padding: 5px;
713
+ .gear-wrapper .go-back .arrow-left-icon {
714
+ float: left;
715
+ padding-top: 2px;
716
+ padding-right: 2px;
717
+ }
718
+ .gear-wrapper .go-back .arrow-left-icon svg {
719
+ height: 16px;
720
+ }
721
+ .gear-wrapper .gear-options-list,
722
+ .gear-wrapper .gear-sub-menu {
723
+ list-style-type: none;
724
+ }
725
+ .gear-wrapper ul.gear-sub-menu {
757
726
  width: 100%;
727
+ min-width: 60px;
728
+ border-top: 2px solid rgb(36, 36, 36);
729
+ overflow-y: auto;
758
730
  }
759
- .context-menu .context-menu-list-item_icon {
760
- width: 20px;
731
+ .gear-wrapper ul.gear-sub-menu li {
732
+ font-size: 12px;
733
+ text-align: left;
734
+ }
735
+ .gear-wrapper ul.gear-sub-menu li a {
736
+ display: block;
737
+ text-decoration: none;
738
+ height: 30px;
739
+ padding: 5px 10px;
740
+ line-height: 22px;
741
+ color: var(--gplayer-mc-text-dim-color);
742
+ }
743
+ .gear-wrapper ul.gear-sub-menu li a:hover {
744
+ color: var(--gplayer-mc-text-color);
745
+ background-color: rgba(0, 0, 0, 0.4);
746
+ }
747
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
748
+ color: var(--gplayer-mc-text-color);
749
+ text-decoration: none;
750
+ }
751
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
752
+ width: 30px;
761
753
  height: 20px;
754
+ float: left;
755
+ display: block;
756
+ }
757
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
758
+ display: none;
759
+ }
760
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
761
+ display: inline;
762
762
  }div.player-error-screen, [data-player] div.player-error-screen {
763
763
  color: #CCCACA;
764
764
  position: absolute;
@@ -781,172 +781,18 @@ div.player-error-screen__title[data-error-screen], [data-player] div.player-erro
781
781
  line-height: 30px;
782
782
  font-size: 18px;
783
783
  }
784
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
785
- width: 90%;
786
- margin: 0 auto;
787
- }
788
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
789
- font-size: 13px;
790
- margin-top: 15px;
791
- }
792
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
793
- cursor: pointer;
794
- width: 30px;
795
- margin: 15px auto 0;
796
- }*,
797
- :focus,
798
- :visited {
799
- outline: none !important;
800
- }
801
-
802
- .multicamera[data-multicamera] {
803
- position: relative;
804
- order: 80;
805
- }
806
- .multicamera[data-multicamera] button {
807
- background-color: transparent;
808
- color: #fff;
809
- font-family: Roboto, "Open Sans", Arial, sans-serif;
810
- -webkit-font-smoothing: antialiased;
811
- border: none;
812
- font-size: 14px;
813
- padding: 0;
814
- display: flex;
815
- align-items: center;
816
- justify-content: center;
817
- width: 24px;
818
- height: 20px;
819
- }
820
- .multicamera[data-multicamera] button svg {
821
- height: 20px;
822
- position: relative;
823
- }
824
- .multicamera[data-multicamera] button:hover {
825
- color: #c9c9c9;
826
- }
827
- .multicamera[data-multicamera] button.changing {
828
- animation: pulse 0.5s infinite alternate;
829
- }
830
- .multicamera[data-multicamera] > ul {
831
- padding: 6px 0;
832
- right: -24px;
833
- width: 245px;
834
- list-style-type: none;
835
- position: absolute;
836
- bottom: 48px;
837
- border-radius: 4px;
838
- display: none;
839
- background-color: rgba(74, 74, 74, 0.9);
840
- }
841
- .multicamera[data-multicamera] > ul::after {
842
- content: "";
843
- position: absolute;
844
- top: 100%;
845
- left: 85%;
846
- margin-left: -10px;
847
- width: 0;
848
- height: 0;
849
- border-top: 10px solid rgba(74, 74, 74, 0.9);
850
- border-right: 10px solid transparent;
851
- border-left: 10px solid transparent;
852
- }
853
- .multicamera[data-multicamera] li {
854
- font-size: 10px;
855
- cursor: pointer;
856
- }
857
- .multicamera[data-multicamera] li .multicamera-item {
858
- display: flex;
859
- padding: 10px 0;
860
- justify-content: center;
861
- position: relative;
862
- }
863
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
864
- opacity: 0.5;
865
- }
866
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
867
- opacity: 0.5;
868
- }
869
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
870
- background-color: rgba(0, 0, 0, 0);
871
- }
872
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
873
- pointer-events: none;
874
- }
875
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
876
- background-color: rgba(0, 0, 0, 0.3);
877
- }
878
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
879
- width: 80px;
880
- height: 60px;
881
- }
882
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
883
- width: 80px;
884
- height: 60px;
885
- }
886
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
887
- width: 120px;
888
- text-align: left;
889
- margin-left: 15px;
890
- }
891
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
892
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
893
- width: 120px;
894
- height: 20px;
895
- font-family: Roboto, "Open Sans", Arial, sans-serif;
896
- font-size: 14px;
897
- font-weight: normal;
898
- font-style: normal;
899
- font-stretch: normal;
900
- line-height: 1.43;
901
- letter-spacing: normal;
902
- text-align: left;
903
- color: #fff;
904
- text-overflow: ellipsis;
905
- overflow: hidden;
906
- }
907
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
908
- opacity: 0.6;
909
- }.media-control-skin-1 .media-control-item.media-control-pip {
910
- order: 95;
911
- }
912
- .media-control-skin-1 .media-control-item.media-control-pip button {
913
- height: 20px;
914
- }
915
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
916
- height: 20px;
917
- }.seek-time {
918
- position: absolute;
919
- white-space: nowrap;
920
- height: 20px;
921
- line-height: 20px;
922
- font-size: 0;
923
- left: -100%;
924
- bottom: 55px;
925
- background-color: rgba(2, 2, 2, 0.5);
926
- z-index: 9999;
927
- transition: opacity 0.1s ease;
928
- }
929
- .seek-time.hidden {
930
- opacity: 0;
931
- }
932
- .seek-time .seek-time__pos {
933
- display: inline-block;
934
- color: white;
935
- font-size: 10px;
936
- padding-left: 7px;
937
- padding-right: 7px;
938
- vertical-align: top;
939
- }
940
- .seek-time .seek-time__duration {
941
- display: inline-block;
942
- color: rgba(255, 255, 255, 0.5);
943
- font-size: 10px;
944
- padding-right: 7px;
945
- vertical-align: top;
784
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
785
+ width: 90%;
786
+ margin: 0 auto;
946
787
  }
947
- .seek-time .seek-time__duration::before {
948
- content: "|";
949
- margin-right: 7px;
788
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
789
+ font-size: 13px;
790
+ margin-top: 15px;
791
+ }
792
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
793
+ cursor: pointer;
794
+ width: 30px;
795
+ margin: 15px auto 0;
950
796
  }[data-player] {
951
797
  --bottom-panel: 40px;
952
798
  }
@@ -1568,6 +1414,127 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1568
1414
  100% {
1569
1415
  color: #B80000;
1570
1416
  }
1417
+ }.media-control-skin-1 .media-control-item.media-control-pip {
1418
+ order: 95;
1419
+ }
1420
+ .media-control-skin-1 .media-control-item.media-control-pip button {
1421
+ height: 20px;
1422
+ }
1423
+ .media-control-skin-1 .media-control-item.media-control-pip button svg {
1424
+ height: 20px;
1425
+ }*,
1426
+ :focus,
1427
+ :visited {
1428
+ outline: none !important;
1429
+ }
1430
+
1431
+ .multicamera[data-multicamera] {
1432
+ position: relative;
1433
+ order: 80;
1434
+ }
1435
+ .multicamera[data-multicamera] button {
1436
+ background-color: transparent;
1437
+ color: #fff;
1438
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1439
+ -webkit-font-smoothing: antialiased;
1440
+ border: none;
1441
+ font-size: 14px;
1442
+ padding: 0;
1443
+ display: flex;
1444
+ align-items: center;
1445
+ justify-content: center;
1446
+ width: 24px;
1447
+ height: 20px;
1448
+ }
1449
+ .multicamera[data-multicamera] button svg {
1450
+ height: 20px;
1451
+ position: relative;
1452
+ }
1453
+ .multicamera[data-multicamera] button:hover {
1454
+ color: #c9c9c9;
1455
+ }
1456
+ .multicamera[data-multicamera] button.changing {
1457
+ animation: pulse 0.5s infinite alternate;
1458
+ }
1459
+ .multicamera[data-multicamera] > ul {
1460
+ padding: 6px 0;
1461
+ right: -24px;
1462
+ width: 245px;
1463
+ list-style-type: none;
1464
+ position: absolute;
1465
+ bottom: 48px;
1466
+ border-radius: 4px;
1467
+ display: none;
1468
+ background-color: rgba(74, 74, 74, 0.9);
1469
+ }
1470
+ .multicamera[data-multicamera] > ul::after {
1471
+ content: "";
1472
+ position: absolute;
1473
+ top: 100%;
1474
+ left: 85%;
1475
+ margin-left: -10px;
1476
+ width: 0;
1477
+ height: 0;
1478
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
1479
+ border-right: 10px solid transparent;
1480
+ border-left: 10px solid transparent;
1481
+ }
1482
+ .multicamera[data-multicamera] li {
1483
+ font-size: 10px;
1484
+ cursor: pointer;
1485
+ }
1486
+ .multicamera[data-multicamera] li .multicamera-item {
1487
+ display: flex;
1488
+ padding: 10px 0;
1489
+ justify-content: center;
1490
+ position: relative;
1491
+ }
1492
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1493
+ opacity: 0.5;
1494
+ }
1495
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1496
+ opacity: 0.5;
1497
+ }
1498
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1499
+ background-color: rgba(0, 0, 0, 0);
1500
+ }
1501
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1502
+ pointer-events: none;
1503
+ }
1504
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1505
+ background-color: rgba(0, 0, 0, 0.3);
1506
+ }
1507
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1508
+ width: 80px;
1509
+ height: 60px;
1510
+ }
1511
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1512
+ width: 80px;
1513
+ height: 60px;
1514
+ }
1515
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1516
+ width: 120px;
1517
+ text-align: left;
1518
+ margin-left: 15px;
1519
+ }
1520
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
1521
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1522
+ width: 120px;
1523
+ height: 20px;
1524
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1525
+ font-size: 14px;
1526
+ font-weight: normal;
1527
+ font-style: normal;
1528
+ font-stretch: normal;
1529
+ line-height: 1.43;
1530
+ letter-spacing: normal;
1531
+ text-align: left;
1532
+ color: #fff;
1533
+ text-overflow: ellipsis;
1534
+ overflow: hidden;
1535
+ }
1536
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1537
+ opacity: 0.6;
1571
1538
  }.player-poster {
1572
1539
  display: flex;
1573
1540
  justify-content: center;
@@ -1602,12 +1569,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1602
1569
  }
1603
1570
  .player-poster .play-wrapper svg path {
1604
1571
  fill: #fff;
1605
- }.quality-levels li.disabled {
1606
- opacity: 0.5;
1607
- pointer-events: none;
1608
- }
1609
- .quality-levels li.current {
1610
- background-color: #000;
1611
1572
  }.share_plugin[data-share] {
1612
1573
  pointer-events: auto;
1613
1574
  z-index: 5;
@@ -1691,6 +1652,45 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1691
1652
  display: inline-block;
1692
1653
  margin-right: 5px;
1693
1654
  cursor: pointer;
1655
+ }.quality-levels li.disabled {
1656
+ opacity: 0.5;
1657
+ pointer-events: none;
1658
+ }
1659
+ .quality-levels li.current {
1660
+ background-color: #000;
1661
+ }.seek-time {
1662
+ position: absolute;
1663
+ white-space: nowrap;
1664
+ height: 20px;
1665
+ line-height: 20px;
1666
+ font-size: 0;
1667
+ left: -100%;
1668
+ bottom: 55px;
1669
+ background-color: rgba(2, 2, 2, 0.5);
1670
+ z-index: 9999;
1671
+ transition: opacity 0.1s ease;
1672
+ }
1673
+ .seek-time.hidden {
1674
+ opacity: 0;
1675
+ }
1676
+ .seek-time .seek-time__pos {
1677
+ display: inline-block;
1678
+ color: white;
1679
+ font-size: 10px;
1680
+ padding-left: 7px;
1681
+ padding-right: 7px;
1682
+ vertical-align: top;
1683
+ }
1684
+ .seek-time .seek-time__duration {
1685
+ display: inline-block;
1686
+ color: rgba(255, 255, 255, 0.5);
1687
+ font-size: 10px;
1688
+ padding-right: 7px;
1689
+ vertical-align: top;
1690
+ }
1691
+ .seek-time .seek-time__duration::before {
1692
+ content: "|";
1693
+ margin-right: 7px;
1694
1694
  }.container-with-poster-clickable .mc-skip-time {
1695
1695
  height: 0;
1696
1696
  }
@@ -1773,6 +1773,44 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1773
1773
  background-color: rgba(0, 0, 0, 0.4);
1774
1774
  color: white;
1775
1775
  display: inline-block;
1776
+ }.spinner-three-bounce[data-spinner] {
1777
+ position: absolute;
1778
+ width: 70px;
1779
+ text-align: center;
1780
+ z-index: 999;
1781
+ left: 0;
1782
+ right: 0;
1783
+ margin: 0 auto;
1784
+ margin-left: auto;
1785
+ margin-right: auto;
1786
+ /* center vertically */
1787
+ top: 50%;
1788
+ transform: translateY(-50%);
1789
+ }
1790
+ .spinner-three-bounce[data-spinner] > div {
1791
+ width: 18px;
1792
+ height: 18px;
1793
+ background-color: #FFF;
1794
+ border-radius: 100%;
1795
+ display: inline-block;
1796
+ animation: bouncedelay 1.4s infinite ease-in-out;
1797
+ /* Prevent first frame from flickering when animation starts */
1798
+ animation-fill-mode: both;
1799
+ }
1800
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1801
+ animation-delay: -0.32s;
1802
+ }
1803
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1804
+ animation-delay: -0.16s;
1805
+ }
1806
+
1807
+ @keyframes bouncedelay {
1808
+ 0%, 80%, 100% {
1809
+ transform: scale(0);
1810
+ }
1811
+ 40% {
1812
+ transform: scale(1);
1813
+ }
1776
1814
  }.scrub-thumbnails {
1777
1815
  position: absolute;
1778
1816
  bottom: 52px;
@@ -1836,44 +1874,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1836
1874
  }
1837
1875
  .scrub-thumbnails .backdrop .carousel img {
1838
1876
  width: auto;
1839
- }.spinner-three-bounce[data-spinner] {
1840
- position: absolute;
1841
- width: 70px;
1842
- text-align: center;
1843
- z-index: 999;
1844
- left: 0;
1845
- right: 0;
1846
- margin: 0 auto;
1847
- margin-left: auto;
1848
- margin-right: auto;
1849
- /* center vertically */
1850
- top: 50%;
1851
- transform: translateY(-50%);
1852
- }
1853
- .spinner-three-bounce[data-spinner] > div {
1854
- width: 18px;
1855
- height: 18px;
1856
- background-color: #FFF;
1857
- border-radius: 100%;
1858
- display: inline-block;
1859
- animation: bouncedelay 1.4s infinite ease-in-out;
1860
- /* Prevent first frame from flickering when animation starts */
1861
- animation-fill-mode: both;
1862
- }
1863
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1864
- animation-delay: -0.32s;
1865
- }
1866
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1867
- animation-delay: -0.16s;
1868
- }
1869
-
1870
- @keyframes bouncedelay {
1871
- 0%, 80%, 100% {
1872
- transform: scale(0);
1873
- }
1874
- 40% {
1875
- transform: scale(1);
1876
- }
1877
1877
  }.player-logo[data-logo] {
1878
1878
  position: absolute;
1879
1879
  z-index: 2;