zoriya/Kyoo.Angular
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.Angular.git synced 2026-06-02 10:57:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix disposition and add New arrival and Resume

Browse Source
This commit is contained in:
Diabltica
2021-08-14 16:18:36 +02:00
parent 8550bc946b
commit 0df9ea2131
3 changed files with 114 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/homepage/homepage.component.html
+18 -3
View File
@@ -4,14 +4,29 @@
<img id="backdrop" [src]="this.show.backdrop" alt="backdrop" />
</div>
<div class="textBox">
<p class="show-title"><strong>{{this.show.title}}</strong></p>
<br>
<h1><p class="title">{{this.show.title}}</p></h1>
<p class="show-overview">{{this.show.overview}}</p>
<br>
<button mat-raised-button matTooltipPosition="above" matTooltip="Info" class="mr-5" color="accent" (click)="infoClicked()">
More infos <mat-icon>info</mat-icon>
</button>
<button mat-raised-button matTooltipPosition="above" matTooltip="Play" class="mr-5" color="accent" (click)="playClicked()">
Watch <mat-icon>play_arrow</mat-icon>
</button>
</div>
</div>
<br>
<div class="arrival">
<h3><p class="title">New Arrival</p></h3>
<app-episodes-list [episodes]="episodes[season]"></app-episodes-list>
</div>
<br>
<br>
<div class="resume">
<h3><p class="title">Resume</p> </h3>
<app-episodes-list [episodes]="episodes[season]"></app-episodes-list>
</div>
</div>
src/app/pages/homepage/homepage.component.scss
+40 -24
View File
@@ -15,13 +15,13 @@
margin-left: auto;
margin-right: auto;
width: 100%;
max-height: 100vh;
max-height: 80vh;
object-fit: cover;
min-height: 50vh;
@include media-breakpoint-up(md)
{
min-height: 100vh;
min-height: 80vh;
}
}
@@ -35,37 +35,42 @@
right: 0;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%),
linear-gradient(to left,rgba(0, 0, 0, 0.7),rgba(0,0,0,0),rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 1));
//@include media-breakpoint-down(md){
// background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(11, 18, 41) 100%),
// linear-gradient(to left,rgba(0, 0, 0, 0.7),rgba(0,0,0,0),rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 1));
//}
}
}
.textBox
{
position: static;
text-align: justify;
//top:90%;
margin-top: -10%;
padding-left: 3%;
padding-right: 3%;
padding-left: 2.5em;
@include media-breakpoint-down(md){
position: relative;
margin-top: -30%;
padding-right: 3%;
}
@include media-breakpoint-up(md)
{
top:55%;
position: absolute;
right: 50%;
top:30vh;
right: 60%;
}
@include media-breakpoint-up(lg)
{
top:55%;
position: absolute;
right: 60%;
top:30vh;
right: 70%;
}
@include media-breakpoint-up(xl)
{
position: absolute;
top:55%;
right: 60%;
top:30vh;
right: 70%;
}
}
@@ -73,23 +78,34 @@
position: relative;
}
.show-title
.title
{
font-size: x-large;
color: white;
font-weight: bold;
opacity: 100%;
@include media-breakpoint-up(lg)
{
font-size: xx-large;
}
@include media-breakpoint-up(xl)
{
font-size: xxx-large;
}
}
.show-overview
{
opacity: 100%;
@include media-breakpoint-down(md){
position: absolute;
visibility: hidden;
}
@include media-breakpoint-up(md){
visibility: visible;
}
@include media-breakpoint-up(lg){
visibility: visible;
}
@include media-breakpoint-up(xl){
visibility: visible;
}
}
.arrival
{
padding-left: 2.5em;
}
.resume
{
padding-left: 2.5em;
}
src/app/pages/homepage/homepage.component.ts
+56 -24
View File
@@ -47,11 +47,21 @@ export class HomepageComponent implements AfterViewInit, OnDestroy
this.route.data.subscribe(data =>
{
this.show = data.show;
//
// this.peopleService.getFromShow(this.show.slug).subscribe(x => this.people = x);
// if (this.show.isMovie)
// return;
this.peopleService.getFromShow(this.show.slug).subscribe(x => this.people = x);
if (this.show.isMovie)
return;
this.seasons = this.show.seasons;
if (!this.seasons.find(y => y.seasonNumber === this.season))
{
this.season = 1;
this.getEpisodes(1);
}
else
this.getEpisodes(this.season);
});
}
@@ -68,25 +78,47 @@ export class HomepageComponent implements AfterViewInit, OnDestroy
this.router.navigate(["/watch/" + this.show.slug + "-s1e1"]);
}
}
ngAfterViewInit(): void
{
this.scrollZone = document.getElementById("main");
this.toolbar = document.getElementById("toolbar");
this.backdrop = document.getElementById("backdrop");
this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, 0) !important`);
this.scrollZone.style.marginTop = "0";
this.scrollZone.style.maxHeight = "100vh";
// this.scrollZone.addEventListener("scroll", () => this.scroll());
}
ngOnDestroy(): void
{
this.title.setTitle("Kyoo");
this.toolbar.setAttribute("style", `background-color: #000000 !important`);
this.scrollZone.style.marginTop = null;
this.scrollZone.style.maxHeight = null;
}
scroll(): void {
const opacity: number = 2 * this.scrollZone.scrollTop / this.backdrop.clientHeight;
}
infoClicked(): void
{
if (this.show.isMovie) {
this.router.navigate(["/show/" + this.show.slug]);
}
else {
this.router.navigate(["/show/" + this.show.slug + "?season=1"]);
}
}
ngAfterViewInit(): void
{
this.scrollZone = document.getElementById("main");
this.toolbar = document.getElementById("toolbar");
this.backdrop = document.getElementById("backdrop");
this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, 0) !important`);
this.scrollZone.style.marginTop = "0";
this.scrollZone.style.maxHeight = "100vh";
this.scrollZone.addEventListener("scroll", () => this.scroll());
}
ngOnDestroy(): void
{
this.title.setTitle("Kyoo");
this.toolbar.setAttribute("style", `background-color: #000000 !important`);
this.scrollZone.style.marginTop = null;
this.scrollZone.style.maxHeight = null;
this.scrollZone.removeEventListener("scroll", () => this.scroll());
}
scroll(): void {
const opacity: number = 2 * this.scrollZone.scrollTop / this.backdrop.clientHeight;
this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, ${opacity}) !important`);
}
getEpisodes(season: number): void
{
if (season < 0 || this.episodes[season])
return;
this.episodeService.getFromSeasonNumber(this.show.slug, this.season).subscribe(x =>
{
this.episodes[season] = x;
});
}
}