Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-22 15:00: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

2
src/app/components/items-grid/items-grid.component.html
View File

@ -91,7 +91,7 @@
<div class="container-fluid justify-content-center" infinite-scroll (scrolled)="this.page?.loadNext(this.client)">
<a class="show" *ngFor="let item of this.page?.items" [href]="getLink(item)" [routerLink]="getLink(item)">
<div matRipple [style.background-image]="getThumb(item.slug)" > </div>
<div matRipple [style.background-image]="getThumb(item.slug)"></div>
<p class="title">{{item.title ? item.title : item.name}}</p>
<p class="date">{{getDate(item)}}</p>
</a>

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="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="info">
<h1 class="title">{{this.show.title}}</h1>

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

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

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