@viewlift/player-backup 2.0.376-backup → 2.0.378-backup

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 (133) hide show
  1. package/cjs/{autoNextVideo-d014b6e0.js → autoNextVideo-68672b76.js} +1 -1
  2. package/cjs/bundle.css +1028 -873
  3. package/cjs/caption-settings-af7b30a4.js +1 -0
  4. package/cjs/captions-8b889384.js +1 -0
  5. package/cjs/{features-8a3c29d7.js → features-38873abb.js} +1 -1
  6. package/cjs/generic-ca2a22d8.js +1 -0
  7. package/cjs/{index-24bf35bd.js → index-3a351e42.js} +1 -1
  8. package/cjs/{index-f3f48477.js → index-5562e80d.js} +1 -1
  9. package/cjs/{index-f3d67a94.js → index-9e05e266.js} +1 -1
  10. package/cjs/{index-03fa3832.js → index-c52abe27.js} +1 -1
  11. package/cjs/{index-03d65bd4.js → index-de9db53d.js} +1 -1
  12. package/cjs/index.js +1 -1
  13. package/cjs/multicamv2-39cc5698.js +1 -0
  14. package/cjs/multicamv2-c33fd165.js +1 -0
  15. package/cjs/nextEpisodeButton-4cd04954.js +1 -0
  16. package/cjs/playerControlEvents-db923a5c.js +1 -0
  17. package/cjs/playlist-5b387ba5.js +1 -0
  18. package/cjs/resolution-ac7705e6.js +1 -0
  19. package/cjs/series-554e1f6f.js +1 -0
  20. package/cjs/series-v2-759d1b9f.js +1 -0
  21. package/cjs/series-v2-f513d96e.js +1 -0
  22. package/cjs/{settings-icon-b4612153.js → settings-icon-8d593433.js} +1 -1
  23. package/cjs/skin-0b2c868e.js +1 -0
  24. package/cjs/skin-49921eed.js +1 -0
  25. package/cjs/skin-528d0747.js +1 -0
  26. package/cjs/skin-80ad30a9.js +1 -0
  27. package/cjs/skin-9734a061.js +1 -0
  28. package/cjs/skin-9ef12f43.js +1 -0
  29. package/cjs/skin-b4c02ae6.js +1 -0
  30. package/cjs/skin-c1111e65.js +1 -0
  31. package/cjs/skin-cfe26f4b.js +1 -0
  32. package/cjs/skin-ea9d4fd0.js +1 -0
  33. package/cjs/videoSelector-05f988b1.js +1 -0
  34. package/cjs/videoSelector-1df54701.js +1 -0
  35. package/esm/{autoNextVideo-b2ddf881.js → autoNextVideo-a694d718.js} +1 -1
  36. package/esm/{browser-de5f6a74.js → browser-02f174cf.js} +1 -1
  37. package/esm/bundle.css +1028 -873
  38. package/esm/caption-settings-cf49bb1b.js +1 -0
  39. package/esm/captions-f011a7d4.js +1 -0
  40. package/esm/{features-9e2baef8.js → features-a7e5e171.js} +1 -1
  41. package/esm/generic-65cb8119.js +1 -0
  42. package/esm/{index-73e46c45.js → index-18292507.js} +1 -1
  43. package/esm/{index-332dbf74.js → index-7067e5db.js} +1 -1
  44. package/esm/{index-a9c6d5d8.js → index-cbaac7c7.js} +1 -1
  45. package/esm/{index-f9920e5f.js → index-e9e43270.js} +1 -1
  46. package/esm/{index-3b81e5fe.js → index-f61ce130.js} +1 -1
  47. package/esm/index.js +1 -1
  48. package/esm/multicamv2-97a3b0f4.js +1 -0
  49. package/esm/multicamv2-ccbd1435.js +1 -0
  50. package/esm/nextEpisodeButton-cf9328cc.js +1 -0
  51. package/esm/playerControlEvents-26580023.js +1 -0
  52. package/esm/playlist-3d669989.js +1 -0
  53. package/esm/resolution-d9d21f0e.js +1 -0
  54. package/esm/series-704b41dd.js +1 -0
  55. package/esm/series-v2-843283cb.js +1 -0
  56. package/esm/series-v2-e1ae0c27.js +1 -0
  57. package/esm/{settings-icon-43390aef.js → settings-icon-c31267aa.js} +1 -1
  58. package/esm/skin-034c0111.js +1 -0
  59. package/esm/skin-12fdaa37.js +1 -0
  60. package/esm/skin-15bea000.js +1 -0
  61. package/esm/skin-16cb5cfb.js +1 -0
  62. package/esm/skin-16d24d3a.js +1 -0
  63. package/esm/skin-29dfa892.js +1 -0
  64. package/esm/skin-4390b877.js +1 -0
  65. package/esm/skin-800b5977.js +1 -0
  66. package/esm/skin-cd51486c.js +1 -0
  67. package/esm/skin-d5474de8.js +1 -0
  68. package/esm/src/components/chapters/timelineMapper.d.ts +1 -0
  69. package/esm/src/core/captions.d.ts +10 -0
  70. package/esm/src/core/captions.test.d.ts +1 -0
  71. package/esm/src/features/dvrStartOver/helpers.d.ts +41 -0
  72. package/esm/src/features/dvrStartOver/helpers.test.d.ts +1 -0
  73. package/esm/src/features/dvrStartOver/index.d.ts +47 -0
  74. package/esm/src/features/dvrStartOver/index.test.d.ts +1 -0
  75. package/esm/src/helpers/playerControlEvents.d.ts +1 -0
  76. package/esm/src/helpers/playerControlEvents.test.d.ts +1 -0
  77. package/esm/src/helpers/token.d.ts +1 -0
  78. package/esm/src/index.d.ts +2 -0
  79. package/esm/src/utilities/beacon.d.ts +33 -4
  80. package/esm/src/utilities/beacon.test.d.ts +1 -0
  81. package/esm/src/utilities/beaconHelpers.d.ts +62 -0
  82. package/esm/src/utilities/qualityLabels.d.ts +1 -0
  83. package/esm/videoSelector-91f8908b.js +1 -0
  84. package/esm/videoSelector-c185464d.js +1 -0
  85. package/package.json +1 -1
  86. package/cjs/caption-settings-e803e4a6.js +0 -1
  87. package/cjs/captions-abd87121.js +0 -1
  88. package/cjs/generic-4ae5602c.js +0 -1
  89. package/cjs/multicamv2-aebcf40b.js +0 -1
  90. package/cjs/multicamv2-d8d221dd.js +0 -1
  91. package/cjs/nextEpisodeButton-d95e7bdc.js +0 -1
  92. package/cjs/playerControlEvents-0512f252.js +0 -1
  93. package/cjs/playlist-b2f07413.js +0 -1
  94. package/cjs/resolution-7b5483dd.js +0 -1
  95. package/cjs/series-7c67fc81.js +0 -1
  96. package/cjs/series-v2-3968ecf4.js +0 -1
  97. package/cjs/series-v2-78f6b95a.js +0 -1
  98. package/cjs/skin-0517c551.js +0 -1
  99. package/cjs/skin-102cabb5.js +0 -1
  100. package/cjs/skin-1f210273.js +0 -1
  101. package/cjs/skin-3bb8a9bf.js +0 -1
  102. package/cjs/skin-3db6272d.js +0 -1
  103. package/cjs/skin-431b10b8.js +0 -1
  104. package/cjs/skin-6463d5b1.js +0 -1
  105. package/cjs/skin-65de5d2e.js +0 -1
  106. package/cjs/skin-914eb9db.js +0 -1
  107. package/cjs/skin-d519da59.js +0 -1
  108. package/cjs/videoSelector-b732a762.js +0 -1
  109. package/cjs/videoSelector-f43303bd.js +0 -1
  110. package/esm/caption-settings-404c4774.js +0 -1
  111. package/esm/captions-8c8e9f2b.js +0 -1
  112. package/esm/generic-eb13663c.js +0 -1
  113. package/esm/multicamv2-7d1ffd86.js +0 -1
  114. package/esm/multicamv2-e3c0d0d9.js +0 -1
  115. package/esm/nextEpisodeButton-11b1fa06.js +0 -1
  116. package/esm/playerControlEvents-96ef1a5d.js +0 -1
  117. package/esm/playlist-cb04c889.js +0 -1
  118. package/esm/resolution-2e9ad83f.js +0 -1
  119. package/esm/series-ac134521.js +0 -1
  120. package/esm/series-v2-06f521ce.js +0 -1
  121. package/esm/series-v2-37717af4.js +0 -1
  122. package/esm/skin-2afe6ef1.js +0 -1
  123. package/esm/skin-341b9a62.js +0 -1
  124. package/esm/skin-56f99a67.js +0 -1
  125. package/esm/skin-6e0916ac.js +0 -1
  126. package/esm/skin-7aa5e4f5.js +0 -1
  127. package/esm/skin-7f5ab942.js +0 -1
  128. package/esm/skin-977f1785.js +0 -1
  129. package/esm/skin-a55e8e1d.js +0 -1
  130. package/esm/skin-ab1fba9b.js +0 -1
  131. package/esm/skin-fd6cbbf4.js +0 -1
  132. package/esm/videoSelector-0391e90b.js +0 -1
  133. package/esm/videoSelector-6c8f29bd.js +0 -1
package/cjs/bundle.css CHANGED
@@ -3,213 +3,6 @@
3
3
 
4
4
 
5
5
 
