forked from u-wave/react-vimeo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.d.ts
316 lines (284 loc) · 7.02 KB
/
index.d.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
import * as React from 'react'
import { Player, Error } from '@vimeo/player'
export type PlayEvent = {
/**
* The length of the video in seconds.
*/
duration: number
/**
* The amount of the video, in seconds, that has played.
*/
seconds: number
/**
* The amount of the video that has played in comparison to the length of the video;
* multiply by 100 to obtain the percentage.
*/
percent: number
}
export type PauseEvent = {
/**
* The length of the video in seconds.
*/
duration: number
/**
* The amount of the video, in seconds, that has played to the pause position.
*/
seconds: number
/**
* The amount of the video that has played to the pause position in comparison to the length of the video; multiply by 100 to obtain the percentage.
*/
percent: number
}
export type EndEvent = PauseEvent
export type TimeUpdateEvent = {
/**
* The length of the video in seconds.
*/
duration: number
/**
* The amount of the video, in seconds, that has played from the current playback position.
*/
seconds: number
/**
* The amount of the video that has played from the current playback position in comparison to the length of the video; multiply by 100 to obtain the percentage.
*/
percent: number
}
export type ProgressEvent = {
/**
* The length of the video in seconds.
*/
duration: number
/**
* The amount of the video, in seconds, that has buffered.
*/
seconds: number
/**
* The amount of the video that has buffered in comparison to the length of the video;
* multiply by 100 to obtain the percentage.
*/
percent: number
}
export type SeekedEvent = {
/**
* The length of the video in seconds.
*/
duration: number
/**
* The amount of the video, in seconds, that has played from the new seek position.
*/
seconds: number
/**
* The amount of the video that has played from the new seek position in comparison to the length of the video; multiply by 100 to obtain the percentage.
*/
percent: number
}
export type TextTrackEvent = {
kind: 'captions' | 'subtitles'
label: string
language: string
}
export type Cue = {
html: string
text: string
}
export type CueChangeEvent = {
cues: Cue[]
kind: 'captions' | 'subtitles'
label: string
language: string
}
export type CuePointEvent = {
/**
* The location of the cue point in seconds.
*/
time: number
/**
* The ID of the cue point.
*/
id: string
/**
* The custom data from the `addCuePoint()` call, or an empty object.
*/
data: object
}
export type VolumeEvent = {
/**
* The new volume level.
*/
volume: number
}
export type PlaybackRateEvent = {
/**
* The new playback rate.
*/
playbackRate: number
}
export type LoadEvent = {
/**
* The ID of the new video.
*/
id: number
}
export interface VimeoProps {
/**
* A Vimeo video ID or URL.
*/
video: number | string
/**
* DOM ID for the player element.
*/
id?: string
/**
* CSS className for the player element.
*/
className?: string
/**
* Inline style for container element.
*/
style?: React.CSSProperties
/**
* Width of the player element.
*/
width?: number | string
/**
* Height of the player element.
*/
height?: number | string
/**
* Pause the video.
*/
paused?: boolean
/**
* The playback volume as a number between 0 and 1.
*/
volume?: number
/**
* The time in seconds at which to start playing the video.
*/
start?: number
/**
* Pause this video automatically when another one plays.
*/
autopause?: boolean
/**
* Automatically start playback of the video. Note that this won’t work on
* some devices.
*/
autoplay?: boolean
/**
* Show the byline on the video.
*/
showByline?: boolean
/**
* Specify the color of the video controls. Colors may be overridden by the
* embed settings of the video. _(Ex: "ef2f9f")_
*/
color?: string
/**
* Hide all elements in the player (play bar, sharing buttons, etc).
*/
controls?: boolean
/**
* Play the video again when it reaches the end.
*/
loop?: boolean
/**
* Show the portrait on the video.
*/
showPortrait?: boolean
/**
* Show the title on the video.
*/
showTitle?: boolean
/**
* Starts in a muted state to help with autoplay
*/
muted?: boolean
/**
* Starts in a background state with no controls to help with autoplay
*/
background?: boolean
/**
* Enable responsive mode and resize according to parent element (experimental)
*/
responsive?: boolean
/**
* Enable playback rate controls (requires Vimeo PRO / Business account)
*/
speed?: boolean
/**
* Blocks the player from tracking any session data, including all cookies and analytics
*/
dnt?: boolean
/**
* Sent when the Vimeo player API has loaded.
* Receives the Vimeo player object in the first parameter.
*/
onReady?: (player: Player) => void
/**
* Sent when the player triggers an error.
*/
onError?: (error: Error) => void
/**
* Triggered when the video plays.
*/
onPlay?: (event: PlayEvent) => void
/**
* Triggered when the video pauses.
*/
onPause?: (event: PauseEvent) => void
/**
* Triggered any time the video playback reaches the end.
* Note: when `loop` is turned on, the ended event will not fire.
*/
onEnd?: (event: EndEvent) => void
/**
* Triggered as the `currentTime` of the video updates. It generally fires
* every 250ms, but it may vary depending on the browser.
*/
onTimeUpdate?: (event: TimeUpdateEvent) => void
/**
* Triggered as the video is loaded. Reports back the amount of the video
* that has been buffered.
*/
onProgress?: (event: ProgressEvent) => void
/**
* Triggered when the player seeks to a specific time. An `onTimeUpdate`
* event will also be fired at the same time.
*/
onSeeked?: (event: SeekedEvent) => void
/**
* Triggered when the active text track (captions/subtitles) changes. The
* values will be `null` if text tracks are turned off.
*/
onTextTrackChange?: (event: TextTrackEvent) => void
/**
* Triggered when the active cue for the current text track changes. It also
* fires when the active text track changes. There may be multiple cues
* active.
*/
onCueChange?: (event: CueChangeEvent) => void
/**
* Triggered when the current time hits a registered cue point.
*/
onCuePoint?: (event: CuePointEvent) => void
/**
* Triggered when the volume in the player changes. Some devices do not
* support setting the volume of the video independently from the system
* volume, so this event will never fire on those devices.
*/
onVolumeChange?: (event: VolumeEvent) => void
/**
* Triggered when the playback rate in the player changes.
*/
onPlaybackRateChange?: (event: PlaybackRateEvent) => void
/**
* Triggered when a new video is loaded in the player.
*/
onLoaded?: (event: LoadEvent) => void
}
/**
* Vimeo player component for React.
*/
export default class Vimeo extends React.Component<VimeoProps> {}