@gcorevideo/player 2.28.4 → 2.28.8

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/dist/index.css CHANGED
@@ -122,55 +122,6 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }.big-mute-icon-wrapper[data-big-mute] {
126
- position: absolute;
127
- z-index: 9998;
128
- background-color: transparent;
129
- display: flex;
130
- justify-content: center;
131
- width: 100%;
132
- height: calc(100% - 50px);
133
- margin: 0 auto;
134
- opacity: 0.75;
135
- transition: opacity 0.1s ease;
136
- pointer-events: auto;
137
- }
138
- .big-mute-icon-wrapper[data-big-mute].hide {
139
- display: none;
140
- }
141
- .big-mute-icon-wrapper[data-big-mute]:hover {
142
- cursor: pointer;
143
- }
144
-
145
- .big-mute-icon[data-big-mute-icon] {
146
- display: flex;
147
- align-items: center;
148
- justify-content: center;
149
- align-self: center;
150
- width: 120px;
151
- height: 120px;
152
- border: 2px solid white;
153
- border-radius: 50%;
154
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
155
- filter: alpha(opacity=60);
156
- opacity: 1;
157
- box-shadow: 0 0 1px 0 white;
158
- background: rgba(240, 243, 247, 0.9411764706);
159
- z-index: 10000;
160
- }
161
- .big-mute-icon[data-big-mute-icon] svg {
162
- margin-left: 5px;
163
- width: 80px;
164
- height: 80px;
165
- }
166
- .big-mute-icon[data-big-mute-icon] svg path {
167
- fill: #1f1e1e !important;
168
- }
169
- .big-mute-icon[data-big-mute-icon]:hover {
170
- background: rgba(240, 243, 247, 0.8784313725);
171
- }
172
- .big-mute-icon[data-big-mute-icon]:hover svg path {
173
- fill: #151515 !important;
174
125
  }.media-control-skin-1 .media-control-item.media-control-gear {
175
126
  order: 99;
176
127
  }
@@ -274,6 +225,55 @@
274
225
  }
275
226
  .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
276
227
  display: inline;
