Cleaning up

src/app/app-routing.module.ts

@@ -2,10 +2,10 @@ import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {ItemsGridComponent} from './components/items-grid/items-grid.component';
 import {NotFoundComponent} from './pages/not-found/not-found.component';
-import {PageResolver} from './services/resolvers/page-resolver.service';
+import {PageResolver} from './services/page-resolver.service';
 import {ShowDetailsComponent} from './pages/show-details/show-details.component';
 import {AuthGuard} from "./auth/misc/authenticated-guard.service";
-import {LibraryItem} from "../models/library-item";
+import {LibraryItem} from "../models/resources/library-item";
 import {
 	EpisodeService,
 	LibraryItemService,
@@ -14,12 +14,14 @@ import {
 	SeasonService,
 	ShowService
 } from "./services/api.service";
-import {Show} from "../models/show";
-import {ItemResolver} from "./services/resolvers/item-resolver.service";
+import {Show} from "../models/resources/show";
+import {ItemResolver} from "./services/item-resolver.service";
 import {CollectionComponent} from "./pages/collection/collection.component";
-import {Collection} from "../models/collection";
+import {Collection} from "../models/resources/collection";
 import {SearchComponent} from "./pages/search/search.component";
 import {SearchResult} from "../models/search-result";
+import {PlayerComponent} from "./pages/player/player.component";
+import {WatchItem} from "../models/watch-item";
 
 const routes: Routes = [
 	{path: "browse", component: ItemsGridComponent, pathMatch: "full",
@@ -63,8 +65,15 @@ const routes: Routes = [
 		canActivate: [AuthGuard.forPermissions("read")]
 	},
 
-	// {path: "watch/:item", component: PlayerComponent, resolve: { item: StreamResolverService }, canLoad: [AuthGuard.forPermissions("play")], canActivate: [AuthGuard.forPermissions("play")]},
+	{path: "watch/:item", component: PlayerComponent,
+		resolve: { item: ItemResolver.forResource<WatchItem>("watch/:item") },
+		canLoad: [AuthGuard.forPermissions("play")],
+		canActivate: [AuthGuard.forPermissions("play")]
+	},
+
 	// TODO implement missing pages: /genre, /studio & an home page.
+
+	{path: "", pathMatch: 'full', redirectTo: "/browse"},
 	{path: "**", component: NotFoundComponent}
 ];
 

src/app/app.component.ts

@@ -5,7 +5,7 @@ import {MatDialog} from "@angular/material/dialog";
 import {Account} from "../models/account";
 import {AccountComponent} from "./auth/account/account.component";
 import {AuthService} from "./auth/auth.service";
-import {Library} from "../models/library";
+import {Library} from "../models/resources/library";
 import {LibraryService} from "./services/api.service";
 import * as $ from "jquery";
 

src/app/app.module.ts

@@ -39,6 +39,7 @@ import {MatChipsModule} from "@angular/material/chips";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {MatExpansionModule} from "@angular/material/expansion";
 import {InfiniteScrollModule} from "ngx-infinite-scroll";
+import {ShowGridComponent} from "./components/show-grid/show-grid.component";
 
 
 @NgModule({
@@ -57,6 +58,7 @@ import {InfiniteScrollModule} from "ngx-infinite-scroll";
 		TrailerDialogComponent,
 		ItemsListComponent,
 		MetadataEditComponent,
+		ShowGridComponent
 	],
 	imports: [
 		BrowserModule,

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

@@ -1,6 +1,6 @@
 import { Component, Input} from '@angular/core';
 import { DomSanitizer } from "@angular/platform-browser";
-import { Episode } from "../../../models/episode";
+import { Episode } from "../../../models/resources/episode";
 import {HorizontalScroller} from "../../misc/horizontal-scroller";
 import {Page} from "../../../models/page";
 import {HttpClient} from "@angular/common/http";

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

@@ -1,15 +1,15 @@
 import {Component, Input} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {DomSanitizer} from '@angular/platform-browser';
-import {LibraryItem} from "../../../models/library-item";
+import {LibraryItem} from "../../../models/resources/library-item";
 import {Page} from "../../../models/page";
 import {HttpClient} from "@angular/common/http";
-import {Show, ShowRole} from "../../../models/show";
-import {Collection} from "../../../models/collection";
+import {Show, ShowRole} from "../../../models/resources/show";
+import {Collection} from "../../../models/resources/collection";
 import {ItemsUtils} from "../../misc/items-utils";
 
 @Component({
-	selector: 'app-items',
+	selector: 'app-items-grid',
 	templateUrl: './items-grid.component.html',
 	styleUrls: ['./items-grid.component.scss']
 })

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

@@ -1,11 +1,11 @@
 import {Component, Input} from "@angular/core";
-import {Collection} from "../../../models/collection";
+import {Collection} from "../../../models/resources/collection";
 import {DomSanitizer} from "@angular/platform-browser";
 import {HorizontalScroller} from "../../misc/horizontal-scroller";
 import {Page} from "../../../models/page";
 import {HttpClient} from "@angular/common/http";
-import {Show, ShowRole} from "../../../models/show";
-import {LibraryItem} from "../../../models/library-item";
+import {Show, ShowRole} from "../../../models/resources/show";
+import {LibraryItem} from "../../../models/resources/library-item";
 import {ItemsUtils} from "../../misc/items-utils";
 
 @Component({

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

@@ -1,7 +1,7 @@
 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 { People } from "../../../models/resources/people";
 import {HorizontalScroller} from "../../misc/horizontal-scroller";
 import {Page} from "../../../models/page";
 import {HttpClient} from "@angular/common/http";

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

@@ -0,0 +1,22 @@
+<div class="container-fluid">
+    <div *ngFor="let show of this.shows?.items" class="show-container">
+        <mat-card class="show">
+            <a [href]="getLink(show)" [routerLink]="getLink(show)" class="d-flex" (click)="this.clickCallback.emit(show)">
+                <div class="thumb">
+                    <div [style.background-image]="getThumb(show)"> </div>
+                </div>
+                <div class="data">
+                    <p class="title">{{show.title}}</p>
+                    <p class="date" *ngIf="show.endYear && show.startYear != show.endYear; else elseBlock">{{show.startYear}} - {{show.endYear}}</p>
+                    <ng-template #elseBlock><p class="date">{{show.startYear}}</p></ng-template>
+                    <p class="overview">{{show.overview}}</p>
+                    <ul>
+                        <li class="provider" *ngFor="let id of this.show.externalIDs">
+                            <a [href]="id.link"><img [src]="id.provider.logo" [alt]="id.provider.name"/></a>
+                        </li>
+                    </ul>
+                </div>
+            </a>
+        </mat-card>
+    </div>
+</div>

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

@@ -0,0 +1,144 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins/breakpoints";
+
+button
+{
+	outline: none;
+}
+
+.arrow
+{
+	font-size: 12px;
+}
+
+.container-fluid
+{
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.show-container
+{
+	width: 100%;
+	min-width: 300px;
+	list-style: none;
+	padding: .5em;
+
+	@include media-breakpoint-up(lg)
+	{
+		width: 50%;
+	}
+
+	@include media-breakpoint-up(xl)
+	{
+		width: 33%;
+	}
+}
+
+.show
+{
+	padding: 0;
+	
+	> a
+	{
+		text-decoration: none;
+		color: inherit;
+		outline: none;
+		position: relative;
+
+		&:focus, &:hover
+		{
+			
+			> .data > .title
+			{
+				text-decoration: underline;
+			}
+		}
+
+		> .thumb
+		{
+			width: 33%;
+			
+			> div
+			{
+				width: 100%;
+				height: 0;
+				padding-top: 147.0588%;
+				background-size: cover;
+				background-color: #333333;
+			}
+		}
+		
+		> .data
+		{
+			width: 67%;
+			padding: .5rem;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 0;
+
+			> p:not(.overview)
+			{
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				text-align: center;
+				margin-bottom: 0;
+				opacity: 1;
+				display: inline-block;
+				
+				&.date
+				{
+					opacity: 0.8;
+					font-size: 0.8em;
+					padding-left: 1rem;
+				}
+			}
+			
+			> .overview
+			{
+				overflow-y: auto;
+				height: calc(100% - 4rem);
+				text-align: justify;
+				padding-right: .5rem;
+				margin-bottom: 0;
+			}
+
+			&:host-context(.hoverEnabled) &:hover
+			{
+				cursor: pointer;
+			}
+		}
+	}
+}
+
+
+.provider
+{
+	display: inline-block;
+	width: 2.5rem;
+	height: 2.5rem;
+	margin: .25rem;
+
+	> a
+	{
+		width: 2.5rem;
+		height: 2.5rem;
+		position: relative;
+		display: inline-block;
+
+		> img
+		{
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 0;
+			left: 0;
+			margin: auto;
+			max-width: 2.5rem;
+			max-height: 2.5rem;
+		}
+	}
+}

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

@@ -0,0 +1,30 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {DomSanitizer} from "@angular/platform-browser";
+import {Show} from "../../../models/resources/show";
+import {Page} from "../../../models/page";
+
+@Component({
+	selector: 'app-shows-grid',
+	templateUrl: './show-grid.component.html',
+	styleUrls: ['./show-grid.component.scss']
+})
+export class ShowGridComponent
+{
+	@Input() shows: Page<Show>
+	@Input() externalShows: boolean = false;
+	@Output() clickCallback: EventEmitter<Show> = new EventEmitter();
+	
+	constructor(private sanitizer: DomSanitizer) { }
+
+	getThumb(show: Show)
+	{
+		return this.sanitizer.bypassSecurityTrustStyle(`url(${show.poster})`);
+	}
+	
+	getLink(show: Show)
+	{
+		if (this.externalShows)
+			return null;
+		return `/show/${show.slug}`;
+	}
+}

src/app/misc/items-utils.ts

@@ -1,6 +1,6 @@
-import {ItemType, LibraryItem} from "../../models/library-item";
-import {Show, ShowRole} from "../../models/show";
-import {Collection} from "../../models/collection";
+import {ItemType, LibraryItem} from "../../models/resources/library-item";
+import {Show, ShowRole} from "../../models/resources/show";
+import {Collection} from "../../models/resources/collection";
 
 export class ItemsUtils
 {

src/app/pages/collection/collection.component.html

@@ -8,7 +8,7 @@
 			<h5 class="date" *ngIf="collection.endYear; else elseBlock">{{collection.startYear}} - {{collection.endYear}}</h5>
 			<ng-template #elseBlock><h5 class="date">{{collection.startYear}}</h5></ng-template>
 			<hr />
-			<app-items [page]="shows"></app-items>
+			<app-items-grid [page]="shows"></app-items-grid>
 		</div>
 	</div>
 </div>

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

@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-import {Collection} from "../../../models/collection";
+import {Collection} from "../../../models/resources/collection";
 import {ActivatedRoute} from "@angular/router";
 import {DomSanitizer} from "@angular/platform-browser";
-import {Show} from "../../../models/show";
+import {Show} from "../../../models/resources/show";
 import {Page} from "../../../models/page";
-import {People} from "../../../models/people";
+import {People} from "../../../models/resources/people";
 
 @Component({
 	selector: 'app-collection',

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

@@ -92,7 +92,7 @@
                 <mat-label>{{provider.name}} ID</mat-label>
                 <input matInput [value]="this.getMetadataID(provider)?.dataID" (input)="this.setMetadataID(provider, $event.target.value)" >
             </mat-form-field>
-            <app-show-grid #identifyGrid [externalShows]="true" (clickCallback)="this.identifyID($event)"></app-show-grid>
+            <app-shows-grid #identifyGrid [externalShows]="true" (clickCallback)="this.identifyID($event)"></app-shows-grid>
         </mat-expansion-panel>
     </mat-accordion>
 </div>

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

@@ -1,16 +1,16 @@
-import {Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, Inject, ViewChild} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {HttpClient, HttpErrorResponse} from "@angular/common/http";
-import {Show} from "../../../models/show";
-import {Genre} from "../../../models/genre";
+import {HttpClient} from "@angular/common/http";
+import {Show} from "../../../models/resources/show";
+import {Genre} from "../../../models/resources/genre";
 import {MatChipInputEvent} from "@angular/material/chips";
 import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
 import {Observable, of} from "rxjs";
-import {catchError, tap} from "rxjs/operators";
-import {Studio} from "../../../models/studio";
-import {ShowGridComponent} from "../../components/show-grid/show-grid.component";
+import {tap} from "rxjs/operators";
+import {Studio} from "../../../models/resources/studio";
 import {Provider} from "../../../models/provider";
 import {MatSnackBar} from "@angular/material/snack-bar";
+import {ShowGridComponent} from "../../components/show-grid/show-grid.component";
 
 @Component({
 	selector: 'app-metadata-edit',
@@ -124,7 +124,7 @@ export class MetadataEditComponent
 	
 	reIdentify(search: string)
 	{
-		this.identityShow(search).subscribe(x => this.identifyGrid.shows = x);
+		// this.identityShow(search).subscribe(x => this.identifyGrid.shows = x);
 	}
 
 	getMetadataID(provider: Provider)

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

@@ -2,15 +2,15 @@ import { Component, OnInit } from '@angular/core';
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { Title } from '@angular/platform-browser';
 import {ActivatedRoute, Router} from '@angular/router';
-import { Episode } from "../../../models/episode";
-import { Show } from "../../../models/show";
+import { Episode } from "../../../models/resources/episode";
+import { Show } from "../../../models/resources/show";
 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 {Season} from "../../../models/resources/season";
 import {EpisodeService, PeopleService, SeasonService} from "../../services/api.service";
 import {Page} from "../../../models/page";
-import {People} from "../../../models/people";
+import {People} from "../../../models/resources/people";
 
 @Component({
 	selector: 'app-show-details',

src/app/services/api.service.ts

@@ -3,13 +3,13 @@ import {HttpClient} from "@angular/common/http";
 import {Observable} from "rxjs"
 import {Page} from "../../models/page";
 import {IResource} from "../../models/resources/resource";
-import {Library} from "../../models/library";
-import {LibraryItem} from "../../models/library-item";
+import {Library} from "../../models/resources/library";
+import {LibraryItem} from "../../models/resources/library-item";
 import {map} from "rxjs/operators";
-import {Season} from "../../models/season";
-import {Episode} from "../../models/episode";
-import {People} from "../../models/people";
-import {Show} from "../../models/show";
+import {Season} from "../../models/resources/season";
+import {Episode} from "../../models/resources/episode";
+import {People} from "../../models/resources/people";
+import {Show} from "../../models/resources/show";
 
 export interface ApiArgs
 {
@@ -116,7 +116,7 @@ export class EpisodeService extends CrudApi<Episode>
 
 	getFromSeasonNumber(show: string | number, seasonNumber: number, args?: ApiArgs): Observable<Page<Episode>>
 	{
-		return this.client.get(`/api/seasons/${show}-${seasonNumber}/episodes${this.ArgsAsQuery(args)}`)
+		return this.client.get(`/api/seasons/${show}-s${seasonNumber}/episodes${this.ArgsAsQuery(args)}`)
 			.pipe(map(x => Object.assign(new Page<Episode>(), x)));
 	}
 }

src/app/services/page-resolver.service.ts

@@ -4,8 +4,8 @@ import {MatSnackBar} from '@angular/material/snack-bar';
 import {ActivatedRouteSnapshot, Resolve} from '@angular/router';
 import {Observable, EMPTY} from 'rxjs';
 import {catchError, map} from 'rxjs/operators';
-import {Page} from "../../../models/page";
-import {IResource} from "../../../models/resources/resource";
+import {Page} from "../../models/page";
+import {IResource} from "../../models/resources/resource";
 
 @Injectable()
 export class PageResolver

src/app/services/resolvers/search-resolver.service.ts

@@ -1,26 +0,0 @@
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
-import { EMPTY, Observable } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { SearchResult } from "../../../models/search-result";
-
-@Injectable({
-	providedIn: 'root'
-})
-export class SearchResolverService implements Resolve<SearchResult>
-{
-	constructor(private http: HttpClient, private snackBar: MatSnackBar) { }
-
-	resolve(route: ActivatedRouteSnapshot): SearchResult | Observable<SearchResult> | Promise<SearchResult>
-	{
-		let query: string = route.paramMap.get("query");
-		return this.http.get<SearchResult>("api/search/" + query).pipe(catchError((error: HttpErrorResponse) =>
-		{
-			console.log(error.status + " - " + error.message);
-			this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });
-			return EMPTY;
-		}));
-	}
-}

src/app/services/resolvers/stream-resolver.service.ts

@@ -1,32 +0,0 @@
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
-import { EMPTY, Observable } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { WatchItem } from "../../../models/watch-item";
-
-
-@Injectable()
-export class StreamResolverService implements Resolve<WatchItem>
-{
-	constructor(private http: HttpClient, private snackBar: MatSnackBar) { }
-
-	resolve(route: ActivatedRouteSnapshot): WatchItem | Observable<WatchItem> | Promise<WatchItem>
-	{
-		let item: string = route.paramMap.get("item");
-		return this.http.get<WatchItem>("api/watch/" + item).pipe(catchError((error: HttpErrorResponse) =>
-		{
-			console.log(error.status + " - " + error.message);
-			if (error.status == 404)
-			{
-				this.snackBar.open("Episode \"" + item + "\" not found.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });
-			}
-			else
-			{
-				this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });
-			}
-			return EMPTY;
-		}));
-	}
-}

src/models/resources/collection.ts

@@ -1,5 +1,5 @@
 import { Show } from "./show";
-import {IResource} from "./resources/resource";
+import {IResource} from "./resource";
 
 export interface Collection extends IResource
 {

src/models/resources/episode.ts

@@ -1,5 +1,5 @@
-import {ExternalID} from "./external-id";
-import {IResource} from "./resources/resource";
+import {ExternalID} from "../external-id";
+import {IResource} from "./resource";
 
 export interface Episode extends IResource
 {

src/models/resources/library-item.ts

@@ -1,4 +1,4 @@
-import {IResource} from "./resources/resource";
+import {IResource} from "./resource";
 
 export enum ItemType
 {

src/models/resources/library.ts

@@ -1,4 +1,4 @@
-import {IResource} from "./resources/resource";
+import {IResource} from "./resource";
 
 export interface Library extends IResource
 {

src/models/resources/people.ts

@@ -1,5 +1,5 @@
-import {ExternalID} from "./external-id";
-import {IResource} from "./resources/resource";
+import {ExternalID} from "../external-id";
+import {IResource} from "./resource";
 import {Show} from "./show";
 
 export interface People extends IResource

src/models/resources/season.ts

@@ -1,6 +1,6 @@
 import { Episode } from "./episode";
-import {ExternalID} from "./external-id";
-import {IResource} from "./resources/resource";
+import {ExternalID} from "../external-id";
+import {IResource} from "./resource";
 
 export interface Season extends IResource
 {

src/models/resources/show.ts

@@ -2,8 +2,8 @@ import {Season} from "./season";
 import {Genre} from "./genre";
 import {People} from "./people";
 import {Studio} from "./studio";
-import {ExternalID} from "./external-id";
-import {IResource} from "./resources/resource";
+import {ExternalID} from "../external-id";
+import {IResource} from "./resource";
 
 export interface Show extends IResource
 {

src/models/search-result.ts

@@ -1,9 +1,9 @@
-import { Show } from "./show";
-import { Episode } from "./episode";
-import { People } from "./people";
-import { Studio } from "./studio";
-import { Genre } from "./genre";
-import {Collection} from "./collection";
+import { Show } from "./resources/show";
+import { Episode } from "./resources/episode";
+import { People } from "./resources/people";
+import { Studio } from "./resources/studio";
+import { Genre } from "./resources/genre";
+import {Collection} from "./resources/collection";
 
 export interface SearchResult
 {

src/models/watch-item.ts

@@ -1,4 +1,4 @@
-import { Episode } from "./episode";
+import { Episode } from "./resources/episode";
 
 export interface WatchItem
 {