[READ-ONLY] Mirror of https://github.com/danielroe/stream-vue. Vue component for Cloudflare Stream.
cloudflare
stream
vue
vuejs
fix: add defaults and sync props with child stream element
Daniel Roe
(Sep 26, 2020, 11:12 PM +0100)
eb45f245
22bff52e
+41
-7
+40
-6
src/index.ts
+40
-6
src/index.ts
···
123
123
* To disable video autoplay, the autoplay attribute needs to be removed altogether as this attribute. Setting autoplay="false" will not work; the video will autoplay if the attribute is there in the <stream> tag.
124
124
*
125
125
* In addition, some browsers now prevent videos with audio from playing automatically. You may add the mute attribute to allow your videos to autoplay. For more information, [go here](https://webkit.org/blog/6784/new-video-policies-for-ios/).
126
+
*
127
+
* @default false
126
128
*/
127
-
autoplay: { type: Boolean },
129
+
autoplay: { type: Boolean, default: false },
128
130
/**
129
131
* Shows the default video controls such as buttons for play/pause, volume controls. You may choose to build buttons and controls that work with the player.
132
+
*
133
+
* @default false
130
134
*/
131
-
controls: { type: Boolean },
135
+
controls: { type: Boolean, default: false },
132
136
/**
133
137
* Returns the current playback time in seconds. Setting this value seeks the video to a new time.
138
+
*
139
+
* @default 0
134
140
*/
135
-
currentTime: { type: Number },
141
+
currentTime: { type: Number, default: 0 },
136
142
/**
137
143
* The height of the video’s display area, in CSS pixels.
138
144
*/
···
143
149
width: { type: [String, Number] },
144
150
/**
145
151
* A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced.
152
+
*
153
+
* @default false
146
154
*/
147
-
muted: { type: Boolean },
155
+
muted: { type: Boolean, default: false },
148
156
/**
149
157
* A Boolean attribute; if included the player will automatically seek back to the start upon reaching the end of the video.
158
+
*
159
+
* @default false
150
160
*/
151
-
loop: { type: Boolean },
161
+
loop: { type: Boolean, default: false },
152
162
/**
153
163
* This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. You may choose to include this attribute as a boolean attribute without a value, or you may specify the value preload="auto" to preload the beginning of the video. Not including the attribute or using preload="metadata" will just load the metadata needed to start video playback when requested.
154
164
*
···
163
173
},
164
174
/**
165
175
* Sets volume from 0.0 (silent) to 1.0 (maximum value)
176
+
*
177
+
* @default 1
166
178
*/
167
-
volume: { type: Number },
179
+
volume: { type: Number, default: 1 },
168
180
},
169
181
inheritAttrs: false,
170
182
data: () => ({
···
177
189
beforeMount() {
178
190
;(this as any).initialiseStream()
179
191
},
192
+
watch: [
193
+
'autoplay',
194
+
'controls',
195
+
'currentTime',
196
+
'muted',
197
+
'loop',
198
+
'volume',
199
+
'preload',
200
+
].reduce((obj, prop) => {
201
+
obj[prop] = function (
202
+
this: { updateProp: (key: string, value: any) => void },
203
+
val: any
204
+
) {
205
+
this.updateProp(prop, val)
206
+
}
207
+
return obj
208
+
}, {} as Record<string, any>),
180
209
methods: {
210
+
updateProp(key: string, value: any) {
211
+
if (!this.$refs.stream) return
212
+
;(this.$refs.stream as any)[key] = value
213
+
},
181
214
initialiseStream() {
182
215
if (!this.streamScript) {
183
216
const streamScript = document.createElement('script')
···
225
258
'none',
226
259
},
227
260
on: this.$listeners,
261
+
ref: 'stream',
228
262
}),
229
263
]
230
264
)