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