-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.js
127 lines (104 loc) · 3.18 KB
/
index.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
119
120
121
122
123
124
125
126
127
const TimingObject = require('./timingobject').TimingObject
const mediaSync = require('./mediascape').mediaSync
class MediaSync {
constructor (options) {
options = options || {}
options.duration = options.duration || 100
this.medias = []
this.syncs = []
this.to = new TimingObject({
range: [0.0, options.duration],
position: 0.0
})
this.playFn = this.play.bind(this)
this.pauseFn = this.pause.bind(this)
this.seekingFn = this.seeking.bind(this)
this.volumechangeFn = this.volumechange.bind(this)
this.timeupdateFn = this.timeupdate.bind(this)
}
isSafari () {
return window.navigator.userAgent.match(/(iPad|iPhone|iPod|Safari)/i) !== null
}
add (media) {
media.addEventListener('play', this.playFn)
media.addEventListener('pause', this.pauseFn)
media.addEventListener('seeking', this.seekingFn)
media.addEventListener('volumechange', this.volumechangeFn)
media.addEventListener('timeupdate', this.timeupdateFn)
const sync = mediaSync(media, this.to)
if (this.isSafari()) {
sync.setOption('target', 0.8)
}
this.syncs.push(sync)
this.medias.push(media)
}
remove (media) {
media.removeEventListener('play', this.playFn)
media.removeEventListener('pause', this.pauseFn)
media.removeEventListener('seeking', this.seekingFn)
media.removeEventListener('volumechange', this.volumechangeFn)
const index = this.medias.findIndex(m => m === media)
if (index > -1) {
const sync = this.syncs[index]
sync.stop()
this.medias.splice(index, 1)
this.syncs.splice(index, 1)
}
}
seek (t) {
this.removeEventListener('seeking', this.seekingFn)
this.to.update({ position: t })
setTimeout(() => {
this.addEventListener('seeking', this.seekingFn)
}, 200)
}
seeking (e) {
this.seek(e.target.currentTime)
}
timeupdate (e) {
if (!e.target.seeking) return
this.seeking(e)
}
volumechange (e) {
this.removeEventListener('volumechange', this.volumechangeFn)
this.medias.map(m => {
if (m === e.target) return
m.muted = e.target.muted
m.volume = e.target.volume
})
setTimeout(() => {
this.addEventListener('volumechange', this.volumechangeFn)
}, 200)
}
set muted (val) {
this.medias.map(media => { media.muted = val })
}
addEventListener (type, listener) {
this.medias.map(m => { m.addEventListener(type, listener) })
}
removeEventListener (type, listener) {
this.medias.map(m => { m.removeEventListener(type, listener) })
}
play () {
this.removeEventListener('play', this.playFn)
this.removeEventListener('pause', this.pauseyFn)
this.to.update({ velocity: 1 })
setTimeout(() => {
this.addEventListener('play', this.playFn)
this.addEventListener('pause', this.pauseFn)
}, 200)
}
pause (e) {
if (e && e.target.seeking) return
this.removeEventListener('play', this.playFn)
this.removeEventListener('pause', this.pauseFn)
this.to.update({ velocity: 0 })
setTimeout(() => {
this.addEventListener('play', this.playFn)
this.addEventListener('pause', this.pauseFn)
}, 200)
}
}
module.exports = {
MediaSync
}