@mindedge/vuetify-player 0.4.0 → 0.4.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.
package/README.md
CHANGED
|
@@ -192,39 +192,41 @@ See [Full media `src` structure for where the ads array is placed](#full-media-s
|
|
|
192
192
|
|
|
193
193
|
## Supported `<VuetifyPlayer>` Attributes
|
|
194
194
|
|
|
195
|
-
| Attribute Name | Datatype
|
|
196
|
-
| ------------------------------ |
|
|
197
|
-
| `language` | `String`
|
|
198
|
-
| `src` | `Object`
|
|
199
|
-
| `playlist` | `Array `
|
|
200
|
-
| `type` | `String`
|
|
201
|
-
| `autoplay` | `Boolean`
|
|
202
|
-
| `autopictureinpicture` | `Boolean`
|
|
203
|
-
| `controls` | `Boolean`
|
|
204
|
-
| `controlslist` | `String`
|
|
205
|
-
| `crossorigin` | `String`
|
|
206
|
-
| `disablepictureinpicture` | `Boolean`
|
|
207
|
-
| `disableremoteplayback` | `Boolean`
|
|
208
|
-
| `height` | `String`
|
|
209
|
-
| `width` | `String`
|
|
210
|
-
| `rewind` | `Boolean`
|
|
211
|
-
| `loop` | `Boolean`
|
|
212
|
-
| `muted` | `Boolean`
|
|
213
|
-
| `playsinline` | `Boolean`
|
|
214
|
-
| `poster` | `String`
|
|
215
|
-
| `preload` | `String`
|
|
216
|
-
| `captionsmenu` | `Boolean`
|
|
217
|
-
| `playlistmenu` | `Boolean`
|
|
218
|
-
| `playlistautoadvance` | `Boolean`
|
|
219
|
-
| `playbackrates` | `Array`
|
|
220
|
-
| `captions-expanded` | `Boolean`
|
|
221
|
-
| `captions-hide-expand` | `Boolean`
|
|
222
|
-
| `captions-paragraph-view` | `Boolean`
|
|
223
|
-
| `captions-hide-paragraph-view` | `Boolean`
|
|
224
|
-
| `captions-autoscroll` | `Boolean`
|
|
225
|
-
| `captions-hide-autoscroll` | `Boolean`
|
|
226
|
-
| `captions-hide-close` | `Boolean`
|
|
227
|
-
| `captions-visible` | `Boolean`
|
|
195
|
+
| Attribute Name | Datatype | Allowed Values | Default | Description |
|
|
196
|
+
| ------------------------------ | ------------------ | -------------------------------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
197
|
+
| `language` | `String` | en-US \| See BCP 47 Spec | "en-US" | Defines which locale the video player controls will load in |
|
|
198
|
+
| `src` | `Object` | See [src attribute](#the-src-attribute) | {} | A single media source |
|
|
199
|
+
| `playlist` | `Array ` | See [playlist attribute](#the-playlist-attribute) | [] | A collection of media source(s) |
|
|
200
|
+
| `type` | `String` | auto \| video \| audio \| image | "auto" | In audio mode the player has a max-height of 40px |
|
|
201
|
+
| `autoplay` | `Boolean` | true \| false | false | Autoplay on load. It's in the spec but DON'T USE THIS |
|
|
202
|
+
| `autopictureinpicture` | `Boolean` | true \| false | false | Start with picture in picture mode |
|
|
203
|
+
| `controls` | `Boolean` | true \| false | true | Show video controls. When false only play/pause allowed but clicking on the video itself |
|
|
204
|
+
| `controlslist` | `String` | nodownload nofullscreen noremoteplayback | "nodownload noremoteplayback" | Space separated string per <video>. Allowed 'nodownload nofullscreen noremoteplayback' |
|
|
205
|
+
| `crossorigin` | `String` | anonymous \| use-credentials | "anonymous" | Indicates whether to use CORS to fetch the related video |
|
|
206
|
+
| `disablepictureinpicture` | `Boolean` | true \| false | true | Shows the picture in picture button |
|
|
207
|
+
| `disableremoteplayback` | `Boolean` | true \| false | true | Shows the remote playback button but functionality does not exist when clicked |
|
|
208
|
+
| `height` | `String` | `css pixel value` | "auto" | The players height |
|
|
209
|
+
| `width` | `String` | `css pixel value` | "100%" | The players width |
|
|
210
|
+
| `rewind` | `Boolean` | true \| false | true | Enabled the rewind 10s button |
|
|
211
|
+
| `loop` | `Boolean` | true \| false | false | Loop the video on completion |
|
|
212
|
+
| `muted` | `Boolean` | true \| false | false | Start the video muted |
|
|
213
|
+
| `playsinline` | `Boolean` | true \| false | false | Force inline & disable fullscreen |
|
|
214
|
+
| `poster` | `String` | `image url` | "" | Overridden with the playlist.poster if one is set there |
|
|
215
|
+
| `preload` | `String` | "none" \| "metadata" \| "auto" \| `_empty string_` | "" | Empty string = `auto` Provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. |
|
|
216
|
+
| `captionsmenu` | `Boolean` | true \| false | true | Allow the captions below the video |
|
|
217
|
+
| `playlistmenu` | `Boolean` | true \| false | true | Show the playlist menu if there's multiple videos |
|
|
218
|
+
| `playlistautoadvance` | `Boolean` | true \| false | true | Play the next source group |
|
|
219
|
+
| `playbackrates` | `Array` | [`array of numbers`] | [0.5, 1, 1.5, 2] | Default playback speeds. Anything below 0.25 and above 4 will make cause audio distortion |
|
|
220
|
+
| `captions-expanded` | `Boolean` | true \| false | undefined | Supports `.sync`. The initial state of the captions transcript being expanded. |
|
|
221
|
+
| `captions-hide-expand` | `Boolean` | true \| false | true | Show / allow the captions transcript expand button for users |
|
|
222
|
+
| `captions-paragraph-view` | `Boolean` | true \| false | undefined | Supports `.sync`. The initial state of the captions transcript paragraph view |
|
|
223
|
+
| `captions-hide-paragraph-view` | `Boolean` | true \| false | false | Allow the captions transcript paragraph view for users |
|
|
224
|
+
| `captions-autoscroll` | `Boolean` | true \| false | false | Supports `.sync`. The initial state for the captions transcript autoscroll state |
|
|
225
|
+
| `captions-hide-autoscroll` | `Boolean` | true \| false | undefined | Allow users to enable / disable captions transcript autoscrolling |
|
|
226
|
+
| `captions-hide-close` | `Boolean` | true \| false | false | Allow users to show / hide the captions transcript box |
|
|
227
|
+
| `captions-visible` | `Boolean` | true \| false | false | Supports `.sync`. The initial state for the captions transcript visibility |
|
|
228
|
+
| `elevation` | `Number`\|`String` | 0-24 | 2 | Designates an elevation applied to the component between 0 and 24 |
|
|
229
|
+
| `flat` | `Boolean` | true \| false | false | Removes the elevation |
|
|
228
230
|
|
|
229
231
|
## Supported `<VuetifyPlayer>` Events
|
|
230
232
|
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-card v-if="visibleState">
|
|
2
|
+
<v-card v-if="visibleState" :elevation="elevation">
|
|
3
3
|
<v-card-actions class="d-flex flex-wrap flex-row-reverse mb-0 pb-0">
|
|
4
4
|
<div class="d-flex ml-auto">
|
|
5
5
|
<v-tooltip v-if="!hideAutoscroll" top>
|
|
@@ -231,6 +231,7 @@ export default {
|
|
|
231
231
|
hideAutoscroll: { type: Boolean, required: false, default: false },
|
|
232
232
|
visible: { type: Boolean, required: false, default: undefined },
|
|
233
233
|
hideClose: { type: Boolean, required: false, default: false },
|
|
234
|
+
elevation: { type: [Number, String], required: false, default: 2 },
|
|
234
235
|
},
|
|
235
236
|
emits: [
|
|
236
237
|
'click:cue',
|
|
@@ -298,20 +299,23 @@ export default {
|
|
|
298
299
|
}
|
|
299
300
|
|
|
300
301
|
// Create a new paragraph every 3 sentences
|
|
301
|
-
if (
|
|
302
|
-
|
|
302
|
+
if (
|
|
303
|
+
puncuationCount > 3 &&
|
|
304
|
+
typeof cues[i + 1] !== 'undefined'
|
|
305
|
+
) {
|
|
306
|
+
// Find the first puncuation and include it in the slice so the NEXT paragraph doesn't start mid sentence
|
|
303
307
|
const breakIndex = cues[i].text.search(/[.?!]/) + 1
|
|
304
308
|
|
|
305
309
|
// Append the first part to the previous paragraph so it ends on a period
|
|
306
310
|
paragraphs[paragraphs.length - 1].text +=
|
|
307
|
-
' ' + cues[i].text.slice(0, breakIndex)
|
|
311
|
+
' ' + cues[i].text.slice(0, breakIndex).trim()
|
|
308
312
|
|
|
309
313
|
// Use `new VTTCue` to break the reference. Otherwise the below appends will duplicate text
|
|
310
314
|
// Also grab from the breakIndex afterwards to get the potential next sentence
|
|
311
315
|
paragraphs.push(
|
|
312
316
|
new VTTCue(
|
|
313
|
-
cues[i].startTime,
|
|
314
|
-
cues[i].endTime,
|
|
317
|
+
cues[i + 1].startTime,
|
|
318
|
+
cues[i + 1].endTime,
|
|
315
319
|
cues[i].text.slice(breakIndex).trim()
|
|
316
320
|
)
|
|
317
321
|
)
|
|
@@ -485,6 +485,7 @@
|
|
|
485
485
|
:visible.sync="captionsVisibleState"
|
|
486
486
|
:hide-autoscroll="captionsHideAutoscroll"
|
|
487
487
|
:hide-close="captionsHideClose"
|
|
488
|
+
:elevation="elevation"
|
|
488
489
|
@update:paragraph-view="
|
|
489
490
|
$emit('update:captions-paragraph-view', $event)
|
|
490
491
|
"
|
|
@@ -566,6 +567,7 @@ export default {
|
|
|
566
567
|
required: false,
|
|
567
568
|
default: false,
|
|
568
569
|
},
|
|
570
|
+
elevation: { type: [Number, String], required: false, default: 2 },
|
|
569
571
|
},
|
|
570
572
|
emits: [
|
|
571
573
|
'error',
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
:type="current.type"
|
|
26
26
|
:attributes="current.attributes"
|
|
27
27
|
:src="current.src"
|
|
28
|
+
:elevation="flat ? 0 : elevation"
|
|
28
29
|
@focusin="onFocusin"
|
|
29
30
|
@focusout="onFocusout"
|
|
30
31
|
@click:fullscreen="onFullscreen"
|
|
@@ -43,6 +44,7 @@
|
|
|
43
44
|
:captions-autoscroll="captionsAutoscroll"
|
|
44
45
|
:captions-hide-autoscroll="captionsHideAutoscroll"
|
|
45
46
|
:captions-visible.sync="captionsVisibleState"
|
|
47
|
+
:elevation="flat ? 0 : elevation"
|
|
46
48
|
@load="$emit('load', $event)"
|
|
47
49
|
@ended="onEnded"
|
|
48
50
|
@loadeddata="onLoadeddata"
|
|
@@ -204,6 +206,8 @@ export default {
|
|
|
204
206
|
return [0.5, 1, 1.5, 2]
|
|
205
207
|
},
|
|
206
208
|
}, // Default playback speeds
|
|
209
|
+
elevation: { type: [Number, String], required: false, default: 2 },
|
|
210
|
+
flat: { type: Boolean, required: false, default: false },
|
|
207
211
|
},
|
|
208
212
|
emits: [
|
|
209
213
|
'load',
|