6
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
7
- height: 0.7em !important;
8
- position: absolute !important;
9
- top: -0.7em !important;
10
- width: 100% !important;
11
- }
12
-
13
- .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
14
- height: 100%;
15
- }
16
-
17
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
18
- line-height: 2.5;
19
- }
20
-
21
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
22
- height: 19px;
23
- width: 19px;
24
- cursor: pointer;
25
- }
26
- .video-js.skin_vlone .vjs-control {
27
- user-select: none;
28
- }
29
- .video-js.skin_vlone .vjs-custom-control-spacer{
30
- user-select: none;
31
- }
32
-
33
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
34
- height: 19px;
35
- width: 19px;
36
- cursor: pointer;
37
- }
38
-
39
- .video-js.skin_vlone .vjs-play-progress:before {
40
- display: none !important;
41
- }
42
-
43
- .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
44
- margin: 0 !important;
45
-
46
- }
47
-
48
-
49
- .video-js.skin_vlone .vjs-custom-control-spacer {
50
- display: block;
51
- flex: 1 1 auto;
52
- }
53
-
54
- .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
55
- z-index: 1;
56
- }
57
-
58
-
59
- .video-js.skin_vlone .vjs-control-bar {
60
- height: 40px;
61
- }
62
-
63
- .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
64
- .vjs-button>.vjs-icon-placeholder:before {
65
- position: relative !important;
66
- }
67
- .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
68
- display: flex;
69
- left: 0px;
70
- top: -1px;
71
- }
72
-
73
- .vjs-button>.vjs-icon-placeholder:before {
74
- font-size: 2em !important;
75
- }
76
-
77
- .video-js.skin_vlone .vjs-control {
78
- width: 4.3em;
79
- }
80
-
81
- .vjs-menu-button-popup .vjs-menu {
82
- bottom: 10px !important;
83
- }
84
-
85
- .video-js .vjs-subs-caps-button .vjs-menu li,
86
- .video-js .vjs-subtitles-button .vjs-menu li,
87
- .video-js .vjs-captions-button .vjs-menu li {
88
- text-transform: none;
89
- }
90
-
91
-
92
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
93
- height: 1.3em !important;
94
- position: absolute !important;
95
- top: -1.3em !important;
96
- transition: height 0.3s, top 0.3s !important;
97
- }
98
-
99
-
100
- .video-js.skin_vlone.vjs-live .vjs-time-control{
101
- display: none !important;
102
- }
103
-
104
- .video-js.skin_vlone .vjs-time-control {
105
- display: block;
106
- }
107
- .video-js.skin_vlone .vjs-remaining-time {
108
- display: none;
109
- }
110
-
111
- .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
112
- line-height: 3.5em;
113
- font-size: 1.1em;
114
- min-width: 4em;
115
- }
116
-
117
- .video-js.skin_vlone .vjs-time-divider > div{
118
- display: flex;
119
- justify-content: center;
120
- }
121
-
122
- .video-js.skin_vlone .vjs-live-control{
123
- align-items: center;
124
- }
125
- .video-js.skin_vlone .vjs-live-display{
126
- height: 2.2em;
127
- display: flex;
128
- align-items: center;
129
- font-family: monospace;
130
- width: 4em;
131
- justify-content: center;
132
- background: red;
133
- margin: 4px 0px 4px 12px;
134
- }
135
- .video-js.skin_vlone .vjs-live-display.vjs-behind-live{
136
- background: #6b6b6b;
137
- }
138
- .video-js.skin_vlone .vjs-live-display:hover{
139
- cursor: pointer;
140
- }
141
-
142
- .video-js.skin_vlone .vjs-time-control {
143
- line-height: 3.5em !important;
144
- font-size: 1.1em !important;
145
- width: min-content !important;
146
- min-width: 1.5em;
147
- padding: 0 !important;
148
- user-select: none;
149
- }
150
-
151
- .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
152
- margin-left: 16px !important;
153
- }
154
-
155
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
156
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
157
- font-size: 1.2em !important;
158
- line-height: 1.5em !important;
159
- padding: 0.2em 0.8em !important;
160
- }
161
-
162
-
163
- /* Big play */
164
- .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
165
- width: 80px;
166
- height: 80px;
167
- display: flex;
168
- justify-content: center;
169
- align-items: center;
170
- border: none;
171
- position: absolute;
172
- top: 0;
173
- left: 0;
174
- right: 0;
175
- bottom: 0;
176
- margin: auto;
177
- font-size: 5em;
178
- line-height: 1.3em;
179
- transform: none !important;
180
- border-radius: 1.3em;
181
- }
182
- .video-js.skin_vlone .ssai-ad-container{
183
- position: absolute;
184
- bottom: 4px;
185
- }
186
-
187
- @media(max-width:600px){
188
- .video-js.skin_vlone button.vjs-big-play-button {
189
- width: 50px !important;
190
- height: 50px !important;
191
- font-size: 2.1rem !important;
192
- }
193
-
194
- .video-js.skin_vlone .ssai-ad-container {
195
- position: absolute;
196
- bottom: 2px;
197
- }
198
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
199
- display: none;
200
- }
201
-
202
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
203
- /* display: none; */
204
- }
205
-
206
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
207
- /* display: none; */
208
- }
209
- }
210
- .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
211
- text-decoration: underline;
212
- }
213
6
  .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
214
7
  font-size: 2.2em;
215
8
  line-height: 2.6;
@@ -738,476 +531,571 @@
738
531
 
739
532
 
740
533
 
741
- .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
742
- font-size: 2.2em;
743
- line-height: 2.6;
744
- }
745
- .video-js.skin_mini{
746
- overflow: hidden;
747
- }
748
- .video-js.skin_mini .vjs-control-bar{
749
- z-index: 1 !important;
750
- height: 4em !important;
751
- background: black !important;
752
- }
753
534
 
754
- .video-js.skin_mini .vjs-fade>* {
755
- visibility: hidden !important;
756
- opacity: 0 !important;
757
- transition: visibility 1s, opacity 1s !important;
535
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
536
+ height: 0.7em !important;
537
+ position: absolute !important;
538
+ top: -0.7em !important;
539
+ width: 100% !important;
758
540
  }
759
541
 
760
- .video-js.skin_mini .custom-spaced-progress-bar {
761
- position: absolute;
762
- width: 100%;
763
- display: flex;
764
- height: 0.5em;
765
- top: -0.5em;
542
+ .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
543
+ height: 100%;
766
544
  }
767
545
 
768
- .video-js.skin_mini .vjs-progress-control {
769
- /* left: -6px; */
770
- position: relative;
771
- width: 100%;
772
- height: 0.5em;
773
- transition: height 0.1s, top 0.1s;
546
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
547
+ line-height: 2.5;
774
548
  }
775
549
 
776
-
777
-
778
-
779
- .video-js.skin_mini .vjs-custom-control-spacer {
780
- display: block;
781
- flex: 1 1 auto;
550
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
551
+ height: 19px;
552
+ width: 19px;
553
+ cursor: pointer;
782
554
  }
783
-
784
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder {
785
- margin: 0 0px 0 0px;
786
- }
787
- .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control{
788
- display: none;
789
- }
790
-
791
- .video-js.skin_mini button.vjs-control.vjs-button.vjs-slowmo-button {
792
- font-size: 14px;
793
- font-weight: 500;
794
- align-self: center;
795
- height: min-content;
796
- padding: 5px 2px;
797
- border-radius: 8px;
798
- }
799
-
800
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
801
- height: 5px !important;
555
+ .video-js.skin_vlone .vjs-control {
556
+ user-select: none;
802
557
  }
