Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -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="episode" *ngFor="let episode of this.episodes">
<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 class="root">
<div class="episodes" id="episodes">
<div class="episode" *ngFor="let episode of this.episodes" id="{{episode.episodeNumber}}">
<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>
<p class="title">S{{episode.seasonNumber}}E{{episode.episodeNumber}} - {{episode.title}}</p>
<p class="overview">{{episode.overview}}</p>
</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" id="rightBtn"><mat-icon>arrow_right</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" (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
</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//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;
&: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
{
display: inline-block;
margin: .25rem;
padding: .25rem;
flex-shrink: 0;
width: 55%;
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()
{
this.root = document.getElementById("episodes");
document.getElementById("leftBtn").onclick = function ()
{
console.log(this.root);
}
}
sanitize(url: string)
@ -29,21 +24,35 @@ export class EpisodesListComponent implements OnInit
return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
}
/*document.getElementById("left-scroll").onclick = function()
{
slider.scrollBy({ top: 0, left: -slider.offsetWidth * 0.66, behavior: "smooth" });
document.getElementById("right-scroll").style.display = "inline-block";
scrollLeft()
{
let scroll: number = this.roundScroll(this.root.offsetWidth * 0.80);
this.root.scrollBy({ top: 0, left: -scroll, behavior: "smooth" });
if (slider.scrollLeft - slider.offsetWidth * 0.66 <= 0)
document.getElementById("left-scroll").style.display = "none";
}
document.getElementById("rightBtn").classList.remove("d-none");
document.getElementById("right-scroll").onclick = function()
{
slider.scrollBy({ top: 0, left: slider.offsetWidth * 0.66, behavior: "smooth" });
document.getElementById("left-scroll").style.display = "inline-block";
if (this.root.scrollLeft - scroll <= 0)
document.getElementById("leftBtn").classList.add("d-none");
}
if (slider.scrollLeft + slider.offsetWidth * 0.66 + 10 >= slider.scrollWidth - slider.clientWidth)
document.getElementById("right-scroll").style.display = "none";
}*/
scrollRight()
{
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;
}
}