From ed9f9f5fb04437b8dcf164fd0ae9c29b90826096 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 11 Dec 2017 11:20:54 +0100 Subject: Fix changing video we are watching --- .../videos/+video-watch/video-watch.component.ts | 47 +++++++++++++--------- .../src/assets/player/peertube-videojs-plugin.ts | 6 +++ 2 files changed, 34 insertions(+), 19 deletions(-) diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index d4e3ec014..bec6932ae 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -69,6 +69,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) this.paramsSub = this.route.params.subscribe(routeParams => { + if (this.videoPlayerLoaded) { + this.player.pause() + } + let uuid = routeParams['uuid'] this.videoService.getVideo(uuid).subscribe( video => this.onVideoFetched(video), @@ -276,30 +280,35 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.router.navigate([ '/videos/list' ]) } - this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') - - const videojsOptions = { - controls: true, - autoplay: true, - plugins: { - peertube: { - videoFiles: this.video.files, - playerElement: this.playerElement, - autoplay: true, - peerTubeLink: false + // Player was already loaded + if (this.videoPlayerLoaded !== true) { + this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') + + const videojsOptions = { + controls: true, + autoplay: true, + plugins: { + peertube: { + videoFiles: this.video.files, + playerElement: this.playerElement, + autoplay: true, + peerTubeLink: false + } } } - } - this.videoPlayerLoaded = true + this.videoPlayerLoaded = true - const self = this - videojs(this.playerElement, videojsOptions, function () { - self.player = this - this.on('customError', (event, data) => { - self.handleError(data.err) + const self = this + videojs(this.playerElement, videojsOptions, function () { + self.player = this + this.on('customError', (event, data) => { + self.handleError(data.err) + }) }) - }) + } else { + (this.player as any).setVideoFiles(this.video.files) + } this.setVideoDescriptionHTML() diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 4ba37b7d9..4898c1efe 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -283,6 +283,12 @@ const peertubePlugin = function (options: PeertubePluginOptions) { } } + player.setVideoFiles = function (files: VideoFile[]) { + player.videoFiles = files + + player.updateVideoFile(undefined, () => player.play()) + } + player.ready(function () { const controlBar = player.controlBar -- cgit v1.2.3