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

diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index d72dc41df..84d7a00f1 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -31,22 +31,90 @@
     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%);
+    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;
-    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 +122,7 @@
 
 .vjs-playing {
   .main-button {
-    &:before {
+    &::before {
       content: '\f103';
     }
   }
@@ -62,7 +130,7 @@
 
 .vjs-ended {
   .main-button {
-    &:before {
+    &::before {
       content: '\f116';
     }
   }
@@ -77,11 +145,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;
+  }
 }