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 }
 116
 117 .video-bottom {
 118   display: flex;
 119   margin-top: 1.5rem;
 120 }
 121
 122 .video-info {
 123   flex-grow: 1;
 124   // Set min width for flex item
 125   min-width: 1px;
 126   max-width: 100%;
 127 }
 128
 129 .video-info-first-row {
 130   display: flex;
 131
 132   > div:first-child {
 133     flex-grow: 1;
 134   }
 135 }
 136
 137 .video-info-name {
 138   @include peertube-word-wrap;
 139
 140   @include margin-right(30px);
 141
 142   min-height: 40px; // Align with the action buttons
 143   font-size: 27px;
 144   font-weight: $font-semibold;
 145   flex-grow: 1;
 146 }
 147
 148 .video-info-first-row-bottom {
 149   display: flex;
 150   flex-wrap: wrap;
 151   align-items: center;
 152   width: 100%;
 153 }
 154
 155 .video-info-date-views {
 156   @include margin-right(10px);
 157
 158   margin-bottom: 10px;
 159   align-self: start;
 160   font-size: 14px;
 161 }
 162
 163 .video-info-channel {
 164   font-weight: $font-semibold;
 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 my-video-attributes {
 203   @include margin-left($video-watch-info-margin-left);
 204
 205   display: block;
 206   margin-bottom: 15px;
 207 }
 208
 209 my-action-buttons {
 210   @include margin-left(auto);
 211   @include margin-right(0);
 212
 213   display: block;
 214   margin-top: 0;
 215   margin-bottom: 10px;
 216
 217   align-items: start;
 218   width: max-content;
 219 }
 220
 221 my-recommended-videos {
 222   @include padding-left(15px);
 223
 224   display: block;
 225   min-width: 250px;
 226 }
 227
 228 my-video-comments {
 229   display: inline-block;
 230   width: 100%;
 231   margin-bottom: 20px;
 232 }
 233
 234 // Use the same breakpoint than in the typescript component to display the other video miniatures as row
 235 @media screen and (max-width: 1100px) {
 236   #video-wrapper {
 237     flex-direction: column;
 238     justify-content: center;
 239
 240     my-video-watch-playlist ::ng-deep .playlist {
 241       @include playlist-below-player;
 242     }
 243   }
 244
 245   .video-bottom {
 246     flex-direction: column;
 247   }
 248
 249   my-recommended-videos {
 250     @include padding-left(0);
 251   }
 252 }
 253
 254 @media screen and (max-width: 600px) {
 255   #videojs-wrapper {
 256     height: getPlayerHeight(100vw) !important;
 257
 258     .remote-server-down,
 259     ::ng-deep .video-js {
 260       width: 100vw;
 261       height: getPlayerHeight(100vw) !important;
 262     }
 263   }
 264
 265   .video-bottom {
 266     margin-top: 20px !important;
 267     padding-bottom: 20px !important;
 268   }
 269
 270   .video-info {
 271     padding: 0;
 272   }
 273
 274   .video-info-name {
 275     font-size: 20px;
 276     height: auto;
 277   }
 278 }
 279
 280 @media screen and (max-width: 450px) {
 281   .video-info-name {
 282     font-size: 18px;
 283   }
 284
 285   .video-info-date-views {
 286     font-size: 14px;
 287   }
 288
 289   my-action-buttons {
 290     margin-top: 10px;
 291   }
 292 }
 293
 294 // Special case for iOS, that takes into account the width for fullscreens
 295 #video-wrapper ::ng-deep .video-js.vjs-fullscreen {
 296   max-width: unset;
 297 }