From 6377a9f2b0f762be9af61f46b4f0a9efd0c4b7c2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 17 Dec 2019 14:20:43 +0100 Subject: Fix test embed page --- client/src/standalone/player/definitions.ts | 8 ++- client/src/standalone/player/player.ts | 5 +- client/src/standalone/videos/embed-api.ts | 76 +++++++++++++++++++++++----- client/src/standalone/videos/embed.ts | 1 - client/src/standalone/videos/test-embed.html | 7 +++ client/src/standalone/videos/test-embed.ts | 9 ++++ 6 files changed, 88 insertions(+), 18 deletions(-) (limited to 'client/src/standalone') diff --git a/client/src/standalone/player/definitions.ts b/client/src/standalone/player/definitions.ts index afd10541b..9fe903260 100644 --- a/client/src/standalone/player/definitions.ts +++ b/client/src/standalone/player/definitions.ts @@ -4,11 +4,15 @@ export type PlayerEventType = 'pause' | 'play' | 'playbackStatusUpdate' | 'playbackStatusChange' | - 'resolutionUpdate' + 'resolutionUpdate' | + 'volumeChange' export interface PeerTubeResolution { id: any label: string - src: string active: boolean + height: number + + src?: string + width?: number } diff --git a/client/src/standalone/player/player.ts b/client/src/standalone/player/player.ts index 91a5e73f3..f33539134 100644 --- a/client/src/standalone/player/player.ts +++ b/client/src/standalone/player/player.ts @@ -7,7 +7,8 @@ const PASSTHROUGH_EVENTS = [ 'play', 'playbackStatusUpdate', 'playbackStatusChange', - 'resolutionUpdate' + 'resolutionUpdate', + 'volumeChange' ] /** @@ -100,7 +101,7 @@ export class PeerTubePlayer { * @param value A number from 0 to 1 */ async getVolume (): Promise { - return this.sendMessage('setVolume') + return this.sendMessage('getVolume') } /** diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts index 259113215..61e5d0b9a 100644 --- a/client/src/standalone/videos/embed-api.ts +++ b/client/src/standalone/videos/embed-api.ts @@ -11,7 +11,7 @@ import { PeerTubeEmbed } from './embed' export class PeerTubeEmbedApi { private channel: Channel.MessagingChannel private isReady = false - private resolutions: PeerTubeResolution[] = null + private resolutions: PeerTubeResolution[] = [] constructor (private embed: PeerTubeEmbed) { } @@ -35,28 +35,40 @@ export class PeerTubeEmbedApi { 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) + channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates) this.channel = channel } private setResolution (resolutionId: number) { - if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionForbidden()) return + console.log('set resolution %d', resolutionId) + + if (this.isWebtorrent()) { + if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return + + // Auto resolution + if (resolutionId === -1) { + this.embed.player.webtorrent().enableAutoResolution() + return + } + + this.embed.player.webtorrent().disableAutoResolution() + this.embed.player.webtorrent().updateResolution(resolutionId) - // Auto resolution - if (resolutionId === -1) { - this.embed.player.webtorrent().enableAutoResolution() return } - this.embed.player.webtorrent().disableAutoResolution() - this.embed.player.webtorrent().updateResolution(resolutionId) + this.embed.player.p2pMediaLoader().getHLSJS().nextLevel = resolutionId } /** @@ -96,14 +108,24 @@ export class PeerTubeEmbedApi { // PeerTube specific capabilities - if (this.embed.player.webtorrent) { + if (this.isWebtorrent()) { this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions()) this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions()) + } else { + this.embed.player.p2pMediaLoader().on('resolutionChange', () => this.loadP2PMediaLoaderResolutions()) } + + this.embed.player.on('volumechange', () => { + this.channel.notify({ + method: 'volumeChange', + params: this.embed.player.volume() + }) + }) } private loadWebTorrentResolutions () { - const resolutions = [] + this.resolutions = [] + const currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId() for (const videoFile of this.embed.player.webtorrent().videoFiles) { @@ -112,18 +134,46 @@ export class PeerTubeEmbedApi { label += videoFile.fps } - resolutions.push({ + this.resolutions.push({ id: videoFile.resolution.id, label, src: videoFile.magnetUri, - active: videoFile.resolution.id === currentResolutionId + active: videoFile.resolution.id === currentResolutionId, + height: videoFile.resolution.id }) } - this.resolutions = resolutions this.channel.notify({ method: 'resolutionUpdate', params: this.resolutions }) } + + private loadP2PMediaLoaderResolutions () { + this.resolutions = [] + + const qualityLevels = this.embed.player.qualityLevels() + const currentResolutionId = this.embed.player.qualityLevels().selectedIndex + + for (let i = 0; i < qualityLevels.length; i++) { + const level = qualityLevels[i] + + this.resolutions.push({ + id: level.id, + label: level.height + 'p', + active: level.id === currentResolutionId, + width: level.width, + height: level.height + }) + } + + this.channel.notify({ + method: 'resolutionUpdate', + params: this.resolutions + }) + } + + private isWebtorrent () { + return this.embed.player.webtorrent + } } diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index f33dd8869..c91ae08b9 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -23,7 +23,6 @@ import { TranslationsManager } from '../../assets/player/translations-manager' export class PeerTubeEmbed { videoElement: HTMLVideoElement player: any - playerOptions: any api: PeerTubeEmbedApi = null autoplay: boolean controls: boolean diff --git a/client/src/standalone/videos/test-embed.html b/client/src/standalone/videos/test-embed.html index a60ba2899..20cdbdc5f 100644 --- a/client/src/standalone/videos/test-embed.html +++ b/client/src/standalone/videos/test-embed.html @@ -25,6 +25,8 @@ + +
@@ -39,6 +41,11 @@ Rates:
+ +
+ Volume +
+
diff --git a/client/src/standalone/videos/test-embed.ts b/client/src/standalone/videos/test-embed.ts index 8e83d92a9..e5e6365dc 100644 --- a/client/src/standalone/videos/test-embed.ts +++ b/client/src/standalone/videos/test-embed.ts @@ -9,6 +9,7 @@ window.addEventListener('load', async () => { const iframe = document.createElement('iframe') iframe.src = `/videos/embed/${videoId}?autoplay=1&controls=0&api=1` + const mainElement = document.querySelector('#host') mainElement.appendChild(iframe) @@ -93,4 +94,12 @@ window.addEventListener('load', async () => { resolutions => updateResolutions(resolutions)) player.addEventListener('resolutionUpdate', resolutions => updateResolutions(resolutions)) + + const updateVolume = (volume: number) => { + const volumeEl = document.getElementById('volume') + volumeEl.innerText = (volume * 100) + '%' + } + + player.getVolume().then(volume => updateVolume(volume)) + player.addEventListener('volumeChange', volume => updateVolume(volume)) }) -- cgit v1.2.3