803
-
804
- .video-js.skin_mini .vjs-play-progress:before {
805
- font-size: 1.3em;
806
- line-height: unset;
807
- top: -0.3333333333em;
558
+ .video-js.skin_vlone .vjs-custom-control-spacer{
559
+ user-select: none;
808
560
  }
809
561
 
810
- .video-js.skin_mini .vjs-play-progress .vjs-time-tooltip {
811
- display: none !important;
562
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
563
+ height: 19px;
564
+ width: 19px;
565
+ cursor: pointer;
812
566
  }
813
567
 
814
- /* */
815
- .video-js.skin_mini .vjs-mouse-display{
816
- font-size: 1.6666666667em;
568
+ .video-js.skin_vlone .vjs-play-progress:before {
569
+ display: none !important;
817
570
  }
818
571
 
819
- .video-js.skin_mini .vjs-progress-control:hover .vjs-progress-holder {
820
- font-size: 1em !important;
821
- }
572
+ .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
573
+ margin: 0 !important;
822
574
 
823
- .video-js.skin_mini .vjs-button{
824
- width: 3em;
825
- display: flex;
826
- align-items: center;
827
- justify-content: center;
828
575
  }
829
576
 
830
577
 
831
- .video-js.skin_mini .vjs-fullscreen .icon-minimize,
832
- .icon-maximize {
578
+ .video-js.skin_vlone .vjs-custom-control-spacer {
833
579
  display: block;
834
- height: 32px;
835
- }
836
-
837
- .video-js.skin_mini .vjs-playback-rate .vjs-playback-rate-value{
838
- line-height: 4;
580
+ flex: 1 1 auto;
839
581
  }
840
582
 
841
- .video-js.skin_mini .vjs-fullscreen .icon-maximize,
842
- .icon-minimize {
843
- display: none;
844
- height: 32px;
583
+ .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
584
+ z-index: 1;
845
585
  }
846
586
 
847
- .video-js.skin_mini button.vjs-play-control.vjs-control.vjs-button{
848
- outline: none !important;
849
- }
850
- .video-js.skin_mini .vjs-fullscreen-control .vjs-icon-placeholder:before,
851
- .vjs-icon-fullscreen-enter:before {
852
- /* content: '' !important; */
853
- }
854
587
 
855
- .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button {
856
- display: flex;
857
- justify-content: center;
858
- align-items: center;
859
- /* transform: rotate(90deg); */
588
+ .video-js.skin_vlone .vjs-control-bar {
589
+ height: 40px;
860
590
  }
861
591
 
862
- .video-js.skin_mini .vjs-subs-caps-button .vjs-icon-placeholder:before{
863
- display: none;
592
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
593
+ .vjs-button>.vjs-icon-placeholder:before {
594
+ position: relative !important;
864
595
  }
865
- .video-js.skin_mini .vjs-volume-panel .vjs-volume-control{
866
- margin-left: -10px;
867
- display: none;
596
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
597
+ display: flex;
598
+ left: 0px;
599
+ top: -1px;
868
600
  }
869
601
 
870
- .video-js.skin_mini .vjs-loading-spinner {
871
- position: absolute;
872
- top: 50%;
873
- left: 50%;
874
- transform: translate(-50%, -50%);
875
- opacity: .85;
876
- text-align: left;
877
- border: .2em solid rgba(43, 51, 63, .7);
878
- box-sizing: border-box;
879
- background-clip: padding-box;
880
- width: 3em;
881
- height: 3em;
882
- border-radius: 50%;
883
- visibility: hidden;
602
+ .vjs-button>.vjs-icon-placeholder:before {
603
+ font-size: 2em !important;
884
604
  }
885
605
 
886
- .video-js.skin_mini .skipbtn:hover{
887
- cursor: pointer;
606
+ .video-js.skin_vlone .vjs-control {
607
+ width: 4.3em;
888
608
  }
889
609
 
890
- .video-js.skin_mini .rewindbtn:hover{
891
- cursor: pointer;
610
+ .vjs-menu-button-popup .vjs-menu {
611
+ bottom: 10px !important;
892
612
  }
893
613
 
894
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control{
895
- position: relative;
896
- padding-left: 0;
614
+ .video-js .vjs-subs-caps-button .vjs-menu li,
615
+ .video-js .vjs-subtitles-button .vjs-menu li,
616
+ .video-js .vjs-captions-button .vjs-menu li {
617
+ text-transform: none;
897
618
  }
898
619
 
899
- .video-js.skin_mini.vjs-paused .vjs-big-play-button {
900
- width: 40px;
901
- height: 40px;
902
- display: flex;
903
- justify-content: center;
904
- align-items: center;
905
- border: none;
906
- position: absolute;
907
- top: 0;
908
- left: 0;
909
- right: 0;
910
- bottom: 0;
911
- margin: auto;
912
- font-size: 3em;
913
- line-height: 1.3em;
914
- transform: none !important;
915
- border-radius: 1.3em;
916
- }
917
620
 
918
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
919
- font-weight: bold;
621
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
622
+ height: 1.3em !important;
623
+ position: absolute !important;
624
+ top: -1.3em !important;
625
+ transition: height 0.3s, top 0.3s !important;
920
626
  }
921
627
 
922
- .video-js.skin_mini .vjs-menu > ul.vjs-menu-content{
923
- bottom: 1.1em !important;
924
- right: 1em;
925
- z-index: 1;
926
- font-size: 10px;
927
- }
928
628
 
929
- .video-js.skin_mini .vjs-chromecast-button .vjs-icon-placeholder {
930
- width: 24px !important;
931
- height: 24px !important;
932
- }
933
- .video-js.skin_mini .settings-selector-icon>svg{
934
- height: 19px !important;
935
- width: 19px !important;
629
+ .video-js.skin_vlone.vjs-live .vjs-time-control{
630
+ display: none !important;
936
631
  }
937
632
 
938
-
939
- .video-js.skin_mini button.vjs-rewind-button{
940
- cursor: pointer;
633
+ .video-js.skin_vlone .vjs-time-control {
634
+ display: block;
941
635
  }
942
-
943
- .video-js.skin_mini .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
944
- padding-right: 0;
636
+ .video-js.skin_vlone .vjs-remaining-time {
637
+ display: none;
945
638
  }
946
639
 
947
- .video-js.skin_mini .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
948
- padding-left: 0;
640
+ .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
641
+ line-height: 3.5em;
642
+ font-size: 1.1em;
643
+ min-width: 4em;
949
644
  }
950
645
 
951
- .video-js.skin_mini .vjs-control-bar .vjs-time-control.vjs-time-divider {
952
- padding-left: 0;
953
- padding-right: 0;
954
- display: flex;
955
- justify-content: center;
956
- width: min-content;
646
+ .video-js.skin_vlone .vjs-time-divider > div{
647
+ display: flex;
648
+ justify-content: center;
957
649
  }
958
650
 
959
- .video-js.skin_mini.vjs-live .vjs-control-bar .vjs-time-control {
960
- display: none
961
- }
962
- .video-js.skin_mini.vjs-liveui .vjs-control-bar .vjs-time-control {
963
- display: none
651
+ .video-js.skin_vlone .vjs-live-control{
652
+ align-items: center;
964
653
  }
965
-
966
- .video-js.skin_mini .vjs-control-bar .vjs-time-control {
654
+ .video-js.skin_vlone .vjs-live-display{
655
+ height: 2.2em;
967
656
  display: flex;
968
657
  align-items: center;
969
- font-weight: 700;
970
- font-size: 9px;
971
- min-width: 0.8em;
972
- padding-left: 0;
658
+ font-family: monospace;
659
+ width: 4em;
660
+ justify-content: center;
661
+ background: red;
662
+ margin: 4px 0px 4px 12px;
973
663
  }
974
-
975
- .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control {
976
- display: none;
977
- font-size: 11px;
978
- justify-content: center;
979
- align-items: center;
980
- user-select: none;
664
+ .video-js.skin_vlone .vjs-live-display.vjs-behind-live{
665
+ background: #6b6b6b;
981
666
  }
982
- .video-js.skin_mini.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
983
- display: none;
667
+ .video-js.skin_vlone .vjs-live-display:hover{
668
+ cursor: pointer;
984
669
  }
985
670
 
986
- .video-js.skin_mini button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
987
- height: min-content;
988
- width: min-content;
989
- }
990
- .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
991
- width: 3em;
992
- margin-right: 4px;
671
+ .video-js.skin_vlone .vjs-time-control {
672
+ line-height: 3.5em !important;
673
+ font-size: 1.1em !important;
674
+ width: min-content !important;
675
+ min-width: 1.5em;
676
+ padding: 0 !important;
677
+ user-select: none;
993
678
  }
994
679
 
995
- .video-js.skin_mini .content{
996
- bottom: 3.4rem !important;
997
- right: -4rem !important;
680
+ .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
681
+ margin-left: 16px !important;
998
682
  }
999
683
 
1000
- .video-js.skin_mini .setting-icon > svg{
1001
- height:18px !important;
684
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
685
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
686
+ font-size: 1.2em !important;
687
+ line-height: 1.5em !important;
688
+ padding: 0.2em 0.8em !important;
1002
689
  }
1003
690
 
1004
- .output-overlay{
1005
- position: absolute;
1006
- bottom: 0;
1007
- height: 100%;
1008
- width: 100%;
1009
- z-index: 0;
1010
- border: 0;
1011
- pointer-events:none
1012
- }
1013
691
 
1014
- .video-js.skin_mini iframe{
1015
- width: 100%;
1016
- height: 100%;
1017
- }
692
+ /* Big play */
693
+ .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
694
+ width: 80px;
695
+ height: 80px;
696
+ display: flex;
697
+ justify-content: center;
698
+ align-items: center;
699
+ border: none;
700
+ position: absolute;
701
+ top: 0;
702
+ left: 0;
703
+ right: 0;
704
+ bottom: 0;
705
+ margin: auto;
706
+ font-size: 5em;
707
+ line-height: 1.3em;
708
+ transform: none !important;
709
+ border-radius: 1.3em;
710
+ }
711
+ .video-js.skin_vlone .ssai-ad-container{
712
+ position: absolute;
713
+ bottom: 4px;
714
+ }
715
+
716
+ @media(max-width:600px){
717
+ .video-js.skin_vlone button.vjs-big-play-button {
718
+ width: 50px !important;
719
+ height: 50px !important;
720
+ font-size: 2.1rem !important;
721
+ }
1018
722
 
1019
- .video-js.skin_mini .vjs-live-control{
1020
- align-items: center;
1021
- max-width: 5em;
723
+ .video-js.skin_vlone .ssai-ad-container {
724
+ position: absolute;
725
+ bottom: 2px;
1022
726
  }
1023
- .video-js.skin_mini .vjs-live-control.vjs-control .vjs-live-display{
1024
- height: 2.2em;
727
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
728
+ display: none;
729
+ }
730
+
731
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
732
+ /* display: none; */
733
+ }
734
+
735
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
736
+ /* display: none; */
737
+ }
738
+ }
739
+ .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
740
+ text-decoration: underline;
741
+ }
742
+
743
+ .video-js.skin_cn_news .vjs-control-bar {
744
+ z-index: 1 !important;
745
+ height: auto !important;
746
+ padding: 0.8em 30px 0.6em;
747
+ background: transparent !important;
1025
748
  display: flex;
749
+ flex-wrap: wrap;
1026
750
  align-items: center;
1027
- font-family: monospace;
1028
- width: 4em;
1029
- justify-content: center;
1030
- background: red;
1031
- margin: 4px 0px 4px 2px;
751
+ column-gap: 10px;
1032
752
  }
1033
753
 
1034
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:focus{
1035
- text-shadow: none;
754
+
755
+ .video-js.skin_cn_news .vjs-control-bar::before {
756
+ content: '';
757
+ position: absolute;
758
+ left: 0;
759
+ right: 0;
760
+ bottom: 0;
761
+ top: -3em;
762
+ background: linear-gradient(
763
+ to top,
764
+ rgba(0, 0, 0, 0.85) 0%,
765
+ rgba(0, 0, 0, 0.7) 40%,
766
+ rgba(0, 0, 0, 0.55) 70%,
767
+ rgba(0, 0, 0, 0.38) 86%,
768
+ transparent 100%
769
+ );
770
+ pointer-events: none;
771
+ z-index: -1;
1036
772
  }
1037
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
1038
- display: none;
1039
- font-size: 12px;
773
+
774
+ .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
775
+ order: -1;
776
+ flex: 0 0 100%;
777
+ width: 80%;
778
+ margin: 0 0 5em;
779
+ position: relative;
1040
780
  }
1041
781
 
1042
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
1043
- height: 1.8em;
782
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
783
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
784
+ width: auto;
785
+ min-width: 0;
786
+ }
787
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1044
788
  display: inline-flex;
1045
789
  align-items: center;
1046
- font-family: monospace;
1047
790
  justify-content: center;
1048
- border: 1.5px solid;
1049
- margin: 4px 0px 4px 2px;
1050
- white-space: pre;
1051
- padding: 2px 4px;
1052
- font-size: 1.2em;
1053
- font-weight: 500;
1054
- color: rgba(255, 255, 2555, 0.7);
791
+ height: 7em;
792
+ padding: 0 10px;
793
+ color: #fff;
1055
794
  }
1056
795
 
1057
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
1058
- content: "NOT LIVE";
1059
- word-spacing: -4px;
796
+ .video-js.skin_cn_news .vjs-svg-icon::before {
797
+ content: none !important;
1060
798
  }
1061
799
 
1062
800
 
1063
- @media(max-width:600px){
1064
- .tvProviderImage{
1065
- display: none
1066
- }
1067
- .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1068
- .icon-maximize {
1069
- height: 30px !important;
1070
- }
1071
-
1072
- .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1073
- .icon-minimize {
1074
- height: 30px !important;
1075
- }
1076
- .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
1077
- width: 3.5em;
1078
- }
1079
- .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1080
- height: min-content;
1081
- }
1082
-
1083
- .video-js.skin_mini button.vjs-slowmo-button{
1084
- display: none;
1085
- }
1086
- .video-js.skin_mini button.vjs-rewind-button{
1087
- display: none;
1088
- }
1089
- .video-js.skin_mini button.vjs-rewind-button>svg{
1090
- height: 20px;
1091
- }
1092
- .video-js.skin_mini .vjs-button{
1093
- width: 3em;
1094
- }
1095
- .video-js.skin_mini .widget-selection{
1096
- display: none;
1097
- }
1098
- .video-js.skin_mini .container{
1099
- display: none !important;
1100
- }
1101
- .video-js.skin_mini .vjs-control-bar{
1102
- height: 4em !important;
1103
- }
1104
- .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before{
1105
- font-size: 2.5em;
1106
- line-height: 1.5;
1107
- }
1108
- .video-js.skin_mini .vjs-play-progress:before {
1109
- font-size: 1.2em;
1110
- position: absolute;
1111
- right: -0.5em;
1112
- z-index: 1;
1113
- }
1114
- .video-js.skin_mini button.vjs-skip-button>svg{
1115
- height: 20px;
801
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
802
+ display: inline-flex;
803
+ align-items: center;
804
+ justify-content: center;
1116
805
  }
1117
-
1118
- .stream-selector-icon>svg{
806
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
807
+ .video-js.skin_cn_news .vjs-rewind-button svg {
1119
808
  width: 24px;
1120
809
  height: 24px;
1121
- }
1122
- .video-js.skin_mini .vjs-seek-to-live-text{
1123
- font-size: 12px;
1124
- }
810
+ display: block;
1125
811
  }
1126
812
 
1127
813
 
1128
- .video-js.skin_mini .vjs-text-track-display-ttml span {
1129
- background-color: rgba(0, 0, 0, 0.2);
814
+
815
+ .video-js.skin_cn_news .vjs-subs-caps-button {
816
+ opacity: 1;
1130
817
  }
1131
818
 
1132
819
 
1133
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1134
- display: flex;
1135
- justify-content: center;
820
+
821
+ .video-js.skin_cn_news .vjs-volume-panel {
822
+ margin: 0;
823
+ display: inline-flex;
1136
824
  align-items: center;
825
+ align-self: center;
826
+ height: 2.2em;
827
+ min-width: 7em;
828
+ transition: none;
829
+ }
830
+ .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
831
+ width: 0;
1137
832
  height: 100%;
1138
- transition: width 0.1s;
833
+ display: flex;
834
+ align-items: center;
835
+ overflow: hidden;
836
+ opacity: 0;
837
+ transition: width 0.15s ease, opacity 0.15s ease;
1139
838
  }
1140
- .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
1141
- margin: 2px;
839
+ .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
840
+ .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
841
+ .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
842
+ .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
843
+ width: 5em;
844
+ opacity: 1;
1142
845
  }
1143
846
 
1144
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1145
- display: flex;
1146
- justify-content: center;
1147
- align-items: center;
1148
- height: 100%;
1149
- transition: width 0.1s;
847
+ .video-js.skin_cn_news .vjs-volume-bar {
848
+ width: 4em;
849
+ height: 0.3em;
850
+ margin: 0 0.45em;
1150
851
  }
1151
852
 
1152
- .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
1153
- display: block;
1154
- font-size: 10px;
1155
- padding: 6px 10px;
1156
- margin: 0;
1157
- max-height: 100%;
1158
- overflow-y: auto;
853
+
854
+ .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
855
+ display: none !important;
1159
856
  }
1160
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-colors,
1161
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-font,
1162
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-controls{
1163
- display: block;
1164
- width: 100%;
857
+
858
+ .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
859
+ width: 0 !important;
1165
860
  }
1166
- .video-js.skin_mini .vjs-text-track-settings fieldset{
1167
- margin: 4px 0;
861
+
862
+
863
+ .video-js.skin_cn_news .vjs-custom-control-spacer {
864
+ display: block !important;
865
+ flex: 1 1 auto;
1168
866
  }
1169
- .video-js.skin_mini .vjs-text-track-settings fieldset span{
1170
- display: block;
1171
- padding: 0 0 6px;
867
+
868
+
869
+ .video-js.skin_cn_news .vjs-big-play-button {
870
+ display: none;
1172
871
  }
1173
- .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
1174
- max-width: 100%;
872
+ .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
873
+ position: relative !important;
874
+ display: flex;
875
+ left: 0;
876
+ top: -1px;
877
+ }
878
+ .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
879
+ display: flex;
880
+ justify-content: center;
881
+ align-items: center;
882
+ position: absolute;
883
+ top: 0;
884
+ left: 0;
885
+ right: 0;
886
+ bottom: 0;
887
+ margin: auto;
888
+ width: 80px;
889
+ height: 80px;
890
+ border: none;
891
+ border-radius: 50%;
892
+ background: rgba(0, 0, 0, 0.55);
893
+ font-size: 5em;
894
+ line-height: 1.3em;
895
+ transform: none !important;
1175
896
  }
1176
897
 
1177
- @media (max-width: 600px) {
1178
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1179
- height: 5px !important;
1180
- }
1181
898
 
1182
- .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1183
- display: none;
1184
- }
899
+ .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
900
+ height: 4px !important;
901
+ margin: 0;
902
+ border-radius: 20px;
903
+ background-color: #393944;
904
+ }
1185
905
 
906
+ .video-js.skin_cn_news .vjs-play-progress {
907
+ background-color: #ffffff;
908
+ border-radius: 20px;
1186
909
  }
1187
910
 
1188
- .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
1189
- content: none !important;
1190
- fill: none !important;
1191
- filter: none !important;
911
+ .video-js.skin_cn_news .vjs-load-progress,
912
+ .video-js.skin_cn_news .vjs-load-progress div {
913
+ background: rgba(255, 255, 255, 0.15);
914
+ border-radius: 20px;
1192
915
  }
1193
916
 
1194
- /* svg icons opacity and hover effect */
1195
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
1196
- opacity: 0.7 !important;
917
+
918
+ .video-js.skin_cn_news .vjs-play-progress:before {
919
+ content: '';
920
+ width: 16px;
921
+ height: 16px;
922
+ border-radius: 50%;
923
+ background: #ffffff;
924
+ border: 2px solid rgba(0, 0, 0, 0.6);
925
+ box-sizing: border-box;
926
+ box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
927
+ top: -6px;
928
+ right: -8px;
929
+ position: absolute;
930
+ }
931
+ .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
932
+ display: none !important;
1197
933
  }
1198
934
 
1199
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
1200
- opacity: 1 !important;
935
+ .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
936
+ background: #ffffff;
937
+ color: #0a0e17;
938
+ font-weight: 700;
939
+ border-radius: 3px;
1201
940
  }
