-
Notifications
You must be signed in to change notification settings - Fork 29
/
types.ts
335 lines (330 loc) · 15.5 KB
/
types.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
import { MutableRefObject } from "react";
declare global {
interface Window {
Stream?: (iframe: HTMLIFrameElement) => StreamPlayerApi;
}
}
export type Preload = "auto" | "metadata" | "none" | boolean;
export interface VideoDimensions {
videoHeight: number;
videoWidth: number;
}
export interface StreamPlayerApi {
/**
* Subscribe to events
*/
addEventListener: (event: string, handler: EventListener) => void;
/**
* VAST tag for displaying ads
*/
adUrl?: string;
/**
* Tells the browser to immediately start downloading the video and play it as soon as it can. Note that mobile browsers generally do not support this attribute, the user must tap the screen to begin video playback. Please consider mobile users or users with Internet usage limits as some users don’t have unlimited Internet access before using this attribute.
*
* 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.
*
* 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/).
*/
autoplay: boolean;
/**
* An object conforming to the TimeRanges interface. This object is normalized, which means that ranges are ordered, don’t overlap, aren’t empty, and don’t touch (adjacent ranges are folded into one bigger range).
*/
buffered: TimeRanges;
/**
* 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. If you hide controls, you may choose to build custom buttons and controls that work with the player.
*/
controls: boolean;
/**
* Returns the current playback time in seconds. Setting this value seeks the video to a new time.
*/
currentTime: number;
/**
* The read-only HTMLMediaElement property duration indicates the length of the element's media in seconds.
*/
duration: number;
/**
* Indicates whether the media element has ended playback..
*/
ended: boolean;
/**
* Any valid CSS color value provided will be applied to the letterboxing/pillarboxing of the player’s UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.
* https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
*/
letterboxColor?: string;
/**
* A Boolean attribute; if included the player will automatically seek back to the start upon reaching the end of the video.
*/
loop: boolean;
/**
* A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced.
*/
muted: boolean;
/**
* Pause the video
*/
pause: () => void;
/**
* Returns whether the video is paused
*/
paused: boolean;
/**
* Attempts to play the video. Returns a promise that will resolve if playback begins successfully, and rejects if it fails. The most common reason for this to fail is browser policies which prevent unmuted playback that is not initiated by the user.
*/
play: () => Promise<void>;
/**
* A `double` that indicates the rate at which the media is being played back.
*/
playbackRate: number;
/**
* An object conforming to the TimeRanges interface. This object is normalized, which means that ranges are ordered, don’t overlap, aren’t empty, and don’t touch (adjacent ranges are folded into one bigger range).
*/
played: TimeRanges;
/**
* A URL for an image to be shown before the video is started or while the video is downloading. If this attribute isn’t specified, a thumbnail image of the video is shown.
*/
poster?: string;
/**
* 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.
*
* The <video> element does not force the browser to follow the value of this attribute; it is a mere hint. Even though the preload="none" option is a valid HTML5 attribute, Stream player will always load some metadata to initialize the player. The amount of data loaded in this case is negligable.
*/
preload: Preload;
/**
* Any valid CSS color value provided will be applied to certain elements of the player's UI.
* https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
*/
primaryColor?: string;
/**
* Unsubscribe from events
*/
removeEventListener: (event: string, handler: EventListener) => void;
/**
* Either the video UID or the signed token for the video you’ve uploaded to Cloudflare Stream should be included here.
*/
src: string;
/**
* Number representing the intrinsic height of the video in pixels. Note that this is specific to the resolution of the actual video depending on the quality being played. For example, a 16:9 video playing at 1080p will have an intrinsic height of 1080.
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight
*/
videoHeight: number;
/**
* Number representing the intrinsic width of the video in pixels. Note that this is specific to the resolution of the actual video depending on the quality being played. For example, a 16:9 video playing at 1080p will have an intrinsic width of 1920.
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoWidth
*/
videoWidth: number;
/**
* Sets volume from 0.0 (silent) to 1.0 (maximum value)
*/
volume: number;
}
export interface StreamProps {
/**
* VAST tag for displaying ads
*/
adUrl?: string;
/**
* Tells the browser to immediately start downloading the video and play it as soon as it can. Note that mobile browsers generally do not support this attribute, the user must tap the screen to begin video playback. Please consider mobile users or users with Internet usage limits as some users don’t have unlimited Internet access before using this attribute.
*
* 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.
*
* 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/).
*/
autoplay?: boolean;
/**
* CSS class applied to the containing div
*/
className?: string;
/**
* 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. If you hide controls, you may choose to build custom buttons and controls that work with the player.
*/
controls?: boolean;
/**
* Returns the current playback time in seconds. Setting this value seeks the video to a new time.
*/
currentTime?: number;
/**
* Use unique subdomain for iframe source
* customer-<CODE>.cloudflarestream.com
*/
customerCode?: string;
/**
* Will initialize the player with the specified text track enabled. The value should be the BCP-47 language code that was used to [upload the text track](https://developers.cloudflare.com/stream/uploading-videos/adding-captions).
* Note: This will _only_ work once during initialization. Beyond that point the user has full control over their text track settings.
*/
defaultTextTrack?: string;
/**
* The height of the video’s display area, in CSS pixels.
*/
height?: string;
/**
* Any valid CSS color value provided will be applied to the letterboxing/pillarboxing of the player’s UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.
* https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
*/
letterboxColor?: string;
/**
* A Boolean attribute; if included the player will automatically seek back to the start upon reaching the end of the video.
*/
loop?: boolean;
/**
* A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced.
*/
muted?: boolean;
/**
* A `double` that indicates the rate at which the media is being played back.
*/
playbackRate?: number;
/**
* A URL for an image to be shown before the video is started or while the video is downloading. If this attribute isn’t specified, a thumbnail image of the video is shown.
*/
poster?: string;
/**
* 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.
*
* The <video> element does not force the browser to follow the value of this attribute; it is a mere hint. Even though the preload="none" option is a valid HTML5 attribute, Stream player will always load some metadata to initialize the player. The amount of data loaded in this case is negligable.
*/
preload?: Preload;
/**
* Any valid CSS color value provided will be applied to certain elements of the player's UI.
* https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
*/
primaryColor?: string;
/**
* Automatically manages the aspect ratio of the iframe for you. Defaults to true. If you want to manually handle the styles yourself, set this to false.
*/
responsive?: boolean;
/**
* Either the video UID or the signed token for the video you’ve uploaded to Cloudflare Stream should be included here.
*/
src: string;
/**
* A timestamp that specifies the time when playback begins.
* If a plain number is used such as ?startTime=123, it will
* be interpreted as 123 seconds. More human readable timestamps
* can also be used, such as ?startTime=1h12m27s for 1 hour,
* 12 minutes, and 27 seconds.
*/
startTime?: string | number;
/**
* Ref for accessing the underlying stream element. Useful for providing imperative access to the player API:
* https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/using-the-player-api
*/
streamRef?: MutableRefObject<StreamPlayerApi | undefined>;
/**
* Title of the iframe that the player will load within.
*
* From the MDN docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#accessibility_concerns
*
* People navigating with assistive technology such as a screen reader can use the title attribute on an <iframe> to label its content. The title's value should concisely describe the embedded content.
* Without this title, they have to navigate into the <iframe> to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple <iframe>s and/or if embeds contain interactive content like video or audio.
*/
title?: string;
/**
* Sets volume from 0.0 (silent) to 1.0 (maximum value)
*/
volume?: number;
/**
* The width of the video’s display area, in CSS pixels.
*/
width?: string;
/**
* Sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.
*/
onAbort?: EventListener;
/**
* Sent when enough data is available that the media can be played, at least for a couple of frames.
*/
onCanPlay?: EventListener;
/**
* Sent when the entire media can be played without interruption, assuming the download rate remains at least at the current level. It will also be fired when playback is toggled between paused and playing. Note: Manually setting the currentTime will eventually fire a canplaythrough event in firefox. Other browsers might not fire this event.
*/
onCanPlayThrough?: EventListener;
/**
* The metadata has loaded or changed, indicating a change in duration of the media. This is sent, for example, when the media has loaded enough that the duration is known.
*/
onDurationChange?: EventListener;
/**
* Sent when playback completes.
*/
onEnded?: EventListener;
/**
* Sent when an error occurs. (e.g. the video has not finished encoding yet, or the video fails to load due to an invalid signed token)
*/
onError?: EventListener;
/**
* The first frame of the media has finished loading.
*/
onLoadedData?: EventListener;
/**
* The media’s metadata has finished loading; all attributes now contain as much useful information as they’re going to.
*/
onLoadedMetaData?: EventListener;
/**
* Sent when loading of the media begins.
*/
onLoadStart?: EventListener;
/**
* Sent when the playback state is changed to paused (paused property is true).
*/
onPause?: EventListener;
/**
* Sent when the playback state is no longer paused, as a result of the play method, or the autoplay attribute.
*/
onPlay?: EventListener;
/**
* Sent when the media has enough data to start playing, after the play event, but also when recovering from being stalled, when looping media restarts, and after seeked, if it was playing before seeking.
*/
onPlaying?: EventListener;
/**
* Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element’s buffered attribute.
*/
onProgress?: EventListener;
/**
* Sent when the playback speed changes.
*/
onRateChange?: EventListener;
/**
* Sent when the video's intrinsic dimensions (videoHeight & videoWidth) change.
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight
*/
onResize?: EventListener;
/**
* Sent when a seek operation completes.
*/
onSeeked?: EventListener;
/**
* Sent when a seek operation begins.
*/
onSeeking?: EventListener;
/**
* Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
*/
onStalled?: EventListener;
/**
* Sent when loading of the media is suspended; this may happen either because the download has completed or because it has been paused for any other reason.
*/
onSuspend?: EventListener;
/**
* The time indicated by the element’s currentTime attribute has changed.
*/
onTimeUpdate?: EventListener;
/**
* Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
*/
onVolumeChange?: EventListener;
/**
* Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).
*/
onWaiting?: EventListener;
/**
* Fires when ad-url attribute is present and the ad begins playback
*/
onStreamAdStart?: EventListener;
/**
* Fires when ad-url attribute is present and the ad finishes playback
*/
onStreamAdEnd?: EventListener;
/**
* Fires when ad-url attribute is present and the ad took too long to load.
*/
onStreamAdTimeout?: EventListener;
}