The people list now uses the new api

src/app/components/people-list/people-list.component.html

@@ -1,6 +1,6 @@
 <div class="scroll-row mb-5">
-	<div class="people-container" #scrollView (scroll)="onScroll()">
-		<a class="people" *ngFor="let people of this.people" routerLink="/people/{{people.slug}}" href="/people/{{people.slug}}">
+	<div class="people-container" #scrollView (scroll)="onScroll()" infinite-scroll (scrolled)="this.people?.loadNext(this.client)" [horizontal]="true" [scrollWindow]="false">
+		<a class="people" *ngFor="let people of this.people?.items" routerLink="/people/{{people.slug}}" href="/people/{{people.slug}}" #itemsDom>
 			<div matRipple [style.background-image]="getPeopleIcon(people.slug)"> </div>
 			<h6 class="name">{{people.name}}</h6>
 			<p class="role">{{people.role}}</p>

src/app/components/people-list/people-list.component.ts

@@ -2,43 +2,22 @@ import { Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { MatButton } from "@angular/material/button";
 import { DomSanitizer } from "@angular/platform-browser";
 import { People } from "../../../models/people";
+import {HorizontalScroller} from "../../misc/horizontal-scroller";
+import {Page} from "../../../models/page";
+import {HttpClient} from "@angular/common/http";
 
 @Component({
 	selector: 'app-people-list',
 	templateUrl: './people-list.component.html',
 	styleUrls: ['./people-list.component.scss']
 })
-export class PeopleListComponent
+export class PeopleListComponent extends HorizontalScroller
 {
-	@Input() people: People[];
-	@ViewChild("scrollView", { static: true }) private scrollView: ElementRef;
-	@ViewChild("leftBtn", { static: false }) private leftBtn: MatButton;
-	@ViewChild("rightBtn", { static: false }) private rightBtn: MatButton;
+	@Input() people: Page<People>;
 
-	constructor(private sanitizer: DomSanitizer) { }
-
-	scrollLeft()
+	constructor(private sanitizer: DomSanitizer, public client: HttpClient)
 	{
-		let scroll: number = this.scrollView.nativeElement.offsetWidth * 0.80;
-		this.scrollView.nativeElement.scrollBy({ top: 0, left: -scroll, behavior: "smooth" });
-	}
-
-	scrollRight()
-	{
-		let scroll: number = this.scrollView.nativeElement.offsetWidth * 0.80;
-		this.scrollView.nativeElement.scrollBy({ top: 0, left: scroll, behavior: "smooth" });
-	}
-
-	onScroll()
-	{
-		if (this.scrollView.nativeElement.scrollLeft <= 0)
-			this.leftBtn._elementRef.nativeElement.classList.add("d-none");
-		else
-			this.leftBtn._elementRef.nativeElement.classList.remove("d-none");
-		if (this.scrollView.nativeElement.scrollLeft >= this.scrollView.nativeElement.scrollWidth - this.scrollView.nativeElement.clientWidth)
-			this.rightBtn._elementRef.nativeElement.classList.add("d-none");
-		else
-			this.rightBtn._elementRef.nativeElement.classList.remove("d-none");
+		super();
 	}
 
 	getPeopleIcon(slug: string)

src/app/pages/show-details/show-details.component.html

@@ -89,4 +89,4 @@
 <div class="container-fluid mt-5">
 	<h3>Staff</h3>
 </div>
-<app-people-list [people]="show.people"></app-people-list>
+<app-people-list [people]="people"></app-people-list>

src/app/pages/show-details/show-details.component.ts

@@ -8,8 +8,9 @@ import {MatDialog} from "@angular/material/dialog";
 import {TrailerDialogComponent} from "../trailer-dialog/trailer-dialog.component";
 import {MetadataEditComponent} from "../metadata-edit/metadata-edit.component";
 import {Season} from "../../../models/season";
-import {EpisodeService, SeasonService} from "../../services/api.service";
+import {EpisodeService, PeopleService, SeasonService} from "../../services/api.service";
 import {Page} from "../../../models/page";
+import {People} from "../../../models/people";
 
 @Component({
 	selector: 'app-show-details',
@@ -22,6 +23,7 @@ export class ShowDetailsComponent implements OnInit
 	seasons: Season[];
 	season: number = 1;
 	episodes: Page<Episode>[] = [];
+	people: Page<People>;
 
 	private toolbar: HTMLElement;
 	private backdrop: HTMLElement;
@@ -32,7 +34,8 @@ export class ShowDetailsComponent implements OnInit
 	            private router: Router,
 	            private dialog: MatDialog,
 	            private seasonService: SeasonService,
-	            private episodeService: EpisodeService)
+	            private episodeService: EpisodeService,
+	            private peopleService: PeopleService)
 	{
 		this.route.queryParams.subscribe(params =>
 		{
@@ -57,6 +60,7 @@ export class ShowDetailsComponent implements OnInit
 				}
 			});
 			this.getEpisodes(this.season);
+			this.peopleService.getFromShow(this.show.slug).subscribe(x => this.people = x);
 		});
 	}
 

src/app/services/api.service.ts

@@ -8,6 +8,7 @@ import {LibraryItem} from "../../models/library-item";
 import {map} from "rxjs/operators";
 import {Season} from "../../models/season";
 import {Episode} from "../../models/episode";
+import {People} from "../../models/people";
 
 export interface ApiArgs
 {
@@ -118,3 +119,20 @@ export class EpisodeService extends CrudApi<Episode>
 			.pipe(map(x => Object.assign(new Page<Episode>(), x)));
 	}
 }
+
+@Injectable({
+	providedIn: 'root'
+})
+export class PeopleService extends CrudApi<People>
+{
+	constructor(client: HttpClient)
+	{
+		super(client, "people");
+	}
+
+	getFromShow(show: string | number, args?: ApiArgs): Observable<Page<People>>
+	{
+		return this.client.get(`/api/shows/${show}/people${this.ArgsAsQuery(args)}`)
+			.pipe(map(x => Object.assign(new Page<People>(), x)));
+	}
+}

src/models/people.ts

@@ -1,8 +1,8 @@
 import {ExternalID} from "./external-id";
+import {IResource} from "./resources/resource";
 
-export interface People
+export interface People extends IResource
 {
-	slug: string;
 	name: string;
 	role: string; 
 	type: string;