1202
941
 
1203
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1204
- color: rgba(255, 255, 2555, 0.7)!important;
942
+ .video-js.skin_cn_news .vjs-live-control {
943
+ display: none !important;
944
+ }
945
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
946
+ display: inline-flex;
947
+ align-items: center;
948
+ align-self: center;
949
+ height: 2.2em;
950
+ gap: 5px;
951
+ width: auto;
952
+ padding: 0 10px;
953
+ border: 1px solid rgba(255, 255, 255, 0.45);
954
+ border-radius: 4px;
955
+ cursor: pointer;
956
+ }
957
+ .video-js.skin_cn_news:not(.vjs-live) .vjs-seek-to-live-control.vjs-control,
958
+ .video-js.skin_cn_news.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control.vjs-control {
959
+ display: none;
1205
960
  }
1206
961
 
1207
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1208
- color: rgba(255, 255, 2555, 1)!important;
962
+ .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
963
+ display: none;
964
+ }
965
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
966
+ display: inline-flex;
967
+ align-items: center;
968
+ }
969
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
970
+ content: '';
971
+ display: inline-block;
972
+ width: 8px;
973
+ height: 8px;
974
+ border-radius: 50%;
975
+ background: #ff2d2d; /* red live dot */
976
+ }
977
+ .video-js.skin_cn_news .vjs-seek-to-live-text {
978
+ color: #ffffff;
979
+ font-weight: 700;
980
+ font-size: 12px;
981
+ letter-spacing: 0.03em;
982
+ }
983
+
984
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
985
+ border-color: transparent;
986
+ }
987
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
988
+ color: #ff2d2d;
1209
989
  }