228
+ }.big-mute-icon-wrapper[data-big-mute] {
229
+ position: absolute;
230
+ z-index: 9998;
231
+ background-color: transparent;
232
+ display: flex;
233
+ justify-content: center;
234
+ width: 100%;
235
+ height: calc(100% - 50px);
236
+ margin: 0 auto;
237
+ opacity: 0.75;
238
+ transition: opacity 0.1s ease;
239
+ pointer-events: auto;
240
+ }
241
+ .big-mute-icon-wrapper[data-big-mute].hide {
242
+ display: none;
243
+ }
244
+ .big-mute-icon-wrapper[data-big-mute]:hover {
245
+ cursor: pointer;
246
+ }
247
+
248
+ .big-mute-icon[data-big-mute-icon] {
249
+ display: flex;
250
+ align-items: center;
251
+ justify-content: center;
252
+ align-self: center;
253
+ width: 120px;
254
+ height: 120px;
255
+ border: 2px solid white;
256
+ border-radius: 50%;
257
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
258
+ filter: alpha(opacity=60);
259
+ opacity: 1;
260
+ box-shadow: 0 0 1px 0 white;
261
+ background: rgba(240, 243, 247, 0.9411764706);
262
+ z-index: 10000;
263
+ }
264
+ .big-mute-icon[data-big-mute-icon] svg {
265
+ margin-left: 5px;
266
+ width: 80px;
267
+ height: 80px;
268
+ }
269
+ .big-mute-icon[data-big-mute-icon] svg path {
270
+ fill: #1f1e1e !important;
271
+ }
272
+ .big-mute-icon[data-big-mute-icon]:hover {
273
+ background: rgba(240, 243, 247, 0.8784313725);
274
+ }
275
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
276
+ fill: #151515 !important;
277
277
  }:root {
278
278
  --primary-background-color: #000;
279
279
  --secondary-background-color: #262626;
@@ -697,40 +697,6 @@
697
697
  .context-menu .context-menu-list-item_icon {
698
698
  width: 20px;
699
699
  height: 20px;
700
- }div.player-error-screen, [data-player] div.player-error-screen {
701
- color: #CCCACA;
702
- position: absolute;
703
- top: 0;
704
- height: 100%;
705
- width: 100%;
706
- background-color: rgba(0, 0, 0, 0.7);
707
- z-index: 2000;
708
- display: flex;
709
- flex-direction: column;
710
- justify-content: center;
711
- }
712
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
713
- font-size: 14px;
714
- color: #CCCACA;
715
- margin-top: 45px;
716
- }
717
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
718
- font-weight: bold;
719
- line-height: 30px;
720
- font-size: 18px;
721
- }
722
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
723
- width: 90%;
724
- margin: 0 auto;
725
- }
726
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
727
- font-size: 13px;
728
- margin-top: 15px;
729
- }
730
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
731
- cursor: pointer;
732
- width: 30px;
733
- margin: 15px auto 0;
734
700
  }.dvr-controls {
735
701
  --disabled-opacity: 0.3;
736
702
  --circle-radius: 5px;
@@ -788,82 +754,285 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
788
754
  .dvr-controls .live-button:hover {
789
755
  opacity: 1;
790
756
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
791
- }.media-control-skin-1 .media-control-item.media-control-pip {
792
- order: 95;
793
- }
794
- .media-control-skin-1 .media-control-item.media-control-pip button {
795
- height: 20px;
796
- }
797
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
798
- height: 20px;
799
- }[data-player] {
800
- --bottom-panel: 40px;
801
- }
802
-
803
- .container .media-control-notransition {
804
- transition: none !important;
757
+ }div.player-error-screen, [data-player] div.player-error-screen {
758
+ color: #CCCACA;
759
+ position: absolute;
760
+ top: 0;
761
+ height: 100%;
762
+ width: 100%;
763
+ background-color: rgba(0, 0, 0, 0.7);
764
+ z-index: 2000;
765
+ display: flex;
766
+ flex-direction: column;
767
+ justify-content: center;
805
768
  }
806
- .container .player-poster .play-wrapper {
807
- opacity: 1;
769
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
770
+ font-size: 14px;
771
+ color: #CCCACA;
772
+ margin-top: 45px;
808
773
  }
809
- .container.crop-video [data-html5-video] {
810
- object-fit: cover;
774
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
775
+ font-weight: bold;
776
+ line-height: 30px;
777
+ font-size: 18px;
811
778
  }
812
- .container .player-poster .circle-poster {
813
- top: 50%;
814
- margin-top: -60px;
815
- left: 50%;
816
- margin-left: -60px;
817
- position: absolute;
818
- width: 120px;
819
- height: 120px;
820
- border: 2px solid white;
821
- border-radius: 50%;
822
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
823
- filter: alpha(opacity=60);
824
- opacity: 1;
825
- box-shadow: 0 0 1px 0 white;
779
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
780
+ width: 90%;
781
+ margin: 0 auto;
826
782
  }
827
- .container .player-poster .circle-poster svg {
828
- margin-left: 5px;
829
- width: 80px;
783
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
784
+ font-size: 13px;
785
+ margin-top: 15px;
830
786
  }
831
- .container .spinner-three-bounce[data-spinner] > div {
832
- background-color: #ff5700;
787
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
788
+ cursor: pointer;
789
+ width: 30px;
790
+ margin: 15px auto 0;
791
+ }*,
792
+ :focus,
793
+ :visited {
794
+ outline: none !important;
833
795
  }
834
796
 
835
- .media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
836
- transform: rotate(270deg);
837
- float: none;
838
- display: block;
839
- position: absolute;
840
- margin: 0;
841
- top: -40px;
842
- padding: 0;
843
- margin-left: -32px;
844
- margin-top: -3px;
845
- width: 80px;
797
+ .multicamera[data-multicamera] {
798
+ float: right;
799
+ margin-top: 4px;
800
+ position: relative;
801
+ margin-right: 20px;
802
+ width: 20px;
846
803
  }
