X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fplayer%2Fmobile.scss;h=84d7a00f1b67c1f57fbb38c5fa8ea38b03203d01;hb=2b621ac0ebe83693bba6354b3482a03ba58143e7;hp=86c0902005a2c73c1e308b1a608d43f91d30096f;hpb=8cbc40b2fe9d36ef0505b9441276ca561342e9e9;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index 86c090200..84d7a00f1 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,162 @@
     }
   }
 }
+
+.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,
+  .rewind-button,
+  .forward-button {
+    width: fit-content;
+    height: fit-content;
+    position: relative;
+    top: calc(50% - 10px);
+    transform: translateY(-50%);
+    user-select: none;
+  }
+
+  .main-button,
+  .rewind-button .icon,
+  .forward-button .icon {
+    font-family: VideoJS;
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  .main-button {
+    font-size: 5em;
+    margin: auto;
+  }
+
+  .rewind-button,
+  .forward-button {
+    margin: 0 10px;
+    position: absolute;
+    text-align: center;
+
+    .icon {
+      opacity: 0;
+      animation: fadeInAndOut 1s linear infinite;
+
+      &::before {
+        font-size: 20px;
+        content: '\f101';
+        display: inline-block;
+        width: 16px;
+      }
+    }
+  }
+
+  .forward-button {
+    right: 5px;
+
+    .icon {
+      &::before {
+        margin-left: -2px;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 0.25s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.5s;
+      }
+    }
+  }
+
+  .rewind-button {
+    left: 5px;
+
+    .icon {
+      &::before {
+        margin-right: -2px;
+        transform: scaleX(-1);
+      }
+
+      &:nth-child(1) {
+        animation-delay: 0.5s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 0.25s;
+      }
+    }
+  }
+}
+
+.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-scrubbing {
+    .vjs-mobile-buttons-overlay {
+      display: none;
+    }
+  }
+
+  &.vjs-seeking,
+  &.vjs-waiting,
+  &.vjs-fast-seeking {
+    .main-button {
+      display: none;
+    }
+  }
+}
+
+@keyframes fadeInAndOut {
+  0%,
+  20% {
+    opacity: 0;
+  }
+
+  60%,
+  70% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}