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