1210
990
 
991
+ /* ---- time controls ---- */
992
+ .video-js.skin_cn_news .vjs-current-time,
993
+ .video-js.skin_cn_news .vjs-duration,
994
+ .video-js.skin_cn_news .vjs-time-divider {
995
+ display: none;
996
+ align-items: center;
997
+ font-size: 12px;
998
+ font-weight: 700;
999
+ color: #fff;
1000
+ user-select: none;
1001
+ }
1002
+ .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-current-time.vjs-time-control.vjs-control,
1003
+ .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-duration.vjs-time-control.vjs-control,
1004
+ .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-time-divider.vjs-time-control {
1005
+ display: flex;
1006
+ }
1007
+ .video-js.skin_cn_news .vjs-current-time.vjs-time-control.vjs-control {
1008
+ padding-right: 0;
1009
+ }
1010
+ .video-js.skin_cn_news .vjs-duration.vjs-time-control.vjs-control {
1011
+ padding-left: 0;
1012
+ }
1013
+ .video-js.skin_cn_news .vjs-time-control.vjs-time-divider {
1014
+ padding: 0 4px;
1015
+ min-width: 0;
1016
+ width: auto;
1017
+ }
1018
+ .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
1019
+ display: none;
1020
+ align-items: center;
1021
+ justify-content: center;
1022
+ font-size: 11px;
1023
+ font-weight: 700;
1024
+ color: #fff;
1025
+ padding: 0 6px;
1026
+ user-select: none;
1027
+ }
1028
+
1029
+
1030
+ .video-js.skin_cn_news .vjs-chapter-marker {
1031
+ z-index: 2;
1032
+ width: var(--vl-chapter-size, 8px);
1033
+ height: var(--vl-chapter-size, 8px);
1034
+ top: 50%;
1035
+ bottom: auto;
1036
+ background: var(--vl-chapter-color, #ffffff);
1037
+ opacity: var(--vl-chapter-opacity, 1);
1038
+ border-radius: 50%;
1039
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
1040
+ transform: translate(-50%, -50%) scale(1);
1041
+ transition: background-color 0.12s ease;
1042
+ }
1043
+ .video-js.skin_cn_news .vjs-chapter-marker:hover {
1044
+ background: var(--vl-chapter-hover, #0a5cff);
1045
+ }
1046
+ .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1047
+ background: var(--vl-chapter-active, #0a5cff);
1048
+ }
1049
+
1050
+
1051
+ .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
1052
+ width: 16px;
1053
+ height: 16px;
1054
+ bottom: 160%;
1055
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
1056
+ }
1057
+
1058
+
1059
+ .video-js.skin_cn_news .vjs-chapter-preview {
1060
+ background: var(--vl-chapter-tooltip, #0a5cff);
1061
+ border-radius: 6px;
1062
+ padding: 8px 10px;
1063
+ width: max-content;
1064
+ max-width: 300px;
1065
+ text-align: left;
1066
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
1067
+ }
1068
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
1069
+ color: #ffffff;
1070
+ font-size: 13px;
1071
+ font-weight: 400;
1072
+ margin-bottom: 2px;
1073
+ }
1074
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
1075
+ color: #ffffff;
1076
+ font-size: 13px;
1077
+ font-weight: 400;
1078
+ line-height: 1.3;
1079
+ white-space: normal;
1080
+ text-align: left;
1081
+ }
1082
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
1083
+ border-top-color: var(--vl-chapter-tooltip, #0a5cff);
1084
+ }
1085
+
1086
+ /* ---- responsive ---- */
1087
+ @media (max-width: 576px) {
1088
+ .video-js.skin_cn_news .vjs-control-bar {
1089
+ height: 3.2em !important;
1090
+ padding: 0 8px;
1091
+ }
1092
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1093
+ padding: 0 6px;
1094
+ }
1095
+ .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
1096
+ display: none !important;
1097
+ }
1098
+ }
1211
1099
 
1212
1100
  .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
1213
1101
  font-size: 2.2em;
@@ -1691,337 +1579,474 @@
1691
1579
 
1692
1580
 
1693
1581
 
1694
-
1695
- .video-js.skin_cn_news .vjs-control-bar {
1696
- z-index: 1 !important;
1697
- height: auto !important;
1698
- padding: 0.8em 30px 0.6em;
1699
- background: transparent !important;
1700
- display: flex;
1701
- flex-wrap: wrap;
1702
- align-items: center;
1703
- column-gap: 10px;
1582
+ .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
1583
+ font-size: 2.2em;
1584
+ line-height: 2.6;
1585
+ }
1586
+ .video-js.skin_mini{
1587
+ overflow: hidden;
1588
+ }
1589
+ .video-js.skin_mini .vjs-control-bar{
1590
+ z-index: 1 !important;
1591
+ height: 4em !important;
1592
+ background: black !important;
1704
1593
  }
1705
1594
 
1595
+ .video-js.skin_mini .vjs-fade>* {
1596
+ visibility: hidden !important;
1597
+ opacity: 0 !important;
1598
+ transition: visibility 1s, opacity 1s !important;
1599
+ }
1706
1600
 
1707
- .video-js.skin_cn_news .vjs-control-bar::before {
1708
- content: '';
1601
+ .video-js.skin_mini .custom-spaced-progress-bar {
1709
1602
  position: absolute;
1710
- left: 0;
1711
- right: 0;
1712
- bottom: 0;
1713
- top: -3em;
1714
- background: linear-gradient(
1715
- to top,
1716
- rgba(0, 0, 0, 0.85) 0%,
1717
- rgba(0, 0, 0, 0.7) 40%,
1718
- rgba(0, 0, 0, 0.55) 70%,
1719
- rgba(0, 0, 0, 0.38) 86%,
1720
- transparent 100%
1721
- );
1722
- pointer-events: none;
1723
- z-index: -1;
1603
+ width: 100%;
1604
+ display: flex;
1605
+ height: 0.5em;
1606
+ top: -0.5em;
1724
1607
  }
1725
1608
 
1726
- .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
1727
- order: -1;
1728
- flex: 0 0 100%;
1729
- width: 80%;
1730
- margin: 0 0 5em;
1609
+ .video-js.skin_mini .vjs-progress-control {
1610
+ /* left: -6px; */
1731
1611
  position: relative;
1612
+ width: 100%;
1613
+ height: 0.5em;
1614
+ transition: height 0.1s, top 0.1s;
1732
1615
  }
1733
1616
 
1734
- .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
1735
- .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
1736
- width: auto;
1737
- min-width: 0;
1738
- }
1739
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1740
- display: inline-flex;
1741
- align-items: center;
1742
- justify-content: center;
1743
- height: 7em;
1744
- padding: 0 10px;
1745
- color: #fff;
1746
- }
1747
1617
 
1748
- .video-js.skin_cn_news .vjs-svg-icon::before {
1749
- content: none !important;
1750
- }
1751
1618
 
1752
1619
 
1753
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
1754
- display: inline-flex;
1755
- align-items: center;
1756
- justify-content: center;
1757
- }
1758
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
1759
- .video-js.skin_cn_news .vjs-rewind-button svg {
1760
- width: 24px;
1761
- height: 24px;
1620
+ .video-js.skin_mini .vjs-custom-control-spacer {
1762
1621
  display: block;
1622
+ flex: 1 1 auto;
1623
+ }
1624
+
1625
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder {
1626
+ margin: 0 0px 0 0px;
1627
+ }
1628
+ .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control{
1629
+ display: none;
1763
1630
  }
1764
1631
 
1632
+ .video-js.skin_mini button.vjs-control.vjs-button.vjs-slowmo-button {
1633
+ font-size: 14px;
1634
+ font-weight: 500;
1635
+ align-self: center;
1636
+ height: min-content;
1637
+ padding: 5px 2px;
1638
+ border-radius: 8px;
1639
+ }
1765
1640
 
1641
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1642
+ height: 5px !important;
1643
+ }
1766
1644
 
