@mindedge/vuetify-player 0.4.2 → 0.4.3
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
|
@@ -94,27 +94,42 @@
|
|
|
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
|
+
x-small
|
|
118
133
|
text
|
|
119
134
|
v-bind="attrs"
|
|
120
135
|
v-on="on"
|
|
@@ -151,7 +166,8 @@
|
|
|
151
166
|
<v-tooltip v-if="state.replay" top>
|
|
152
167
|
<template #activator="{ on, attrs }">
|
|
153
168
|
<v-btn
|
|
154
|
-
|
|
169
|
+
class="controls--button"
|
|
170
|
+
x-small
|
|
155
171
|
text
|
|
156
172
|
v-bind="attrs"
|
|
157
173
|
v-on="on"
|
|
@@ -180,7 +196,8 @@
|
|
|
180
196
|
>
|
|
181
197
|
<template #activator="{ on, attrs }">
|
|
182
198
|
<v-btn
|
|
183
|
-
|
|
199
|
+
class="controls--button hide-mobile"
|
|
200
|
+
x-small
|
|
184
201
|
text
|
|
185
202
|
v-bind="attrs"
|
|
186
203
|
v-on="on"
|
|
@@ -199,9 +216,9 @@
|
|
|
199
216
|
t(language, 'player.rewind_10')
|
|
200
217
|
}}</span>
|
|
201
218
|
</v-tooltip>
|
|
202
|
-
</
|
|
219
|
+
</div>
|
|
203
220
|
|
|
204
|
-
<
|
|
221
|
+
<div class="controls-buttons--append">
|
|
205
222
|
<!-- Closed Captions -->
|
|
206
223
|
<v-menu
|
|
207
224
|
v-if="
|
|
@@ -215,7 +232,8 @@
|
|
|
215
232
|
>
|
|
216
233
|
<template #activator="{ on, attrs }">
|
|
217
234
|
<v-btn
|
|
218
|
-
|
|
235
|
+
class="controls--button"
|
|
236
|
+
x-small
|
|
219
237
|
text
|
|
220
238
|
v-bind="attrs"
|
|
221
239
|
v-on="on"
|
|
@@ -263,7 +281,8 @@
|
|
|
263
281
|
>
|
|
264
282
|
<template #activator="{ on, attrs }">
|
|
265
283
|
<v-btn
|
|
266
|
-
|
|
284
|
+
class="controls--button"
|
|
285
|
+
x-small
|
|
267
286
|
text
|
|
268
287
|
v-bind="attrs"
|
|
269
288
|
v-on="on"
|
|
@@ -331,7 +350,8 @@
|
|
|
331
350
|
<v-tooltip v-if="allowFullscreen" top>
|
|
332
351
|
<template #activator="{ on, attrs }">
|
|
333
352
|
<v-btn
|
|
334
|
-
|
|
353
|
+
class="controls--button"
|
|
354
|
+
x-small
|
|
335
355
|
text
|
|
336
356
|
v-bind="attrs"
|
|
337
357
|
v-on="on"
|
|
@@ -367,7 +387,8 @@
|
|
|
367
387
|
>
|
|
368
388
|
<template #activator="{ on, attrs }">
|
|
369
389
|
<v-btn
|
|
370
|
-
|
|
390
|
+
class="controls--button hide-mobile"
|
|
391
|
+
x-small
|
|
371
392
|
text
|
|
372
393
|
v-bind="attrs"
|
|
373
394
|
v-on="on"
|
|
@@ -396,7 +417,8 @@
|
|
|
396
417
|
<v-tooltip v-if="allowRemotePlayback" top>
|
|
397
418
|
<template #activator="{ on, attrs }">
|
|
398
419
|
<v-btn
|
|
399
|
-
|
|
420
|
+
class="controls--button hide-mobile"
|
|
421
|
+
x-small
|
|
400
422
|
text
|
|
401
423
|
v-bind="attrs"
|
|
402
424
|
v-on="on"
|
|
@@ -423,7 +445,8 @@
|
|
|
423
445
|
<v-tooltip v-if="allowDownload" top>
|
|
424
446
|
<template #activator="{ on, attrs }">
|
|
425
447
|
<v-btn
|
|
426
|
-
|
|
448
|
+
class="controls--button hide-mobile"
|
|
449
|
+
x-small
|
|
427
450
|
text
|
|
428
451
|
v-bind="attrs"
|
|
429
452
|
v-on="on"
|
|
@@ -456,8 +479,8 @@
|
|
|
456
479
|
onPlaybackSpeedChange
|
|
457
480
|
"
|
|
458
481
|
></SettingsMenu>
|
|
459
|
-
</
|
|
460
|
-
</
|
|
482
|
+
</div>
|
|
483
|
+
</div>
|
|
461
484
|
</div>
|
|
462
485
|
</v-slide-y-reverse-transition>
|
|
463
486
|
</div>
|
|
@@ -1079,7 +1102,6 @@ export default {
|
|
|
1079
1102
|
// thousands of "targets" for long videos
|
|
1080
1103
|
const scaleFactor = this.player.duration / this.scrub.max
|
|
1081
1104
|
this.setTime(value * scaleFactor)
|
|
1082
|
-
this.player.pause()
|
|
1083
1105
|
},
|
|
1084
1106
|
onCuechange(e) {
|
|
1085
1107
|
if (e && e.srcElement && e.srcElement.track) {
|
|
@@ -1156,10 +1178,16 @@ export default {
|
|
|
1156
1178
|
// this.$refs.player is a type of HTMLMediaElement
|
|
1157
1179
|
// See https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
|
|
1158
1180
|
//this.player.media = this.$refs.player;
|
|
1159
|
-
this.$
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1181
|
+
if (this.$refs.player) {
|
|
1182
|
+
this.player = this.$refs.player
|
|
1183
|
+
this.player.volume = this.state.volume
|
|
1184
|
+
this.$emit('volumechange', this.state.volume)
|
|
1185
|
+
this.$emit('loadedmetadata', e)
|
|
1186
|
+
} else {
|
|
1187
|
+
console.error(
|
|
1188
|
+
'Html5Player->onLoadedmetadata() but player not ready'
|
|
1189
|
+
)
|
|
1190
|
+
}
|
|
1163
1191
|
},
|
|
1164
1192
|
volumeChange(value) {
|
|
1165
1193
|
// Value needs to be a decimal value between 0 and 1
|
|
@@ -1327,18 +1355,46 @@ export default {
|
|
|
1327
1355
|
</script>
|
|
1328
1356
|
|
|
1329
1357
|
<style scoped>
|
|
1358
|
+
@media (max-width: 600px) {
|
|
1359
|
+
.hide-mobile {
|
|
1360
|
+
display: none;
|
|
1361
|
+
}
|
|
1362
|
+
.controls-timestamp--container {
|
|
1363
|
+
width: 0px;
|
|
1364
|
+
}
|
|
1365
|
+
.controls-timestamp {
|
|
1366
|
+
width: 150px;
|
|
1367
|
+
text-align: right;
|
|
1368
|
+
margin-left: -150px;
|
|
1369
|
+
margin-top: -25px;
|
|
1370
|
+
}
|
|
1371
|
+
}
|
|
1330
1372
|
.controls-container {
|
|
1331
|
-
height:
|
|
1373
|
+
height: 80px;
|
|
1332
1374
|
position: relative;
|
|
1333
|
-
top: -
|
|
1334
|
-
margin-bottom: -
|
|
1375
|
+
top: -90px;
|
|
1376
|
+
margin-bottom: -80px;
|
|
1335
1377
|
}
|
|
1336
1378
|
.controls {
|
|
1337
|
-
height:
|
|
1379
|
+
height: 80px;
|
|
1338
1380
|
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
|
|
1339
1381
|
}
|
|
1382
|
+
.controls--slider {
|
|
1383
|
+
width: 100%;
|
|
1384
|
+
padding-left: 0.5rem;
|
|
1385
|
+
padding-right: 0.5rem;
|
|
1386
|
+
}
|
|
1387
|
+
.controls-buttons {
|
|
1388
|
+
display: flex;
|
|
1389
|
+
}
|
|
1390
|
+
.controls-buttons--prepend {
|
|
1391
|
+
margin-right: auto;
|
|
1392
|
+
}
|
|
1393
|
+
.controls-buttons--append {
|
|
1394
|
+
margin-left: auto;
|
|
1395
|
+
}
|
|
1340
1396
|
.player-audio {
|
|
1341
|
-
height:
|
|
1397
|
+
height: 80px;
|
|
1342
1398
|
}
|
|
1343
1399
|
.player-video {
|
|
1344
1400
|
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 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')
|