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 $other-videos-width: 260px;
   7 $player-factor: 1.7; // 16/9
   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%;
  19   height: auto;
  20   max-height: 300px;
  21   border-bottom: 1px solid $separator-border-color;
  22 }
  23
  24 .root {
  25   &.theater-enabled #video-wrapper {
  26     flex-direction: column;
  27     justify-content: center;
  28
  29     #videojs-wrapper {
  30       width: 100%;
  31     }
  32
  33     /deep/ .video-js {
  34       $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
  35
  36       height: $height;
  37       width: 100%;
  38     }
  39
  40     .playlist {
  41       @include playlist-below-player;
  42     }
  43   }
  44 }
  45
  46 .blacklisted-label {
  47   font-weight: $font-semibold;
  48 }
  49
  50 #video-wrapper {
  51   background-color: #000;
  52   display: flex;
  53   justify-content: center;
  54   margin: 0 -15px;
  55
  56   #videojs-wrapper {
  57     display: flex;
  58     justify-content: center;
  59     flex-grow: 1;
  60   }
  61
  62   .remote-server-down {
  63     color: #fff;
  64     display: flex;
  65     flex-direction: column;
  66     align-items: center;
  67     text-align: center;
  68     justify-content: center;
  69     background-color: #141313;
  70     width: 100%;
  71     font-size: 24px;
  72     height: 500px;
  73
  74     @media screen and (max-width: 1000px) {
  75       font-size: 20px;
  76     }
  77
  78     @media screen and (max-width: 600px) {
  79       font-size: 16px;
  80     }
  81   }
  82
  83   .playlist {
  84     min-width: 200px;
  85     max-width: 470px;
  86     height: 66vh;
  87     background-color: var(--mainBackgroundColor);
  88     overflow-y: auto;
  89     border-bottom: 1px solid $separator-border-color;
  90
  91     .playlist-info {
  92       padding: 5px 30px;
  93       background-color: #e4e4e4;
  94
  95       .playlist-display-name {
  96         font-size: 18px;
  97         font-weight: $font-semibold;
  98         margin-bottom: 5px;
  99       }
 100
 101       .playlist-by-index {
 102         color: $grey-foreground-color;
 103         display: flex;
 104
 105         .playlist-by {
 106           margin-right: 5px;
 107         }
 108
 109         .playlist-index span:first-child::after {
 110           content: '/';
 111           margin: 0 3px;
 112         }
 113       }
 114     }
 115
 116     my-video-playlist-element-miniature {
 117       /deep/ {
 118         .video {
 119           .position {
 120             margin-right: 0;
 121           }
 122
 123           .video-info {
 124             .video-info-name {
 125               font-size: 15px;
 126             }
 127           }
 128         }
 129
 130         my-video-thumbnail {
 131           @include thumbnail-size-component(90px, 50px);
 132         }
 133       }
 134     }
 135   }
 136
 137   /deep/ .video-js {
 138     width: getPlayerWidth(66vh);
 139     height: 66vh;
 140
 141     // VideoJS create an inner video player
 142     video {
 143       outline: 0;
 144       position: relative !important;
 145     }
 146   }
 147
 148   @media screen and (max-width: 600px) {
 149     .remote-server-down,
 150     /deep/ .video-js {
 151       width: 100vw;
 152       height: getPlayerHeight(100vw)
 153     }
 154   }
 155 }
 156
 157 .alert {
 158   text-align: center;
 159 }
 160
 161 #video-not-found {
 162   height: 300px;
 163   line-height: 300px;
 164   margin-top: 50px;
 165   text-align: center;
 166   font-weight: $font-semibold;
 167   font-size: 15px;
 168 }
 169
 170 .video-bottom {
 171   display: flex;
 172   margin-top: 40px;
 173
 174   .video-info {
 175     flex-grow: 1;
 176     // Set min width for flex item
 177     min-width: 1px;
 178     max-width: 100%;
 179
 180     .video-info-first-row {
 181       display: flex;
 182
 183       & > div:first-child {
 184         flex-grow: 1;
 185       }
 186
 187       .video-info-name {
 188         margin-right: 30px;
 189         min-height: 40px; // Align with the action buttons
 190         font-size: 27px;
 191         font-weight: $font-semibold;
 192         flex-grow: 1;
 193       }
 194
 195       .video-info-date-views {
 196         flex-grow: 1;
 197         margin-bottom: 10px;
 198         margin-right: 10px;
 199         font-size: 16px;
 200       }
 201
 202       .video-info-channel {
 203         font-weight: $font-semibold;
 204         font-size: 15px;
 205
 206         a {
 207           @include disable-default-a-behaviour;
 208
 209           color: var(--mainForegroundColor);
 210
 211           &:hover {
 212             opacity: 0.8;
 213           }
 214
 215           img {
 216             @include avatar(18px);
 217
 218             margin: -2px 2px 0 5px;
 219           }
 220         }
 221
 222         my-subscribe-button {
 223           margin-left: 5px;
 224         }
 225       }
 226
 227       .video-info-by {
 228
 229         a {
 230           @include disable-default-a-behaviour;
 231
 232           display: inline;
 233           align-items: center;
 234           font-size: 13px;
 235           color: var(--mainForegroundColor);
 236
 237           span:hover {
 238             opacity: 0.8;
 239           }
 240
 241           img {
 242             @include avatar(18px);
 243
 244             margin-top: -2px;
 245             margin-left: 7px;
 246           }
 247         }
 248
 249         my-help {
 250           position: relative;
 251           top: 1px;
 252           margin-left: 2px;
 253         }
 254       }
 255
 256       my-feed {
 257         margin-left: 5px;
 258         margin-top: 1px;
 259       }
 260
 261       .video-actions-rates {
 262         margin: 20px 0 10px 0;
 263         align-items: start;
 264
 265         .video-actions {
 266           height: 40px; // Align with the title
 267           display: flex;
 268           align-items: center;
 269
 270           .action-button:not(:first-child),
 271           .action-dropdown,
 272           my-video-actions-dropdown {
 273             margin-left: 10px;
 274           }
 275
 276           .action-button {
 277             @include peertube-button;
 278             @include grey-button;
 279             @include button-with-icon(21px, 0, -1px);
 280             @include apply-svg-color($grey-foreground-color);
 281
 282             font-size: 15px;
 283             font-weight: $font-semibold;
 284             display: inline-block;
 285             padding: 0 10px 0 10px;
 286             white-space: nowrap;
 287
 288             &::after {
 289               display: none;
 290             }
 291
 292             &.action-button-like.activated {
 293               background-color: $green;
 294
 295               my-global-icon {
 296                 @include apply-svg-color(#fff);
 297               }
 298             }
 299
 300             &.action-button-dislike.activated {
 301               background-color: $red;
 302
 303               my-global-icon {
 304                 @include apply-svg-color(#fff);
 305               }
 306             }
 307
 308             &.action-button-save {
 309               my-global-icon {
 310                 top: 0 !important;
 311                 right: -1px;
 312               }
 313             }
 314
 315             .icon-text {
 316               margin-left: 3px;
 317             }
 318           }
 319         }
 320
 321         .video-info-likes-dislikes-bar {
 322           $likes-bar-height: 2px;
 323           height: $likes-bar-height;
 324           margin-top: -$likes-bar-height;
 325           width: 186px;
 326           background-color: $red;
 327           position: relative;
 328           top: 10px;
 329
 330           .likes-bar {
 331             height: 100%;
 332             background-color: $green;
 333           }
 334         }
 335       }
 336     }
 337
 338     .video-info-description {
 339       margin: 20px 0;
 340       font-size: 15px;
 341
 342       .video-info-description-html {
 343         @include peertube-word-wrap;
 344       }
 345
 346       .glyphicon, .description-loading {
 347         margin-left: 3px;
 348       }
 349
 350       .description-loading {
 351         display: inline-block;
 352       }
 353
 354       .video-info-description-more {
 355         cursor: pointer;
 356         font-weight: $font-semibold;
 357         color: $grey-foreground-color;
 358         font-size: 14px;
 359
 360         .glyphicon {
 361           position: relative;
 362           top: 2px;
 363         }
 364       }
 365     }
 366
 367     .video-attributes .video-attribute {
 368       font-size: 13px;
 369       display: block;
 370       margin-bottom: 12px;
 371
 372       .video-attribute-label {
 373         min-width: 142px;
 374         padding-right: 5px;
 375         display: inline-block;
 376         color: $grey-foreground-color;
 377         font-weight: $font-bold;
 378       }
 379
 380       a.video-attribute-value {
 381         @include disable-default-a-behaviour;
 382         color: var(--mainForegroundColor);
 383
 384         &:hover {
 385           opacity: 0.9;
 386         }
 387       }
 388
 389       &.video-attribute-tags {
 390         .video-attribute-value:not(:nth-child(2)) {
 391           &::before {
 392             content: ', '
 393           }
 394         }
 395       }
 396     }
 397   }
 398
 399   /deep/ .other-videos {
 400     padding-left: 15px;
 401     flex-basis: $other-videos-width;
 402
 403     .title-page {
 404       margin-top: 0 !important;
 405     }
 406
 407     .video-miniature {
 408       display: flex;
 409       width: $other-videos-width;
 410       height: 100%;
 411       margin-bottom: 20px;
 412       flex-wrap: wrap;
 413
 414       .video-thumbnail {
 415         margin-right: 10px
 416       }
 417     }
 418   }
 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   width: calc(100% - #{$menu-width});
 430   margin-left: -15px;
 431 }
 432
 433 @media screen and (max-width: $small-view) {
 434   .privacy-concerns {
 435     margin-left: $menu-width;
 436   }
 437 }
 438
 439 :host-context(.expanded) {
 440   .privacy-concerns {
 441     width: 100%;
 442     margin-left: 0;
 443   }
 444 }
 445
 446 .privacy-concerns {
 447   position: fixed;
 448   bottom: 0;
 449
 450   padding: 5px 15px;
 451
 452   display: flex;
 453   align-items: center;
 454   justify-content: flex-start;
 455   background-color: rgba(0, 0, 0, 0.9);
 456   color: #fff;
 457
 458   .privacy-concerns-text {
 459     margin: 0 5px;
 460   }
 461
 462   a {
 463     @include disable-default-a-behaviour;
 464
 465     color: var(--mainColor);
 466     transition: color 0.3s;
 467
 468     &:hover {
 469       color: #fff;
 470     }
 471   }
 472
 473   .privacy-concerns-okay {
 474     background-color: var(--mainColor);
 475     padding: 5px 8px 5px 7px;
 476     margin-left: auto;
 477     border-radius: 3px;
 478     cursor: pointer;
 479     transition: background-color 0.3s;
 480     font-weight: $font-semibold;
 481
 482     &:hover {
 483       background-color: #000;
 484     }
 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 @media screen and (max-width: 1100px) {
 506   #video-wrapper {
 507     flex-direction: column;
 508     justify-content: center;
 509
 510     .playlist {
 511       @include playlist-below-player;
 512     }
 513   }
 514
 515   .video-bottom {
 516     flex-direction: column;
 517
 518     /deep/ .other-videos {
 519       padding-left: 0 !important;
 520
 521       /deep/ .video-miniature  {
 522         flex-direction: row;
 523         width: auto;
 524       }
 525     }
 526   }
 527 }
 528
 529 @media screen and (max-width: 600px) {
 530   .video-bottom {
 531     margin: 20px 0 0 0 !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   /deep/ .other-videos .video-miniature  {
 547     flex-direction: column;
 548   }
 549
 550   .privacy-concerns {
 551     width: 100%;
 552
 553     strong {
 554       display: none;
 555     }
 556   }
 557 }
 558
 559 @media screen and (max-width: 450px) {
 560   .video-bottom {
 561     .action-button .icon-text {
 562       display: none !important;
 563     }
 564
 565     .video-info .video-info-first-row {
 566       .video-info-name {
 567         font-size: 18px;
 568       }
 569
 570       .video-info-date-views {
 571         font-size: 14px;
 572       }
 573
 574       .video-actions-rates {
 575         margin-top: 10px;
 576       }
 577     }
 578
 579     .video-info-description {
 580       font-size: 14px !important;
 581     }
 582   }
 583 }