Creating collection view in the web app.

Kyoo/ClientApp/src/app/app-routing.module.ts

@@ -16,7 +16,7 @@ const routes: Routes = [
   { path: "browse", component: BrowseComponent, pathMatch: "full", resolve: { shows: LibraryResolverService } },
   { path: "browse/:library-slug", component: BrowseComponent, resolve: { shows: LibraryResolverService } },
   { path: "show/:show-slug", component: ShowDetailsComponent, resolve: { show: ShowResolverService } },
-  { path: "collection/:collection-slug", component: CollectionComponent, resolve: { shows: CollectionResolverService } },
+  { path: "collection/:collection-slug", component: CollectionComponent, resolve: { collection: CollectionResolverService } },
   { path: "watch/:item", component: PlayerComponent, resolve: { item: StreamResolverService } },
   { path: "**", component: NotFoundComponent }
 ];

Kyoo/ClientApp/src/app/browse/browse.component.scss

@@ -21,6 +21,7 @@ button
 .show
 {
   width: 33%;
+  min-width: 120px;
   max-width: 200px;
   list-style: none;
   padding: .5em;

Kyoo/ClientApp/src/app/browse/browse.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Show } from "../../models/show";
@@ -10,7 +10,7 @@ import { Show } from "../../models/show";
 })
 export class BrowseComponent implements OnInit
 {
-  shows: Show[];
+  @Input() shows: Show[];
   sortType: string = "title";
   sortUp: boolean = true;
 
@@ -20,6 +20,7 @@ export class BrowseComponent implements OnInit
 
   ngOnInit()
   {
+    if (this.shows == null)
       this.shows = this.route.snapshot.data.shows;
   }
 

Kyoo/ClientApp/src/app/collection/collection.component.html

@@ -1 +1,14 @@
-<p>collection works!</p>
+<div class="container-fluid">
+  <div class="row justify-content-center">
+    <div class="col-md-4 col-lg-3 collection-info">
+      <img src="poster/{{collection.slug}}" />
+    </div>
+    <div class="col-md-8 col-lg-9">
+      <h3 class="text-center text-md-left p-2 p-md-3">{{collection.name}}</h3>
+      <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-browse [shows]="collection.shows"></app-browse>
+    </div>
+  </div>
+</div>

Kyoo/ClientApp/src/app/collection/collection.component.scss

@@ -0,0 +1,23 @@
+.collection-info
+{
+  width: 60%;
+
+  > img
+  {
+    width: 100%;
+    height: 0;
+    padding-top: 147.0588%;
+    background-size: cover;
+    background-color: #333333;
+    margin: 10px;
+  }
+}
+
+hr
+{
+  margin: 10px 0 10px 0;
+  border-top: 1px solid rgba(255, 255, 255, .60);
+  border-left: 0;
+  width: inherit;
+  height: 2px;
+}

Kyoo/ClientApp/src/app/collection/collection.component.ts

@@ -1,15 +1,21 @@
 import { Component, OnInit } from '@angular/core';
+import { Collection } from "../../models/collection";
+import { ActivatedRoute } from "@angular/router";
 
 @Component({
   selector: 'app-collection',
   templateUrl: './collection.component.html',
   styleUrls: ['./collection.component.scss']
 })
-export class CollectionComponent implements OnInit {
+export class CollectionComponent implements OnInit
+{
+  collection: Collection;
 
-  constructor() { }
+  constructor(private route: ActivatedRoute) { }
 
-  ngOnInit() {
+  ngOnInit()
+  {
+    this.collection = this.route.snapshot.data.collection;
   }
 
 }

Kyoo/ClientApp/src/app/player/player.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { DomSanitizer, Title } from "@angular/platform-browser";
-import { Event, ActivatedRoute, Router, NavigationStart } from "@angular/router";
+import { ActivatedRoute, Event, NavigationCancel, NavigationEnd, NavigationStart, Router } from "@angular/router";
 import { Track, WatchItem } from "../../models/watch-item";
 
 declare var SubtitleManager: any;
@@ -269,6 +269,12 @@ export class PlayerComponent implements OnInit
           loadIndicator.classList.remove("d-none");
           break;
         }
+        case event instanceof NavigationEnd:
+        case event instanceof NavigationCancel:
+        {
+          loadIndicator.classList.add("d-none");
+          break;
+        }
         default:
           break;
       }

Kyoo/ClientApp/src/app/services/collection-resolver.service.ts

@@ -3,11 +3,12 @@ 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 { catchError } from 'rxjs/operators'
 import { Collection } from "../../models/collection";
 
-
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class CollectionResolverService implements Resolve<Collection>
 {
   constructor(private http: HttpClient, private snackBar: MatSnackBar) { }

Kyoo/ClientApp/src/app/services/library-resolver.service.ts

@@ -1,11 +1,11 @@
-import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { Observable, EMPTY } from 'rxjs';
+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 { Show } from "../../models/show";
 
-import { MatSnackBar } from '@angular/material/snack-bar'; 
 
 @Injectable()
 export class LibraryResolverService implements Resolve<Show[]>

Kyoo/ClientApp/src/app/services/show-resolver.service.ts

@@ -1,12 +1,11 @@
-import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { Observable, EMPTY } from 'rxjs';
+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 { Show } from "../../models/show";
 
-import { MatSnackBar } from '@angular/material/snack-bar'; 
-
 @Injectable()
 export class ShowResolverService implements Resolve<Show>
 {

Kyoo/Controllers/CollectionController.cs

@@ -16,7 +16,7 @@ namespace Kyoo.Controllers
             this.libraryManager = libraryManager;
         }
 
-        [HttpGet]
+        [HttpGet("{collectionSlug}")]
         public ActionResult<Collection> GetShows(string collectionSlug)
         {
             Collection collection = libraryManager.GetCollection(collectionSlug);

Kyoo/InternalAPI/LibraryManager/LibraryManager.cs

@@ -548,7 +548,7 @@ namespace Kyoo.InternalAPI
 
         public IEnumerable<Show> GetShowsInCollection(long collectionID)
         {
-            string query = "SELECT * FROM shows JOIN collectionsLink l ON l.showID = shows.id WHERE l.collectionID = $id;";
+            string query = "SELECT * FROM shows JOIN collectionsLinks l ON l.showID = shows.id WHERE l.collectionID = $id;";
 
             using (SQLiteCommand cmd = new SQLiteCommand(query, sqlConnection))
             {