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

   1 @import '_variables';
   2 @import '_mixins';
   3 @import '_bootstrap-variables';
   4 @import '_miniature';
   5
   6 $other-videos-width: 260px;
   7 $player-factor: 1.7; // 16/9
   8
   9 @function getPlayerHeight($width){
  10   @return calc(#{$width} / #{$player-factor})
  11 }
  12
  13 @function getPlayerWidth($height){
  14   @return calc(#{$height} * #{$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 .root {
  26   &.theater-enabled #video-wrapper {
  27     flex-direction: column;
  28     justify-content: center;
  29
  30     #videojs-wrapper {
  31       width: 100%;
  32     }
  33
  34     ::ng-deep .video-js {
  35       $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
  36
  37       height: $height;
  38       width: 100%;
  39     }
  40
  41     my-video-watch-playlist ::ng-deep .playlist {
  42       @include playlist-below-player;
  43     }
  44   }
  45 }
  46
  47 .blacklisted-label {
  48   font-weight: $font-semibold;
  49 }
  50
  51 #video-wrapper {
  52   background-color: #000;
  53   display: flex;
  54   justify-content: center;
  55   margin: 0 -15px;
  56
  57   #videojs-wrapper {
  58     display: flex;
  59     justify-content: center;
  60     flex-grow: 1;
  61   }
  62
  63   .remote-server-down {
  64     color: #fff;
  65     display: flex;
  66     flex-direction: column;
  67     align-items: center;
  68     text-align: center;
  69     justify-content: center;
  70     background-color: #141313;
  71     width: 100%;
  72     font-size: 24px;
  73     height: 500px;
  74
  75     @media screen and (max-width: 1000px) {
  76       font-size: 20px;
  77     }
  78
  79     @media screen and (max-width: 600px) {
  80       font-size: 16px;
  81     }
  82   }
  83
  84   ::ng-deep .video-js {
  85     width: 100%;
  86     max-width: getPlayerWidth(66vh);
  87     height: 66vh;
  88
  89     // VideoJS create an inner video player
  90     video {
  91       outline: 0;
  92       position: relative !important;
  93     }
  94   }
  95
  96   @media screen and (max-width: 600px) {
  97     .remote-server-down,
  98     ::ng-deep .video-js {
  99       width: 100vw;
 100       height: getPlayerHeight(100vw)
 101     }
 102   }
 103 }
 104
 105 .alert {
 106   text-align: center;
 107   border-radius: 0;
 108 }
 109
 110 #video-not-found {
 111   height: 300px;
 112   line-height: 300px;
 113   margin-top: 50px;
 114   text-align: center;
 115   font-weight: $font-semibold;
 116   font-size: 15px;
 117 }
 118
 119 .video-bottom {
 120   display: flex;
 121   margin-top: 40px;
 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     .video-info-first-row {
 130       display: flex;
 131
 132       & > div:first-child {
 133         flex-grow: 1;
 134       }
 135
 136       .video-info-name {
 137         margin-right: 30px;
 138         min-height: 40px; // Align with the action buttons
 139         font-size: 27px;
 140         font-weight: $font-semibold;
 141         flex-grow: 1;
 142       }
 143
 144       .video-info-date-views {
 145         flex-grow: 1;
 146         margin-bottom: 10px;
 147         margin-right: 10px;
 148         font-size: 16px;
 149       }
 150
 151       .video-info-channel {
 152         font-weight: $font-semibold;
 153         font-size: 15px;
 154
 155         a {
 156           @include disable-default-a-behaviour;
 157
 158           color: var(--mainForegroundColor);
 159
 160           &:hover {
 161             opacity: 0.8;
 162           }
 163
 164           img {
 165             @include avatar(18px);
 166
 167             margin: -2px 2px 0 5px;
 168           }
 169         }
 170
 171         my-subscribe-button {
 172           margin-left: 5px;
 173         }
 174       }
 175
 176       .video-info-by {
 177
 178         a {
 179           @include disable-default-a-behaviour;
 180
 181           display: inline;
 182           align-items: center;
 183           font-size: 13px;
 184           color: var(--mainForegroundColor);
 185
 186           span:hover {
 187             opacity: 0.8;
 188           }
 189
 190           img {
 191             @include avatar(18px);
 192
 193             margin-top: -2px;
 194             margin-left: 7px;
 195           }
 196         }
 197
 198         my-help {
 199           position: relative;
 200           top: 1px;
 201           margin-left: 2px;
 202         }
 203       }
 204
 205       my-feed {
 206         margin-left: 5px;
 207         margin-top: 1px;
 208       }
 209
 210       .video-actions-rates {
 211         margin: 20px 0 10px 0;
 212         align-items: start;
 213
 214         .video-actions {
 215           height: 40px; // Align with the title
 216           display: flex;
 217           align-items: center;
 218
 219           .action-button:not(:first-child),
 220           .action-dropdown,
 221           my-video-actions-dropdown {
 222             margin-left: 10px;
 223           }
 224
 225           .action-button {
 226             @include peertube-button;
 227             @include grey-button;
 228             @include button-with-icon(21px, 0, -1px);
 229             @include apply-svg-color($grey-foreground-color);
 230
 231             font-size: 15px;
 232             font-weight: $font-semibold;
 233             display: inline-block;
 234             padding: 0 10px 0 10px;
 235             white-space: nowrap;
 236
 237             &::after {
 238               display: none;
 239             }
 240
 241             &.action-button-like.activated {
 242               background-color: $green;
 243
 244               my-global-icon {
 245                 @include apply-svg-color(#fff);
 246               }
 247             }
 248
 249             &.action-button-dislike.activated {
 250               background-color: $red;
 251
 252               my-global-icon {
 253                 @include apply-svg-color(#fff);
 254               }
 255             }
 256
 257             &.action-button-save {
 258               my-global-icon {
 259                 top: 0 !important;
 260                 right: -1px;
 261               }
 262             }
 263
 264             .icon-text {
 265               margin-left: 3px;
 266             }
 267           }
 268         }
 269
 270         .video-info-likes-dislikes-bar {
 271           $likes-bar-height: 2px;
 272           height: $likes-bar-height;
 273           margin-top: -$likes-bar-height;
 274           width: 186px;
 275           background-color: $red;
 276           position: relative;
 277           top: 10px;
 278
 279           .likes-bar {
 280             height: 100%;
 281             background-color: $green;
 282           }
 283         }
 284       }
 285     }
 286
 287     .video-info-description {
 288       margin: 20px 0;
 289       font-size: 15px;
 290
 291       .video-info-description-html {
 292         @include peertube-word-wrap;
 293       }
 294
 295       .glyphicon, .description-loading {
 296         margin-left: 3px;
 297       }
 298
 299       .description-loading {
 300         display: inline-block;
 301       }
 302
 303       .video-info-description-more {
 304         cursor: pointer;
 305         font-weight: $font-semibold;
 306         color: $grey-foreground-color;
 307         font-size: 14px;
 308
 309         .glyphicon {
 310           position: relative;
 311           top: 2px;
 312         }
 313       }
 314     }
 315
 316     .video-attributes .video-attribute {
 317       font-size: 13px;
 318       display: block;
 319       margin-bottom: 12px;
 320
 321       .video-attribute-label {
 322         min-width: 142px;
 323         padding-right: 5px;
 324         display: inline-block;
 325         color: $grey-foreground-color;
 326         font-weight: $font-bold;
 327       }
 328
 329       a.video-attribute-value {
 330         @include disable-default-a-behaviour;
 331         color: var(--mainForegroundColor);
 332
 333         &:hover {
 334           opacity: 0.9;
 335         }
 336       }
 337
 338       &.video-attribute-tags {
 339         .video-attribute-value:not(:nth-child(2)) {
 340           &::before {
 341             content: ', '
 342           }
 343         }
 344       }
 345     }
 346   }
 347
 348   ::ng-deep .other-videos {
 349     padding-left: 15px;
 350     flex-basis: $other-videos-width;
 351     min-width: $other-videos-width;
 352
 353     .title-page {
 354       margin-top: 0 !important;
 355     }
 356
 357     .video-miniature {
 358       display: flex;
 359       width: $other-videos-width;
 360       height: 100%;
 361       margin-bottom: 20px;
 362       flex-wrap: wrap;
 363
 364       .video-thumbnail {
 365         margin-right: 10px
 366       }
 367     }
 368   }
 369 }
 370
 371 my-video-comments {
 372   display: inline-block;
 373   width: 100%;
 374   margin-bottom: 20px;
 375 }
 376
 377 // If the view is not expanded, take into account the menu
 378 .privacy-concerns {
 379   width: calc(100% - #{$menu-width});
 380 }
 381
 382 @media screen and (max-width: $small-view) {
 383   .privacy-concerns {
 384     margin-left: $menu-width - 15px; // Menu is absolute
 385   }
 386 }
 387
 388 :host-context(.expanded) {
 389   .privacy-concerns {
 390     width: 100%;
 391     margin-left: -15px;
 392   }
 393 }
 394
 395 .privacy-concerns {
 396   position: fixed;
 397   bottom: 0;
 398
 399   padding: 5px 15px;
 400
 401   display: flex;
 402   flex-wrap: nowrap;
 403   align-items: center;
 404   justify-content: flex-start;
 405   background-color: rgba(0, 0, 0, 0.9);
 406   color: #fff;
 407
 408   .privacy-concerns-text {
 409     margin: 0 5px;
 410   }
 411
 412   a {
 413     @include disable-default-a-behaviour;
 414
 415     color: var(--mainColor);
 416     transition: color 0.3s;
 417
 418     &:hover {
 419       color: #fff;
 420     }
 421   }
 422
 423   .privacy-concerns-okay {
 424     background-color: var(--mainColor);
 425     padding: 5px 8px 5px 7px;
 426     margin-left: auto;
 427     border-radius: 3px;
 428     cursor: pointer;
 429     transition: background-color 0.3s;
 430     font-weight: $font-semibold;
 431
 432     &:hover {
 433       background-color: #000;
 434     }
 435   }
 436 }
 437
 438 @media screen and (max-width: 1600px) {
 439   .video-bottom .video-info .video-attributes .video-attribute {
 440     margin-bottom: 5px;
 441   }
 442 }
 443
 444 @media screen and (max-width: 1300px) {
 445   .privacy-concerns {
 446     font-size: 12px;
 447     padding: 2px 5px;
 448
 449     .privacy-concerns-text {
 450       margin: 0;
 451     }
 452   }
 453 }
 454
 455 @media screen and (max-width: 1100px) {
 456   #video-wrapper {
 457     flex-direction: column;
 458     justify-content: center;
 459
 460     my-video-watch-playlist ::ng-deep .playlist {
 461       @include playlist-below-player;
 462     }
 463   }
 464
 465   .video-bottom {
 466     flex-direction: column;
 467
 468     ::ng-deep .other-videos {
 469       padding-left: 0 !important;
 470
 471       ::ng-deep .video-miniature  {
 472         flex-direction: row;
 473         width: auto;
 474       }
 475     }
 476   }
 477 }
 478
 479 @media screen and (max-width: 600px) {
 480   .video-bottom {
 481     margin: 20px 0 0 0 !important;
 482
 483     .video-info {
 484       padding: 0;
 485
 486       .video-info-first-row {
 487
 488         .video-info-name {
 489           font-size: 20px;
 490           height: auto;
 491         }
 492       }
 493     }
 494   }
 495
 496   ::ng-deep .other-videos .video-miniature  {
 497     flex-direction: column;
 498   }
 499
 500   .privacy-concerns {
 501     width: 100%;
 502
 503     strong {
 504       display: none;
 505     }
 506   }
 507 }
 508
 509 @media screen and (max-width: 450px) {
 510   .video-bottom {
 511     .action-button .icon-text {
 512       display: none !important;
 513     }
 514
 515     .video-info .video-info-first-row {
 516       .video-info-name {
 517         font-size: 18px;
 518       }
 519
 520       .video-info-date-views {
 521         font-size: 14px;
 522       }
 523
 524       .video-actions-rates {
 525         margin-top: 10px;
 526       }
 527     }
 528
 529     .video-info-description {
 530       font-size: 14px !important;
 531     }
 532   }
 533 }