@vidispine/vdt-videojs 23.1.0 → 23.2.0-pre.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/.prettierignore +3 -0
  2. package/deprecated-app/index.html +424 -296
  3. package/dist/index.css +29 -13
  4. package/dist/index.es.js +3 -2
  5. package/dist/index.js +3 -2
  6. package/dist/index.umd.js +3 -2
  7. package/package.json +7 -6
  8. package/src/player.scss +653 -590
package/src/player.scss CHANGED
@@ -1,604 +1,667 @@
1
1
  @import '~video.js/dist/video-js.css';
2
2
 
3
3
  $red: #f00;
4
- $dark-translucent: rgba(28,28,28,0.9);
4
+ $dark-translucent: rgba(28, 28, 28, 0.9);
5
5
  $dark-gray: #333;
6
- $light-translucent: rgba(255,255,255,.2);
6
+ $light-translucent: rgba(255, 255, 255, 0.2);
7
7
  $large-icon-size: 90px;
8
8
  $controls-height: 50px;
9
9
  $mid-opacity: 0.6;
10
10
  $mid-radius: 7px;
11
11
 
12
12
  //remove safari's and other webkit browser's blue glow on tab selection
13
- textarea, select, input, button, video { outline: none; }
14
- button:focus, .video-js .vjs-menu-item{
15
- outline: initial;
13
+ textarea,
14
+ select,
15
+ input,
16
+ button,
17
+ video {
18
+ outline: none;
19
+ }
20
+ button:focus,
21
+ .video-js .vjs-menu-item {
22
+ outline: initial;
16
23
  }
17
24
 
18
- .video-js{
19
- max-width: 100%;
20
- overflow: hidden;
21
-
22
- &.init{
23
- height: 0px !important;
24
- display: none;;
25
- }
26
-
27
- video{
28
- transform: translate3d(0px, 0px, 0px);
29
- -webkit-transform: translate3d(0px, 0px, 0px);
30
- display: block;
31
- }
32
-
33
- .vjs-poster{
34
- background-size: cover;
35
- }
36
-
37
- .vjs-control-bar{
38
- height: $controls-height;
39
- padding-top: 6px;
40
- display: flex;
41
- /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+15,0.3+100 */
42
- background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */
43
- background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
44
- background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
45
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00000000", endColorstr="#4d000000",GradientType=0 ); /* IE6-9 */
46
-
47
- transform: translate3d(0px, 0px, 0px);
48
- -webkit-transform: translate3d(0px, 0px, 0px);
49
- z-index: 2;
50
-
51
- .vdt-seekbar-wrapper{
52
- top: 0px;
53
- left: 0px;
54
- height: 10px;
55
- width: 100%;
56
- position: absolute;
57
- margin: 0 auto;
58
- }
59
- }
60
-
61
- .vjs-big-play-button{
62
- font-size: $large-icon-size;
63
- border: 0px;
64
- background-color: transparent;
65
- text-shadow: 1px 2px 40px rgba(0,0,0,.4);
66
- z-index: 2;
67
-
68
- .vjs-icon-placeholder:before{
69
- padding-top: 5px; // play button offset correction
70
- }
71
- }
72
-
73
- &:hover{
74
- .vjs-big-play-button,
75
- .vjs-big-play-button:focus{
76
- background-color: transparent;
77
- }
78
- }
79
-
80
-
81
- //control bar
82
- .vjs-progress-control {
83
- top: 0px;
84
- left: 0px;
85
- position: absolute;
86
- display: block;
87
- width: 100%;
88
- height: 10px;
89
-
90
- .vjs-load-progress{
91
- background: $light-translucent;
92
- }
93
-
94
- &:hover .vjs-play-progress .vjs-time-tooltip,
95
- .vjs-play-progress .vjs-time-tooltip{
96
- display: none;
97
- }
98
- }
99
-
100
- // push everything after time display to the right side
101
- .vjs-time-control{
102
- &.duration, &.vjs-duration{
103
- margin-right: auto;
104
- }
105
- }
106
-
107
- .vjs-subs-caps-button, .vdt-screenshot-button{
108
- .vjs-icon-placeholder{
109
- opacity: .6;
110
- }
111
- }
112
-
113
- &.has-vdt-menu .vjs-subs-caps-button{
114
- display: none;
115
- }
116
-
117
- &.subtitles-active{
118
- .vjs-subs-caps-button .vjs-icon-placeholder{
119
- opacity: 1;
120
- }
121
- }
122
-
123
- .vjs-control{
124
- font-size: 14px;
125
- }
126
-
127
- .vjs-play-progress.vjs-slider-bar{
128
- background-color: $red;
129
- }
130
-
131
- .vjs-current-time,
132
- .vjs-time-control,
133
- .vjs-no-flex .vjs-current-time{
134
- display: block;
135
- }
136
-
137
- .vjs-time-control{
138
- font-size: 14px;
139
- padding: 0px;
140
- min-width: 14px;
141
- text-align: center;
142
- }
143
-
144
- .vjs-volume-panel{
145
- // margin-right: 20px;
146
- width: 3em;
147
- .vjs-mute-control{
148
- width: 3em;
149
- }
150
- }
151
-
152
- .vjs-menu-button-popup .vjs-menu{
153
- bottom: 20px;
154
- .vjs-menu-content{
155
- background-color: $dark-translucent;
156
- border-radius: $mid-radius;
157
- }
158
-
159
- li.vjs-menu-item:focus:not(.vjs-selected){
160
- background-color: transparent;
161
- }
162
-
163
- li.vjs-menu-item:hover:not(.vjs-selected){
164
- background-color: $light-translucent
165
- }
166
-
167
- .vjs-menu-item-text{
168
- color: white;
169
- }
170
-
171
- .vjs-menu-item.vjs-selected .vjs-menu-item-text{
172
- color: #333;
173
- }
174
- }
175
-
176
- //our special osd (hosts custom play button and other features in the future, has css vertical centering)
177
- .vdt-player-osd{
178
- pointer-events: none;
179
- position: absolute;
180
- top: 0px; left: 0px;
181
- height: 100%;
182
- width: 100%;
183
- opacity: 0;
184
- z-index: 4;
185
- -webkit-transform: translate3d(0px,0px,0px) scale3d(0.5,0.5,.5);
186
- -webkit-backface-visibility: hidden;
187
- backface-visibility: hidden;
188
- transform: translate3d(0px,0px,0px) scale3d(0.5,0.5,.5);
189
- transition: 200ms ease-out all;
190
- // animation-fill-mode: backwards;
191
-
192
- &.active{
193
- opacity: 1;
194
- -webkit-transform: scale3d(1,1,1);
195
- transform: scale3d(1,1,1);
196
- }
197
-
198
- table{
199
- width: 100%; height: 100%;
200
- td{
201
- vertical-align: middle;
202
- text-align: center;
203
- .osd-feedback-icon{
204
- &:before{
205
- font-family: VideoJS;
206
- content: "\f101";
207
- font-size: 50px;
208
- padding: 15px;
209
- display: inline-block;
210
- height: 80px; //20 + 20 + 60
211
- width: 80px;
212
- text-align: center;
213
- background: rgba(0,0,0,.2);
214
- border-radius: 100%;
215
- }
216
- }
217
- .pause:before{
218
- content: "\f103";
219
- }
220
-
221
- .volchange.high:before{
222
- content: "\f107";
223
- }
224
-
225
- .volchange.mid:before{
226
- content: "\f106";
227
- }
228
-
229
- .volchange.low:before{
230
- content: "\f105";
231
- }
232
-
233
- .mute:before, .volchange.null:before{
234
- content: "\f104";
235
- }
236
-
237
- .unmute:before{
238
- content: "\f107";
239
- }
240
-
241
- .forward-jump:before, .backward-jump:before{
242
- content: "\f101\f101";
243
- letter-spacing: -38px;
244
- padding-left: 0px;
245
- padding-right: 34px;
246
- }
247
-
248
- .backward-jump:before{
249
- -webkit-transform: scaleX(-1);
250
- transform: scaleX(-1);
251
- }
252
- }
253
- }
254
- }
255
-
256
-
257
- //spinner / loader customizations
258
- @keyframes vjs-spinner-fade {
259
- 0% {
260
- border-top-color: rgba(255, 255, 255, 0.6);
261
- }
262
- 35% {
263
- border-top-color: white;
264
- }
265
- 100% {
266
- border-top-color: rgba(255, 255, 255, 0.6);
267
- }
268
- }
269
-
270
- .vjs-loading-spinner {
271
- &:after, &:before{
272
- margin: -5px;
273
- }
274
-
275
- margin: -40px 0 0 -40px;
276
- opacity: 0.85;
277
- border: 5px solid rgba(255, 255, 255, 0.7);
278
- width: 80px;
279
- height: 80px;
280
- border-radius: 100px;
281
- z-index: 5;
282
- }
283
-
284
-
285
- //css relating to subtitles
286
- .vjs-text-track-display, &.vjs-user-inactive.vjs-playing .vjs-text-track-display{
287
- bottom: 0px;
288
- transition: transform 300ms ease-out;
289
- -webkit-transform: translate3d(0px, 0px, 0px);
290
- -webkit-backface-visibility: hidden;
291
- backface-visibility: hidden;
292
- > div{
293
- display: table;
294
- width: 100%;
295
- height: 100%;
296
- margin: 0px !important;
297
- }
298
-
299
- .vjs-text-track-cue{ //needs !important to override video.js inline styles
300
- width: 100% !important;
301
- bottom: 0px !important;
302
- top: initial !important;
303
- left: initial !important;
304
- right: initial !important;
305
- font-size: 18px !important;
306
- height: auto !important;
307
- padding-bottom: 1.5%;
308
- display: table-cell;
309
-
310
- > div{
311
- padding: 2px 4px 2px 4px;
312
- line-height: 1.25;
313
- border-radius: 2px;
314
- }
315
- }
316
- }
317
-
318
- // applies to fullscreen
319
- &.vjs-fullscreen,
320
- &.vjs-user-inactive.vjs-playing.vjs-fullscreen{
321
- .vjs-text-track-display .vjs-text-track-cue{
322
- -webkit-backface-visibility: hidden;
323
- backface-visibility: hidden;
324
- font-size: 24px !important;
325
- }
326
- }
327
-
328
- // control bar animation
329
- &.vjs-has-started.vjs-user-inactive.vjs-playing:not(.vjs-fullscreen), // prevent controls staying shown in fs
25
+ .video-js {
26
+ max-width: 100%;
27
+ overflow: hidden;
28
+
29
+ &.init {
30
+ height: 0px !important;
31
+ display: none;
32
+ }
33
+
34
+ video {
35
+ transform: translate3d(0px, 0px, 0px);
36
+ -webkit-transform: translate3d(0px, 0px, 0px);
37
+ display: block;
38
+ }
39
+
40
+ .vjs-poster {
41
+ background-size: cover;
42
+ }
43
+
44
+ .vjs-control-bar {
45
+ height: $controls-height;
46
+ padding-top: 6px;
47
+ display: flex;
48
+ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+15,0.3+100 */
49
+ background: -moz-linear-gradient(
50
+ top,
51
+ rgba(0, 0, 0, 0) 0%,
52
+ rgba(0, 0, 0, 0) 15%,
53
+ rgba(0, 0, 0, 0.3) 100%
54
+ ); /* FF3.6-15 */
55
+ background: -webkit-linear-gradient(
56
+ top,
57
+ rgba(0, 0, 0, 0) 0%,
58
+ rgba(0, 0, 0, 0) 15%,
59
+ rgba(0, 0, 0, 0.3) 100%
60
+ ); /* Chrome10-25,Safari5.1-6 */
61
+ background: linear-gradient(
62
+ to bottom,
63
+ rgba(0, 0, 0, 0) 0%,
64
+ rgba(0, 0, 0, 0) 15%,
65
+ rgba(0, 0, 0, 0.3) 100%
66
+ ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
67
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00000000", endColorstr="#4d000000",GradientType=0 ); /* IE6-9 */
68
+
69
+ transform: translate3d(0px, 0px, 0px);
70
+ -webkit-transform: translate3d(0px, 0px, 0px);
71
+ z-index: 2;
72
+
73
+ .vdt-seekbar-wrapper {
74
+ top: 0px;
75
+ left: 0px;
76
+ height: 10px;
77
+ width: 100%;
78
+ position: absolute;
79
+ margin: 0 auto;
80
+ }
81
+ }
82
+
83
+ .vjs-big-play-button {
84
+ font-size: $large-icon-size;
85
+ border: 0px;
86
+ background-color: transparent;
87
+ text-shadow: 1px 2px 40px rgba(0, 0, 0, 0.4);
88
+ z-index: 2;
89
+
90
+ .vjs-icon-placeholder:before {
91
+ padding-top: 5px; // play button offset correction
92
+ }
93
+ }
94
+
95
+ &:hover {
96
+ .vjs-big-play-button,
97
+ .vjs-big-play-button:focus {
98
+ background-color: transparent;
99
+ }
100
+ }
101
+
102
+ //control bar
103
+ .vjs-progress-control {
104
+ top: 0px;
105
+ left: 0px;
106
+ position: absolute;
107
+ display: block;
108
+ width: 100%;
109
+ height: 10px;
110
+
111
+ .vjs-load-progress {
112
+ background: $light-translucent;
113
+ }
114
+
115
+ &:hover .vjs-play-progress .vjs-time-tooltip,
116
+ .vjs-play-progress .vjs-time-tooltip {
117
+ display: none;
118
+ }
119
+ }
120
+
121
+ // push everything after time display to the right side
122
+ .vjs-time-control {
123
+ &.duration,
124
+ &.vjs-duration {
125
+ margin-right: auto;
126
+ }
127
+ }
128
+
129
+ .vjs-subs-caps-button,
130
+ .vdt-screenshot-button {
131
+ .vjs-icon-placeholder {
132
+ opacity: 0.6;
133
+ }
134
+ }
135
+
136
+ &.has-vdt-menu .vjs-subs-caps-button {
137
+ display: none;
138
+ }
139
+
140
+ &.subtitles-active {
141
+ .vjs-subs-caps-button .vjs-icon-placeholder {
142
+ opacity: 1;
143
+ }
144
+ }
145
+
146
+ .vjs-control {
147
+ font-size: 14px;
148
+ }
149
+
150
+ .vjs-play-progress.vjs-slider-bar {
151
+ background-color: $red;
152
+ }
153
+
154
+ .vjs-current-time,
155
+ .vjs-time-control,
156
+ .vjs-no-flex .vjs-current-time {
157
+ display: block;
158
+ }
159
+
160
+ .vjs-time-control {
161
+ font-size: 14px;
162
+ padding: 0px;
163
+ min-width: 14px;
164
+ text-align: center;
165
+ }
166
+
167
+ .vjs-volume-panel {
168
+ // margin-right: 20px;
169
+ width: 3em;
170
+ .vjs-mute-control {
171
+ width: 3em;
172
+ }
173
+ }
174
+
175
+ .vjs-menu-button-popup .vjs-menu {
176
+ bottom: 20px;
177
+ .vjs-menu-content {
178
+ background-color: $dark-translucent;
179
+ border-radius: $mid-radius;
180
+ }
181
+
182
+ li.vjs-menu-item:focus:not(.vjs-selected) {
183
+ background-color: transparent;
184
+ }
185
+
186
+ li.vjs-menu-item:hover:not(.vjs-selected) {
187
+ background-color: $light-translucent;
188
+ }
189
+
190
+ .vjs-menu-item-text {
191
+ color: white;
192
+ }
193
+
194
+ .vjs-menu-item.vjs-selected .vjs-menu-item-text {
195
+ color: #333;
196
+ }
197
+ }
198
+
199
+ //our special osd (hosts custom play button and other features in the future, has css vertical centering)
200
+ .vdt-player-osd {
201
+ pointer-events: none;
202
+ position: absolute;
203
+ top: 0px;
204
+ left: 0px;
205
+ height: 100%;
206
+ width: 100%;
207
+ opacity: 0;
208
+ z-index: 4;
209
+ -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.5, 0.5, 0.5);
210
+ -webkit-backface-visibility: hidden;
211
+ backface-visibility: hidden;
212
+ transform: translate3d(0px, 0px, 0px) scale3d(0.5, 0.5, 0.5);
213
+ transition: 200ms ease-out all;
214
+ // animation-fill-mode: backwards;
215
+
216
+ &.active {
217
+ opacity: 1;
218
+ -webkit-transform: scale3d(1, 1, 1);
219
+ transform: scale3d(1, 1, 1);
220
+ }
221
+
222
+ table {
223
+ width: 100%;
224
+ height: 100%;
225
+ td {
226
+ vertical-align: middle;
227
+ text-align: center;
228
+ .osd-feedback-icon {
229
+ &:before {
230
+ font-family: VideoJS;
231
+ content: '\f101';
232
+ font-size: 50px;
233
+ padding: 15px;
234
+ display: inline-block;
235
+ height: 80px; //20 + 20 + 60
236
+ width: 80px;
237
+ text-align: center;
238
+ background: rgba(0, 0, 0, 0.2);
239
+ border-radius: 100%;
240
+ }
241
+ }
242
+ .pause:before {
243
+ content: '\f103';
244
+ }
245
+
246
+ .volchange.high:before {
247
+ content: '\f107';
248
+ }
249
+
250
+ .volchange.mid:before {
251
+ content: '\f106';
252
+ }
253
+
254
+ .volchange.low:before {
255
+ content: '\f105';
256
+ }
257
+
258
+ .mute:before,
259
+ .volchange.null:before {
260
+ content: '\f104';
261
+ }
262
+
263
+ .unmute:before {
264
+ content: '\f107';
265
+ }
266
+
267
+ .forward-jump:before,
268
+ .backward-jump:before {
269
+ content: '\f101\f101';
270
+ letter-spacing: -38px;
271
+ padding-left: 0px;
272
+ padding-right: 34px;
273
+ }
274
+
275
+ .backward-jump:before {
276
+ -webkit-transform: scaleX(-1);
277
+ transform: scaleX(-1);
278
+ }
279
+ }
280
+ }
281
+ }
282
+
283
+ //spinner / loader customizations
284
+ @keyframes vjs-spinner-fade {
285
+ 0% {
286
+ border-top-color: rgba(255, 255, 255, 0.6);
287
+ }
288
+ 35% {
289
+ border-top-color: white;
290
+ }
291
+ 100% {
292
+ border-top-color: rgba(255, 255, 255, 0.6);
293
+ }
294
+ }
295
+
296
+ .vjs-loading-spinner {
297
+ &:after,
298
+ &:before {
299
+ margin: -5px;
300
+ }
301
+
302
+ margin: -40px 0 0 -40px;
303
+ opacity: 0.85;
304
+ border: 5px solid rgba(255, 255, 255, 0.7);
305
+ width: 80px;
306
+ height: 80px;
307
+ border-radius: 100px;
308
+ z-index: 5;
309
+ }
310
+
311
+ //css relating to subtitles
312
+ .vjs-text-track-display,
313
+ &.vjs-user-inactive.vjs-playing .vjs-text-track-display {
314
+ bottom: 0px;
315
+ transition: transform 300ms ease-out;
316
+ -webkit-transform: translate3d(0px, 0px, 0px);
317
+ -webkit-backface-visibility: hidden;
318
+ backface-visibility: hidden;
319
+ > div {
320
+ display: table;
321
+ width: 100%;
322
+ height: 100%;
323
+ margin: 0px !important;
324
+ }
325
+
326
+ .vjs-text-track-cue {
327
+ //needs !important to override video.js inline styles
328
+ width: 100% !important;
329
+ bottom: 0px !important;
330
+ top: initial !important;
331
+ left: initial !important;
332
+ right: initial !important;
333
+ font-size: 18px !important;
334
+ height: auto !important;
335
+ padding-bottom: 1.5%;
336
+ display: table-cell;
337
+
338
+ > div {
339
+ padding: 2px 4px 2px 4px;
340
+ line-height: 1.25;
341
+ border-radius: 2px;
342
+ }
343
+ }
344
+ }
345
+
346
+ // applies to fullscreen
347
+ &.vjs-fullscreen,
348
+ &.vjs-user-inactive.vjs-playing.vjs-fullscreen {
349
+ .vjs-text-track-display .vjs-text-track-cue {
350
+ -webkit-backface-visibility: hidden;
351
+ backface-visibility: hidden;
352
+ font-size: 24px !important;
353
+ }
354
+ }
355
+
356
+ // control bar animation
357
+ &.vjs-has-started.vjs-user-inactive.vjs-playing:not(.vjs-fullscreen), // prevent controls staying shown in fs
330
358
  &div,
331
359
  &.vjs-controls-enabled.vjs-user-active,
332
- &.vjs-has-started.vjs-user-inactive.vjs-paused{
333
- .vjs-control-bar {
334
- opacity: 1;
335
- }
336
- }
337
-
338
- &.vjs-has-started.vjs-user-inactive.vjs-playing:not(.controls-below-player) .vjs-control-bar,
339
- &:not(.controls-below-player) .vjs-control-bar{
340
- -webkit-backface-visibility: hidden;
341
- backface-visibility: hidden;
342
- transform: translate3d(0px, $controls-height, 0px);
343
- transition: transform 300ms ease-in-out;
344
- }
345
-
346
- &.vjs-controls-enabled.vjs-user-active:not(.controls-below-player),
347
- &.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player){
348
- .vjs-control-bar{
349
- transform: translate3d(0px, 0px, 0px);
350
- -webkit-transform: translate3d(0px, 0px, 0px);
351
- }
352
-
353
- &:not(.vjs-controls-disabled) .vjs-text-track-display{
354
- transform: translate3d(0px, -$controls-height, 0px);
355
- }
356
- }
357
-
358
- //timecode
359
- .vdt-timecode{
360
- display: inline;
361
- font-family: "monospace", sans-serif;
362
- margin-left: 20px;
363
-
364
- input, span{
365
- font-size: 16px;
366
- }
367
-
368
- span{
369
- text-align: center;
370
- display: inline-block;
371
- }
372
-
373
- input{
374
- display: inline-block;
375
- width: auto;
376
- border: 0px;
377
- background: transparent;
378
- color: inherit;
379
- width: 21px;
380
- }
381
-
382
- @media all and (max-width: 640px){
383
- flex-grow: 3;
384
- }
385
- }
386
-
387
-
388
- .vdt-timecode.duration{ // read-only duration display timecode
389
- margin-left: 0px;
390
- margin-right: auto;
391
- span{ cursor: default; }
392
- &:before{
393
- content: "/";
394
- display: inline-block;
395
- margin: 0px 5px;
396
- font-size: 16px;
397
- }
398
-
399
- @media all and (max-width: 640px){ // gets too cramped on mobile devices
400
- display: none;
401
- }
402
- }
403
-
404
- // buttons
405
- .vdt-cinema-button,
406
- .vdt-settings-menu-button,
407
- .vdt-screenshot-button{
408
- cursor: pointer;
409
- &:after{
410
- content: "\f10b";
411
- font-family: VideoJS;
412
- font-size: 22px;
413
- }
414
-
415
- &:active, &:focus{
416
- opacity: $mid-opacity;
417
- }
418
- }
419
-
420
- .vdt-cinema-button:after{
421
- content: "\f10a";
422
- }
423
-
424
- .vdt-settings-menu-button:after{
425
- content: "\f110";
426
- }
427
-
428
- // waveform visualisation
429
- .vdt-waveform-visual, .vdt-help-overlay{
430
- position: absolute;
431
- top: 0px;
432
- left: 0px;
433
- background: #888;
434
- height: 100%;
435
- width: 100%;
436
- display: none;
437
-
438
- /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#88bfe8+0,71a1c4+100 */
439
- background: rgb(136,191,232); /* Old browsers */
440
- background: -moz-linear-gradient(top, rgba(136,191,232,1) 0%, rgba(113,161,196,1) 100%); /* FF3.6-15 */
441
- background: -webkit-linear-gradient(top, rgba(136,191,232,1) 0%,rgba(113,161,196,1) 100%); /* Chrome10-25,Safari5.1-6 */
442
- background: linear-gradient(to bottom, rgba(136,191,232,1) 0%,rgba(113,161,196,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
443
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#71a1c4',GradientType=0 ); /* IE6-9 */
444
-
445
-
446
- canvas{
447
- height: 100%;
448
- width: 100%;
449
- }
450
- }
451
-
452
- &.vjs-has-started .vdt-waveform-visual{
453
- display: block;
454
- }
455
-
456
- // help overlay
457
- .vdt-help-overlay{ // cascade unwanted css
458
- font-size: 15px;
459
- background: transparent;
460
- z-index: 2;
461
- transition: opacity 1s ease-in-out;
462
- opacity: 0;
463
- padding-bottom: 12px;
464
- > table{
465
- height: 100%;
466
- margin: 0 auto;
467
-
468
- td.vdt-help-contents{
469
- table {
470
- border-radius: $mid-radius;
471
- max-height: 400px;
472
- -webkit-backdrop-filter: blur(10px);
473
- background: rgba(0,0,0,$mid-opacity);
474
-
475
- td { padding: 6px 6px; } // inside table
476
-
477
- td:nth-child(2), td td:nth-child(4){
478
- padding: 4px 9px;
479
- }
480
-
481
- td:nth-child(2){
482
- padding-right: 32px;
483
- }
484
-
485
- td:first-child, td:nth-child(3){
486
- div{ // key icon
487
- text-align: center;
488
- padding: 3px;
489
- border: 1px solid white;
490
- border-radius: 2px;
491
- background: rgba(255,255,255,.1);
492
- font-size: 13px;
493
- min-width: 21px;
494
- }
495
- }
496
-
497
- // a way to do padding for table sides
498
- td:first-child{ padding-left: 16px; }
499
- td:last-child{ padding-right: 16px; }
500
- tr:first-child td{ padding-top: 16px; }
501
- tr:last-child td{ padding-bottom: 16px; }
502
- }
503
- }
504
-
505
- td{
506
- vertical-align: middle;
507
- }
508
- }
509
-
510
- &.active{
511
- display: block;
512
- opacity: 1;
513
- }
514
- }
515
-
516
- &.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen{
517
- &.vjs-user-inactive.vjs-playing .vjs-text-track-display, .vjs-text-track-display{
518
- bottom: $controls-height + 10px;
519
- }
520
- }
521
-
522
- &.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled){
523
- overflow: visible;
524
- // position: relative;
525
- width: auto;
526
- height: auto;
527
- background-color: transparent;
528
- margin-bottom: $controls-height + 20px;
529
-
530
- video{ position: relative;}
531
-
532
- // .vjs-big-play-button, .vdt-help-overlay{
533
- // transform: translateY(- $controls-height / 2);
534
- // }
535
-
536
- // .vjs-loading-spinner{
537
- // transform: translateY(-$controls-height / 2);
538
- // }
539
-
540
- // .vjs-menu-button-popup .vjs-menu{
541
- // bottom: 30px;
542
- // }
543
-
544
- .vjs-control-bar{
545
- transform: translate3d(0px, $controls-height + 10px, 0px);
546
- transition: all 300ms ease-in-out;
547
- background: transparent;
548
-
549
- .vjs-button, .vdt-timecode{
550
- &:not(.vjs-menu-item-text){
551
- color: #333;
552
- }
553
- }
554
- }
555
-
556
- // when on dark bg
557
- &.on-dark .vjs-control-bar{
558
- .vjs-button, .vdt-timecode{
559
- &:not(.vjs-menu-item-text){
560
- color: #efefef;
561
- }
562
- }
563
- }
564
-
565
- .vjs-progress-holder{
566
- margin: 0 auto;
567
- }
568
-
569
- .vjs-menu{
570
- bottom: 35px;
571
- }
572
-
573
- .vjs-poster{
574
- height: initial;
575
- }
576
- // .vjs-poster{
577
- // bottom: $controls-height + 10px;
578
- // }
579
-
580
- // .vdt-player-osd{
581
- // top: initial;
582
- // bottom: ($controls-height + 10px) / 2;
583
- // }
584
-
585
- // .vjs-text-track-display{
586
- // bottom: $controls-height + 10px;
587
- // }
588
-
589
- // &.vjs-user-inactive.vjs-playing .vjs-text-track-display{
590
- // bottom: $controls-height + 10px;
591
- // }
592
- }
593
-
594
-
595
- //remove these from display, best to find options that prevent inserting them in them first place
596
- .vjs-play-progress:before,
597
- .vjs-remaining-time,
598
- .vjs-picture-in-picture-control,
599
- .vjs-progress-control:hover .vjs-time-tooltips,
600
- .vjs-play-progress .vjs-time-tooltip,
601
- .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip{
602
- display: none;
603
- }
604
- }
360
+ &.vjs-has-started.vjs-user-inactive.vjs-paused {
361
+ .vjs-control-bar {
362
+ opacity: 1;
363
+ }
364
+ }
365
+
366
+ &.vjs-has-started.vjs-user-inactive.vjs-playing:not(.controls-below-player) .vjs-control-bar,
367
+ &:not(.controls-below-player) .vjs-control-bar {
368
+ -webkit-backface-visibility: hidden;
369
+ backface-visibility: hidden;
370
+ transform: translate3d(0px, $controls-height, 0px);
371
+ transition: transform 300ms ease-in-out;
372
+ }
373
+
374
+ &.vjs-controls-enabled.vjs-user-active:not(.controls-below-player),
375
+ &.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player) {
376
+ .vjs-control-bar {
377
+ transform: translate3d(0px, 0px, 0px);
378
+ -webkit-transform: translate3d(0px, 0px, 0px);
379
+ }
380
+
381
+ &:not(.vjs-controls-disabled) .vjs-text-track-display {
382
+ transform: translate3d(0px, -$controls-height, 0px);
383
+ }
384
+ }
385
+
386
+ //timecode
387
+ .vdt-timecode {
388
+ display: inline;
389
+ font-family: 'monospace', sans-serif;
390
+ margin-left: 20px;
391
+
392
+ input,
393
+ span {
394
+ font-size: 16px;
395
+ }
396
+
397
+ span {
398
+ text-align: center;
399
+ display: inline-block;
400
+ }
401
+
402
+ input {
403
+ display: inline-block;
404
+ width: auto;
405
+ border: 0px;
406
+ background: transparent;
407
+ color: inherit;
408
+ width: 21px;
409
+ }
410
+
411
+ @media all and (max-width: 640px) {
412
+ flex-grow: 3;
413
+ }
414
+ }
415
+
416
+ .vdt-timecode.duration {
417
+ // read-only duration display timecode
418
+ margin-left: 0px;
419
+ margin-right: auto;
420
+ span {
421
+ cursor: default;
422
+ }
423
+ &:before {
424
+ content: '/';
425
+ display: inline-block;
426
+ margin: 0px 5px;
427
+ font-size: 16px;
428
+ }
429
+
430
+ @media all and (max-width: 640px) {
431
+ // gets too cramped on mobile devices
432
+ display: none;
433
+ }
434
+ }
435
+
436
+ // buttons
437
+ .vdt-cinema-button,
438
+ .vdt-settings-menu-button,
439
+ .vdt-screenshot-button {
440
+ cursor: pointer;
441
+ &:after {
442
+ content: '\f10b';
443
+ font-family: VideoJS;
444
+ font-size: 22px;
445
+ }
446
+
447
+ &:active,
448
+ &:focus {
449
+ opacity: $mid-opacity;
450
+ }
451
+ }
452
+
453
+ .vdt-cinema-button:after {
454
+ content: '\f10a';
455
+ }
456
+
457
+ .vdt-settings-menu-button:after {
458
+ content: '\f110';
459
+ }
460
+
461
+ // waveform visualisation
462
+ .vdt-waveform-visual,
463
+ .vdt-help-overlay {
464
+ position: absolute;
465
+ top: 0px;
466
+ left: 0px;
467
+ background: #888;
468
+ height: 100%;
469
+ width: 100%;
470
+ display: none;
471
+
472
+ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#88bfe8+0,71a1c4+100 */
473
+ background: rgb(136, 191, 232); /* Old browsers */
474
+ background: -moz-linear-gradient(
475
+ top,
476
+ rgba(136, 191, 232, 1) 0%,
477
+ rgba(113, 161, 196, 1) 100%
478
+ ); /* FF3.6-15 */
479
+ background: -webkit-linear-gradient(
480
+ top,
481
+ rgba(136, 191, 232, 1) 0%,
482
+ rgba(113, 161, 196, 1) 100%
483
+ ); /* Chrome10-25,Safari5.1-6 */
484
+ background: linear-gradient(
485
+ to bottom,
486
+ rgba(136, 191, 232, 1) 0%,
487
+ rgba(113, 161, 196, 1) 100%
488
+ ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
489
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#71a1c4',GradientType=0 ); /* IE6-9 */
490
+
491
+ canvas {
492
+ height: 100%;
493
+ width: 100%;
494
+ }
495
+ }
496
+
497
+ &.vjs-has-started .vdt-waveform-visual {
498
+ display: block;
499
+ }
500
+
501
+ // help overlay
502
+ .vdt-help-overlay {
503
+ // cascade unwanted css
504
+ font-size: 15px;
505
+ background: transparent;
506
+ z-index: 2;
507
+ transition: opacity 1s ease-in-out;
508
+ opacity: 0;
509
+ padding-bottom: 12px;
510
+ > table {
511
+ height: 100%;
512
+ margin: 0 auto;
513
+
514
+ td.vdt-help-contents {
515
+ table {
516
+ border-radius: $mid-radius;
517
+ max-height: 400px;
518
+ -webkit-backdrop-filter: blur(10px);
519
+ background: rgba(0, 0, 0, $mid-opacity);
520
+
521
+ td {
522
+ padding: 6px 6px;
523
+ } // inside table
524
+
525
+ td:nth-child(2),
526
+ td td:nth-child(4) {
527
+ padding: 4px 9px;
528
+ }
529
+
530
+ td:nth-child(2) {
531
+ padding-right: 32px;
532
+ }
533
+
534
+ td:first-child,
535
+ td:nth-child(3) {
536
+ div {
537
+ // key icon
538
+ text-align: center;
539
+ padding: 3px;
540
+ border: 1px solid white;
541
+ border-radius: 2px;
542
+ background: rgba(255, 255, 255, 0.1);
543
+ font-size: 13px;
544
+ min-width: 21px;
545
+ }
546
+ }
547
+
548
+ // a way to do padding for table sides
549
+ td:first-child {
550
+ padding-left: 16px;
551
+ }
552
+ td:last-child {
553
+ padding-right: 16px;
554
+ }
555
+ tr:first-child td {
556
+ padding-top: 16px;
557
+ }
558
+ tr:last-child td {
559
+ padding-bottom: 16px;
560
+ }
561
+ }
562
+ }
563
+
564
+ td {
565
+ vertical-align: middle;
566
+ }
567
+ }
568
+
569
+ &.active {
570
+ display: block;
571
+ opacity: 1;
572
+ }
573
+ }
574
+
575
+ &.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen {
576
+ &.vjs-user-inactive.vjs-playing .vjs-text-track-display,
577
+ .vjs-text-track-display {
578
+ bottom: $controls-height + 10px;
579
+ }
580
+ }
581
+
582
+ &.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) {
583
+ overflow: visible;
584
+ // position: relative;
585
+ width: auto;
586
+ height: auto;
587
+ background-color: transparent;
588
+ margin-bottom: $controls-height + 20px;
589
+
590
+ video {
591
+ position: relative;
592
+ }
593
+
594
+ // .vjs-big-play-button, .vdt-help-overlay{
595
+ // transform: translateY(- $controls-height / 2);
596
+ // }
597
+
598
+ // .vjs-loading-spinner{
599
+ // transform: translateY(-$controls-height / 2);
600
+ // }
601
+
602
+ // .vjs-menu-button-popup .vjs-menu{
603
+ // bottom: 30px;
604
+ // }
605
+
606
+ .vjs-control-bar {
607
+ transform: translate3d(0px, $controls-height + 10px, 0px);
608
+ transition: all 300ms ease-in-out;
609
+ background: transparent;
610
+
611
+ .vjs-button,
612
+ .vdt-timecode {
613
+ &:not(.vjs-menu-item-text) {
614
+ color: #333;
615
+ }
616
+ }
617
+ }
618
+
619
+ // when on dark bg
620
+ &.on-dark .vjs-control-bar {
621
+ .vjs-button,
622
+ .vdt-timecode {
623
+ &:not(.vjs-menu-item-text) {
624
+ color: #efefef;
625
+ }
626
+ }
627
+ }
628
+
629
+ .vjs-progress-holder {
630
+ margin: 0 auto;
631
+ }
632
+
633
+ .vjs-menu {
634
+ bottom: 35px;
635
+ }
636
+
637
+ .vjs-poster {
638
+ height: initial;
639
+ }
640
+ // .vjs-poster{
641
+ // bottom: $controls-height + 10px;
642
+ // }
643
+
644
+ // .vdt-player-osd{
645
+ // top: initial;
646
+ // bottom: ($controls-height + 10px) / 2;
647
+ // }
648
+
649
+ // .vjs-text-track-display{
650
+ // bottom: $controls-height + 10px;
651
+ // }
652
+
653
+ // &.vjs-user-inactive.vjs-playing .vjs-text-track-display{
654
+ // bottom: $controls-height + 10px;
655
+ // }
656
+ }
657
+
658
+ //remove these from display, best to find options that prevent inserting them in them first place
659
+ .vjs-play-progress:before,
660
+ .vjs-remaining-time,
661
+ .vjs-picture-in-picture-control,
662
+ .vjs-progress-control:hover .vjs-time-tooltips,
663
+ .vjs-play-progress .vjs-time-tooltip,
664
+ .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
665
+ display: none;
666
+ }
667
+ }