From 9054a8b6e522dd8d46260dca85e9de94a2d806cf Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 5 Aug 2020 14:16:39 +0200 Subject: [PATCH] Handle playlist methods in embed api --- client/src/standalone/player/player.ts | 21 ++++++++ client/src/standalone/videos/embed-api.ts | 4 ++ client/src/standalone/videos/embed.ts | 54 +++++++++++--------- client/src/standalone/videos/test-embed.html | 7 +++ client/src/standalone/videos/test-embed.ts | 14 +++-- server/controllers/client.ts | 9 ++-- support/doc/api/embeds.md | 12 +++++ 7 files changed, 90 insertions(+), 31 deletions(-) diff --git a/client/src/standalone/player/player.ts b/client/src/standalone/player/player.ts index 119f5e035..9776fda12 100644 --- a/client/src/standalone/player/player.ts +++ b/client/src/standalone/player/player.ts @@ -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('getCurrentPosition') + } + private constructChannel () { this.channel = Channel.build({ window: this.embedElement.contentWindow, diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts index efc23a1fc..94e39ec29 100644 --- a/client/src/standalone/videos/embed-api.ts +++ b/client/src/standalone/videos/embed-api.ts @@ -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 } diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 7372c80c6..a7fb087b1 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -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 diff --git a/client/src/standalone/videos/test-embed.html b/client/src/standalone/videos/test-embed.html index 9e1d6fc61..2b4918681 100644 --- a/client/src/standalone/videos/test-embed.html +++ b/client/src/standalone/videos/test-embed.html @@ -27,6 +27,8 @@ + +
@@ -52,6 +54,11 @@ Volume
+ +
+ Playlist position +
+
diff --git a/client/src/standalone/videos/test-embed.ts b/client/src/standalone/videos/test-embed.ts index 24cb62230..5f8e97562 100644 --- a/client/src/standalone/videos/test-embed.ts +++ b/client/src/standalone/videos/test-embed.ts @@ -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[] = [] diff --git a/server/controllers/client.ts b/server/controllers/client.ts index b97c935a5..39a198b59 100644 --- a/server/controllers/client.ts +++ b/server/controllers/client.ts @@ -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 = [ diff --git a/support/doc/api/embeds.md b/support/doc/api/embeds.md index e3df35efc..d64615764 100644 --- a/support/doc/api/embeds.md +++ b/support/doc/api/embeds.md @@ -115,6 +115,18 @@ Update current caption using the caption id. Get video captions. +## `playNextVideo(): Promise` + +Play next video in playlist. + +## `playPreviousVideo(): Promise` + +Play previous video in playlist. + +## `getCurrentPosition(): Promise` + +Get current position in playlist (starts from 1). + # Events You can subscribe to events by using `addEventListener()`. See above for details.