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