Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 20:24:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

Finishing episodes display.

Browse Source
This commit is contained in:
Zoe Roux 2019-09-02 14:25:22 +02:00
parent 2ed22e1206
commit 37fdcfa2a3
3 changed files with 51 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.html
View File

@ -1,11 +1,13 @@
<div class="episodes" id="episodes"> <div class="root">
<div class="episode" *ngFor="let episode of this.episodes"> <div class="episodes" id="episodes">
<div class="img" [style.background-image]="sanitize(episode.thumb)"> <div class="episode" *ngFor="let episode of this.episodes" id="{{episode.episodeNumber}}">
<button mat-icon-button id="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button> <div class="img" [style.background-image]="sanitize(episode.thumb)">
<button mat-icon-button id="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button>
</div>
<p class="title">S{{episode.seasonNumber}}E{{episode.episodeNumber}} - {{episode.title}}</p>
<p class="overview">{{episode.overview}}</p>
</div> </div>
<p class="title">S{{episode.seasonNumber}}E{{episode.episodeNumber}} - {{episode.title}}</p>
<p class="overview">{{episode.overview}}</p>
</div> </div>
<button mat-raised-button color="accent" class="scrollBtn" id="leftBtn"><mat-icon>arrow_left</mat-icon></button> <button mat-raised-button color="accent" class="scrollBtn d-none" id="leftBtn" (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
<button mat-raised-button color="accent" class="scrollBtn" id="rightBtn"><mat-icon>arrow_right</mat-icon></button> <button mat-raised-button color="accent" class="scrollBtn" id="rightBtn" (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
</div> </div>

22
Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.scss
View File

@ -2,15 +2,8 @@
@import "~bootstrap/scss/variables"; @import "~bootstrap/scss/variables";
@import "~bootstrap/scss//mixins/breakpoints"; @import "~bootstrap/scss//mixins/breakpoints";
.episodes .root
{ {
display: flex;
padding-left: 15px;
padding-right: 15px;
overflow-x: auto;
min-width: 100%;
flex-shrink: 0;
flex-direction: row;
position: relative; position: relative;
&:hover &:hover
@ -22,10 +15,21 @@
} }
} }
.episodes
{
display: flex;
padding-left: 15px;
padding-right: 15px;
overflow-x: auto;
min-width: 100%;
flex-shrink: 0;
flex-direction: row;
}
.episode .episode
{ {
display: inline-block; display: inline-block;
margin: .25rem; padding: .25rem;
flex-shrink: 0; flex-shrink: 0;
width: 55%; width: 55%;
cursor: pointer; cursor: pointer;

47
Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.ts
View File

@ -17,11 +17,6 @@ export class EpisodesListComponent implements OnInit
ngOnInit() ngOnInit()
{ {
this.root = document.getElementById("episodes"); this.root = document.getElementById("episodes");
document.getElementById("leftBtn").onclick = function ()
{
console.log(this.root);
}
} }
sanitize(url: string) sanitize(url: string)
@ -29,21 +24,35 @@ export class EpisodesListComponent implements OnInit
return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")"); return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
} }
/*document.getElementById("left-scroll").onclick = function() scrollLeft()
{ {
slider.scrollBy({ top: 0, left: -slider.offsetWidth * 0.66, behavior: "smooth" }); let scroll: number = this.roundScroll(this.root.offsetWidth * 0.80);
document.getElementById("right-scroll").style.display = "inline-block"; this.root.scrollBy({ top: 0, left: -scroll, behavior: "smooth" });
if (slider.scrollLeft - slider.offsetWidth * 0.66 <= 0) document.getElementById("rightBtn").classList.remove("d-none");
document.getElementById("left-scroll").style.display = "none";
}
document.getElementById("right-scroll").onclick = function() if (this.root.scrollLeft - scroll <= 0)
{ document.getElementById("leftBtn").classList.add("d-none");
slider.scrollBy({ top: 0, left: slider.offsetWidth * 0.66, behavior: "smooth" }); }
document.getElementById("left-scroll").style.display = "inline-block";
if (slider.scrollLeft + slider.offsetWidth * 0.66 + 10 >= slider.scrollWidth - slider.clientWidth) scrollRight()
document.getElementById("right-scroll").style.display = "none"; {
}*/ let scroll: number = this.roundScroll(this.root.offsetWidth * 0.80);
this.root.scrollBy({ top: 0, left: scroll, behavior: "smooth" });
document.getElementById("leftBtn").classList.remove("d-none");
if (this.root.scrollLeft + scroll >= this.root.scrollWidth - this.root.clientWidth)
document.getElementById("rightBtn").classList.add("d-none");
}
roundScroll(offset: number): number
{
let episodeSize: number = document.getElementById("1").scrollWidth;
offset = Math.round(offset / episodeSize) * episodeSize;
if (offset == 0)
offset = episodeSize;
return offset;
}
} }