aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-04-03 18:06:58 +0200
committerChocobozzz <me@florianbigard.com>2018-04-03 18:06:58 +0200
commit09edde4084bf2fc8914495ce7c884b3b02c7c8be (patch)
treed1175e772f239b6a5717bbaca0ff20f83d7c4819
parentb891f9bc612217b5b6f08a886c7d12eca260b9c8 (diff)
downloadPeerTube-09edde4084bf2fc8914495ce7c884b3b02c7c8be.tar.gz
PeerTube-09edde4084bf2fc8914495ce7c884b3b02c7c8be.tar.zst
PeerTube-09edde4084bf2fc8914495ce7c884b3b02c7c8be.zip
Fix video watch page responsive
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html3
-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.ts30
3 files changed, 16 insertions, 19 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 0385fab7c..03f64bd12 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,6 @@
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-element-wrapper">
4 <div id="video-element-wrapper"></div>
5 </div> 4 </div>
6 5
7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> 6 <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 109357b59..03f960339 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -1,7 +1,7 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4#video-container { 4#video-element-wrapper {
5 background-color: #000; 5 background-color: #000;
6 display: flex; 6 display: flex;
7 justify-content: center; 7 justify-content: center;
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 9563394dc..ed7892a01 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -43,7 +43,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
43 playerElement: HTMLVideoElement 43 playerElement: HTMLVideoElement
44 userRating: UserVideoRateType = null 44 userRating: UserVideoRateType = null
45 video: VideoDetails = null 45 video: VideoDetails = null
46 videoPlayerLoaded = false
47 videoNotFound = false 46 videoNotFound = false
48 descriptionLoading = false 47 descriptionLoading = false
49 48
@@ -56,7 +55,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
56 55
57 private otherVideos: Video[] = [] 56 private otherVideos: Video[] = []
58 private paramsSub: Subscription 57 private paramsSub: Subscription
59 private videojsInstance: videojs.Player
60 58
61 constructor ( 59 constructor (
62 private elementRef: ElementRef, 60 private elementRef: ElementRef,
@@ -96,7 +94,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
96 ) 94 )
97 95
98 this.paramsSub = this.route.params.subscribe(routeParams => { 96 this.paramsSub = this.route.params.subscribe(routeParams => {
99 if (this.videoPlayerLoaded) { 97 if (this.player) {
100 this.player.pause() 98 this.player.pause()
101 } 99 }
102 100
@@ -116,10 +114,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
116 } 114 }
117 115
118 ngOnDestroy () { 116 ngOnDestroy () {
119 // Remove player if it exists 117 this.flushPlayer()
120 if (this.videoPlayerLoaded === true) {
121 videojs(this.playerElement).dispose()
122 }
123 118
124 // Unsubscribe subscriptions 119 // Unsubscribe subscriptions
125 this.paramsSub.unsubscribe() 120 this.paramsSub.unsubscribe()
@@ -334,11 +329,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
334 if (res === false) return this.redirectService.redirectToHomepage() 329 if (res === false) return this.redirectService.redirectToHomepage()
335 } 330 }
336 331
337 // Player was already loaded, remove old videojs 332 // Flush old player if needed
338 if (this.videojsInstance) { 333 this.flushPlayer()
339 this.videojsInstance.dispose()
340 this.videojsInstance = undefined
341 }
342 334
343 // Build video element, because videojs remove it on dispose 335 // Build video element, because videojs remove it on dispose
344 const playerElementWrapper = this.elementRef.nativeElement.querySelector('#video-element-wrapper') 336 const playerElementWrapper = this.elementRef.nativeElement.querySelector('#video-element-wrapper')
@@ -348,7 +340,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
348 340
349 const videojsOptions = getVideojsOptions({ 341 const videojsOptions = getVideojsOptions({
350 autoplay: this.isAutoplay(), 342 autoplay: this.isAutoplay(),
351 inactivityTimeout: 4000, 343 inactivityTimeout: 2500,
352 videoFiles: this.video.files, 344 videoFiles: this.video.files,
353 playerElement: this.playerElement, 345 playerElement: this.playerElement,
354 videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), 346 videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
@@ -358,11 +350,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
358 poster: this.video.previewUrl 350 poster: this.video.previewUrl
359 }) 351 })
360 352
361 this.videoPlayerLoaded = true
362
363 const self = this 353 const self = this
364 this.zone.runOutsideAngular(() => { 354 this.zone.runOutsideAngular(() => {
365 self.videojsInstance = videojs(this.playerElement, videojsOptions, function () { 355 videojs(this.playerElement, videojsOptions, function () {
366 self.player = this 356 self.player = this
367 this.on('customError', (event, data) => self.handleError(data.err)) 357 this.on('customError', (event, data) => self.handleError(data.err))
368 }) 358 })
@@ -453,4 +443,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
453 // Be sure the autoPlay is set to false 443 // Be sure the autoPlay is set to false
454 return this.user.autoPlayVideo !== false 444 return this.user.autoPlayVideo !== false
455 } 445 }
446
447 private flushPlayer () {
448 // Remove player if it exists
449 if (this.player) {
450 this.player.dispose()
451 this.player = undefined
452 }
453 }
456} 454}