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