diff --git a/src/app/components/items-grid/items-grid.component.html b/src/app/components/items-grid/items-grid.component.html index a85f1b5e..8dbcda25 100644 --- a/src/app/components/items-grid/items-grid.component.html +++ b/src/app/components/items-grid/items-grid.component.html @@ -91,7 +91,7 @@
-
+

{{item.title ? item.title : item.name}}

{{getDate(item)}}

diff --git a/src/app/pages/show-details/show-details.component.html b/src/app/pages/show-details/show-details.component.html index 012ef135..937d03b0 100644 --- a/src/app/pages/show-details/show-details.component.html +++ b/src/app/pages/show-details/show-details.component.html @@ -4,7 +4,9 @@
- +
+
+

{{this.show.title}}

diff --git a/src/app/pages/show-details/show-details.component.scss b/src/app/pages/show-details/show-details.component.scss index 3b9b8b57..f50a8ddc 100644 --- a/src/app/pages/show-details/show-details.component.scss +++ b/src/app/pages/show-details/show-details.component.scss @@ -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; } } -} \ No newline at end of file +} diff --git a/src/app/pages/show-details/show-details.component.ts b/src/app/pages/show-details/show-details.component.ts index 5ce50e85..33d09619 100644 --- a/src/app/pages/show-details/show-details.component.ts +++ b/src/app/pages/show-details/show-details.component.ts @@ -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)