diff options
Diffstat (limited to 'client/src/app/videos/+video-watch/video-watch.component.ts')
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.ts | 57 |
1 files changed, 31 insertions, 26 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 0f7c76d0b..9563394dc 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts | |||
@@ -56,6 +56,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
56 | 56 | ||
57 | private otherVideos: Video[] = [] | 57 | private otherVideos: Video[] = [] |
58 | private paramsSub: Subscription | 58 | private paramsSub: Subscription |
59 | private videojsInstance: videojs.Player | ||
59 | 60 | ||
60 | constructor ( | 61 | constructor ( |
61 | private elementRef: ElementRef, | 62 | private elementRef: ElementRef, |
@@ -333,35 +334,39 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
333 | if (res === false) return this.redirectService.redirectToHomepage() | 334 | if (res === false) return this.redirectService.redirectToHomepage() |
334 | } | 335 | } |
335 | 336 | ||
336 | // Player was already loaded | 337 | // Player was already loaded, remove old videojs |
337 | if (this.videoPlayerLoaded !== true) { | 338 | if (this.videojsInstance) { |
338 | this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') | 339 | this.videojsInstance.dispose() |
339 | 340 | this.videojsInstance = undefined | |
340 | const videojsOptions = getVideojsOptions({ | 341 | } |
341 | autoplay: this.isAutoplay(), | 342 | |
342 | inactivityTimeout: 4000, | 343 | // Build video element, because videojs remove it on dispose |
343 | videoFiles: this.video.files, | 344 | const playerElementWrapper = this.elementRef.nativeElement.querySelector('#video-element-wrapper') |
344 | playerElement: this.playerElement, | 345 | this.playerElement = document.createElement('video') |
345 | videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), | 346 | this.playerElement.className = 'video-js vjs-peertube-skin' |
346 | videoDuration: this.video.duration, | 347 | playerElementWrapper.appendChild(this.playerElement) |
347 | enableHotkeys: true, | 348 | |
348 | peertubeLink: false, | 349 | const videojsOptions = getVideojsOptions({ |
349 | poster: this.video.previewUrl | 350 | autoplay: this.isAutoplay(), |
350 | }) | 351 | inactivityTimeout: 4000, |
352 | videoFiles: this.video.files, | ||
353 | playerElement: this.playerElement, | ||
354 | videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), | ||
355 | videoDuration: this.video.duration, | ||
356 | enableHotkeys: true, | ||
357 | peertubeLink: false, | ||
358 | poster: this.video.previewUrl | ||
359 | }) | ||
351 | 360 | ||
352 | this.videoPlayerLoaded = true | 361 | this.videoPlayerLoaded = true |
353 | 362 | ||
354 | const self = this | 363 | const self = this |
355 | this.zone.runOutsideAngular(() => { | 364 | this.zone.runOutsideAngular(() => { |
356 | videojs(this.playerElement, videojsOptions, function () { | 365 | self.videojsInstance = videojs(this.playerElement, videojsOptions, function () { |
357 | self.player = this | 366 | self.player = this |
358 | this.on('customError', (event, data) => self.handleError(data.err)) | 367 | this.on('customError', (event, data) => self.handleError(data.err)) |
359 | }) | ||
360 | }) | 368 | }) |
361 | } else { | 369 | }) |
362 | const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid) | ||
363 | this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration) | ||
364 | } | ||
365 | 370 | ||
366 | this.setVideoDescriptionHTML() | 371 | this.setVideoDescriptionHTML() |
367 | this.setVideoLikesBarTooltipText() | 372 | this.setVideoLikesBarTooltipText() |