Starting to create the show view.

Kyoo/ClientApp/src/app/show-details/show-details.component.html

@@ -1,2 +1,12 @@
-<p *ngIf="this.show; else elseBlock">Should display show details of: {{this.show.title}}</p>
+<div class="container pt-5">
-<ng-template #elseBlock>Loading</ng-template>
+  <img class="poster" src="thumb/{{this.show.slug}}" />
+  <div class="info">
+    <h1>{{this.show.title}}</h1>
+    <h6 *ngIf="show.endYear; else elseBlock">{{show.startYear}} - {{show.endYear}}</h6>
+    <ng-template #elseBlock><h2>{{show.startYear}}</h2></ng-template>
+  </div>
+</div>
+
+<div class="main">
+  <p>{{this.show.overview}}</p>
+</div>

Kyoo/ClientApp/src/app/show-details/show-details.component.scss

@@ -0,0 +1,19 @@
+.poster
+{
+  width: 25%;
+  background-color: #333333;
+  display: inline-block;
+}
+
+.info
+{
+  display: inline-block;
+  padding-left: 2.5em;
+  padding-bottom: 7em;
+  vertical-align: bottom;
+}
+
+.main
+{
+  background-color: var(--primary);
+}

Kyoo/ClientApp/src/app/show-details/show-details.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-show-details',
@@ -10,10 +11,16 @@ export class ShowDetailsComponent implements OnInit
 {
   show: Show;
 
-  constructor(private route: ActivatedRoute) { }
+  constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer) { }
 
   ngOnInit()
   {
     this.show = this.route.snapshot.data.show;
+    document.body.style.backgroundImage = "url(/backdrop/" + this.show.slug + ")";
+  }
+
+  getBackdrop()
+  {
+    return this.sanitizer.bypassSecurityTrustStyle("url(/backdrop/" + this.show.slug + ")");
   }
 }

Kyoo/ClientApp/src/models/show.js

@@ -0,0 +1 @@
+//# sourceMappingURL=show.js.map

Kyoo/ClientApp/src/models/show.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"show.js","sourceRoot":"","sources":["show.ts"],"names":[],"mappings":""}

Kyoo/ClientApp/src/models/show.ts

@@ -1,21 +1,21 @@
 interface Show
 {
   id: number;
-  Slug: string;
+  slug: string;
   title: string;
   //IEnumerable < > Aliases;
-  Path: string;
+  path: string;
-  Overview: string;
+  overview: string;
   //IEnumerable < > Genres;
   //Status ? Status;
 
-  StartYear: number;
+  startYear: number;
-  EndYear : number;
+  endYear : number;
 
-  ImgPrimary: string;
+  imgPrimary: string;
-  ImgThumb: string;
+  imgThumb: string;
-  ImgLogo: string;
+  imgLogo: string;
-  ImgBackdrop: string;
+  imgBackdrop: string;
 
-  ExternalIDs: string;
+  externalIDs: string;
 }

Kyoo/ClientApp/src/styles.scss

@@ -11,6 +11,11 @@ $theme-colors: (
 
 $body-bg: theme-color("primary");
 $body-color: theme-color("textPrimary");
+.body
+{
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
 
 @import "~bootstrap/scss/bootstrap";
 

Kyoo/Controllers/ThumbnailController.cs

@@ -2,8 +2,6 @@
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.FileProviders;
 
-// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
-
 namespace Kyoo.Controllers
 {
     public class ThumbnailController : Controller
@@ -18,7 +16,20 @@ namespace Kyoo.Controllers
         [HttpGet("thumb/{showSlug}")]
         public IActionResult GetShowThumb(string showSlug)
         {
-            string thumbPath = libraryManager.GetShowBySlug(showSlug).ImgPrimary;
+            string thumbPath = libraryManager.GetShowBySlug(showSlug)?.ImgPrimary;
+            if (thumbPath == null)
+                return NotFound();
+
+            return new PhysicalFileResult(thumbPath, "image/jpg");
+        }
+
+        [HttpGet("backdrop/{showSlug}")]
+        public IActionResult GetShowBackground(string showSlug)
+        {
+            string thumbPath = libraryManager.GetShowBySlug(showSlug)?.ImgBackdrop;
+            if (thumbPath == null)
+                return NotFound();
+
             return new PhysicalFileResult(thumbPath, "image/jpg");
         }
     }

Kyoo/InternalAPI/LibraryManager/LibraryManager.cs

@@ -199,7 +199,7 @@ namespace Kyoo.InternalAPI
 
         public IEnumerable<Show> QueryShows(string selection)
         {
-            string query = "SELECT * FROM shows;";
+            string query = "SELECT * FROM shows ORDER BY title;";
 
             using (SQLiteCommand cmd = new SQLiteCommand(query, sqlConnection))
             {

Kyoo/InternalAPI/ThumbnailsManager/ThumbnailsManager.cs

@@ -18,7 +18,17 @@ namespace Kyoo.InternalAPI.ThumbnailsManager
                 }
             }
 
+            string localBackdrop = Path.Combine(show.Path, "backdrop.jpg");
+            if (!File.Exists(localBackdrop))
+            {
+                using (WebClient client = new WebClient())
+                {
+                    client.DownloadFileAsync(new Uri(show.ImgBackdrop), localBackdrop);
+                }
+            }
+
             show.ImgPrimary = localThumb;
+            show.ImgBackdrop = localBackdrop;
             return show;
         }