Fix regression in theater mode

2 files changed, 17 insertions, 12 deletions

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 4ce17209f..a2d56bd39 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -5,12 +5,6 @@
   background-color: #000;
   display: flex;
   justify-content: center;
-  height: 500px;
-
-  @media screen and (max-width: 600px) {
-    width: 100vw;
-    height: calc(100vw / 1.7); // 16/9
-  }
 
   .remote-server-down {
     color: #fff;
@@ -21,8 +15,8 @@
     justify-content: center;
     background-color: #141313;
     width: 100%;
-    height: 100%;
     font-size: 24px;
+    height: 500px;
 
     @media screen and (max-width: 1000px) {
       font-size: 20px;
@@ -35,7 +29,12 @@
 
   /deep/ .video-js {
     width: 888px;
-    height: 100%;
+    height: 500px;
+
+    &.vjs-theater-enabled {
+      height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
+      width: 100%;
+    }
 
     // VideoJS create an inner video player
     video {
@@ -44,9 +43,12 @@
     }
   }
 
-  /deep/ .video-js.vjs-theater-enabled {
-    width: 100%;
-    height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
+  @media screen and (max-width: 600px) {
+    .remote-server-down,
+    /deep/ .video-js {
+      width: 100vw;
+      height: calc(100vw / 1.7); // 16/9
+    }
   }
 }
 
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 4f8549e8f..ff8baaeb3 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -1,5 +1,5 @@
 import { catchError } from 'rxjs/operators'
-import { Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { RedirectService } from '@app/core/routing/redirect.service'
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
@@ -65,6 +65,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   constructor (
     private elementRef: ElementRef,
+    private changeDetector: ChangeDetectorRef,
     private route: ActivatedRoute,
     private router: Router,
     private videoService: VideoService,
@@ -317,6 +318,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     if (errorMessage.indexOf('from xs param') !== -1) {
       this.flushPlayer()
       this.remoteServerDown = true
+      this.changeDetector.detectChanges()
+
       return
     }