847
- .media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {
848
- position: absolute;
849
- width: 100%;
850
- height: 100%;
851
- left: -5px;
804
+ .multicamera[data-multicamera] button {
805
+ background-color: transparent;
806
+ color: #fff;
807
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
808
+ -webkit-font-smoothing: antialiased;
809
+ border: none;
810
+ font-size: 14px;
811
+ padding: 0;
852
812
  }
853
- .media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
854
- display: none;
813
+ .multicamera[data-multicamera] button svg {
814
+ height: 20px;
815
+ position: relative;
816
+ margin-top: 6px;
855
817
  }
856
- .media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {
857
- margin-left: 11px;
858
- top: 7px;
859
- width: 80px;
818
+ .multicamera[data-multicamera] button:hover {
819
+ color: #c9c9c9;
860
820
  }
861
- .media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {
862
- margin-left: 11px;
863
- top: 1px;
821
+ .multicamera[data-multicamera] button.changing {
822
+ animation: pulse 0.5s infinite alternate;
864
823
  }
865
- .media-control-skin-1.w270 .media-control-dd__popup {
866
- max-width: 114px;
824
+ .multicamera[data-multicamera] button span.quality-arrow {
825
+ width: 9px;
826
+ height: 6px;
827
+ margin-top: 11px;
828
+ margin-left: 5px;
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] {
864
+ pointer-events: none;
865
+ }
866
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
867
+ opacity: 0.5;
868
+ }
869
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
870
+ opacity: 0.5;
871
+ }
872
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
873
+ background-color: rgba(0, 0, 0, 0);
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
+ }
910
+ .multicamera[data-multicamera] li a {
911
+ color: #444;
912
+ padding: 2px 10px;
913
+ display: block;
914
+ text-decoration: none;
915
+ }
916
+ .multicamera[data-multicamera] li a:hover {
917
+ background-color: #555;
918
+ color: white;
919
+ }
920
+ .multicamera[data-multicamera] li a:hover a {
921
+ color: white;
922
+ text-decoration: none;
923
+ }
924
+ .multicamera[data-multicamera] li.current a {
925
+ color: #f00;
926
+ }.player-poster {
927
+ display: flex;
928
+ justify-content: center;
929
+ align-items: center;
930
+ position: absolute;
931
+ height: 100%;
932
+ width: 100%;
933
+ z-index: 998;
934
+ top: 0;
935
+ left: 0;
936
+ background-color: #000;
937
+ background-size: cover;
938
+ background-repeat: no-repeat;
939
+ background-position: 50% 50%;
940
+ }
941
+ .player-poster.clickable {
942
+ cursor: pointer;
943
+ }
944
+ .player-poster:hover .play-wrapper {
945
+ opacity: 1;
946
+ }
947
+ .player-poster .play-wrapper {
948
+ width: 100%;
949
+ height: 25%;
950
+ margin: 0 auto;
951
+ opacity: 0.75;
952
+ transition: opacity 0.1s ease;
953
+ }
954
+ .player-poster .play-wrapper svg {
955
+ height: 100%;
956
+ display: inline;
957
+ }
958
+ .player-poster .play-wrapper svg path {
959
+ fill: #fff;
960
+ }.media-control-skin-1 .media-control-item.media-control-pip {
961
+ order: 95;
962
+ }
963
+ .media-control-skin-1 .media-control-item.media-control-pip button {
964
+ height: 20px;
965
+ }
966
+ .media-control-skin-1 .media-control-item.media-control-pip button svg {
967
+ height: 20px;
968
+ }[data-player] {
969
+ --bottom-panel: 40px;
970
+ }
971
+
972
+ .container .media-control-notransition {
973
+ transition: none !important;
974
+ }
975
+ .container .player-poster .play-wrapper {
976
+ opacity: 1;
977
+ }
978
+ .container.crop-video [data-html5-video] {
979
+ object-fit: cover;
980
+ }
981
+ .container .player-poster .circle-poster {
982
+ top: 50%;
983
+ margin-top: -60px;
984
+ left: 50%;
985
+ margin-left: -60px;
986
+ position: absolute;
987
+ width: 120px;
988
+ height: 120px;
989
+ border: 2px solid white;
990
+ border-radius: 50%;
991
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
992
+ filter: alpha(opacity=60);
993
+ opacity: 1;
994
+ box-shadow: 0 0 1px 0 white;
995
+ }
996
+ .container .player-poster .circle-poster svg {
997
+ margin-left: 5px;
998
+ width: 80px;
999
+ }
1000
+ .container .spinner-three-bounce[data-spinner] > div {
1001
+ background-color: #ff5700;
1002
+ }
1003
+
1004
+ .media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1005
+ transform: rotate(270deg);
1006
+ float: none;
1007
+ display: block;
1008
+ position: absolute;
1009
+ margin: 0;
1010
+ top: -40px;
1011
+ padding: 0;
1012
+ margin-left: -32px;
1013
+ margin-top: -3px;
1014
+ width: 80px;
1015
+ }
1016
+ .media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {
1017
+ position: absolute;
1018
+ width: 100%;
1019
+ height: 100%;
1020
+ left: -5px;
1021
+ }
1022
+ .media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1023
+ display: none;
1024
+ }
1025
+ .media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {
1026
+ margin-left: 11px;
1027
+ top: 7px;
1028
+ width: 80px;
1029
+ }
1030
+ .media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {
1031
+ margin-left: 11px;
1032
+ top: 1px;
1033
+ }
1034
+ .media-control-skin-1.w270 .media-control-dd__popup {
1035
+ max-width: 114px;
867
1036
  }
