Add theatre mode

2 files changed, 27 insertions, 0 deletions

diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 95b4b166e..092f8ed24 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -31,3 +31,5 @@ $footer-border-color: $header-border-color;
 
 $video-thumbnail-height: 110px;
 $video-thumbnail-width: 200px;
+
+$theater-bottom-space: 85px;
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index de6501962..e60a854d4 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -135,6 +135,7 @@
     .vjs-resolution-control,
     .vjs-fullscreen-control,
     .vjs-peertube-link,
+    .vjs-theater-control,
     .vjs-settings
     {
       color: $primary-foreground-color !important;
@@ -394,6 +395,26 @@
       padding: 0 5px;
     }
 
+    .vjs-theater-control {
+      @include disable-outline;
+
+      width: 37px;
+      margin-right: 1px;
+
+      .vjs-icon-placeholder {
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        vertical-align: middle;
+        background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
+        background-size: contain;
+
+        &::before {
+          content: '';
+        }
+      }
+    }
+
     .vjs-fullscreen-control {
       @include disable-outline;
 
@@ -440,6 +461,10 @@
   }
 
   @media screen and (max-width: 750px) {
+    .vjs-theater-control {
+      display: none;
+    }
+
     .vjs-dock-text {
       font-size: 16px;
     }