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 $player-factor: 1.7; // 16/9
   7 $video-info-margin-left: 44px;
   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       max-width: initial;
  40     }
  41
  42     my-video-watch-playlist ::ng-deep .playlist {
  43       @include playlist-below-player;
  44     }
  45   }
  46 }
  47
  48 .blocked-label {
  49   font-weight: $font-semibold;
  50 }
  51
  52 #video-wrapper {
  53   $video-height: 66vh;
  54
  55   background-color: #000;
  56   display: flex;
  57   justify-content: center;
  58
  59   #videojs-wrapper {
  60     display: flex;
  61     justify-content: center;
  62     flex-grow: 1;
  63     height: $video-height;
  64   }
  65
  66   .remote-server-down {
  67     color: #fff;
  68     display: flex;
  69     flex-direction: column;
  70     align-items: center;
  71     text-align: center;
  72     justify-content: center;
  73     background-color: #141313;
  74     width: 100%;
  75     font-size: 24px;
  76     height: 500px;
  77
  78     @media screen and (max-width: 1000px) {
  79       font-size: 20px;
  80     }
  81
  82     @media screen and (max-width: 600px) {
  83       font-size: 16px;
  84     }
  85   }
  86
  87   ::ng-deep .video-js {
  88     width: 100%;
  89     max-width: getPlayerWidth(66vh);
  90     height: $video-height;
  91
  92     // VideoJS create an inner video player
  93     video {
  94       outline: 0;
  95       position: relative !important;
  96     }
  97   }
  98
  99   @media screen and (max-width: 600px) {
 100     .remote-server-down,
 101     ::ng-deep .video-js {
 102       width: 100vw;
 103       height: getPlayerHeight(100vw)
 104     }
 105   }
 106 }
 107
 108 .alert {
 109   text-align: center;
 110   border-radius: 0;
 111 }
 112
 113 .flex-direction-column {
 114   flex-direction: column;
 115 }
 116
 117 #video-not-found {
 118   height: 300px;
 119   line-height: 300px;
 120   margin-top: 50px;
 121   text-align: center;
 122   font-weight: $font-semibold;
 123   font-size: 15px;
 124 }
 125
 126 .video-bottom {
 127   display: flex;
 128   margin-top: 1.5rem;
 129
 130   .video-info {
 131     flex-grow: 1;
 132     // Set min width for flex item
 133     min-width: 1px;
 134     max-width: 100%;
 135
 136     .video-info-first-row {
 137       display: flex;
 138
 139       & > div:first-child {
 140         flex-grow: 1;
 141       }
 142
 143       .video-info-name {
 144         margin-right: 30px;
 145         min-height: 40px; // Align with the action buttons
 146         font-size: 27px;
 147         font-weight: $font-semibold;
 148         flex-grow: 1;
 149       }
 150
 151       .video-info-first-row-bottom {
 152         display: flex;
 153         flex-wrap: wrap;
 154         align-items: center;
 155         width: 100%;
 156       }
 157
 158       .video-info-date-views {
 159         align-self: start;
 160         margin-bottom: 10px;
 161         margin-right: 10px;
 162         font-size: 1em;
 163       }
 164
 165       .video-info-channel {
 166         font-weight: $font-semibold;
 167         font-size: 15px;
 168
 169         a {
 170           @include disable-default-a-behaviour;
 171
 172           color: pvar(--mainForegroundColor);
 173
 174           &:hover {
 175             opacity: 0.8;
 176           }
 177
 178           img {
 179             @include avatar(18px);
 180
 181             margin: -2px 5px 0 0;
 182           }
 183         }
 184
 185         .video-info-channel-left {
 186           flex-grow: 1;
 187
 188           .video-info-channel-left-links {
 189             display: flex;
 190             flex-direction: column;
 191             position: relative;
 192             line-height: 1.37;
 193
 194             a:nth-of-type(2) {
 195               font-weight: 500;
 196               font-size: 90%;
 197             }
 198
 199             a.single-link {
 200               margin-top: 7px;
 201             }
 202           }
 203         }
 204
 205         my-subscribe-button {
 206           margin-left: 5px;
 207         }
 208       }
 209
 210       my-feed {
 211         margin-left: 5px;
 212         margin-top: 1px;
 213       }
 214
 215       .video-actions-rates {
 216         margin: 0 0 10px 0;
 217         align-items: start;
 218         width: max-content;
 219         margin-left: auto;
 220
 221         .video-actions {
 222           height: 40px; // Align with the title
 223           display: flex;
 224           align-items: center;
 225
 226           .action-button:not(:first-child),
 227           .action-dropdown,
 228           my-video-actions-dropdown {
 229             margin-left: 5px;
 230           }
 231
 232           ::ng-deep.action-button {
 233             @include peertube-button;
 234             @include button-with-icon(21px, 0, -1px);
 235             @include apply-svg-color(pvar(--actionButtonColor));
 236
 237             font-size: 100%;
 238             font-weight: $font-semibold;
 239             display: inline-block;
 240             padding: 0 10px 0 10px;
 241             white-space: nowrap;
 242             background-color: transparent !important;
 243             color: pvar(--actionButtonColor);
 244             text-transform: uppercase;
 245
 246             &::after {
 247               display: none;
 248             }
 249
 250             &:hover {
 251               opacity: 0.9;
 252             }
 253
 254             &.action-button-like,
 255             &.action-button-dislike {
 256               filter: brightness(120%);
 257
 258               .count {
 259                 margin: 0 5px;
 260               }
 261             }
 262
 263             &.action-button-like.activated {
 264               .count {
 265                 color: pvar(--activatedActionButtonColor);
 266               }
 267
 268               my-global-icon {
 269                 @include apply-svg-color(pvar(--activatedActionButtonColor));
 270               }
 271             }
 272
 273             &.action-button-dislike.activated {
 274               .count {
 275                 color: pvar(--activatedActionButtonColor);
 276               }
 277
 278               my-global-icon {
 279                 @include apply-svg-color(pvar(--activatedActionButtonColor));
 280               }
 281             }
 282
 283             &.action-button-support {
 284               color: pvar(--supportButtonColor);
 285
 286               my-global-icon {
 287                 @include apply-svg-color(pvar(--supportButtonColor));
 288               }
 289             }
 290
 291             &.action-button-support {
 292               my-global-icon {
 293                 ::ng-deep path:first-child {
 294                   fill: pvar(--supportButtonHeartColor) !important;
 295                 }
 296               }
 297             }
 298
 299             &.action-button-save {
 300               my-global-icon {
 301                 top: 0 !important;
 302                 right: -1px;
 303               }
 304             }
 305
 306             .icon-text {
 307               margin-left: 3px;
 308             }
 309           }
 310         }
 311
 312         .video-info-likes-dislikes-bar-outer-container {
 313           position: relative;
 314         }
 315
 316         .video-info-likes-dislikes-bar-inner-container {
 317           position: absolute;
 318           height: 20px;
 319         }
 320
 321         .video-info-likes-dislikes-bar {
 322           $likes-bar-height: 2px;
 323           height: $likes-bar-height;
 324           margin-top: -$likes-bar-height;
 325           width: 120px;
 326           background-color: #ccc;
 327           position: relative;
 328           top: 10px;
 329
 330           .likes-bar {
 331             height: 100%;
 332             background-color: #909090;
 333
 334             &.liked {
 335               background-color: pvar(--activatedActionButtonColor);
 336             }
 337           }
 338         }
 339       }
 340     }
 341
 342     .video-info-description {
 343       margin: 20px 0;
 344       margin-left: $video-info-margin-left;
 345       font-size: 15px;
 346
 347       .video-info-description-html {
 348         @include peertube-word-wrap;
 349
 350         /deep/ a {
 351           text-decoration: none;
 352         }
 353       }
 354
 355       .glyphicon, .description-loading {
 356         margin-left: 3px;
 357       }
 358
 359       .description-loading {
 360         display: inline-block;
 361       }
 362
 363       .video-info-description-more {
 364         cursor: pointer;
 365         font-weight: $font-semibold;
 366         color: pvar(--greyForegroundColor);
 367         font-size: 14px;
 368
 369         .glyphicon {
 370           position: relative;
 371           top: 2px;
 372         }
 373       }
 374     }
 375
 376     .video-attributes {
 377       margin-left: $video-info-margin-left;
 378     }
 379
 380     .video-attributes .video-attribute {
 381       font-size: 13px;
 382       display: block;
 383       margin-bottom: 12px;
 384
 385       .video-attribute-label {
 386         min-width: 142px;
 387         padding-right: 5px;
 388         display: inline-block;
 389         color: pvar(--greyForegroundColor);
 390         font-weight: $font-bold;
 391       }
 392
 393       a.video-attribute-value {
 394         @include disable-default-a-behaviour;
 395         color: pvar(--mainForegroundColor);
 396
 397         &:hover {
 398           opacity: 0.9;
 399         }
 400       }
 401
 402       &.video-attribute-tags {
 403         .video-attribute-value:not(:nth-child(2)) {
 404           &::before {
 405             content: ', '
 406           }
 407         }
 408       }
 409     }
 410   }
 411
 412   ::ng-deep .other-videos {
 413     padding-left: 15px;
 414     min-width: $video-miniature-width;
 415
 416     @media screen and (min-width: 1800px - (3* $video-miniature-width)) {
 417       width: min-content;
 418     }
 419
 420     .title-page {
 421       margin: 0 !important;
 422     }
 423
 424     .video-miniature {
 425       display: flex;
 426       width: max-content;
 427       height: 100%;
 428       padding-bottom: 20px;
 429       flex-wrap: wrap;
 430     }
 431
 432     .video-bottom {
 433       @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
 434         margin-left: 1rem;
 435       }
 436       @media screen and (max-width: 500px) {
 437         margin-left: 0;
 438         margin-top: .5rem;
 439       }
 440     }
 441   }
 442 }
 443
 444 my-video-comments {
 445   display: inline-block;
 446   width: 100%;
 447   margin-bottom: 20px;
 448 }
 449
 450 // If the view is not expanded, take into account the menu
 451 .privacy-concerns {
 452   z-index: z(dropdown) + 1;
 453   width: calc(100% - #{$menu-width});
 454 }
 455
 456 @media screen and (max-width: $small-view) {
 457   .privacy-concerns {
 458     margin-left: $menu-width - 15px; // Menu is absolute
 459   }
 460 }
 461
 462 :host-context(.expanded) {
 463   .privacy-concerns {
 464     width: 100%;
 465     margin-left: -15px;
 466   }
 467 }
 468
 469 .privacy-concerns {
 470   position: fixed;
 471   bottom: 0;
 472   z-index: z(privacymsg);
 473
 474   padding: 5px 15px;
 475
 476   display: flex;
 477   flex-wrap: nowrap;
 478   align-items: center;
 479   justify-content: space-between;
 480   background-color: rgba(0, 0, 0, 0.9);
 481   color: #fff;
 482
 483   .privacy-concerns-text {
 484     margin: 0 5px;
 485   }
 486
 487   a {
 488     @include disable-default-a-behaviour;
 489
 490     color: pvar(--mainColor);
 491     transition: color 0.3s;
 492
 493     &:hover {
 494       color: #fff;
 495     }
 496   }
 497
 498   .privacy-concerns-button {
 499     padding: 5px 8px 5px 7px;
 500     margin-left: auto;
 501     border-radius: 3px;
 502     white-space: nowrap;
 503     cursor: pointer;
 504     transition: background-color 0.3s;
 505     font-weight: $font-semibold;
 506
 507     &:hover {
 508       background-color: #000;
 509     }
 510   }
 511
 512   .privacy-concerns-okay {
 513     background-color: pvar(--mainColor);
 514     margin-left: 10px;
 515   }
 516 }
 517
 518 @media screen and (max-width: 1600px) {
 519   .video-bottom .video-info .video-attributes .video-attribute {
 520     margin-bottom: 5px;
 521   }
 522 }
 523
 524 @media screen and (max-width: 1300px) {
 525   .privacy-concerns {
 526     font-size: 12px;
 527     padding: 2px 5px;
 528
 529     .privacy-concerns-text {
 530       margin: 0;
 531     }
 532   }
 533 }
 534
 535 @media screen and (max-width: 1100px) {
 536   #video-wrapper {
 537     flex-direction: column;
 538     justify-content: center;
 539
 540     my-video-watch-playlist ::ng-deep .playlist {
 541       @include playlist-below-player;
 542     }
 543   }
 544
 545   .video-bottom {
 546     flex-direction: column;
 547
 548     ::ng-deep .other-videos {
 549       padding-left: 0 !important;
 550
 551       ::ng-deep .video-miniature  {
 552         flex-direction: row;
 553         width: auto;
 554       }
 555     }
 556   }
 557 }
 558
 559 @media screen and (max-width: 600px) {
 560   .video-bottom {
 561     margin-top: 20px !important;
 562     padding-bottom: 20px !important;
 563
 564     .video-info {
 565       padding: 0;
 566
 567       .video-info-first-row {
 568
 569         .video-info-name {
 570           font-size: 20px;
 571           height: auto;
 572         }
 573       }
 574     }
 575   }
 576
 577   ::ng-deep .other-videos .video-miniature  {
 578     flex-direction: column;
 579   }
 580
 581   .privacy-concerns {
 582     width: 100%;
 583   }
 584 }
 585
 586 @media screen and (max-width: 450px) {
 587   .video-bottom {
 588     .action-button .icon-text {
 589       display: none !important;
 590     }
 591
 592     .video-info .video-info-first-row {
 593       .video-info-name {
 594         font-size: 18px;
 595       }
 596
 597       .video-info-date-views {
 598         font-size: 14px;
 599       }
 600
 601       .video-actions-rates {
 602         margin-top: 10px;
 603       }
 604     }
 605
 606     .video-info-description {
 607       font-size: 14px !important;
 608     }
 609   }
 610 }
 611
 612
 613 // Special case for iOS, that takes into account the width for fullscreens
 614 #video-wrapper ::ng-deep .video-js.vjs-fullscreen {
 615   max-width: unset;
 616 }