1767
- .video-js.skin_cn_news .vjs-subs-caps-button {
1768
- opacity: 1;
1645
+ .video-js.skin_mini .vjs-play-progress:before {
1646
+ font-size: 1.3em;
1647
+ line-height: unset;
1648
+ top: -0.3333333333em;
1769
1649
  }
1770
1650
 
1651
+ .video-js.skin_mini .vjs-play-progress .vjs-time-tooltip {
1652
+ display: none !important;
1653
+ }
1771
1654
 
1655
+ /* */
1656
+ .video-js.skin_mini .vjs-mouse-display{
1657
+ font-size: 1.6666666667em;
1658
+ }
1772
1659
 
1773
- .video-js.skin_cn_news .vjs-volume-panel {
1774
- margin: 0;
1775
- display: inline-flex;
1776
- align-items: center;
1777
- align-self: center;
1778
- height: 2.2em;
1779
- min-width: 7em;
1780
- transition: none;
1660
+ .video-js.skin_mini .vjs-progress-control:hover .vjs-progress-holder {
1661
+ font-size: 1em !important;
1781
1662
  }
1782
- .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
1783
- width: 0;
1784
- height: 100%;
1663
+
1664
+ .video-js.skin_mini .vjs-button{
1665
+ width: 3em;
1785
1666
  display: flex;
1786
1667
  align-items: center;
1787
- overflow: hidden;
1788
- opacity: 0;
1789
- transition: width 0.15s ease, opacity 0.15s ease;
1668
+ justify-content: center;
1790
1669
  }
1791
- .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
1792
- .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
1793
- .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
1794
- .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
1795
- width: 5em;
1796
- opacity: 1;
1670
+
1671
+
1672
+ .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1673
+ .icon-maximize {
1674
+ display: block;
1675
+ height: 32px;
1797
1676
  }
1798
1677
 
1799
- .video-js.skin_cn_news .vjs-volume-bar {
1800
- width: 4em;
1801
- height: 0.3em;
1802
- margin: 0 0.45em;
1678
+ .video-js.skin_mini .vjs-playback-rate .vjs-playback-rate-value{
1679
+ line-height: 4;
1803
1680
  }
1804
1681
 
1682
+ .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1683
+ .icon-minimize {
1684
+ display: none;
1685
+ height: 32px;
1686
+ }
1805
1687
 
1806
- .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
1807
- display: none !important;
1688
+ .video-js.skin_mini button.vjs-play-control.vjs-control.vjs-button{
1689
+ outline: none !important;
1690
+ }
1691
+ .video-js.skin_mini .vjs-fullscreen-control .vjs-icon-placeholder:before,
1692
+ .vjs-icon-fullscreen-enter:before {
1693
+ /* content: '' !important; */
1808
1694
  }
1809
1695
 
1810
- .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
1811
- width: 0 !important;
1696
+ .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button {
1697
+ display: flex;
1698
+ justify-content: center;
1699
+ align-items: center;
1700
+ /* transform: rotate(90deg); */
1812
1701
  }
1813
1702
 
1703
+ .video-js.skin_mini .vjs-subs-caps-button .vjs-icon-placeholder:before{
1704
+ display: none;
1705
+ }
1706
+ .video-js.skin_mini .vjs-volume-panel .vjs-volume-control{
1707
+ margin-left: -10px;
1708
+ display: none;
1709
+ }
1814
1710
 
1815
- .video-js.skin_cn_news .vjs-custom-control-spacer {
1816
- display: block !important;
1817
- flex: 1 1 auto;
1711
+ .video-js.skin_mini .vjs-loading-spinner {
1712
+ position: absolute;
1713
+ top: 50%;
1714
+ left: 50%;
1715
+ transform: translate(-50%, -50%);
1716
+ opacity: .85;
1717
+ text-align: left;
1718
+ border: .2em solid rgba(43, 51, 63, .7);
1719
+ box-sizing: border-box;
1720
+ background-clip: padding-box;
1721
+ width: 3em;
1722
+ height: 3em;
1723
+ border-radius: 50%;
1724
+ visibility: hidden;
1818
1725
  }
1819
1726
 
1727
+ .video-js.skin_mini .skipbtn:hover{
1728
+ cursor: pointer;
1729
+ }
1820
1730
 
1821
- .video-js.skin_cn_news .vjs-big-play-button {
1822
- display: none;
1731
+ .video-js.skin_mini .rewindbtn:hover{
1732
+ cursor: pointer;
1823
1733
  }
1824
- .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
1825
- position: relative !important;
1826
- display: flex;
1827
- left: 0;
1828
- top: -1px;
1734
+
1735
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control{
1736
+ position: relative;
1737
+ padding-left: 0;
1829
1738
  }
1830
- .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
1739
+
1740
+ .video-js.skin_mini.vjs-paused .vjs-big-play-button {
1741
+ width: 40px;
1742
+ height: 40px;
1831
1743
  display: flex;
1832
1744
  justify-content: center;
1833
1745
  align-items: center;
1746
+ border: none;
1834
1747
  position: absolute;
1835
1748
  top: 0;
1836
1749
  left: 0;
1837
1750
  right: 0;
1838
1751
  bottom: 0;
1839
1752
  margin: auto;
1840
- width: 80px;
1841
- height: 80px;
1842
- border: none;
1843
- border-radius: 50%;
1844
- background: rgba(0, 0, 0, 0.55);
1845
- font-size: 5em;
1753
+ font-size: 3em;
1846
1754
  line-height: 1.3em;
1847
1755
  transform: none !important;
1756
+ border-radius: 1.3em;
1848
1757
  }
1849
1758
 
1850
-
1851
- .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
1852
- height: 4px !important;
1853
- margin: 0;
1854
- border-radius: 20px;
1855
- background-color: #393944;
1759
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
1760
+ font-weight: bold;
1856
1761
  }
1857
1762
 
1858
- .video-js.skin_cn_news .vjs-play-progress {
1859
- background-color: #ffffff;
1860
- border-radius: 20px;
1763
+ .video-js.skin_mini .vjs-menu > ul.vjs-menu-content{
1764
+ bottom: 1.1em !important;
1765
+ right: 1em;
1766
+ z-index: 1;
1767
+ font-size: 10px;
1861
1768
  }
1862
1769
 
1863
- .video-js.skin_cn_news .vjs-load-progress,
1864
- .video-js.skin_cn_news .vjs-load-progress div {
1865
- background: rgba(255, 255, 255, 0.15);
1866
- border-radius: 20px;
1770
+ .video-js.skin_mini .vjs-chromecast-button .vjs-icon-placeholder {
1771
+ width: 24px !important;
1772
+ height: 24px !important;
1773
+ }
1774
+ .video-js.skin_mini .settings-selector-icon>svg{
1775
+ height: 19px !important;
1776
+ width: 19px !important;
1867
1777
  }
1868
1778
 
1869
1779
 
1870
- .video-js.skin_cn_news .vjs-play-progress:before {
1871
- content: '';
1872
- width: 16px;
1873
- height: 16px;
1874
- border-radius: 50%;
1875
- background: #ffffff;
1876
- border: 2px solid rgba(0, 0, 0, 0.6);
1877
- box-sizing: border-box;
1878
- box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
1879
- top: -6px;
1880
- right: -8px;
1881
- position: absolute;
1882
- }
1883
- .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
1884
- display: none !important;
1780
+ .video-js.skin_mini button.vjs-rewind-button{
1781
+ cursor: pointer;
1885
1782
  }
1886
1783
 
1887
- .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
1888
- background: #ffffff;
1889
- color: #0a0e17;
1890
- font-weight: 700;
1891
- border-radius: 3px;
1784
+ .video-js.skin_mini .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1785
+ padding-right: 0;
1892
1786
  }
1893
1787
 
1894
- .video-js.skin_cn_news .vjs-live-control {
1895
- display: none !important;
1788
+ .video-js.skin_mini .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1789
+ padding-left: 0;
1896
1790
  }
1897
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
1898
- display: inline-flex;
1791
+
1792
+ .video-js.skin_mini .vjs-control-bar .vjs-time-control.vjs-time-divider {
1793
+ padding-left: 0;
1794
+ padding-right: 0;
1795
+ display: flex;
1796
+ justify-content: center;
1797
+ width: min-content;
1798
+ }
1799
+
1800
+ .video-js.skin_mini.vjs-live .vjs-control-bar .vjs-time-control {
1801
+ display: none
1802
+ }
1803
+ .video-js.skin_mini.vjs-liveui .vjs-control-bar .vjs-time-control {
1804
+ display: none
1805
+ }
1806
+
1807
+ .video-js.skin_mini .vjs-control-bar .vjs-time-control {
1808
+ display: flex;
1809
+ align-items: center;
1810
+ font-weight: 700;
1811
+ font-size: 9px;
1812
+ min-width: 0.8em;
1813
+ padding-left: 0;
1814
+ }
1815
+
1816
+ .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control {
1817
+ display: none;
1818
+ font-size: 11px;
1819
+ justify-content: center;
1899
1820
  align-items: center;
1900
- align-self: center;
1821
+ user-select: none;
1822
+ }
1823
+ .video-js.skin_mini.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
1824
+ display: none;
1825
+ }
1826
+
1827
+ .video-js.skin_mini button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
1828
+ height: min-content;
1829
+ width: min-content;
1830
+ }
1831
+ .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
1832
+ width: 3em;
1833
+ margin-right: 4px;
1834
+ }
1835
+
1836
+ .video-js.skin_mini .content{
1837
+ bottom: 3.4rem !important;
1838
+ right: -4rem !important;
1839
+ }
1840
+
1841
+ .video-js.skin_mini .setting-icon > svg{
1842
+ height:18px !important;
1843
+ }
1844
+
1845
+ .output-overlay{
1846
+ position: absolute;
1847
+ bottom: 0;
1848
+ height: 100%;
1849
+ width: 100%;
1850
+ z-index: 0;
1851
+ border: 0;
1852
+ pointer-events:none
1853
+ }
1854
+
1855
+ .video-js.skin_mini iframe{
1856
+ width: 100%;
1857
+ height: 100%;
1858
+ }
1859
+
1860
+ .video-js.skin_mini .vjs-live-control{
1861
+ align-items: center;
1862
+ max-width: 5em;
1863
+ }
1864
+ .video-js.skin_mini .vjs-live-control.vjs-control .vjs-live-display{
1901
1865
  height: 2.2em;
1902
- gap: 5px;
1903
- width: auto;
1904
- padding: 0 10px;
1905
- border: 1px solid rgba(255, 255, 255, 0.45);
1906
- border-radius: 4px;
1907
- cursor: pointer;
1866
+ display: flex;
1867
+ align-items: center;
1868
+ font-family: monospace;
1869
+ width: 4em;
1870
+ justify-content: center;
1871
+ background: red;
1872
+ margin: 4px 0px 4px 2px;
1908
1873
  }
1909
1874
 
1910
- .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
1875
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:focus{
1876
+ text-shadow: none;
1877
+ }
1878
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
1911
1879
  display: none;
1880
+ font-size: 12px;
1912
1881
  }
1913
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
1882
+
1883
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
1884
+ height: 1.8em;
1914
1885
  display: inline-flex;
1915
1886
  align-items: center;
1887
+ font-family: monospace;
1888
+ justify-content: center;
1889
+ border: 1.5px solid;
1890
+ margin: 4px 0px 4px 2px;
1891
+ white-space: pre;
1892
+ padding: 2px 4px;
1893
+ font-size: 1.2em;
1894
+ font-weight: 500;
1895
+ color: rgba(255, 255, 2555, 0.7);
1916
1896
  }
