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
|
import './embed.scss'
import * as Channel from 'jschannel'
import { PeerTubeResolution } from '../player/definitions'
import { PeerTubeEmbed } from './embed'
/**
* Embed API exposes control of the embed player to the outside world via
* JSChannels and window.postMessage
*/
export class PeerTubeEmbedApi {
private channel: Channel.MessagingChannel
private isReady = false
private resolutions: PeerTubeResolution[] = null
constructor (private embed: PeerTubeEmbed) {
}
initialize () {
this.constructChannel()
this.setupStateTracking()
// We're ready!
this.notifyReady()
}
private get element () {
return this.embed.videoElement
}
private constructChannel () {
const channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.scope })
channel.bind('play', (txn, params) => this.embed.player.play())
channel.bind('pause', (txn, params) => this.embed.player.pause())
channel.bind('seek', (txn, time) => this.embed.player.currentTime(time))
channel.bind('setVolume', (txn, value) => this.embed.player.volume(value))
channel.bind('getVolume', (txn, value) => this.embed.player.volume())
channel.bind('isReady', (txn, params) => this.isReady)
channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
channel.bind('getResolutions', (txn, params) => this.resolutions)
channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
channel.bind('getPlaybackRates', (txn, params) => this.embed.playerOptions.playbackRates)
this.channel = channel
}
private setResolution (resolutionId: number) {
if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionForbidden()) return
// Auto resolution
if (resolutionId === -1) {
this.embed.player.webtorrent().enableAutoResolution()
return
}
this.embed.player.webtorrent().disableAutoResolution()
this.embed.player.webtorrent().updateResolution(resolutionId)
}
/**
* Let the host know that we're ready to go!
*/
private notifyReady () {
this.isReady = true
this.channel.notify({ method: 'ready', params: true })
}
private setupStateTracking () {
let currentState: 'playing' | 'paused' | 'unstarted' = 'unstarted'
setInterval(() => {
const position = this.element.currentTime
const volume = this.element.volume
this.channel.notify({
method: 'playbackStatusUpdate',
params: {
position,
volume,
playbackState: currentState
}
})
}, 500)
this.element.addEventListener('play', ev => {
currentState = 'playing'
this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
})
this.element.addEventListener('pause', ev => {
currentState = 'paused'
this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
})
// PeerTube specific capabilities
if (this.embed.player.webtorrent) {
this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions())
this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions())
}
}
private loadWebTorrentResolutions () {
const resolutions = []
const currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId()
for (const videoFile of this.embed.player.webtorrent().videoFiles) {
let label = videoFile.resolution.label
if (videoFile.fps && videoFile.fps >= 50) {
label += videoFile.fps
}
resolutions.push({
id: videoFile.resolution.id,
label,
src: videoFile.magnetUri,
active: videoFile.resolution.id === currentResolutionId
})
}
this.resolutions = resolutions
this.channel.notify({
method: 'resolutionUpdate',
params: this.resolutions
})
}
}
|
