aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts57
3 files changed, 33 insertions, 28 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 9c6038a5e..0385fab7c 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -1,7 +1,7 @@
1<div class="row"> 1<div class="row">
2 <!-- We need the video container for videojs so we just hide it --> 2 <!-- We need the video container for videojs so we just hide it -->
3 <div [hidden]="videoNotFound" id="video-container"> 3 <div [hidden]="videoNotFound" id="video-container">
4 <video id="video-element" class="video-js vjs-peertube-skin"></video> 4 <div id="video-element-wrapper"></div>
5 </div> 5 </div>
6 6
7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> 7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 10993735b..109357b59 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -6,7 +6,7 @@
6 display: flex; 6 display: flex;
7 justify-content: center; 7 justify-content: center;
8 8
9 #video-element { 9 /deep/ .video-js {
10 width: 888px; 10 width: 888px;
11 height: 500px; 11 height: 500px;
12 12
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()