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

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