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