1917
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
1918
- content: '';
1919
- display: inline-block;
1920
- width: 8px;
1921
- height: 8px;
1922
- border-radius: 50%;
1923
- background: #ff2d2d; /* red live dot */
1924
- }
1925
- .video-js.skin_cn_news .vjs-seek-to-live-text {
1926
- color: #ffffff;
1927
- font-weight: 700;
1928
- font-size: 12px;
1929
- letter-spacing: 0.03em;
1897
+
1898
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
1899
+ content: "NOT LIVE";
1900
+ word-spacing: -4px;
1930
1901
  }
1931
1902
 
1932
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
1933
- border-color: transparent;
1903
+
1904
+ @media(max-width:600px){
1905
+ .tvProviderImage{
1906
+ display: none
1907
+ }
1908
+ .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1909
+ .icon-maximize {
1910
+ height: 30px !important;
1911
+ }
1912
+
1913
+ .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1914
+ .icon-minimize {
1915
+ height: 30px !important;
1916
+ }
1917
+ .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
1918
+ width: 3.5em;
1919
+ }
1920
+ .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1921
+ height: min-content;
1922
+ }
1923
+
1924
+ .video-js.skin_mini button.vjs-slowmo-button{
1925
+ display: none;
1926
+ }
1927
+ .video-js.skin_mini button.vjs-rewind-button{
1928
+ display: none;
1929
+ }
1930
+ .video-js.skin_mini button.vjs-rewind-button>svg{
1931
+ height: 20px;
1932
+ }
1933
+ .video-js.skin_mini .vjs-button{
1934
+ width: 3em;
1935
+ }
1936
+ .video-js.skin_mini .widget-selection{
1937
+ display: none;
1938
+ }
1939
+ .video-js.skin_mini .container{
1940
+ display: none !important;
1941
+ }
1942
+ .video-js.skin_mini .vjs-control-bar{
1943
+ height: 4em !important;
1944
+ }
1945
+ .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before{
1946
+ font-size: 2.5em;
1947
+ line-height: 1.5;
1948
+ }
1949
+ .video-js.skin_mini .vjs-play-progress:before {
1950
+ font-size: 1.2em;
1951
+ position: absolute;
1952
+ right: -0.5em;
1953
+ z-index: 1;
1934
1954
  }
1935
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
1936
- color: #ff2d2d;
1955
+ .video-js.skin_mini button.vjs-skip-button>svg{
1956
+ height: 20px;
1937
1957
  }
1938
1958
 
1939
- /* ---- time controls ---- */
1940
- .video-js.skin_cn_news .vjs-current-time,
1941
- .video-js.skin_cn_news .vjs-duration,
1942
- .video-js.skin_cn_news .vjs-time-divider {
1943
- display: none !important;
1959
+ .stream-selector-icon>svg{
1960
+ width: 24px;
1961
+ height: 24px;
1962
+ }
1963
+ .video-js.skin_mini .vjs-seek-to-live-text{
1964
+ font-size: 12px;
1944
1965
  }
1945
- .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
1946
- display: none;
1947
- align-items: center;
1948
- justify-content: center;
1949
- font-size: 11px;
1950
- font-weight: 700;
1951
- color: #fff;
1952
- padding: 0 6px;
1953
- user-select: none;
1954
1966
  }
1955
1967
 
1956
1968
 
1957
- .video-js.skin_cn_news .vjs-chapter-marker {
1958
- z-index: 2;
1959
- width: var(--vl-chapter-size, 8px);
1960
- height: var(--vl-chapter-size, 8px);
1961
- top: 50%;
1962
- bottom: auto;
1963
- background: var(--vl-chapter-color, #ffffff);
1964
- opacity: var(--vl-chapter-opacity, 1);
1965
- border-radius: 50%;
1966
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
1967
- transform: translate(-50%, -50%) scale(1);
1968
- transition: background-color 0.12s ease;
1969
+ .video-js.skin_mini .vjs-text-track-display-ttml span {
1970
+ background-color: rgba(0, 0, 0, 0.2);
1969
1971
  }
1970
- .video-js.skin_cn_news .vjs-chapter-marker:hover {
1971
- background: var(--vl-chapter-hover, #0a5cff);
1972
+
1973
+
1974
+ .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1975
+ display: flex;
1976
+ justify-content: center;
1977
+ align-items: center;
1978
+ height: 100%;
1979
+ transition: width 0.1s;
1972
1980
  }
1973
- .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1974
- background: var(--vl-chapter-active, #0a5cff);
1981
+ .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
1982
+ margin: 2px;
1975
1983
  }
1976
1984
 
1985
+ .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1986
+ display: flex;
1987
+ justify-content: center;
1988
+ align-items: center;
1989
+ height: 100%;
1990
+ transition: width 0.1s;
1991
+ }
1977
1992
 
1978
- .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
1979
- width: 16px;
1980
- height: 16px;
1981
- bottom: 160%;
1982
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
1993
+ .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
1994
+ display: block;
1995
+ font-size: 10px;
1996
+ padding: 6px 10px;
1997
+ margin: 0;
1998
+ max-height: 100%;
1999
+ overflow-y: auto;
2000
+ }
2001
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-colors,
2002
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-font,
2003
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-controls{
2004
+ display: block;
2005
+ width: 100%;
2006
+ }
2007
+ .video-js.skin_mini .vjs-text-track-settings fieldset{
2008
+ margin: 4px 0;
2009
+ }
2010
+ .video-js.skin_mini .vjs-text-track-settings fieldset span{
2011
+ display: block;
2012
+ padding: 0 0 6px;
2013
+ }
2014
+ .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
2015
+ max-width: 100%;
1983
2016
  }
1984
2017
 
2018
+ @media (max-width: 600px) {
2019
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
2020
+ height: 5px !important;
2021
+ }
2022
+
2023
+ .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
2024
+ display: none;
2025
+ }
1985
2026
 
1986
- .video-js.skin_cn_news .vjs-chapter-preview {
1987
- background: var(--vl-chapter-tooltip, #0a5cff);
1988
- border-radius: 6px;
1989
- padding: 8px 10px;
1990
- width: max-content;
1991
- max-width: 300px;
1992
- text-align: left;
1993
- box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
1994
2027
  }
1995
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
1996
- color: #ffffff;
1997
- font-size: 13px;
1998
- font-weight: 400;
1999
- margin-bottom: 2px;
2028
+
2029
+ .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
2030
+ content: none !important;
2031
+ fill: none !important;
2032
+ filter: none !important;
2000
2033
  }
2001
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
2002
- color: #ffffff;
2003
- font-size: 13px;
2004
- font-weight: 400;
2005
- line-height: 1.3;
2006
- white-space: normal;
2007
- text-align: left;
2034
+
2035
+ /* svg icons opacity and hover effect */
2036
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
2037
+ opacity: 0.7 !important;
2008
2038
  }
2009
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
2010
- border-top-color: var(--vl-chapter-tooltip, #0a5cff);
2039
+
2040
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
2041
+ opacity: 1 !important;
2011
2042
  }
2012
2043
 
2013
- /* ---- responsive ---- */
2014
- @media (max-width: 576px) {
2015
- .video-js.skin_cn_news .vjs-control-bar {
2016
- height: 3.2em !important;
2017
- padding: 0 8px;
2018
- }
2019
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
2020
- padding: 0 6px;
2021
- }
2022
- .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
2023
- display: none !important;
2024
- }
2044
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
2045
+ color: rgba(255, 255, 2555, 0.7)!important;
2046
+ }
2047
+
2048
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
2049
+ color: rgba(255, 255, 2555, 1)!important;
2025
2050
  }
2026
2051
 
2027
2052
 
@@ -2205,6 +2230,7 @@
2205
2230
 
2206
2231
 
2207
2232
 
2233
+
2208
2234
  .video-js .multicamera-parent.default{
2209
2235
  height: 345px;
2210
2236
  position: absolute;
@@ -2285,7 +2311,53 @@
2285
2311
 
2286
2312
 
2287
2313
 
2314
+ .vjs-custom-big-mute.vjs-control{
2315
+ position: absolute;
2316
+ align-items: center;
2317
+ background: #fcb700;
2318
+ border: 0;
2319
+ display: flex;
2320
+ align-items: center;
2321
+ height: 44px;
2322
+ justify-content: center;
2323
+ padding: 0;
2324
+ width: 44px;
2325
+ z-index: 1;
2326
+ outline: none;
2327
+ text-shadow:none !important;
2328
+ cursor: pointer;
2329
+ }
2330
+ .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control {
2331
+ display: flex;
2332
+ top: 50px;
2333
+ height: 50px;
2334
+ width: 50px;
2335
+ }
2336
+ .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control >svg {
2337
+ height: 28px;
2338
+ width: 28px;
2339
+ }
2340
+ .vjs-custom-big-mute.vjs-control:hover{
2341
+ filter: none;
2342
+ }
2343
+
2344
+
2345
+ .vjs-custom-big-mute.vjs-control.tl{
2346
+ top: 0;
2347
+ left: 0;
2348
+ margin: 15px 0 0 15px;
2349
+ }
2350
+
2351
+ .vjs-custom-big-mute.vjs-control.hide{
2352
+ display: none !important;
2353
+
2354
+ }
2288
2355
 
2356
+ .vjs-custom-big-mute.vjs-control > svg {
2357
+ color: #071d39;
2358
+ height: 22px;
2359
+ width: 22px;
2360
+ }
2289
2361
 
2290
2362
 
2291
2363
  /* Watch in Vertical View Button */
@@ -2375,53 +2447,6 @@
2375
2447
  }
2376
2448
  }
2377
2449
 
