From 2c84019a4a18dc5a249710e8d81d08379b0d5968 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Sun, 13 Oct 2019 00:42:12 +0200
Subject: [PATCH] Creating collection view in the web app.

---
 Kyoo/ClientApp/src/app/app-routing.module.ts  |  2 +-
 .../src/app/browse/browse.component.scss      |  1 +
 .../src/app/browse/browse.component.ts        |  7 +++---
 .../app/collection/collection.component.html  | 15 +++++++++++-
 .../app/collection/collection.component.scss  | 23 +++++++++++++++++++
 .../app/collection/collection.component.ts    | 12 +++++++---
 .../src/app/player/player.component.ts        |  8 ++++++-
 .../services/collection-resolver.service.ts   |  7 +++---
 .../app/services/library-resolver.service.ts  |  8 +++----
 .../src/app/services/show-resolver.service.ts |  9 ++++----
 Kyoo/Controllers/CollectionController.cs      |  2 +-
 .../LibraryManager/LibraryManager.cs          |  2 +-
 12 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/Kyoo/ClientApp/src/app/app-routing.module.ts b/Kyoo/ClientApp/src/app/app-routing.module.ts
index 668c8d09..392c8767 100644
--- a/Kyoo/ClientApp/src/app/app-routing.module.ts
+++ b/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 }
 ];
diff --git a/Kyoo/ClientApp/src/app/browse/browse.component.scss b/Kyoo/ClientApp/src/app/browse/browse.component.scss
index c038d7c6..4d0d1e82 100644
--- a/Kyoo/ClientApp/src/app/browse/browse.component.scss
+++ b/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;
diff --git a/Kyoo/ClientApp/src/app/browse/browse.component.ts b/Kyoo/ClientApp/src/app/browse/browse.component.ts
index dc88b664..6399fd77 100644
--- a/Kyoo/ClientApp/src/app/browse/browse.component.ts
+++ b/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,7 +20,8 @@ export class BrowseComponent implements OnInit
 
   ngOnInit()
   {
-    this.shows = this.route.snapshot.data.shows;
+    if (this.shows == null)
+      this.shows = this.route.snapshot.data.shows;
   }
 
   getThumb(slug: string)
diff --git a/Kyoo/ClientApp/src/app/collection/collection.component.html b/Kyoo/ClientApp/src/app/collection/collection.component.html
index 8767296b..773e4515 100644
--- a/Kyoo/ClientApp/src/app/collection/collection.component.html
+++ b/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>
diff --git a/Kyoo/ClientApp/src/app/collection/collection.component.scss b/Kyoo/ClientApp/src/app/collection/collection.component.scss
index e69de29b..4dbb9c42 100644
--- a/Kyoo/ClientApp/src/app/collection/collection.component.scss
+++ b/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;
+}
diff --git a/Kyoo/ClientApp/src/app/collection/collection.component.ts b/Kyoo/ClientApp/src/app/collection/collection.component.ts
index 5d6f8c0a..89a6c823 100644
--- a/Kyoo/ClientApp/src/app/collection/collection.component.ts
+++ b/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;
   }
 
 }
diff --git a/Kyoo/ClientApp/src/app/player/player.component.ts b/Kyoo/ClientApp/src/app/player/player.component.ts
index 52d72c27..dfb3d17d 100644
--- a/Kyoo/ClientApp/src/app/player/player.component.ts
+++ b/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;
       }
diff --git a/Kyoo/ClientApp/src/app/services/collection-resolver.service.ts b/Kyoo/ClientApp/src/app/services/collection-resolver.service.ts
index c5d26546..c2feb097 100644
--- a/Kyoo/ClientApp/src/app/services/collection-resolver.service.ts
+++ b/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) { }
diff --git a/Kyoo/ClientApp/src/app/services/library-resolver.service.ts b/Kyoo/ClientApp/src/app/services/library-resolver.service.ts
index 0ea41cb7..7594a4fe 100644
--- a/Kyoo/ClientApp/src/app/services/library-resolver.service.ts
+++ b/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[]>
diff --git a/Kyoo/ClientApp/src/app/services/show-resolver.service.ts b/Kyoo/ClientApp/src/app/services/show-resolver.service.ts
index 0f1a2302..f2c8db38 100644
--- a/Kyoo/ClientApp/src/app/services/show-resolver.service.ts
+++ b/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>
 {
diff --git a/Kyoo/Controllers/CollectionController.cs b/Kyoo/Controllers/CollectionController.cs
index 612148e7..9e1a84e1 100644
--- a/Kyoo/Controllers/CollectionController.cs
+++ b/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);
diff --git a/Kyoo/InternalAPI/LibraryManager/LibraryManager.cs b/Kyoo/InternalAPI/LibraryManager/LibraryManager.cs
index 04fbf86b..07ce0dd3 100644
--- a/Kyoo/InternalAPI/LibraryManager/LibraryManager.cs
+++ b/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))
             {