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