2378
- .vjs-custom-big-mute.vjs-control{
2379
- position: absolute;
2380
- align-items: center;
2381
- background: #fcb700;
2382
- border: 0;
2383
- display: flex;
2384
- align-items: center;
2385
- height: 44px;
2386
- justify-content: center;
2387
- padding: 0;
2388
- width: 44px;
2389
- z-index: 1;
2390
- outline: none;
2391
- text-shadow:none !important;
2392
- cursor: pointer;
2393
- }
2394
- .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control {
2395
- display: flex;
2396
- top: 50px;
2397
- height: 50px;
2398
- width: 50px;
2399
- }
2400
- .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control >svg {
2401
- height: 28px;
2402
- width: 28px;
2403
- }
2404
- .vjs-custom-big-mute.vjs-control:hover{
2405
- filter: none;
2406
- }
2407
-
2408
-
2409
- .vjs-custom-big-mute.vjs-control.tl{
2410
- top: 0;
2411
- left: 0;
2412
- margin: 15px 0 0 15px;
2413
- }
2414
-
2415
- .vjs-custom-big-mute.vjs-control.hide{
2416
- display: none !important;
2417
-
2418
- }
2419
-
2420
- .vjs-custom-big-mute.vjs-control > svg {
2421
- color: #071d39;
2422
- height: 22px;
2423
- width: 22px;
2424
- }
2425
2450
 
2426
2451
  /* nextep — up-next card (centered in player, scales with player size) */
2427
2452
  .video-js:has(.next-ep-preview),
@@ -2705,6 +2730,38 @@
2705
2730
  z-index: 30 !important;
2706
2731
  }
2707
2732
 
2733
+ /* a wrapper element that tracks the mouse vertically */
2734
+ .vjs-thumbnail-holder {
2735
+ position: absolute;
2736
+ left: -1000px;
2737
+ }
2738
+
2739
+ /* the thumbnail image itself */
2740
+ .vjs-thumbnail {
2741
+ position: absolute;
2742
+ left: 0;
2743
+ bottom: 1.3em;
2744
+ opacity: 0;
2745
+ transition: opacity .2s ease;
2746
+ -webkit-transition: opacity .2s ease;
2747
+ -moz-transition: opacity .2s ease;
2748
+ -mz-transition: opacity .2s ease;
2749
+ }
2750
+
2751
+ /* fade in the thumbnail when hovering over the progress bar */
2752
+ /* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
2753
+ .vjs-progress-control:hover .vjs-thumbnail,
2754
+ .vjs-progress-control.fake-active .vjs-thumbnail,
2755
+ .vjs-progress-control:active .vjs-thumbnail {
2756
+ opacity: 1;
2757
+ }
2758
+
2759
+ /* ... but hide the thumbnail when hovering directly over it */
2760
+ .vjs-progress-control:hover .vjs-thumbnail:hover,
2761
+ .vjs-progress-control:active .vjs-thumbnail:active {
2762
+ opacity: 0;
2763
+ }
2764
+
2708
2765
  .video-js.vjs-quality-menu {
2709
2766
  display: block;
2710
2767
  }
@@ -2784,38 +2841,6 @@
2784
2841
  .video-js.vjs-quality-menu .vjs-quality-menu-wrapper .vjs-menu .vjs-menu-content::-webkit-scrollbar{
2785
2842
  display: none;
2786
2843
  }
2787
- /* a wrapper element that tracks the mouse vertically */
2788
- .vjs-thumbnail-holder {
2789
- position: absolute;
2790
- left: -1000px;
2791
- }
2792
-
2793
- /* the thumbnail image itself */
2794
- .vjs-thumbnail {
2795
- position: absolute;
2796
- left: 0;
2797
- bottom: 1.3em;
2798
- opacity: 0;
2799
- transition: opacity .2s ease;
2800
- -webkit-transition: opacity .2s ease;
2801
- -moz-transition: opacity .2s ease;
2802
- -mz-transition: opacity .2s ease;
2803
- }
2804
-
2805
- /* fade in the thumbnail when hovering over the progress bar */
2806
- /* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
2807
- .vjs-progress-control:hover .vjs-thumbnail,
2808
- .vjs-progress-control.fake-active .vjs-thumbnail,
2809
- .vjs-progress-control:active .vjs-thumbnail {
2810
- opacity: 1;
2811
- }
2812
-
2813
- /* ... but hide the thumbnail when hovering directly over it */
2814
- .vjs-progress-control:hover .vjs-thumbnail:hover,
2815
- .vjs-progress-control:active .vjs-thumbnail:active {
2816
- opacity: 0;
2817
- }
2818
-
2819
2844
  .vjs-poster {
2820
2845
  display: inline-block;
2821
2846
  vertical-align: middle;
@@ -3194,6 +3219,136 @@
3194
3219
  display: none !important;
3195
3220
  visibility: hidden !important;
3196
3221
  }
3222
+ /* DVR start-over: start overlay + persistent Watch Live / Watch from Beginning controls */
3223
+
3224
+ .video-js .vl-dvr-hidden {
3225
+ display: none !important;
3226
+ }
3227
+
3228
+ /* While the viewer picks where to start, the overlay is the only control */
3229
+ .video-js.vl-dvr-pending .vjs-big-play-button,
3230
+ .video-js.vl-dvr-pending .vjs-control-bar,
3231
+ .video-js.vl-dvr-pending .vjs-loading-spinner {
3232
+ display: none !important;
3233
+ }
3234
+
3235
+ .video-js .vl-dvr-overlay {
3236
+ position: absolute;
3237
+ inset: 0;
3238
+ z-index: 5;
3239
+ display: flex;
3240
+ align-items: center;
3241
+ justify-content: center;
3242
+ background: rgba(0, 0, 0, 0.55); /* the video.js poster shows through */
3243
+ }
3244
+
3245
+ .video-js .vl-dvr-overlay-actions {
3246
+ display: flex;
3247
+ flex-direction: column;
3248
+ gap: 12px;
3249
+ min-width: 220px;
3250
+ }
3251
+
3252
+ .video-js .vl-dvr-btn {
3253
+ display: inline-flex;
3254
+ align-items: center;
3255
+ gap: 8px;
3256
+ margin: 0;
3257
+ border: none;
3258
+ cursor: pointer;
3259
+ font-family: inherit;
3260
+ font-weight: 600;
3261
+ line-height: 1.2;
3262
+ white-space: nowrap;
3263
+ box-sizing: border-box;
3264
+ transition: transform 0.12s ease, background-color 0.15s ease, opacity 0.15s ease;
3265
+ }
3266
+
3267
+ .video-js .vl-dvr-btn:active {
3268
+ transform: scale(0.98);
3269
+ }
3270
+
3271
+ .video-js .vl-dvr-btn:focus-visible {
3272
+ outline: 2px solid #fff;
3273
+ outline-offset: 2px;
3274
+ }
3275
+
3276
+ .video-js .vl-dvr-icon {
3277
+ display: inline-flex;
3278
+ flex: none;
3279
+ }
3280
+
3281
+ .video-js .vl-dvr-overlay .vl-dvr-btn {
3282
+ padding: 11px 20px;
3283
+ border-radius: 8px;
3284
+ font-size: 14px;
3285
+ }
3286
+
3287
+ .video-js .vl-dvr-btn--primary {
3288
+ background: #fff;
3289
+ color: #000;
3290
+ }
3291
+
3292
+ .video-js .vl-dvr-btn--secondary {
3293
+ background: rgba(255, 255, 255, 0.18);
3294
+ color: #fff;
3295
+ }
3296
+
3297
+ .video-js .vl-dvr-overlay .vl-dvr-btn:hover {
3298
+ opacity: 0.9;
3299
+ }
3300
+
3301
+ /* Sits on the right, just above the control bar (and any seek bar floating over it) */
3302
+ .video-js .vl-dvr-controls {
3303
+ position: absolute;
3304
+ right: 1em;
3305
+ bottom: calc(var(--vlp-caption-bottom, 4em) + 1.2em);
3306
+ z-index: 2;
3307
+ display: flex;
3308
+ gap: 8px;
3309
+ visibility: visible;
3310
+ opacity: 1;
3311
+ transition: visibility 0.1s, opacity 0.1s;
3312
+ }
3313
+
3314
+ .video-js .vl-dvr-controls .vl-dvr-btn {
3315
+ padding: 6px 12px;
3316
+ border-radius: 4px;
3317
+ font-size: 12px;
3318
+ background: rgba(0, 0, 0, 0.65);
3319
+ color: #fff;
3320
+ }
3321
+
3322
+ .video-js .vl-dvr-controls .vl-dvr-btn:hover {
3323
+ background: rgba(0, 0, 0, 0.85);
3324
+ }
3325
+
3326
+ /* Fade out with the control bar */
3327
+ .video-js.vjs-user-inactive.vjs-playing .vl-dvr-controls {
3328
+ visibility: hidden;
3329
+ opacity: 0;
3330
+ transition: visibility 1s, opacity 1s;
3331
+ }
3332
+
3333
+ .video-js.vjs-controls-disabled .vl-dvr-controls,
3334
+ .video-js.vjs-ad-playing .vl-dvr-controls,
3335
+ .video-js.vjs-ad-loading .vl-dvr-controls,
3336
+ .video-js.vjs-error .vl-dvr-controls,
3337
+ .video-js.vjs-error .vl-dvr-overlay {
3338
+ display: none;
3339
+ }
3340
+
3341
+ .video-js.vjs-layout-x-small .vl-dvr-controls .vl-dvr-label,
3342
+ .video-js.vjs-layout-tiny .vl-dvr-controls .vl-dvr-label {
3343
+ display: none; /* icon-only on very small players; aria-label keeps the name */
3344
+ }
3345
+
3346
+ .video-js.vjs-layout-x-small .vl-dvr-overlay .vl-dvr-btn,
3347
+ .video-js.vjs-layout-tiny .vl-dvr-overlay .vl-dvr-btn {
3348
+ padding: 8px 14px;
3349
+ font-size: 12px;
3350
+ }
3351
+
3197
3352
  /* Resolution Module */
3198
3353
 
3199
3354
  .video-js .container {