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