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