Using images uri returned by the api

src/app/app-routing.module.ts

@@ -73,7 +73,7 @@ const routes: Routes = [
 	},
 
 	{path: "show/:slug", component: ShowDetailsComponent,
-		resolve: {show: ItemResolver.forResource<Show>("shows/:slug?fields=studio,genres")},
+		resolve: {show: ItemResolver.forResource<Show>("shows/:slug?fields=studio,genres,seasons,externalIDs")},
 		canLoad: [AuthGuard.forPermissions("read")],
 		canActivate: [AuthGuard.forPermissions("read")]
 	},

src/app/components/items-grid/items-grid.component.html

@@ -26,7 +26,7 @@
 	</ng-container>
 
 	<br/>
-	
+
 	<ng-container>
 		<mat-form-field class="w-100 px-3" (click)="$event.stopPropagation();">
 			<mat-label>Studio</mat-label>
@@ -93,7 +93,7 @@
      infinite-scroll (scrolled)="this.page?.loadNext(this.client)" infiniteScrollContainer="#main" fromRoot="true">
 	<a class="show" *ngFor="let item of this.page?.items" draggable="false"
 	   [href]="getLink(item)" [routerLink]="getLink(item)">
-		<div matRipple [style.background-image]="getThumb(item.slug)"></div>
+		<div matRipple [style.background-image]="getPoster(item)"></div>
 		<p class="title">{{item.title ? item.title : item.name}}</p>
 		<p class="date">{{getDate(item)}}</p>
 	</a>

src/app/components/items-grid/items-grid.component.ts

@@ -275,9 +275,9 @@ export class ItemsGridComponent implements OnInit
 		return obj?.name ?? "None";
 	}
 
-	getThumb(slug: string): SafeStyle
+	getPoster(obj: LibraryItem | Show | ShowRole | Collection): SafeStyle
 	{
-		return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");
+		return this.sanitizer.bypassSecurityTrustStyle(`url(${obj.poster})`);
 	}
 
 	getDate(item: LibraryItem | Show | ShowRole | Collection): string

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

@@ -1,8 +1,9 @@
 <div class="scroll-row mb-5">
-	<div class="container" #scrollView (scroll)="onScroll()" infinite-scroll (scrolled)="this.items?.loadNext(this.client)" [horizontal]="true" [scrollWindow]="false">
+	<div class="container" #scrollView (scroll)="onScroll()"
+		 infinite-scroll (scrolled)="this.items?.loadNext(this.client)" [horizontal]="true" [scrollWindow]="false">
 		<a class="item" *ngFor="let item of this.items?.items" draggable="false"
 		   [routerLink]="getLink(item)" [href]="getLink(item)" #itemsDom>
-			<div matRipple [style.background-image]="getThumb(item.slug)"> </div>
+			<div matRipple [style.background-image]="getPoster(item)"> </div>
 			<p class="title">{{item.title ? item.title : item.name}}</p>
 			<p class="date">{{getDate(item)}}</p>
 		</a>

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

@@ -22,9 +22,9 @@ export class ItemsListComponent extends HorizontalScroller
 		super();
 	}
 
-	getThumb(slug: string): SafeUrl
+	getPoster(item: LibraryItem | Show | ShowRole | Collection): SafeUrl
 	{
-		return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");
+		return this.sanitizer.bypassSecurityTrustStyle(`url(${item.poster})`);
 	}
 
 	getDate(item: LibraryItem | Show | ShowRole | Collection): string

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

@@ -4,7 +4,7 @@
 	     [horizontal]="true" [scrollWindow]="false">
 		<a class="people" *ngFor="let people of this.people?.items" draggable="false"
 		   routerLink="/people/{{people.slug}}" href="/people/{{people.slug}}" #itemsDom>
-			<div matRipple [style.background-image]="getPeopleIcon(people.slug)"> </div>
+			<div matRipple [style.background-image]="getPeopleIcon(people)"> </div>
 			<h6 class="name">{{people.name}}</h6>
 			<p class="role">{{people.role}}</p>
 		</a>

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

@@ -19,8 +19,8 @@ export class PeopleListComponent extends HorizontalScroller
 		super();
 	}
 
