Cleaning up and preparing for the new rest api

src/app/app-routing.module.ts

@@ -1,22 +1,22 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-import {BrowseComponent} from './browse/browse.component';
+import {LibraryItemGridComponent} from './components/library-item-grid/library-item-grid.component';
 import {CollectionComponent} from "./collection/collection.component";
 import {NotFoundComponent} from './not-found/not-found.component';
-import {PlayerComponent} from "./player/player.component";
-import {SearchComponent} from "./search/search.component";
-import {CollectionResolverService} from "./services/collection-resolver.service";
-import {LibraryResolverService} from './services/library-resolver.service';
-import {PeopleResolverService} from "./services/people-resolver.service";
-import {SearchResolverService} from "./services/search-resolver.service";
-import {ShowResolverService} from './services/show-resolver.service';
-import {StreamResolverService} from "./services/stream-resolver.service";
-import {ShowDetailsComponent} from './show-details/show-details.component';
+import {PlayerComponent} from "./pages/player/player.component";
+import {SearchComponent} from "./pages/search/search.component";
+import {CollectionResolverService} from "./services/resolvers/collection-resolver.service";
+import {LibraryResolverService} from './services/resolvers/library-resolver.service';
+import {PeopleResolverService} from "./services/resolvers/people-resolver.service";
+import {SearchResolverService} from "./services/resolvers/search-resolver.service";
+import {ShowResolverService} from './services/resolvers/show-resolver.service';
+import {StreamResolverService} from "./services/resolvers/stream-resolver.service";
+import {ShowDetailsComponent} from './pages/show-details/show-details.component';
 import {AuthGuard} from "./auth/misc/authenticated-guard.service";
 
 const routes: Routes = [
-	{path: "browse", component: BrowseComponent, pathMatch: "full", resolve: { shows: LibraryResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
-	{path: "browse/:library-slug", component: BrowseComponent, resolve: { shows: LibraryResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
+	{path: "browse", component: LibraryItemGridComponent, pathMatch: "full", resolve: { shows: LibraryResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
+	{path: "browse/:library-slug", component: LibraryItemGridComponent, resolve: { shows: LibraryResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
 	{path: "show/:show-slug", component: ShowDetailsComponent, resolve: { show: ShowResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
 	{path: "collection/:collection-slug", component: CollectionComponent, resolve: { collection: CollectionResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
 	{path: "people/:people-slug", component: CollectionComponent, resolve: { collection: PeopleResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},

src/app/app.component.ts

@@ -7,6 +7,8 @@ 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 {Page} from "../models/page";
 
 @Component({
 	selector: 'app-root',
@@ -18,11 +20,15 @@ export class AppComponent
 	libraries: Library[];
 	isLoading: boolean = false;
 
-	constructor(private http: HttpClient, private router: Router, private location: Location, public authManager: AuthService, public dialog: MatDialog)
+	constructor(private http: HttpClient,
+	            private router: Router,
+	            private location: Location,
+	            public authManager: AuthService,
+	            public dialog: MatDialog)
 	{
-		http.get<Library[]>("api/libraries").subscribe(result =>
+		http.get<Page<Library>>("api/libraries").subscribe(result =>
 		{
-			this.libraries = result;
+			this.libraries = result.items;
 		}, error => console.error(error));
 
 		this.router.events.subscribe((event: Event) =>
@@ -84,10 +90,3 @@ export class AppComponent
 		return this.authManager.isAuthenticated;
 	}
 }
-
-interface Library
-{
-	id: number;
-	slug: string;
-	name: string;
-}

src/app/app.module.ts

@@ -14,15 +14,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { BrowseComponent } from './browse/browse.component';
+import { LibraryItemGridComponent } from './components/library-item-grid/library-item-grid.component';
 import { CollectionComponent } from './collection/collection.component';
-import { EpisodesListComponent } from './episodes-list/episodes-list.component';
+import { EpisodesListComponent } from './components/episodes-list/episodes-list.component';
 import { NotFoundComponent } from './not-found/not-found.component';
-import { PeopleListComponent } from './people-list/people-list.component';
-import { PlayerComponent } from './player/player.component';
-import { SearchComponent } from './search/search.component';
-import { ShowDetailsComponent } from './show-details/show-details.component';
-import { ShowsListComponent } from './shows-list/shows-list.component';
+import { PeopleListComponent } from './components/people-list/people-list.component';
+import { PlayerComponent } from './pages/player/player.component';
+import { SearchComponent } from './pages/search/search.component';
+import { ShowDetailsComponent } from './pages/show-details/show-details.component';
+import { ShowsListComponent } from './components/shows-list/shows-list.component';
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import { MatInputModule } from "@angular/material/input";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -33,20 +33,20 @@ import {MatDialogModule} from '@angular/material/dialog';
 import {FallbackDirective} from "./misc/fallback.directive";
 import {AuthModule} from "./auth/auth.module";
 import {AuthRoutingModule} from "./auth/auth-routing.module";
-import { TrailerDialogComponent } from './trailer-dialog/trailer-dialog.component';
+import { TrailerDialogComponent } from './pages/trailer-dialog/trailer-dialog.component';
 import {CollectionsListComponent} from "./collection-list/collections-list.component";
-import { MetadataEditComponent } from './metadata-edit/metadata-edit.component';
+import { MetadataEditComponent } from './pages/metadata-edit/metadata-edit.component';
 import {MatChipsModule} from "@angular/material/chips";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {MatExpansionModule} from "@angular/material/expansion";
-import { ShowGridComponent } from './show-grid/show-grid.component';
+import { ShowGridComponent } from './components/show-grid/show-grid.component';
 
 
 @NgModule({
 	declarations: [
 		AppComponent,
 		NotFoundComponent,
-		BrowseComponent,
+		LibraryItemGridComponent,
 		ShowDetailsComponent,
 		EpisodesListComponent,
 		PlayerComponent,

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

@@ -1,6 +1,6 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins/breakpoints";
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../node_modules/bootstrap/scss/mixins/breakpoints";
 
 .root
 {

src/app/components/episodes-list/episodes-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 { Episode } from "../../models/episode";
+import { Episode } from "../../../models/episode";
 
 @Component({
 	selector: 'app-episodes-list',

src/app/components/library-item-grid/library-item-grid.component.scss

@@ -1,6 +1,6 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins/breakpoints";
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../node_modules/bootstrap/scss/mixins/breakpoints";
 
 button
 {

src/app/components/library-item-grid/library-item-grid.component.ts

@@ -1,14 +1,14 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
-import { Show } from "../../models/show";
+import { Show } from "../../../models/show";
 
 @Component({
 	selector: 'app-browse',
-	templateUrl: './browse.component.html',
-	styleUrls: ['./browse.component.scss']
+	templateUrl: './library-item-grid.component.html',
+	styleUrls: ['./library-item-grid.component.scss']
 })
-export class BrowseComponent
+export class LibraryItemGridComponent
 {
 	@Input() shows: Show[];
 	@Input() sortEnabled: boolean = true;

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

@@ -1,6 +1,6 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins/breakpoints";
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../node_modules/bootstrap/scss/mixins/breakpoints";
 
 .people-container
 {

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/people";
 
 @Component({
 	selector: 'app-people-list',

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

@@ -1,6 +1,6 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins/breakpoints";
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../node_modules/bootstrap/scss/mixins/breakpoints";
 
 button
 {

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

@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {Show} from "../../models/show";
+import {Show} from "../../../models/show";
 import {DomSanitizer} from "@angular/platform-browser";
 
 @Component({

src/app/components/shows-list/shows-list.component.scss

@@ -1,6 +1,6 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins/breakpoints";
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../node_modules/bootstrap/scss/mixins/breakpoints";
 
 .shows-container
 {

src/app/components/shows-list/shows-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 { Show } from "../../models/show";
+import { Show } from "../../../models/show";
 
 @Component({
 	selector: 'app-shows-list',

src/app/metadata-edit/metadata-edit.component.scss

@@ -1,18 +0,0 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins/breakpoints";
-
-.provider
-{
-	width: 100%;
-	
-	@include media-breakpoint-up(md)
-	{
-		width: 33%;
-	}
-
-	@include media-breakpoint-up(lg)
-	{
-		width: 25%;
-	}
-}

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

@@ -0,0 +1,18 @@
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../node_modules/bootstrap/scss/mixins/breakpoints";
+
+.provider
+{
+	width: 100%;
+	
+	@include media-breakpoint-up(md)
+	{
+		width: 33%;
+	}
+
+	@include media-breakpoint-up(lg)
+	{
+		width: 25%;
+	}
+}

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

@@ -1,15 +1,15 @@
 import {Component, ElementRef, Inject, OnInit, 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 {Show} from "../../../models/show";
+import {Genre} from "../../../models/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 "../show-grid/show-grid.component";
-import {Provider} from "../../models/provider";
+import {Studio} from "../../../models/studio";
+import {ShowGridComponent} from "../../components/show-grid/show-grid.component";
+import {Provider} from "../../../models/provider";
 import {MatSnackBar} from "@angular/material/snack-bar";
 
 @Component({

src/app/pages/player/player.component.scss

@@ -1,5 +1,5 @@
-@import "../../libraries/subtitles";
-@import "./vtt-subtitles";
+@import "../../../libraries/subtitles.css";
+@import "vtt-subtitles";
 
 .player
 {

src/app/pages/player/player.component.ts

@@ -2,10 +2,10 @@ import {Component, Injector, OnInit, ViewEncapsulation} from '@angular/core';
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {DomSanitizer, Title} from "@angular/platform-browser";
 import {ActivatedRoute, Event, NavigationCancel, NavigationEnd, NavigationStart, Router} from "@angular/router";
-import {Track, WatchItem} from "../../models/watch-item";
+import {Track, WatchItem} from "../../../models/watch-item";
 import {Location} from "@angular/common";
 import * as Hls from "hls.js"
-import {getPlaybackMethod, getWhatIsSupported, method, SupportList} from "../../videoSupport/playbackMethodDetector";
+import {getPlaybackMethod, getWhatIsSupported, method, SupportList} from "../../../videoSupport/playbackMethodDetector";
 import {OidcSecurityService} from "angular-auth-oidc-client";
 
 declare var SubtitleManager: any;

src/app/pages/search/search.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from "@angular/router";
-import { SearchResult } from "../../models/search-result";
+import { SearchResult } from "../../../models/search-result";
 import { Title } from "@angular/platform-browser";
 
 @Component({

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

@@ -1,6 +1,6 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins/breakpoints";
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../node_modules/bootstrap/scss/mixins/breakpoints";
 
 a
 {

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

@@ -3,12 +3,12 @@ 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/episode";
+import { Show } from "../../../models/show";
 import {MatDialog} from "@angular/material/dialog";
 import {TrailerDialogComponent} from "../trailer-dialog/trailer-dialog.component";
 import {MetadataEditComponent} from "../metadata-edit/metadata-edit.component";
-import {Account} from "../../models/account";
+import {Account} from "../../../models/account";
 
 @Component({
 	selector: 'app-show-details',

src/app/services/library.service.ts

@@ -0,0 +1,48 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs"
+import {Page} from "../../models/page";
+import {IResource} from "../../models/resources/resource";
+
+class CrudApi<T extends IResource>
+{
+  constructor(private client: HttpClient, private route: string) {}
+
+  get(id: number | string): Observable<T>
+  {
+    return this.client.get<T>(`/api/${this.route}/${id}`);
+  }
+
+  getAll(id: number | string): Observable<Page<T>>
+  {
+    return this.client.get<Page<T>>(`/api/${this.route}`);
+  }
+
+  create(item: T): Observable<T>
+  {
+    return this.client.post<T>(`/api/${this.route}`, item);
+  }
+
+  edit(item: T): Observable<T>
+  {
+    return this.client.put<T>(`/api/${this.route}`, item);
+  }
+
+  delete(item: T): Observable<T>
+  {
+    return this.client.delete<T>(`/api/${this.route}/${item.slug}`);
+  }
+}
+
+@Injectable({
+	providedIn: 'root'
+})
+export class LibraryService
+{
+	constructor() { }
+
+	get()
+	{
+
+	}
+}

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

@@ -4,7 +4,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
 import { EMPTY, Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators'
-import { Collection } from "../../models/collection";
+import { Collection } from "../../../models/collection";
 
 @Injectable({
 	providedIn: 'root'

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

@@ -4,7 +4,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
 import { EMPTY, Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-import { Show } from "../../models/show";
+import { Show } from "../../../models/show";
 
 
 @Injectable()

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

@@ -4,8 +4,8 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
 import { EMPTY, Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-import { Collection } from "../../models/collection";
-import { People } from "../../models/people";
+import { Collection } from "../../../models/collection";
+import { People } from "../../../models/people";
 
 @Injectable({
 	providedIn: 'root'

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

@@ -4,7 +4,7 @@ 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";
+import { SearchResult } from "../../../models/search-result";
 
 @Injectable({
 	providedIn: 'root'

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

@@ -4,7 +4,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
 import { EMPTY, Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-import { Show } from "../../models/show";
+import { Show } from "../../../models/show";
 
 @Injectable()
 export class ShowResolverService implements Resolve<Show>

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

@@ -4,7 +4,7 @@ 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";
+import { WatchItem } from "../../../models/watch-item";
 
 
 @Injectable()

src/models/genre.ts

@@ -1,5 +1,5 @@
 export interface Genre
 {
-		slug: string;
-		name: string;
+	slug: string;
+	name: string;
 }

src/models/library-item.ts

@@ -0,0 +1,20 @@
+enum ItemType
+{
+	Show,
+	Movie,
+	Collection
+}
+
+export interface LibraryItem
+{
+	ID: number
+	Slug: string
+	Title: string
+	Overview: string
+	Status: string
+	TrailerUrl: string
+	StartYear: number
+	EndYear: number
+	Poster: string
+	Type: ItemType
+}

src/models/library.ts

@@ -0,0 +1,6 @@
+export interface Library
+{
+	id: number;
+	slug: string;
+	name: string;
+}

src/models/page.ts

@@ -0,0 +1,8 @@
+export interface Page<T>
+{
+	this: string
+	next: string
+	first: string
+	count: number
+	items: T[]
+}

src/models/resources/resource.ts

@@ -0,0 +1,5 @@
+export interface IResource
+{
+	id: number;
+	slug: string;
+}

src/videoSupport/playbackMethodDetector.ts

@@ -6,7 +6,7 @@ export enum method
 	direct = "Direct Play",
 	transmux = "Transmux",
 	transcode = "Transcode"
-};
+}
 
 export class SupportList
 {