2019-06-11 15:59:10 +02:00
|
|
|
import './embed.scss'
|
|
|
|
import * as Channel from 'jschannel'
|
2022-07-15 15:30:14 +02:00
|
|
|
import { logger } from '../../root-helpers'
|
2020-05-06 11:54:33 +02:00
|
|
|
import { PeerTubeResolution, PeerTubeTextTrack } from '../player/definitions'
|
2019-06-11 15:59:10 +02:00
|
|
|
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
|
2019-12-17 14:20:43 +01:00
|
|
|
private resolutions: PeerTubeResolution[] = []
|
2019-06-11 15:59:10 +02:00
|
|
|
|
2021-08-17 14:42:53 +02:00
|
|
|
constructor (private readonly embed: PeerTubeEmbed) {
|
|
|
|
|
2019-06-11 15:59:10 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
initialize () {
|
|
|
|
this.constructChannel()
|
|
|
|
this.setupStateTracking()
|
|
|
|
|
|
|
|
// We're ready!
|
|
|
|
|
|
|
|
this.notifyReady()
|
|
|
|
}
|
|
|
|
|
|
|
|
private get element () {
|
2022-05-31 08:59:30 +02:00
|
|
|
return this.embed.getPlayerElement()
|
2019-06-11 15:59:10 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
private constructChannel () {
|
2022-05-31 08:59:30 +02:00
|
|
|
const channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.getScope() })
|
2019-06-11 15:59:10 +02:00
|
|
|
|
|
|
|
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))
|
2019-12-17 14:20:43 +01:00
|
|
|
|
2019-06-11 15:59:10 +02:00
|
|
|
channel.bind('setVolume', (txn, value) => this.embed.player.volume(value))
|
|
|
|
channel.bind('getVolume', (txn, value) => this.embed.player.volume())
|
2019-12-17 14:20:43 +01:00
|
|
|
|
2019-06-11 15:59:10 +02:00
|
|
|
channel.bind('isReady', (txn, params) => this.isReady)
|
2019-12-17 14:20:43 +01:00
|
|
|
|
2019-06-11 15:59:10 +02:00
|
|
|
channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
|
|
|
|
channel.bind('getResolutions', (txn, params) => this.resolutions)
|
2019-12-17 14:20:43 +01:00
|
|
|
|
2020-05-06 11:54:33 +02:00
|
|
|
channel.bind('getCaptions', (txn, params) => this.getCaptions())
|
2021-08-17 14:42:53 +02:00
|
|
|
channel.bind('setCaption', (txn, id) => this.setCaption(id))
|
2020-05-06 11:54:33 +02:00
|
|
|
|
2019-06-11 15:59:10 +02:00
|
|
|
channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
|
|
|
|
channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
|
2019-12-17 14:20:43 +01:00
|
|
|
channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates)
|
2020-08-05 14:16:39 +02:00
|
|
|
|
2022-05-31 08:59:30 +02:00
|
|
|
channel.bind('playNextVideo', (txn, params) => this.embed.playNextPlaylistVideo())
|
|
|
|
channel.bind('playPreviousVideo', (txn, params) => this.embed.playPreviousPlaylistVideo())
|
|
|
|
channel.bind('getCurrentPosition', (txn, params) => this.embed.getCurrentPlaylistPosition())
|
2019-06-11 15:59:10 +02:00
|
|
|
this.channel = channel
|
|
|
|
}
|
|
|
|
|
|
|
|
private setResolution (resolutionId: number) {
|
2022-07-15 15:30:14 +02:00
|
|
|
logger.info(`Set resolution ${resolutionId}`)
|
2019-12-17 14:20:43 +01:00
|
|
|
|
|
|
|
if (this.isWebtorrent()) {
|
|
|
|
if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return
|
|
|
|
|
2021-09-10 15:43:15 +02:00
|
|
|
this.embed.player.webtorrent().changeQuality(resolutionId)
|
2019-06-11 15:59:10 +02:00
|
|
|
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2021-09-10 15:43:15 +02:00
|
|
|
this.embed.player.p2pMediaLoader().getHLSJS().currentLevel = resolutionId
|
2019-06-11 15:59:10 +02:00
|
|
|
}
|
|
|
|
|
2020-05-06 11:54:33 +02:00
|
|
|
private getCaptions (): PeerTubeTextTrack[] {
|
2021-08-17 14:42:53 +02:00
|
|
|
return this.embed.player.textTracks().tracks_.map(t => ({
|
|
|
|
id: t.id,
|
|
|
|
src: t.src,
|
|
|
|
label: t.label,
|
|
|
|
mode: t.mode
|
|
|
|
}))
|
2020-05-06 11:54:33 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
private setCaption (id: string) {
|
|
|
|
const tracks = this.embed.player.textTracks().tracks_
|
|
|
|
|
|
|
|
for (const track of tracks) {
|
|
|
|
if (track.id === id) track.mode = 'showing'
|
|
|
|
else track.mode = 'disabled'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-06-11 15:59:10 +02:00
|
|
|
/**
|
|
|
|
* Let the host know that we're ready to go!
|
|
|
|
*/
|
|
|
|
private notifyReady () {
|
|
|
|
this.isReady = true
|
|
|
|
this.channel.notify({ method: 'ready', params: true })
|
|
|
|
}
|
|
|
|
|
|
|
|
private setupStateTracking () {
|
2020-04-08 14:39:31 +02:00
|
|
|
let currentState: 'playing' | 'paused' | 'unstarted' | 'ended' = 'unstarted'
|
2019-06-11 15:59:10 +02:00
|
|
|
|
|
|
|
setInterval(() => {
|
|
|
|
const position = this.element.currentTime
|
|
|
|
const volume = this.element.volume
|
|
|
|
|
|
|
|
this.channel.notify({
|
|
|
|
method: 'playbackStatusUpdate',
|
|
|
|
params: {
|
|
|
|
position,
|
|
|
|
volume,
|
2020-04-08 14:51:44 +02:00
|
|
|
duration: this.embed.player.duration(),
|
2019-06-11 15:59:10 +02:00
|
|
|
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' })
|
|
|
|
})
|
|
|
|
|
2020-04-08 14:39:31 +02:00
|
|
|
this.element.addEventListener('ended', ev => {
|
|
|
|
currentState = 'ended'
|
|
|
|
this.channel.notify({ method: 'playbackStatusChange', params: 'ended' })
|
|
|
|
})
|
|
|
|
|
2019-06-11 15:59:10 +02:00
|
|
|
// PeerTube specific capabilities
|
2021-09-06 16:08:59 +02:00
|
|
|
this.embed.player.peertubeResolutions().on('resolutionsAdded', () => this.loadResolutions())
|
|
|
|
this.embed.player.peertubeResolutions().on('resolutionChanged', () => this.loadResolutions())
|
2019-12-17 14:20:43 +01:00
|
|
|
|
2021-09-10 15:43:15 +02:00
|
|
|
this.loadResolutions()
|
|
|
|
|
2019-12-17 14:20:43 +01:00
|
|
|
this.embed.player.on('volumechange', () => {
|
|
|
|
this.channel.notify({
|
|
|
|
method: 'volumeChange',
|
|
|
|
params: this.embed.player.volume()
|
|
|
|
})
|
|
|
|
})
|
2019-06-11 15:59:10 +02:00
|
|
|
}
|
|
|
|
|
2021-09-06 16:08:59 +02:00
|
|
|
private loadResolutions () {
|
|
|
|
this.resolutions = this.embed.player.peertubeResolutions().getResolutions()
|
|
|
|
.map(r => ({
|
|
|
|
id: r.id,
|
2021-09-10 15:43:15 +02:00
|
|
|
label: r.label,
|
2021-09-06 16:08:59 +02:00
|
|
|
active: r.selected,
|
|
|
|
width: r.width,
|
|
|
|
height: r.height
|
|
|
|
}))
|
2019-12-17 14:20:43 +01:00
|
|
|
|
|
|
|
this.channel.notify({
|
|
|
|
method: 'resolutionUpdate',
|
|
|
|
params: this.resolutions
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
private isWebtorrent () {
|
2021-06-08 10:17:47 +02:00
|
|
|
return !!this.embed.player.webtorrent
|
2019-12-17 14:20:43 +01:00
|
|
|
}
|
2019-06-11 15:59:10 +02:00
|
|
|
}
|