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