From 8a1de18da423a96598974071cfe9b501ac54f742 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Mon, 3 Aug 2020 02:26:28 +0200
Subject: [PATCH] Handling differed loading for the episode list

---
 src/app/components/episodes-list/episodes-list.component.html | 4 ++--
 src/app/components/episodes-list/episodes-list.component.ts   | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/components/episodes-list/episodes-list.component.html b/src/app/components/episodes-list/episodes-list.component.html
index 27e6ac21..73390c12 100644
--- a/src/app/components/episodes-list/episodes-list.component.html
+++ b/src/app/components/episodes-list/episodes-list.component.html
@@ -1,6 +1,6 @@
 <div class="root">
-	<div class="episodes" #scrollView (scroll)="onScroll()">
-		<div class="episode" *ngFor="let episode of this.episodes?.items" #itemsDom >
+	<div class="episodes" #scrollView (scroll)="onScroll()" infinite-scroll (scrolled)="this.episodes?.loadNext(this.client)" [horizontal]="true" [scrollWindow]="false">
+		<div class="episode" *ngFor="let episode of this.episodes?.items" #itemsDom>
 			<button mat-icon-button class="moreBtn" [matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"><i class="material-icons">more_vert</i></button>
 			<a routerLink="/watch/{{episode.slug}}" href="/watch/{{episode.slug}}">
 				<div matRipple class="img" [style.background-image]="sanitize(episode.thumb)">
diff --git a/src/app/components/episodes-list/episodes-list.component.ts b/src/app/components/episodes-list/episodes-list.component.ts
index 6cc1de6e..2db12da3 100644
--- a/src/app/components/episodes-list/episodes-list.component.ts
+++ b/src/app/components/episodes-list/episodes-list.component.ts
@@ -3,6 +3,7 @@ import { DomSanitizer } from "@angular/platform-browser";
 import { Episode } from "../../../models/episode";
 import {HorizontalScroller} from "../../misc/horizontal-scroller";
 import {Page} from "../../../models/page";
+import {HttpClient} from "@angular/common/http";
 
 @Component({
 	selector: 'app-episodes-list',
@@ -14,7 +15,7 @@ export class EpisodesListComponent extends HorizontalScroller
 	@Input() displayShowTitle: boolean = false;
 	@Input() episodes: Page<Episode>;
 
-	constructor(private sanitizer: DomSanitizer)
+	constructor(private sanitizer: DomSanitizer, public client: HttpClient)
 	{
 		super();
 	}