Add fast forward/rewind on mobile

[github/Chocobozzz/PeerTube.git] / client / src / sass / player / mobile.scss

diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index d72dc41df319adf217fb017d55d8fbc30b1e3b57..2688860a63120449f2b2d9a926683ec8d967aee2 100644 (file)
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -31,22 +31,89 @@
     display: block;
   }
 
-  .main-button {
+  .main-button,
+  .rewind-button,
+  .forward-button {
+    width: fit-content;
+    height: fit-content;
+    position: relative;
+    top: calc(50% - 10px);
+    transform: translateY(-50%);
+  }
+
+  .main-button,
+  .rewind-button .icon,
+  .forward-button .icon {
     font-family: VideoJS;
     font-weight: normal;
     font-style: normal;
+  }
+
+  .main-button {
     font-size: 5em;
-    width: fit-content;
     margin: auto;
-    position: relative;
-    top: calc(50% - 10px);
-    transform: translateY(-50%);
+  }
+
+  .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 {
+    &::before {
       content: '\f101';
     }
   }
@@ -54,7 +121,7 @@
 
 .vjs-playing {
   .main-button {
-    &:before {
+    &::before {
       content: '\f103';
     }
   }
@@ -62,7 +129,7 @@
 
 .vjs-ended {
   .main-button {
-    &:before {
+    &::before {
       content: '\f116';
     }
   }
@@ -77,11 +144,33 @@
     }
   }
 
-  &.vjs-seeking,
-  &.vjs-scrubbing,
-  &.vjs-waiting {
+  &.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;
+  }
 }