@mindedge/vuetify-player 0.4.2 → 0.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<v-col
|
|
5
5
|
ref="playerContainer"
|
|
6
6
|
:cols="!state.expandedCaptions ? 12 : 6"
|
|
7
|
-
class="pb-0 mb-0"
|
|
7
|
+
class="pb-0 mb-0 player-container"
|
|
8
8
|
>
|
|
9
9
|
<div
|
|
10
10
|
v-if="resolvedType === 'video' && buffering"
|
|
@@ -94,27 +94,43 @@
|
|
|
94
94
|
<v-slide-y-reverse-transition>
|
|
95
95
|
<div v-if="player && state.controls" class="controls">
|
|
96
96
|
<v-slider
|
|
97
|
-
dark
|
|
98
97
|
v-model="currentPercent"
|
|
98
|
+
class="controls--slider"
|
|
99
|
+
hide-details
|
|
100
|
+
dark
|
|
99
101
|
:min="0"
|
|
100
102
|
:max="scrub.max"
|
|
101
|
-
:label="
|
|
102
|
-
filters.playerShortDuration(
|
|
103
|
-
percentToTimeSeconds(currentPercent)
|
|
104
|
-
) +
|
|
105
|
-
' / ' +
|
|
106
|
-
filters.playerShortDuration(player.duration)
|
|
107
|
-
"
|
|
108
103
|
inverse-label
|
|
109
|
-
@mousedown="onPause"
|
|
110
104
|
@change="onScrubTime"
|
|
111
105
|
>
|
|
112
|
-
<template #
|
|
106
|
+
<template #label>
|
|
107
|
+
<div class="controls-timestamp--container">
|
|
108
|
+
<div class="controls-timestamp">
|
|
109
|
+
{{
|
|
110
|
+
filters.playerShortDuration(
|
|
111
|
+
percentToTimeSeconds(
|
|
112
|
+
currentPercent
|
|
113
|
+
)
|
|
114
|
+
) +
|
|
115
|
+
' / ' +
|
|
116
|
+
filters.playerShortDuration(
|
|
117
|
+
player.duration
|
|
118
|
+
)
|
|
119
|
+
}}
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</template>
|
|
123
|
+
</v-slider>
|
|
124
|
+
|
|
125
|
+
<div class="controls-buttons">
|
|
126
|
+
<div class="controls-buttons--prepend">
|
|
113
127
|
<!-- Play button -->
|
|
114
128
|
<v-tooltip v-if="!state.replay" top>
|
|
115
129
|
<template #activator="{ on, attrs }">
|
|
116
130
|
<v-btn
|
|
117
|
-
|
|
131
|
+
class="controls--button"
|
|
132
|
+
dark
|
|
133
|
+
x-small
|
|
118
134
|
text
|
|
119
135
|
v-bind="attrs"
|
|
120
136
|
v-on="on"
|
|
@@ -151,7 +167,9 @@
|
|
|
151
167
|
<v-tooltip v-if="state.replay" top>
|
|
152
168
|
<template #activator="{ on, attrs }">
|
|
153
169
|
<v-btn
|
|
154
|
-
|
|
170
|
+
class="controls--button"
|
|
171
|
+
dark
|
|
172
|
+
x-small
|
|
155
173
|
text
|
|
156
174
|
v-bind="attrs"
|
|
157
175
|
v-on="on"
|
|
@@ -180,7 +198,9 @@
|
|
|
180
198
|
>
|
|
181
199
|
<template #activator="{ on, attrs }">
|
|
182
200
|
<v-btn
|
|
183
|
-
|
|
201
|
+
class="controls--button hide-mobile"
|
|
202
|
+
dark
|
|
203
|
+
x-small
|
|
184
204
|
text
|
|
185
205
|
v-bind="attrs"
|
|
186
206
|
v-on="on"
|
|
@@ -199,9 +219,9 @@
|
|
|
199
219
|
t(language, 'player.rewind_10')
|
|
200
220
|
}}</span>
|
|
201
221
|
</v-tooltip>
|
|
202
|
-
</
|
|
222
|
+
</div>
|
|
203
223
|
|
|
204
|
-
<
|
|
224
|
+
<div class="controls-buttons--append">
|
|
205
225
|
<!-- Closed Captions -->
|
|
206
226
|
<v-menu
|
|
207
227
|
v-if="
|
|
@@ -215,7 +235,9 @@
|
|
|
215
235
|
>
|
|
216
236
|
<template #activator="{ on, attrs }">
|
|
217
237
|
<v-btn
|
|
218
|
-
|
|
238
|
+
class="controls--button"
|
|
239
|
+
dark
|
|
240
|
+
x-small
|
|
219
241
|
text
|
|
220
242
|
v-bind="attrs"
|
|
221
243
|
v-on="on"
|
|
@@ -263,7 +285,9 @@
|
|
|
263
285
|
>
|
|
264
286
|
<template #activator="{ on, attrs }">
|
|
265
287
|
<v-btn
|
|
266
|
-
|
|
288
|
+
class="controls--button"
|
|
289
|
+
dark
|
|
290
|
+
x-small
|
|
267
291
|
text
|
|
268
292
|
v-bind="attrs"
|
|
269
293
|
v-on="on"
|
|
@@ -331,7 +355,9 @@
|
|
|
331
355
|
<v-tooltip v-if="allowFullscreen" top>
|
|
332
356
|
<template #activator="{ on, attrs }">
|
|
333
357
|
<v-btn
|
|
334
|
-
|
|
358
|
+
class="controls--button"
|
|
359
|
+
dark
|
|
360
|
+
x-small
|
|
335
361
|
text
|
|
336
362
|
v-bind="attrs"
|
|
337
363
|
v-on="on"
|
|
@@ -367,7 +393,9 @@
|
|
|
367
393
|
>
|
|
368
394
|
<template #activator="{ on, attrs }">
|
|
369
395
|
<v-btn
|
|
370
|
-
|
|
396
|
+
class="controls--button hide-mobile"
|
|
397
|
+
dark
|
|
398
|
+
x-small
|
|
371
399
|
text
|
|
372
400
|
v-bind="attrs"
|
|
373
401
|
v-on="on"
|
|
@@ -396,7 +424,9 @@
|
|
|
396
424
|
<v-tooltip v-if="allowRemotePlayback" top>
|
|
397
425
|
<template #activator="{ on, attrs }">
|
|
398
426
|
<v-btn
|
|
399
|
-
|
|
427
|
+
class="controls--button hide-mobile"
|
|
428
|
+
dark
|
|
429
|
+
x-small
|
|
400
430
|
text
|
|
401
431
|
v-bind="attrs"
|
|
402
432
|
v-on="on"
|
|
@@ -423,7 +453,9 @@
|
|
|
423
453
|
<v-tooltip v-if="allowDownload" top>
|
|
424
454
|
<template #activator="{ on, attrs }">
|
|
425
455
|
<v-btn
|
|
426
|
-
|
|
456
|
+
class="controls--button hide-mobile"
|
|
457
|
+
dark
|
|
458
|
+
x-small
|
|
427
459
|
text
|
|
428
460
|
v-bind="attrs"
|
|
429
461
|
v-on="on"
|
|
@@ -456,8 +488,8 @@
|
|
|
456
488
|
onPlaybackSpeedChange
|
|
457
489
|
"
|
|
458
490
|
></SettingsMenu>
|
|
459
|
-
</
|
|
460
|
-
</
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
461
493
|
</div>
|
|
462
494
|
</v-slide-y-reverse-transition>
|
|
463
495
|
</div>
|
|
@@ -1079,7 +1111,6 @@ export default {
|
|
|
1079
1111
|
// thousands of "targets" for long videos
|
|
1080
1112
|
const scaleFactor = this.player.duration / this.scrub.max
|
|
1081
1113
|
this.setTime(value * scaleFactor)
|
|
1082
|
-
this.player.pause()
|
|
1083
1114
|
},
|
|
1084
1115
|
onCuechange(e) {
|
|
1085
1116
|
if (e && e.srcElement && e.srcElement.track) {
|
|
@@ -1156,10 +1187,16 @@ export default {
|
|
|
1156
1187
|
// this.$refs.player is a type of HTMLMediaElement
|
|
1157
1188
|
// See https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
|
|
1158
1189
|
//this.player.media = this.$refs.player;
|
|
1159
|
-
this.$
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1190
|
+
if (this.$refs.player) {
|
|
1191
|
+
this.player = this.$refs.player
|
|
1192
|
+
this.player.volume = this.state.volume
|
|
1193
|
+
this.$emit('volumechange', this.state.volume)
|
|
1194
|
+
this.$emit('loadedmetadata', e)
|
|
1195
|
+
} else {
|
|
1196
|
+
console.error(
|
|
1197
|
+
'Html5Player->onLoadedmetadata() but player not ready'
|
|
1198
|
+
)
|
|
1199
|
+
}
|
|
1163
1200
|
},
|
|
1164
1201
|
volumeChange(value) {
|
|
1165
1202
|
// Value needs to be a decimal value between 0 and 1
|
|
@@ -1327,18 +1364,49 @@ export default {
|
|
|
1327
1364
|
</script>
|
|
1328
1365
|
|
|
1329
1366
|
<style scoped>
|
|
1367
|
+
@media (max-width: 600px) {
|
|
1368
|
+
.hide-mobile {
|
|
1369
|
+
display: none;
|
|
1370
|
+
}
|
|
1371
|
+
.controls-timestamp--container {
|
|
1372
|
+
width: 0px;
|
|
1373
|
+
}
|
|
1374
|
+
.controls-timestamp {
|
|
1375
|
+
width: 150px;
|
|
1376
|
+
text-align: right;
|
|
1377
|
+
margin-left: -150px;
|
|
1378
|
+
margin-top: -25px;
|
|
1379
|
+
}
|
|
1380
|
+
}
|
|
1381
|
+
.player-container {
|
|
1382
|
+
overflow: hidden;
|
|
1383
|
+
}
|
|
1330
1384
|
.controls-container {
|
|
1331
|
-
height:
|
|
1385
|
+
height: 80px;
|
|
1332
1386
|
position: relative;
|
|
1333
|
-
top: -
|
|
1334
|
-
margin-bottom: -
|
|
1387
|
+
top: -90px;
|
|
1388
|
+
margin-bottom: -90px;
|
|
1335
1389
|
}
|
|
1336
1390
|
.controls {
|
|
1337
|
-
height:
|
|
1391
|
+
height: 80px;
|
|
1338
1392
|
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
|
|
1339
1393
|
}
|
|
1394
|
+
.controls--slider {
|
|
1395
|
+
width: 100%;
|
|
1396
|
+
padding-left: 0.5rem;
|
|
1397
|
+
padding-right: 0.5rem;
|
|
1398
|
+
}
|
|
1399
|
+
.controls-buttons {
|
|
1400
|
+
display: flex;
|
|
1401
|
+
}
|
|
1402
|
+
.controls-buttons--prepend {
|
|
1403
|
+
margin-right: auto;
|
|
1404
|
+
}
|
|
1405
|
+
.controls-buttons--append {
|
|
1406
|
+
margin-left: auto;
|
|
1407
|
+
}
|
|
1340
1408
|
.player-audio {
|
|
1341
|
-
height:
|
|
1409
|
+
height: 80px;
|
|
1342
1410
|
}
|
|
1343
1411
|
.player-video {
|
|
1344
1412
|
max-height: 100%;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<!-- Settings -->
|
|
3
3
|
<v-menu :attach="attach" top left offset-y :close-on-content-click="false">
|
|
4
4
|
<template #activator="{ on, attrs }">
|
|
5
|
-
<v-btn small text v-bind="attrs" v-on="on">
|
|
5
|
+
<v-btn dark x-small text v-bind="attrs" v-on="on">
|
|
6
6
|
<v-icon>mdi-cog</v-icon>
|
|
7
7
|
<span class="d-sr-only">{{
|
|
8
8
|
t(language, 'player.toggle_settings')
|