-	getPeopleIcon(slug: string): SafeStyle
+	getPeopleIcon(item: People): SafeStyle
 	{
-		return this.sanitizer.bypassSecurityTrustStyle("url(/peopleimg/" + slug + ")");
+		return this.sanitizer.bypassSecurityTrustStyle(`url(${item.poster})`);
 	}
 }

src/app/pages/collection/collection.component.ts

@@ -29,7 +29,7 @@ export class CollectionComponent
 
 	getThumb(): SafeStyle
 	{
-		return this.sanitizer.bypassSecurityTrustStyle("url(" + this.collection.poster + ")");
+		return this.sanitizer.bypassSecurityTrustStyle(`url(${this.collection.poster})`);
 	}
 
 	getDate(item: LibraryItem | Show | ShowRole | Collection | People): string

src/app/pages/player/player.component.html

@@ -4,7 +4,7 @@
      [style.cursor]="this.showControls ? '' : 'none'">
 	<div class="player data-vjs-player">
 		<video id="player" #player
-		       poster="backdrop/{{this.item.showSlug}}"
+			   [poster]="this.item.backdrop"
 		       autoplay muted
 		       (click)="this.videoClicked()"
 		       (dblclick)="this.fullscreen()"
@@ -75,7 +75,7 @@
 
 		<div class="controller container-fluid" id="controller">
 			<div class="img d-none d-sm-block">
-				<img src="poster/{{this.item.showSlug}}" alt="poster" />
+				<img [src]="this.item.poster" alt="poster" />
 			</div>
 			<div class="content">
 				<h3 *ngIf="!this.item.isMovie">S{{this.item.seasonNumber}}:E{{this.item.episodeNumber}} - {{this.item.title}}</h3>

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

@@ -1,11 +1,11 @@
 <div class="backdrop">
-	<img id="backdrop" src="backdrop/{{this.show.slug}}" alt="backdrop" />
+	<img id="backdrop" [src]="this.show.backdrop" alt="backdrop" />
 </div>
 
 <div class="header container pt-sm-5">
 	<div class="row">
 		<div class="poster d-none d-sm-block">
-			<div [style.background-image]="getThumb(this.show.slug)"></div>
+			<div [style.background-image]="getThumb(this.show)"></div>
 		</div>
 		<div class="main col">
 			<div class="info">
@@ -34,7 +34,7 @@
 			</div>
 		</div>
 		<div class="col-3 secondary d-none d-md-block">
-			<img src="logo/{{this.show.slug}}" #logo alt="" (error)="logo.style.display = 'none'" />
+			<img [src]="this.show.logo" #logo alt="" (error)="logo.style.display = 'none'" />
 
 			<div>
 				<p>Studio: <b><a draggable="false"

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

@@ -53,20 +53,18 @@ export class ShowDetailsComponent implements AfterViewInit, OnDestroy
 
 			this.peopleService.getFromShow(this.show.slug).subscribe(x => this.people = x);
 
-			if (this.show.isMovie) {
+			if (this.show.isMovie)
 				return;
-			}
 
-			this.seasonService.getForShow(this.show.slug, {limit: 0}).subscribe(x =>
+			this.seasons = this.show.seasons;
+			if (!this.seasons.find(y => y.seasonNumber === this.season))
 			{
-				this.seasons = x.items;
+				this.season = 1;
-				if (x.items.find(y => y.seasonNumber === this.season) == null)
+				this.getEpisodes(1);
-				{
+			}
-					this.season = 1;
+			else
-					this.getEpisodes(1);
+				this.getEpisodes(this.season);
-				}
+		});
-			});
-			this.getEpisodes(this.season); });
 	}
 
 	ngAfterViewInit(): void
@@ -95,9 +93,9 @@ export class ShowDetailsComponent implements AfterViewInit, OnDestroy
 		this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, ${opacity}) !important`);
 	}
 
-	getThumb(slug: string): SafeStyle
+	getThumb(item: Show): SafeStyle
 	{
-		return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");
+		return this.sanitizer.bypassSecurityTrustStyle(`url(${item.poster})`);
 	}
 
 	playClicked(): void
@@ -119,6 +117,12 @@ export class ShowDetailsComponent implements AfterViewInit, OnDestroy
 		{
 			this.episodes[season] = x;
 		});
+		this.router.navigate([], {
+			relativeTo: this.route,
+			queryParams: {season},
+			replaceUrl: true,
+			queryParamsHandling: "merge",
+		});
 	}
 
 	openTrailer(): void