3 import * as Channel from 'jschannel'
4 import { PeerTubeResolution, PeerTubeTextTrack } from '../player/definitions'
5 import { PeerTubeEmbed } from './embed'
8 * Embed API exposes control of the embed player to the outside world via
9 * JSChannels and window.postMessage
11 export class PeerTubeEmbedApi {
12 private channel: Channel.MessagingChannel
13 private isReady = false
14 private resolutions: PeerTubeResolution[] = []
16 constructor (private embed: PeerTubeEmbed) {
20 this.constructChannel()
21 this.setupStateTracking()
28 private get element () {
29 return this.embed.playerElement
32 private constructChannel () {
33 const channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.scope })
35 channel.bind('play', (txn, params) => this.embed.player.play())
36 channel.bind('pause', (txn, params) => this.embed.player.pause())
37 channel.bind('seek', (txn, time) => this.embed.player.currentTime(time))
39 channel.bind('setVolume', (txn, value) => this.embed.player.volume(value))
40 channel.bind('getVolume', (txn, value) => this.embed.player.volume())
42 channel.bind('isReady', (txn, params) => this.isReady)
44 channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
45 channel.bind('getResolutions', (txn, params) => this.resolutions)
47 channel.bind('getCaptions', (txn, params) => this.getCaptions())
48 channel.bind('setCaption', (txn, id) => this.setCaption(id)),
50 channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
51 channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
52 channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates)
54 channel.bind('playNextVideo', (txn, params) => this.embed.playNextVideo())
55 channel.bind('playPreviousVideo', (txn, params) => this.embed.playPreviousVideo())
56 channel.bind('getCurrentPosition', (txn, params) => this.embed.getCurrentPosition())
57 this.channel = channel
60 private setResolution (resolutionId: number) {
61 console.log('set resolution %d', resolutionId)
63 if (this.isWebtorrent()) {
64 if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return
67 if (resolutionId === -1) {
68 this.embed.player.webtorrent().enableAutoResolution()
72 this.embed.player.webtorrent().disableAutoResolution()
73 this.embed.player.webtorrent().updateResolution(resolutionId)
78 this.embed.player.p2pMediaLoader().getHLSJS().nextLevel = resolutionId
81 private getCaptions (): PeerTubeTextTrack[] {
82 return this.embed.player.textTracks().tracks_.map(t => {
92 private setCaption (id: string) {
93 const tracks = this.embed.player.textTracks().tracks_
95 for (const track of tracks) {
96 if (track.id === id) track.mode = 'showing'
97 else track.mode = 'disabled'
102 * Let the host know that we're ready to go!
104 private notifyReady () {
106 this.channel.notify({ method: 'ready', params: true })
109 private setupStateTracking () {
110 let currentState: 'playing' | 'paused' | 'unstarted' | 'ended' = 'unstarted'
113 const position = this.element.currentTime
114 const volume = this.element.volume
116 this.channel.notify({
117 method: 'playbackStatusUpdate',
121 duration: this.embed.player.duration(),
122 playbackState: currentState
127 this.element.addEventListener('play', ev => {
128 currentState = 'playing'
129 this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
132 this.element.addEventListener('pause', ev => {
133 currentState = 'paused'
134 this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
137 this.element.addEventListener('ended', ev => {
138 currentState = 'ended'
139 this.channel.notify({ method: 'playbackStatusChange', params: 'ended' })
142 // PeerTube specific capabilities
144 if (this.isWebtorrent()) {
145 this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions())
146 this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions())
148 this.embed.player.p2pMediaLoader().on('resolutionChange', () => this.loadP2PMediaLoaderResolutions())
151 this.embed.player.on('volumechange', () => {
152 this.channel.notify({
153 method: 'volumeChange',
154 params: this.embed.player.volume()
159 private loadWebTorrentResolutions () {
160 this.resolutions = []
162 const currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId()
164 for (const videoFile of this.embed.player.webtorrent().videoFiles) {
165 let label = videoFile.resolution.label
166 if (videoFile.fps && videoFile.fps >= 50) {
167 label += videoFile.fps
170 this.resolutions.push({
171 id: videoFile.resolution.id,
173 src: videoFile.magnetUri,
174 active: videoFile.resolution.id === currentResolutionId,
175 height: videoFile.resolution.id
179 this.channel.notify({
180 method: 'resolutionUpdate',
181 params: this.resolutions
185 private loadP2PMediaLoaderResolutions () {
186 this.resolutions = []
188 const qualityLevels = this.embed.player.qualityLevels()
189 const currentResolutionId = this.embed.player.qualityLevels().selectedIndex
191 for (let i = 0; i < qualityLevels.length; i++) {
192 const level = qualityLevels[i]
194 this.resolutions.push({
196 label: level.height + 'p',
197 active: level.id === currentResolutionId,
203 this.channel.notify({
204 method: 'resolutionUpdate',
205 params: this.resolutions
209 private isWebtorrent () {
210 return this.embed.player.webtorrent