Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-22 23:10:35 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixing the resolution of the poster in the show details to 16/9

Browse Source
This commit is contained in:
Zoe Roux 2020-10-31 04:13:00 +01:00
parent 64a28a2708
commit 3de2e74ecf
4 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/pages/show-details/show-details.component.html
View File

@ -4,7 +4,9 @@
<div class="header container pt-sm-5"> <div class="header container pt-sm-5">
<div class="row"> <div class="row">
<img class="poster d-none d-sm-block" src="poster/{{this.show.slug}}" alt=""/> <div class="poster d-none d-sm-block">
<div [style.background-image]="getThumb(this.show.slug)"></div>
</div>
<div class="main col"> <div class="main col">
<div class="info"> <div class="info">
<h1 class="title">{{this.show.title}}</h1> <h1 class="title">{{this.show.title}}</h1>

10
src/app/pages/show-details/show-details.component.scss
View File

@ -64,12 +64,20 @@ a
.poster .poster
{ {
width: 33%; width: 33%;
background-color: #333333;
@include media-breakpoint-up(md) @include media-breakpoint-up(md)
{ {
width: 25%; width: 25%;
} }
> div
{
width: 100%;
height: 0;
padding-top: 147.0588%;
background-size: cover;
background-color: #333333;
}
} }
.main .main

15
src/app/pages/show-details/show-details.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, HostListener, OnInit } from "@angular/core";
import { MatSnackBar } from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
import { Title } from '@angular/platform-browser'; import { DomSanitizer, Title } from "@angular/platform-browser";
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import { Episode } from "../../models/resources/episode"; import { Episode } from "../../models/resources/episode";
import { Show } from "../../models/resources/show"; import { Show } from "../../models/resources/show";
@ -30,6 +30,7 @@ export class ShowDetailsComponent implements OnInit
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private snackBar: MatSnackBar, private snackBar: MatSnackBar,
private sanitizer: DomSanitizer,
private title: Title, private title: Title,
private router: Router, private router: Router,
private dialog: MatDialog, private dialog: MatDialog,
@ -68,23 +69,27 @@ export class ShowDetailsComponent implements OnInit
{ {
this.toolbar = document.getElementById("toolbar"); this.toolbar = document.getElementById("toolbar");
this.backdrop = document.getElementById("backdrop"); this.backdrop = document.getElementById("backdrop");
window.addEventListener("scroll", this.scroll, true);
this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, 0) !important`); this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, 0) !important`);
} }
ngOnDestroy() ngOnDestroy()
{ {
window.removeEventListener("scroll", this.scroll, true);
this.title.setTitle("Kyoo"); this.title.setTitle("Kyoo");
this.toolbar.setAttribute("style", `background-color: #000000 !important`); this.toolbar.setAttribute("style", `background-color: #000000 !important`);
} }
scroll = () => @HostListener("window:scroll")
scroll()
{ {
let opacity: number = 2 * window.scrollY / this.backdrop.clientHeight; let opacity: number = 2 * window.scrollY / this.backdrop.clientHeight;
this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, ${opacity}) !important`); this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, ${opacity}) !important`);
}; };
getThumb(slug: string)
{
return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");
}
playClicked() playClicked()
{ {
if (this.show.isMovie) if (this.show.isMovie)