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     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       .video-actions-rates {
 210         margin: 0 0 10px 0;
 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 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, .description-loading {
 350         margin-left: 3px;
 351       }
 352
 353       .description-loading {
 354         display: inline-block;
 355       }
 356
 357       .video-info-description-more {
 358         cursor: pointer;
 359         font-weight: $font-semibold;
 360         color: pvar(--greyForegroundColor);
 361         font-size: 14px;
 362
 363         .glyphicon {
 364           position: relative;
 365           top: 2px;
 366         }
 367       }
 368     }
 369
 370     .video-attributes {
 371       margin-left: $video-info-margin-left;
 372     }
 373
 374     .video-attributes .video-attribute {
 375       font-size: 13px;
 376       display: block;
 377       margin-bottom: 12px;
 378
 379       .video-attribute-label {
 380         min-width: 142px;
 381         padding-right: 5px;
 382         display: inline-block;
 383         color: pvar(--greyForegroundColor);
 384         font-weight: $font-bold;
 385       }
 386
 387       a.video-attribute-value {
 388         @include disable-default-a-behaviour;
 389         color: pvar(--mainForegroundColor);
 390
 391         &:hover {
 392           opacity: 0.9;
 393         }
 394       }
 395
 396       &.video-attribute-tags {
 397         .video-attribute-value:not(:nth-child(2)) {
 398           &::before {
 399             content: ', '
 400           }
 401         }
 402       }
 403     }
 404   }
 405 }
 406
 407 my-recommended-videos {
 408   display: block;
 409   padding-left: 15px;
 410   min-width: 250px;
 411 }
 412
 413 my-video-comments {
 414   display: inline-block;
 415   width: 100%;
 416   margin-bottom: 20px;
 417 }
 418
 419 // If the view is not expanded, take into account the menu
 420 .privacy-concerns {
 421   z-index: z(dropdown) + 1;
 422   width: calc(100% - #{$menu-width});
 423 }
 424
 425 @media screen and (max-width: $small-view) {
 426   .privacy-concerns {
 427     margin-left: $menu-width - 15px; // Menu is absolute
 428   }
 429 }
 430
 431 :host-context(.expanded) {
 432   .privacy-concerns {
 433     width: 100%;
 434     margin-left: -15px;
 435   }
 436 }
 437
 438 .privacy-concerns {
 439   position: fixed;
 440   bottom: 0;
 441   z-index: z(privacymsg);
 442
 443   padding: 5px 15px;
 444
 445   display: flex;
 446   flex-wrap: nowrap;
 447   align-items: center;
 448   justify-content: space-between;
 449   background-color: rgba(0, 0, 0, 0.9);
 450   color: #fff;
 451
 452   .privacy-concerns-text {
 453     margin: 0 5px;
 454   }
 455
 456   a {
 457     @include disable-default-a-behaviour;
 458
 459     color: pvar(--mainColor);
 460     transition: color 0.3s;
 461
 462     &:hover {
 463       color: #fff;
 464     }
 465   }
 466
 467   .privacy-concerns-button {
 468     padding: 5px 8px 5px 7px;
 469     margin-left: auto;
 470     border-radius: 3px;
 471     white-space: nowrap;
 472     cursor: pointer;
 473     transition: background-color 0.3s;
 474     font-weight: $font-semibold;
 475
 476     &:hover {
 477       background-color: #000;
 478     }
 479   }
 480
 481   .privacy-concerns-okay {
 482     background-color: pvar(--mainColor);
 483     margin-left: 10px;
 484   }
 485 }
 486
 487 @media screen and (max-width: 1600px) {
 488   .video-bottom .video-info .video-attributes .video-attribute {
 489     margin-bottom: 5px;
 490   }
 491 }
 492
 493 @media screen and (max-width: 1300px) {
 494   .privacy-concerns {
 495     font-size: 12px;
 496     padding: 2px 5px;
 497
 498     .privacy-concerns-text {
 499       margin: 0;
 500     }
 501   }
 502 }
 503
 504 // Use the same breakpoint than in the typescript component to display the other video miniatures as row
 505 @media screen and (max-width: 1100px) {
 506   #video-wrapper {
 507     flex-direction: column;
 508     justify-content: center;
 509
 510     my-video-watch-playlist ::ng-deep .playlist {
 511       @include playlist-below-player;
 512     }
 513   }
 514
 515   .video-bottom {
 516     flex-direction: column;
 517   }
 518
 519   my-recommended-videos {
 520     padding-left: 0;
 521   }
 522 }
 523
 524 @media screen and (max-width: 600px) {
 525   .video-bottom {
 526     margin-top: 20px !important;
 527     padding-bottom: 20px !important;
 528
 529     .video-info {
 530       padding: 0;
 531
 532       .video-info-first-row {
 533
 534         .video-info-name {
 535           font-size: 20px;
 536           height: auto;
 537         }
 538       }
 539     }
 540   }
 541
 542   .privacy-concerns {
 543     width: 100%;
 544   }
 545 }
 546
 547 @media screen and (max-width: 450px) {
 548   .video-bottom {
 549     .action-button .icon-text {
 550       display: none !important;
 551     }
 552
 553     .video-info .video-info-first-row {
 554       .video-info-name {
 555         font-size: 18px;
 556       }
 557
 558       .video-info-date-views {
 559         font-size: 14px;
 560       }
 561
 562       .video-actions-rates {
 563         margin-top: 10px;
 564       }
 565     }
 566
 567     .video-info-description {
 568       font-size: 14px !important;
 569     }
 570   }
 571 }
 572
 573
 574 // Special case for iOS, that takes into account the width for fullscreens
 575 #video-wrapper ::ng-deep .video-js.vjs-fullscreen {
 576   max-width: unset;
 577 }