868
1037
 
869
1038
  .media-control-skin-1.w370 .media-control-cc {
@@ -1417,175 +1586,104 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1417
1586
  100% {
1418
1587
  color: #B80000;
1419
1588
  }
1420
- }*,
1421
- :focus,
1422
- :visited {
1423
- outline: none !important;
1424
- }
1425
-
1426
- .multicamera[data-multicamera] {
1427
- float: right;
1428
- margin-top: 4px;
1429
- position: relative;
1430
- margin-right: 20px;
1431
- width: 20px;
1432
- }
1433
- .multicamera[data-multicamera] button {
1434
- background-color: transparent;
1435
- color: #fff;
1436
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1437
- -webkit-font-smoothing: antialiased;
1438
- border: none;
1439
- font-size: 14px;
1440
- padding: 0;
1589
+ }.quality-levels li.disabled {
1590
+ opacity: 0.5;
1591
+ pointer-events: none;
1441
1592
  }
1442
- .multicamera[data-multicamera] button svg {
1593
+ .quality-levels li.current {
1594
+ background-color: #000;
1595
+ }.seek-time {
1596
+ position: absolute;
1597
+ white-space: nowrap;
1443
1598
  height: 20px;
1444
- position: relative;
1445
- margin-top: 6px;
1446
- }
1447
- .multicamera[data-multicamera] button:hover {
1448
- color: #c9c9c9;
1599
+ line-height: 20px;
1600
+ font-size: 0;
1601
+ left: -100%;
1602
+ bottom: 55px;
1603
+ background-color: rgba(2, 2, 2, 0.5);
1604
+ z-index: 9999;
1605
+ transition: opacity 0.1s ease;
1449
1606
  }
1450
- .multicamera[data-multicamera] button.changing {
1451
- animation: pulse 0.5s infinite alternate;
1607
+ .seek-time.hidden {
1608
+ opacity: 0;
1452
1609
  }
1453
- .multicamera[data-multicamera] button span.quality-arrow {
1454
- width: 9px;
1455
- height: 6px;
1456
- margin-top: 11px;
1457
- margin-left: 5px;
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 {
1610
+ .seek-time .seek-time__pos {
1611
+ display: inline-block;
1612
+ color: white;
1483
1613
  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] {
1493
- pointer-events: none;
1494
- }
1495
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1496
- opacity: 0.5;
1497
- }
1498
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1499
- opacity: 0.5;
1500
- }
1501
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1502
- background-color: rgba(0, 0, 0, 0);
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;
1614
+ padding-left: 7px;
1615
+ padding-right: 7px;
1616
+ vertical-align: top;
1510
1617
  }
1511
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1512
- width: 80px;
1513
- height: 60px;
1618
+ .seek-time .seek-time__duration {
1619
+ display: inline-block;
1620
+ color: rgba(255, 255, 255, 0.5);
1621
+ font-size: 10px;
1622
+ padding-right: 7px;
1623
+ vertical-align: top;
1514
1624
  }
1515
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1516
- width: 120px;
1517
- text-align: left;
1518
- margin-left: 15px;
1625
+ .seek-time .seek-time__duration::before {
1626
+ content: "|";
1627
+ margin-right: 7px;
1628
+ }.container-with-poster-clickable .mc-skip-time {
1629
+ height: 0;
1519
1630
  }
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;
1631
+
1632
+ .mc-skip-time {
1633
+ position: absolute;
1634
+ width: 100%;
1635
+ height: calc(100% - 50px);
1636
+ z-index: 9998;
1637
+ background-color: transparent;
1524
1638
  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;
1538
- }
1539
- .multicamera[data-multicamera] li a {
1540
- color: #444;
1541
- padding: 2px 10px;
1542
- display: block;
1543
- text-decoration: none;
1544
- }
1545
- .multicamera[data-multicamera] li a:hover {
1546
- background-color: #555;
1547
- color: white;
1548
- }
1549
- .multicamera[data-multicamera] li a:hover a {
1550
- color: white;
1551
- text-decoration: none;
1552
1639
  }
1553
- .multicamera[data-multicamera] li.current a {
1554
- color: #f00;
1555
- }.player-poster {
1640
+ .mc-skip-time .skip-container {
1641
+ width: 100%;
1642
+ height: 100%;
1556
1643
  display: flex;
1557
- justify-content: center;
1558
- align-items: center;
1559
- position: absolute;
1644
+ justify-content: space-between;
1645
+ }
1646
+ .mc-skip-time .skip-container .skip-item {
1647
+ flex: 1 0 0px;
1560
1648
  height: 100%;
1561
- width: 100%;
1562
- z-index: 998;
1563
- top: 0;
1649
+ }.spinner-three-bounce[data-spinner] {
1650
+ position: absolute;
1651
+ width: 70px;
1652
+ text-align: center;
1653
+ z-index: 999;
1564
1654
  left: 0;
1565
- background-color: #000;
1566
- background-size: cover;
1567
- background-repeat: no-repeat;
1568
- background-position: 50% 50%;
1569
- }
1570
- .player-poster.clickable {
1571
- cursor: pointer;
1655
+ right: 0;
1656
+ margin: 0 auto;
1657
+ margin-left: auto;
1658
+ margin-right: auto;
1659
+ /* center vertically */
1660
+ top: 50%;
1661
+ transform: translateY(-50%);
1572
1662
  }
1573
- .player-poster:hover .play-wrapper {
1574
- opacity: 1;
1663
+ .spinner-three-bounce[data-spinner] > div {
1664
+ width: 18px;
1665
+ height: 18px;
1666
+ background-color: #FFF;
1667
+ border-radius: 100%;
1668
+ display: inline-block;
1669
+ animation: bouncedelay 1.4s infinite ease-in-out;
1670
+ /* Prevent first frame from flickering when animation starts */
1671
+ animation-fill-mode: both;
1575
1672
  }
1576
- .player-poster .play-wrapper {
1577
- width: 100%;
1578
- height: 25%;
1579
- margin: 0 auto;
1580
- opacity: 0.75;
1581
- transition: opacity 0.1s ease;
1673
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1674
+ animation-delay: -0.32s;
1582
1675
  }
1583
- .player-poster .play-wrapper svg {
1584
- height: 100%;
1585
- display: inline;
1676
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1677
+ animation-delay: -0.16s;
1586
1678
  }
1587
- .player-poster .play-wrapper svg path {
1588
- fill: #fff;
1679
+
1680
+ @keyframes bouncedelay {
1681
+ 0%, 80%, 100% {
1682
+ transform: scale(0);
1683
+ }
1684
+ 40% {
1685
+ transform: scale(1);
1686
+ }
1589
1687
  }.share_plugin[data-share] {
1590
1688
  pointer-events: auto;
1591
1689
  z-index: 5;
@@ -1669,145 +1767,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1669
1767
  display: inline-block;
1670
1768
  margin-right: 5px;
1671
1769
  cursor: pointer;
1672
- }.seek-time {
1673
- position: absolute;
1674
- white-space: nowrap;
1675
- height: 20px;
1676
- line-height: 20px;
1677
- font-size: 0;
1678
- left: -100%;
1679
- bottom: 55px;
1680
- background-color: rgba(2, 2, 2, 0.5);
1681
- z-index: 9999;
1682
- transition: opacity 0.1s ease;
1683
- }
1684
- .seek-time.hidden {
1685
- opacity: 0;
1686
- }
1687
- .seek-time .seek-time__pos {
1688
- display: inline-block;
1689
- color: white;
1690
- font-size: 10px;
1691
- padding-left: 7px;
1692
- padding-right: 7px;
1693
- vertical-align: top;
1694
- }
1695
- .seek-time .seek-time__duration {
1696
- display: inline-block;
1697
- color: rgba(255, 255, 255, 0.5);
1698
- font-size: 10px;
1699
- padding-right: 7px;
1700
- vertical-align: top;
1701
- }
1702
- .seek-time .seek-time__duration::before {
1703
- content: "|";
1704
- margin-right: 7px;
1705
- }.media-control-skin-1 .media-control-cc button.media-control-button {
1706
- display: flex;
1707
- justify-content: center;
1708
- padding: 0;
1709
- align-items: center;
1710
- vertical-align: top;
1711
- }
1712
- .media-control-skin-1 .media-control-cc button.media-control-button:hover {
1713
- color: white;
1714
- }
1715
- .media-control-skin-1 .media-control-cc ul li {
1716
- text-align: center;
1717
- }
1718
- .media-control-skin-1 .media-control-cc ul li a {
1719
- height: 30px;
1720
- padding: 5px 10px;
1721
- color: #fffffe;
1722
- }
1723
- .media-control-skin-1 .media-control-cc ul li a:hover {
1724
- background-color: rgba(0, 0, 0, 0.4);
1725
- }
1726
- .media-control-skin-1 .media-control-cc ul li.current a {
1727
- background-color: rgba(0, 0, 0, 0.4);
1728
- }
1729
- .media-control-skin-1 .media-control-cc ul li:first-child a {
1730
- border-bottom-left-radius: 4px;
1731
- border-bottom-right-radius: 4px;
1732
- }
1733
- .media-control-skin-1 .media-control-cc ul li:last-child a {
1734
- border-top-left-radius: 4px;
1735
- border-top-right-radius: 4px;
1736
- }
1737
- .media-control-skin-1 .media-control-cc {
1738
- position: relative;
1739
- order: 85;
1740
- }
1741
-
1742
- .container .gplayer-cc-line {
1743
- position: absolute;
1744
- bottom: calc(var(--bottom-panel) + 5px);
1745
- width: 100%;
1746
- }
1747
- .container .gplayer-cc-line p {
1748
- width: auto;
1749
- background-color: rgba(0, 0, 0, 0.4);
1750
- color: white;
1751
- display: inline-block;
1752
- }.container-with-poster-clickable .mc-skip-time {
1753
- height: 0;
1754
- }
1755
-
1756
- .mc-skip-time {
1757
- position: absolute;
1758
- width: 100%;
1759
- height: calc(100% - 50px);
1760
- z-index: 9998;
1761
- background-color: transparent;
1762
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1763
- }
1764
- .mc-skip-time .skip-container {
1765
- width: 100%;
1766
- height: 100%;
1767
- display: flex;
1768
- justify-content: space-between;
1769
- }
1770
- .mc-skip-time .skip-container .skip-item {
1771
- flex: 1 0 0px;
1772
- height: 100%;
1773
- }.spinner-three-bounce[data-spinner] {
1774
- position: absolute;
1775
- width: 70px;
1776
- text-align: center;
1777
- z-index: 999;
1778
- left: 0;
1779
- right: 0;
1780
- margin: 0 auto;
1781
- margin-left: auto;
1782
- margin-right: auto;
1783
- /* center vertically */
1784
- top: 50%;
1785
- transform: translateY(-50%);
1786
- }
1787
- .spinner-three-bounce[data-spinner] > div {
1788
- width: 18px;
1789
- height: 18px;
1790
- background-color: #FFF;
1791
- border-radius: 100%;
1792
- display: inline-block;
1793
- animation: bouncedelay 1.4s infinite ease-in-out;
1794
- /* Prevent first frame from flickering when animation starts */
1795
- animation-fill-mode: both;
1796
- }
1797
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1798
- animation-delay: -0.32s;
1799
- }
1800
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1801
- animation-delay: -0.16s;
1802
- }
1803
-
1804
- @keyframes bouncedelay {
1805
- 0%, 80%, 100% {
1806
- transform: scale(0);
1807
- }
1808
- 40% {
1809
- transform: scale(1);
1810
- }
1811
1770
  }.scrub-thumbnails {
1812
1771
  position: absolute;
1813
1772
  bottom: 52px;
@@ -1871,12 +1830,53 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1871
1830
  }
1872
1831
  .scrub-thumbnails .backdrop .carousel img {
1873
1832
  width: auto;
1874
- }.quality-levels li.disabled {
1875
- opacity: 0.5;
1876
- pointer-events: none;
1833
+ }.media-control-skin-1 .media-control-cc button.media-control-button {
1834
+ display: flex;
1835
+ justify-content: center;
1836
+ padding: 0;
1837
+ align-items: center;
1838
+ vertical-align: top;
1877
1839
  }
1878
- .quality-levels li.current {
1879
- background-color: #000;
1840
+ .media-control-skin-1 .media-control-cc button.media-control-button:hover {
1841
+ color: white;
1842
+ }
1843
+ .media-control-skin-1 .media-control-cc ul li {
1844
+ text-align: center;
1845
+ }
1846
+ .media-control-skin-1 .media-control-cc ul li a {
1847
+ height: 30px;
1848
+ padding: 5px 10px;
1849
+ color: #fffffe;
1850
+ }
1851
+ .media-control-skin-1 .media-control-cc ul li a:hover {
1852
+ background-color: rgba(0, 0, 0, 0.4);
1853
+ }
1854
+ .media-control-skin-1 .media-control-cc ul li.current a {
1855
+ background-color: rgba(0, 0, 0, 0.4);
1856
+ }
1857
+ .media-control-skin-1 .media-control-cc ul li:first-child a {
1858
+ border-bottom-left-radius: 4px;
1859
+ border-bottom-right-radius: 4px;
1860
+ }
1861
+ .media-control-skin-1 .media-control-cc ul li:last-child a {
1862
+ border-top-left-radius: 4px;
1863
+ border-top-right-radius: 4px;
1864
+ }
1865
+ .media-control-skin-1 .media-control-cc {
1866
+ position: relative;
1867
+ order: 85;
1868
+ }
1869
+
1870
+ .container .gplayer-cc-line {
1871
+ position: absolute;
1872
+ bottom: calc(var(--bottom-panel) + 5px);
1873
+ width: 100%;
1874
+ }
1875
+ .container .gplayer-cc-line p {
1876
+ width: auto;
1877
+ background-color: rgba(0, 0, 0, 0.4);
1878
+ color: white;
1879
+ display: inline-block;
1880
1880
  }.player-logo[data-logo] {
1881
1881
  position: absolute;
1882
1882
  z-index: 2;