client/src/app/+videos/+video-watch/video-watch.component.scss

   1 @use 'sass:math';
   2 @use '_variables' as *;
   3 @use '_mixins' as *;
   4 @use '_bootstrap-variables';
   5 @use '_miniature' as *;
   6
   7 $video-height: 66vh;
   8
   9 @function getPlayerHeight ($width) {
  10   @return calc(#{$width} / #{$video-watch-player-factor});
  11 }
  12
  13 @function getPlayerWidth ($height) {
  14   @return calc(#{$height} * #{$video-watch-player-factor});
  15 }
  16
  17 @mixin playlist-below-player {
  18   width: 100% !important;
  19   height: auto !important;
  20   max-height: 300px !important;
  21   max-width: initial;
  22   border-bottom: 1px solid $separator-border-color !important;
  23 }
  24
  25 .blocked-label {
  26   font-weight: $font-semibold;
  27 }
  28
  29 .placeholder-image {
  30   height: 100%;
  31   max-width: 100%;
  32   object-fit: contain;
  33 }
  34
  35 .flex-direction-column {
  36   flex-direction: column;
  37 }
  38
  39 .root {
  40   &.theater-enabled #video-wrapper {
  41     $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
  42
  43     flex-direction: column;
  44     justify-content: center;
  45
  46     #videojs-wrapper {
  47       width: 100%;
  48       height: $height;
  49     }
  50
  51     ::ng-deep .video-js {
  52       height: $height;
  53       width: 100%;
  54       max-width: initial;
  55     }
  56
  57     my-video-watch-playlist ::ng-deep .playlist {
  58       @include playlist-below-player;
  59     }
  60   }
  61 }
  62
  63 #video-wrapper {
  64   background-color: #000;
  65   display: flex;
  66   justify-content: center;
  67
  68   ::ng-deep .video-js {
  69     width: 100%;
  70     max-width: getPlayerWidth($video-height);
  71     height: $video-height;
  72
  73     // VideoJS create an inner video player
  74     video {
  75       outline: 0;
  76       position: relative !important;
  77     }
  78   }
  79 }
  80
  81 #videojs-wrapper {
  82   display: flex;
  83   justify-content: center;
  84   flex-grow: 1;
  85   height: $video-height;
  86 }
  87
  88 .remote-server-down {
  89   color: #fff;
  90   display: flex;
  91   flex-direction: column;
  92   align-items: center;
  93   text-align: center;
  94   justify-content: center;
  95   background-color: #141313;
  96   width: 100%;
  97   font-size: 24px;
  98   height: 500px;
  99
 100   @media screen and (max-width: 1000px) {
 101     font-size: 20px;
 102   }
 103
 104   @media screen and (max-width: 600px) {
 105     font-size: 16px;
 106   }
 107 }
 108
 109 #video-not-found {
 110   height: 300px;
 111   line-height: 300px;
 112   margin-top: 50px;
 113   text-align: center;
 114   font-weight: $font-semibold;
 115   font-size: 15px;
 116 }
 117
 118 .video-bottom {
 119   display: flex;
 120   margin-top: 1.5rem;
 121 }
 122
 123 .video-info {
 124   flex-grow: 1;
 125   // Set min width for flex item
 126   min-width: 1px;
 127   max-width: 100%;
 128 }
 129
 130 .video-info-first-row {
 131   display: flex;
 132
 133   > div:first-child {
 134     flex-grow: 1;
 135   }
 136 }
 137
 138 .video-info-name {
 139   @include peertube-word-wrap;
 140
 141   @include margin-right(30px);
 142
 143   min-height: 40px; // Align with the action buttons
 144   font-size: 27px;
 145   font-weight: $font-semibold;
 146   flex-grow: 1;
 147 }
 148
 149 .video-info-first-row-bottom {
 150   display: flex;
 151   flex-wrap: wrap;
 152   align-items: center;
 153   width: 100%;
 154 }
 155
 156 .video-info-date-views {
 157   @include margin-right(10px);
 158
 159   margin-bottom: 10px;
 160   align-self: start;
 161   font-size: 1em;
 162 }
 163
 164 .video-info-channel {
 165   font-weight: $font-semibold;
 166   font-size: 15px;
 167
 168   a {
 169     @include disable-default-a-behaviour;
 170     @include peertube-word-wrap;
 171
 172     color: pvar(--mainForegroundColor);
 173
 174     &:hover {
 175       opacity: 0.8;
 176     }
 177   }
 178 }
 179
 180 .video-info-channel-left {
 181   flex-grow: 1;
 182
 183   .video-info-channel-left-links {
 184     display: flex;
 185     flex-direction: column;
 186     position: relative;
 187     line-height: 1.37;
 188
 189     a:nth-of-type(2) {
 190       font-weight: $font-regular;
 191       font-size: 90%;
 192     }
 193
 194     a.single-link {
 195       margin-top: 7px;
 196     }
 197   }
 198 }
 199
 200 my-subscribe-button {
 201   @include margin-left(5px);
 202 }
 203
 204 my-video-attributes {
 205   @include margin-left($video-watch-info-margin-left);
 206
 207   display: block;
 208   margin-bottom: 15px;
 209 }
 210
 211 my-action-buttons {
 212   @include margin-left(auto);
 213   @include margin-right(0);
 214
 215   display: block;
 216   margin-top: 0;
 217   margin-bottom: 10px;
 218
 219   align-items: start;
 220   width: max-content;
 221 }
 222
 223 my-recommended-videos {
 224   @include padding-left(15px);
 225
 226   display: block;
 227   min-width: 250px;
 228 }
 229
 230 my-video-comments {
 231   display: inline-block;
 232   width: 100%;
 233   margin-bottom: 20px;
 234 }
 235
 236 // Use the same breakpoint than in the typescript component to display the other video miniatures as row
 237 @media screen and (max-width: 1100px) {
 238   #video-wrapper {
 239     flex-direction: column;
 240     justify-content: center;
 241
 242     my-video-watch-playlist ::ng-deep .playlist {
 243       @include playlist-below-player;
 244     }
 245   }
 246
 247   .video-bottom {
 248     flex-direction: column;
 249   }
 250
 251   my-recommended-videos {
 252     @include padding-left(0);
 253   }
 254 }
 255
 256 @media screen and (max-width: 600px) {
 257   #videojs-wrapper {
 258     height: getPlayerHeight(100vw) !important;
 259
 260     .remote-server-down,
 261     ::ng-deep .video-js {
 262       width: 100vw;
 263       height: getPlayerHeight(100vw) !important;
 264     }
 265   }
 266
 267   .video-bottom {
 268     margin-top: 20px !important;
 269     padding-bottom: 20px !important;
 270   }
 271
 272   .video-info {
 273     padding: 0;
 274   }
 275
 276   .video-info-name {
 277     font-size: 20px;
 278     height: auto;
 279   }
 280 }
 281
 282 @media screen and (max-width: 450px) {
 283   .video-info-name {
 284     font-size: 18px;
 285   }
 286
 287   .video-info-date-views {
 288     font-size: 14px;
 289   }
 290
 291   my-action-buttons {
 292     margin-top: 10px;
 293   }
 294 }
 295
 296 // Special case for iOS, that takes into account the width for fullscreens
 297 #video-wrapper ::ng-deep .video-js.vjs-fullscreen {
 298   max-width: unset;
 299 }