Add player controls on mobile

4 files changed, 78 insertions, 1 deletions

diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 2625576d4..dec3fe911 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -8,11 +8,14 @@ $font-size: 13px;
 $control-bar-height: 38px;
 $control-bar-icon-size: 26px;
 $control-bar-volume-slider-height: 14px;
+$control-bar-slider-top: -10px;
 $control-bar-font-size: 14px;
 $control-bar-play-font-size: 34px;
 $control-bar-next-previous-play-font-size: 14px;
 $control-bar-button-width: 38px;
 
+$control-bar-total-height: $control-bar-height - $control-bar-slider-top;
+
 $slider-bg-color: lighten($primary-background-color, 33%);
 
 $progress-margin: 10px;
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index b3a96510a..c4e1283f8 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -4,6 +4,8 @@
 @use './_player-variables' as *;
 
 .video-js.vjs-peertube-skin .vjs-control-bar {
+  z-index: 100;
+
   height: $control-bar-height;
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
   box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
@@ -49,7 +51,7 @@
     @include margin-left($progress-margin);
 
     position: absolute;
-    top: -10px;
+    top: $control-bar-slider-top;
     z-index: 100; // On top of the progress bar
     width: calc(100% - (2 * #{$progress-margin}));
     height: 14px;
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index 86c090200..d72dc41df 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -1,5 +1,7 @@
+@use 'sass:math';
 @use '_variables' as *;
 @use '_mixins' as *;
+@use './_player-variables' as *;
 
 /* Special mobile style */
 
@@ -14,3 +16,72 @@
     }
   }
 }
+
+.vjs-mobile-buttons-overlay {
+  display: none;
+
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100%;
+  top: 0;
+
+  .vjs-user-active,
+  .vjs-paused {
+    display: block;
+  }
+
+  .main-button {
+    font-family: VideoJS;
+    font-weight: normal;
+    font-style: normal;
+    font-size: 5em;
+    width: fit-content;
+    margin: auto;
+    position: relative;
+    top: calc(50% - 10px);
+    transform: translateY(-50%);
+  }
+}
+
+.vjs-paused {
+  .main-button {
+    &:before {
+      content: '\f101';
+    }
+  }
+}
+
+.vjs-playing {
+  .main-button {
+    &:before {
+      content: '\f103';
+    }
+  }
+}
+
+.vjs-ended {
+  .main-button {
+    &:before {
+      content: '\f116';
+    }
+  }
+}
+
+.vjs-has-started {
+
+  &.vjs-user-active,
+  &.vjs-paused {
+    .vjs-mobile-buttons-overlay {
+      display: block;
+    }
+  }
+
+  &.vjs-seeking,
+  &.vjs-scrubbing,
+  &.vjs-waiting {
+    .vjs-mobile-buttons-overlay {
+      display: none;
+    }
+  }
+}
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 5a476259e..8aa2c2ac3 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -22,6 +22,7 @@ $setting-transition-easing: ease-out;
     opacity: $primary-foreground-opacity;
     margin: 0 auto;
     font-size: $font-size !important;
+    z-index: 100;
 
     width: auto;
     overflow: hidden;