Updating to the new images API

src/app/app.module.ts

@@ -34,7 +34,7 @@ import { MatTabsModule } from "@angular/material/tabs";
 import { PasswordValidator } from "./misc/password-validator";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatDialogModule } from "@angular/material/dialog";
-import { FallbackDirective } from "./misc/fallback.directive";
+import { FallbackDirective, FallbackPipe } from "./misc/fallback.directive";
 import { AuthModule } from "./auth/auth.module";
 import { AuthRoutingModule } from "./auth/auth-routing.module";
 import { TrailerDialogComponent } from "./pages/trailer-dialog/trailer-dialog.component";
@@ -73,7 +73,8 @@ import { MatDatepickerModule } from "@angular/material/datepicker";
 		BufferToWidthPipe,
 		VolumeToButtonPipe,
 		SupportedButtonPipe,
-		LongPressDirective
+		LongPressDirective,
+		FallbackPipe
 	],
 	imports: [
 		BrowserModule,
@@ -110,7 +111,8 @@ import { MatDatepickerModule } from "@angular/material/datepicker";
 	],
 	bootstrap: [AppComponent],
 	exports: [
-		FallbackDirective
+		FallbackDirective,
+		FallbackPipe
 	],
 	providers: [
 		StartupService,

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

@@ -25,6 +25,8 @@ export class EpisodesListComponent extends HorizontalScroller
 
 	sanitize(url: string): SafeStyle
 	{
+		if (!url)
+			return undefined;
 		return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
 	}
 

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

@@ -276,6 +276,8 @@ export class ItemsGridComponent implements OnInit
 
 	getPoster(obj: LibraryItem | Show | ShowRole | Collection): SafeStyle
 	{
+		if (!obj.poster)
+			return undefined;
 		return this.sanitizer.bypassSecurityTrustStyle(`url(${obj.poster})`);
 	}
 

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

@@ -25,6 +25,8 @@ export class ItemsListComponent extends HorizontalScroller
 
 	getPoster(item: LibraryItem | Show | ShowRole | Collection): SafeUrl
 	{
+		if (!item.poster)
+			return undefined;
 		return this.sanitizer.bypassSecurityTrustStyle(`url(${item.poster})`);
 	}
 

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

@@ -21,6 +21,8 @@ export class PeopleListComponent extends HorizontalScroller
 
 	getPeopleIcon(item: People): SafeStyle
 	{
+		if (!item.poster)
+			return undefined;
 		return this.sanitizer.bypassSecurityTrustStyle(`url(${item.poster})`);
 	}
 }

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

@@ -18,6 +18,8 @@ export class ShowGridComponent
 
 	getThumb(show: Show): SafeStyle
 	{
+		if (!show.poster)
+			return undefined;
 		return this.sanitizer.bypassSecurityTrustStyle(`url(${show.poster})`);
 	}
 

src/app/misc/fallback.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Input } from "@angular/core";
+import { Directive, ElementRef, HostListener, Input, Pipe, PipeTransform } from "@angular/core";
 
 /* tslint:disable:directive-selector */
 @Directive({
@@ -17,3 +17,15 @@ export class FallbackDirective
 		html.src = this.fallback;
 	}
 }
+
+@Pipe({
+	name: "fallback",
+	pure: true
+})
+export class FallbackPipe implements PipeTransform
+{
+	transform(value: any, ...args: any[]): any
+	{
+		return value ?? args.find(x => x);
+	}
+}

src/app/models/resources/show.ts

@@ -15,13 +15,13 @@ export interface Show extends IResource
 	studio: Studio;
 	people: People[];
 	seasons: Season[];
-	trailerUrl: string;
+	trailer: string;
 	isMovie: boolean;
 	startAir: Date;
 	endAir: Date;
 	poster: string;
 	logo: string;
-	backdrop: string;
+	thumbnail: string;
 
 	externalIDs: ExternalID[];
 }

src/app/models/watch-item.ts

@@ -11,7 +11,7 @@ export interface WatchItem
 	duration: number;
 	releaseDate: string;
 	isMovie: boolean;
-	
+
 	poster: string;
 	backdrop: string;
 

src/app/pages/metadata-edit/metadata-edit.component.html

@@ -71,7 +71,7 @@
 
                 <mat-form-field class="w-100">
                     <mat-label>Trailer</mat-label>
-                    <input matInput [(ngModel)]="this.show.trailerUrl" name="trailer">
+                    <input matInput [(ngModel)]="this.show.trailer" name="trailer">
                 </mat-form-field>
 
                 <mat-form-field class="w-100">

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

@@ -75,7 +75,7 @@
 
 		<div class="controller container-fluid" id="controller">
 			<div class="img d-none d-sm-block">
-				<img [src]="this.item.poster" alt="poster" />
+				<img [src]="this.item.poster | fallback" 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,5 +1,5 @@
 <div class="backdrop">
-	<img id="backdrop" [src]="this.show.backdrop" alt="backdrop" />
+	<img id="backdrop" [src]="this.show.thumbnail | fallback" alt="backdrop" />
 </div>
 
 <div class="header container pt-sm-5">
@@ -16,7 +16,7 @@
 				<button mat-mini-fab matTooltipPosition="above" matTooltip="Play" class="mr-3" (click)="playClicked()">
 					<mat-icon>play_arrow</mat-icon>
 				</button>
-				<button *ngIf="this.show.trailerUrl" mat-icon-button matTooltipPosition="above" matTooltip="Trailer" (click)="openTrailer()">
+				<button *ngIf="this.show.trailer" mat-icon-button matTooltipPosition="above" matTooltip="Trailer" (click)="openTrailer()">
 					<mat-icon>local_movies</mat-icon>
 				</button>
 				<a *ngIf="this.show.isMovie" [href]="'/video/' + this.show.slug" download>

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

@@ -133,7 +133,7 @@ export class ShowDetailsComponent implements AfterViewInit, OnDestroy
 		this.dialog.open(TrailerDialogComponent, {
 			width: "80%",
 			height: "45vw",
-			data: this.show.trailerUrl,
+			data: this.show.trailer,
 			panelClass: "panel"
 		});
 	}