client/src/sass/player/mobile.scss

   1 @use 'sass:math';
   2 @use '_variables' as *;
   3 @use '_mixins' as *;
   4 @use './_player-variables' as *;
   5
   6 /* Special mobile style */
   7
   8 .video-js.vjs-peertube-skin.vjs-is-mobile {
   9   .vjs-control-bar {
  10     .vjs-progress-control .vjs-slider .vjs-play-progress {
  11       // Always display the circle on mobile
  12       &::before {
  13         margin-top: -1px;
  14         opacity: 1;
  15       }
  16     }
  17   }
  18 }
  19
  20 .vjs-mobile-buttons-overlay {
  21   display: none;
  22
  23   position: absolute;
  24   background-color: rgba(0, 0, 0, 0.4);
  25   width: 100%;
  26   height: 100%;
  27   top: 0;
  28
  29   .vjs-user-active,
  30   .vjs-paused {
  31     display: block;
  32   }
  33
  34   .main-button,
  35   .rewind-button,
  36   .forward-button {
  37     width: fit-content;
  38     height: fit-content;
  39     position: relative;
  40     top: calc(50% - 10px);
  41     transform: translateY(-50%);
  42     user-select: none;
  43   }
  44
  45   .main-button,
  46   .rewind-button .icon,
  47   .forward-button .icon {
  48     font-family: VideoJS;
  49     font-weight: normal;
  50     font-style: normal;
  51   }
  52
  53   .main-button {
  54     font-size: 5em;
  55     margin: auto;
  56   }
  57
  58   .rewind-button,
  59   .forward-button {
  60     margin: 0 10px;
  61     position: absolute;
  62     text-align: center;
  63
  64     .icon {
  65       opacity: 0;
  66       animation: fadeInAndOut 1s linear infinite;
  67
  68       &::before {
  69         font-size: 20px;
  70         content: '\f101';
  71         display: inline-block;
  72         width: 16px;
  73       }
  74     }
  75   }
  76
  77   .forward-button {
  78     right: 5px;
  79
  80     .icon {
  81       &::before {
  82         margin-left: -2px;
  83       }
  84
  85       &:nth-child(2) {
  86         animation-delay: 0.25s;
  87       }
  88
  89       &:nth-child(3) {
  90         animation-delay: 0.5s;
  91       }
  92     }
  93   }
  94
  95   .rewind-button {
  96     left: 5px;
  97
  98     .icon {
  99       &::before {
 100         margin-right: -2px;
 101         transform: scaleX(-1);
 102       }
 103
 104       &:nth-child(1) {
 105         animation-delay: 0.5s;
 106       }
 107
 108       &:nth-child(2) {
 109         animation-delay: 0.25s;
 110       }
 111     }
 112   }
 113 }
 114
 115 .vjs-paused {
 116   .main-button {
 117     &::before {
 118       content: '\f101';
 119     }
 120   }
 121 }
 122
 123 .vjs-playing {
 124   .main-button {
 125     &::before {
 126       content: '\f103';
 127     }
 128   }
 129 }
 130
 131 .vjs-ended {
 132   .main-button {
 133     &::before {
 134       content: '\f116';
 135     }
 136   }
 137 }
 138
 139 .vjs-has-started {
 140
 141   &.vjs-user-active,
 142   &.vjs-paused {
 143     .vjs-mobile-buttons-overlay {
 144       display: block;
 145     }
 146   }
 147
 148   &.vjs-scrubbing {
 149     .vjs-mobile-buttons-overlay {
 150       display: none;
 151     }
 152   }
 153
 154   &.vjs-seeking,
 155   &.vjs-waiting,
 156   &.vjs-fast-seeking {
 157     .main-button {
 158       display: none;
 159     }
 160   }
 161 }
 162
 163 @keyframes fadeInAndOut {
 164   0%,
 165   20% {
 166     opacity: 0;
 167   }
 168
 169   60%,
 170   70% {
 171     opacity: 1;
 172   }
 173
 174   100% {
 175     opacity: 0;
 176   }
 177 }