-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Vimeo.js
118 lines (113 loc) · 2.83 KB
/
Vimeo.js
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
import React, { Component } from 'react'
import { callPlayer, getSDK } from '../utils'
import createSinglePlayer from '../singlePlayer'
const SDK_URL = 'https://player.vimeo.com/api/player.js'
const SDK_GLOBAL = 'Vimeo'
const MATCH_URL = /vimeo\.com\/.+/
const MATCH_FILE_URL = /vimeo\.com\/external\/.+\.mp4/
export class Vimeo extends Component {
static displayName = 'Vimeo'
static canPlay = url => {
if (MATCH_FILE_URL.test(url)) {
return false
}
return MATCH_URL.test(url)
}
callPlayer = callPlayer
duration = null
currentTime = null
secondsLoaded = null
load (url) {
this.duration = null
getSDK(SDK_URL, SDK_GLOBAL).then(Vimeo => {
if (!this.container) return
this.player = new Vimeo.Player(this.container, {
...this.props.config.vimeo.playerOptions,
url,
autoplay: this.props.playing,
muted: this.props.muted,
loop: this.props.loop
})
this.player.ready().then(() => {
const iframe = this.container.querySelector('iframe')
iframe.style.width = '100%'
iframe.style.height = '100%'
}).catch(this.props.onError)
this.player.on('loaded', () => {
this.props.onReady()
this.refreshDuration()
})
this.player.on('play', () => {
this.props.onPlay()
this.refreshDuration()
})
this.player.on('pause', this.props.onPause)
this.player.on('seeked', e => this.props.onSeek(e.seconds))
this.player.on('ended', this.props.onEnded)
this.player.on('error', this.props.onError)
this.player.on('timeupdate', ({ seconds }) => {
this.currentTime = seconds
})
this.player.on('progress', ({ seconds }) => {
this.secondsLoaded = seconds
})
}, this.props.onError)
}
refreshDuration () {
this.player.getDuration().then(duration => {
this.duration = duration
})
}
play () {
this.callPlayer('play')
}
pause () {
this.callPlayer('pause')
}
stop () {
this.callPlayer('unload')
}
seekTo (seconds) {
this.callPlayer('setCurrentTime', seconds)
}
setVolume (fraction) {
this.callPlayer('setVolume', fraction)
}
mute = () => {
this.setVolume(0)
}
unmute = () => {
if (this.props.volume !== null) {
this.setVolume(this.props.volume)
}
}
getDuration () {
return this.duration
}
getCurrentTime () {
return this.currentTime
}
getSecondsLoaded () {
return this.secondsLoaded
}
ref = container => {
this.container = container
}
render () {
const style = {
width: '100%',
height: '100%',
overflow: 'hidden',
backgroundColor: 'black',
...this.props.style
}
return (
<div
key={this.props.url}
ref={this.ref}
style={style}
/>
)
}
}
export default createSinglePlayer(Vimeo)