Handle playlist methods in embed api

pull/3047/head
Chocobozzz 2020-08-05 14:16:39 +02:00 committed by Chocobozzz
parent 2a71d286ce
commit 9054a8b6e5
7 changed files with 90 additions and 31 deletions

View File

@ -170,6 +170,27 @@ export class PeerTubePlayer {
await this.sendMessage('setPlaybackRate', rate)
}
/**
* Play next video in playlist
*/
async playNextVideo () {
await this.sendMessage('playNextVideo')
}
/**
* Play previous video in playlist
*/
async playPreviousVideo () {
await this.sendMessage('playPreviousVideo')
}
/**
* Get video position currently played (starts from 1)
*/
async getCurrentPosition () {
return this.sendMessage<void, number>('getCurrentPosition')
}
private constructChannel () {
this.channel = Channel.build({
window: this.embedElement.contentWindow,

View File

@ -50,6 +50,10 @@ export class PeerTubeEmbedApi {
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.player.options_.playbackRates)
channel.bind('playNextVideo', (txn, params) => this.embed.playNextVideo())
channel.bind('playPreviousVideo', (txn, params) => this.embed.playPreviousVideo())
channel.bind('getCurrentPosition', (txn, params) => this.embed.getCurrentPosition())
this.channel = channel
}

View File

@ -211,6 +211,36 @@ export class PeerTubeEmbed {
return params.has(name) ? params.get(name) : defaultValue
}
async playNextVideo () {
const next = this.getNextPlaylistElement()
if (!next) {
console.log('Next element not found in playlist.')
return
}
this.currentPlaylistElement = next
return this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid)
}
async playPreviousVideo () {
const previous = this.getPreviousPlaylistElement()
if (!previous) {
console.log('Previous element not found in playlist.')
return
}
this.currentPlaylistElement = previous
await this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid)
}
getCurrentPosition () {
if (!this.currentPlaylistElement) return -1
return this.currentPlaylistElement.position
}
async init () {
try {
this.userTokens = Tokens.load()
@ -342,30 +372,6 @@ export class PeerTubeEmbed {
})
}
private async playNextVideo () {
const next = this.getNextPlaylistElement()
if (!next) {
console.log('Next element not found in playlist.')
return
}
this.currentPlaylistElement = next
return this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid)
}
private async playPreviousVideo () {
const previous = this.getPreviousPlaylistElement()
if (!previous) {
console.log('Previous element not found in playlist.')
return
}
this.currentPlaylistElement = previous
return this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid)
}
private async loadVideoAndBuildPlayer (uuid: string) {
const res = await this.loadVideo(uuid)
if (res === undefined) return

View File

@ -27,6 +27,8 @@
<button onclick="player.seek(parseInt(prompt('Enter position to seek to (in seconds)')))">Seek</button>
<button onclick="player.setVolume(0)">Mute</button>
<button onclick="player.setVolume(1)">Unmute</button>
<button onclick="player.playNextVideo()">Next video</button>
<button onclick="player.playPreviousVideo()">Previous video</button>
</div>
<br/>
@ -52,6 +54,11 @@
<legend>Volume</legend>
<div id="volume"></div>
</fieldset>
<fieldset>
<legend>Playlist position</legend>
<div id="playlist-position"></div>
</fieldset>
</div>
</div>

View File

@ -1,14 +1,19 @@
import './test-embed.scss'
import { PeerTubeResolution, PlayerEventType } from '../player/definitions'
import { PeerTubePlayer } from '../player/player'
import { PeerTubeResolution, PlayerEventType, PeerTubeTextTrack } from '../player/definitions'
window.addEventListener('load', async () => {
const urlParts = window.location.href.split('/')
const lastPart = urlParts[ urlParts.length - 1 ]
const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ]
const isPlaylist = window.location.pathname.startsWith('/video-playlists/')
const elementId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ]
const iframe = document.createElement('iframe')
iframe.src = `/videos/embed/${videoId}?api=1`
iframe.src = isPlaylist
? `/videos/embed/${elementId}?api=1`
: `/video-playlists/embed/${elementId}?api=1`
const mainElement = document.querySelector('#host')
mainElement.appendChild(iframe)
@ -32,6 +37,9 @@ window.addEventListener('load', async () => {
monitoredEvents.forEach(e => {
player.addEventListener(e as PlayerEventType, (param) => console.log(`PLAYER: event '${e}' received`, param))
console.log(`PLAYER: now listening for event '${e}'`)
player.getCurrentPosition()
.then(position => document.getElementById('playlist-position').innerHTML = position + '')
})
let playbackRates: number[] = []

View File

@ -36,10 +36,11 @@ const embedMiddlewares = [
clientsRouter.use('/videos/embed', ...embedMiddlewares)
clientsRouter.use('/video-playlists/embed', ...embedMiddlewares)
clientsRouter.use(
'/videos/test-embed',
(req: express.Request, res: express.Response) => res.sendFile(testEmbedPath)
)
const testEmbedController = (req: express.Request, res: express.Response) => res.sendFile(testEmbedPath)
clientsRouter.use('/videos/test-embed', testEmbedController)
clientsRouter.use('/video-playlists/test-embed', testEmbedController)
// Static HTML/CSS/JS client files
const staticClientFiles = [

View File

@ -115,6 +115,18 @@ Update current caption using the caption id.
Get video captions.
## `playNextVideo(): Promise<void>`
Play next video in playlist.
## `playPreviousVideo(): Promise<void>`
Play previous video in playlist.
## `getCurrentPosition(): Promise<void>`
Get current position in playlist (starts from 1).
# Events
You can subscribe to events by using `addEventListener()`. See above for details.