diff --git a/Kyoo/ClientApp/src/app/show-details/show-details.component.html b/Kyoo/ClientApp/src/app/show-details/show-details.component.html
index bb864159..d2a4dcec 100644
--- a/Kyoo/ClientApp/src/app/show-details/show-details.component.html
+++ b/Kyoo/ClientApp/src/app/show-details/show-details.component.html
@@ -1,2 +1,12 @@
-
Should display show details of: {{this.show.title}}
-Loading
+
+

+
+
{{this.show.title}}
+ {{show.startYear}} - {{show.endYear}}
+ {{show.startYear}}
+
+
+
+
+
{{this.show.overview}}
+
diff --git a/Kyoo/ClientApp/src/app/show-details/show-details.component.scss b/Kyoo/ClientApp/src/app/show-details/show-details.component.scss
index e69de29b..0e5490a3 100644
--- a/Kyoo/ClientApp/src/app/show-details/show-details.component.scss
+++ b/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);
+}
diff --git a/Kyoo/ClientApp/src/app/show-details/show-details.component.ts b/Kyoo/ClientApp/src/app/show-details/show-details.component.ts
index 59c1c3c3..25c6ff6f 100644
--- a/Kyoo/ClientApp/src/app/show-details/show-details.component.ts
+++ b/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 + ")");
}
}
diff --git a/Kyoo/ClientApp/src/models/show.js b/Kyoo/ClientApp/src/models/show.js
new file mode 100644
index 00000000..a96c4398
--- /dev/null
+++ b/Kyoo/ClientApp/src/models/show.js
@@ -0,0 +1 @@
+//# sourceMappingURL=show.js.map
\ No newline at end of file
diff --git a/Kyoo/ClientApp/src/models/show.js.map b/Kyoo/ClientApp/src/models/show.js.map
new file mode 100644
index 00000000..f6018a3a
--- /dev/null
+++ b/Kyoo/ClientApp/src/models/show.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"show.js","sourceRoot":"","sources":["show.ts"],"names":[],"mappings":""}
\ No newline at end of file
diff --git a/Kyoo/ClientApp/src/models/show.ts b/Kyoo/ClientApp/src/models/show.ts
index 8e0d0384..5b598b9a 100644
--- a/Kyoo/ClientApp/src/models/show.ts
+++ b/Kyoo/ClientApp/src/models/show.ts
@@ -1,21 +1,21 @@
interface Show
{
id: number;
- Slug: string;
+ slug: string;
title: string;
//IEnumerable < > Aliases;
- Path: string;
- Overview: string;
+ path: string;
+ overview: string;
//IEnumerable < > Genres;
//Status ? Status;
- StartYear: number;
- EndYear : number;
+ startYear: number;
+ endYear : number;
- ImgPrimary: string;
- ImgThumb: string;
- ImgLogo: string;
- ImgBackdrop: string;
+ imgPrimary: string;
+ imgThumb: string;
+ imgLogo: string;
+ imgBackdrop: string;
- ExternalIDs: string;
+ externalIDs: string;
}
diff --git a/Kyoo/ClientApp/src/styles.scss b/Kyoo/ClientApp/src/styles.scss
index 2a7e6a55..70a74a0a 100644
--- a/Kyoo/ClientApp/src/styles.scss
+++ b/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";
diff --git a/Kyoo/Controllers/ThumbnailController.cs b/Kyoo/Controllers/ThumbnailController.cs
index 90d0e89f..8a48a6ed 100644
--- a/Kyoo/Controllers/ThumbnailController.cs
+++ b/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");
}
}
diff --git a/Kyoo/InternalAPI/LibraryManager/LibraryManager.cs b/Kyoo/InternalAPI/LibraryManager/LibraryManager.cs
index 282328b8..2307b81a 100644
--- a/Kyoo/InternalAPI/LibraryManager/LibraryManager.cs
+++ b/Kyoo/InternalAPI/LibraryManager/LibraryManager.cs
@@ -199,7 +199,7 @@ namespace Kyoo.InternalAPI
public IEnumerable QueryShows(string selection)
{
- string query = "SELECT * FROM shows;";
+ string query = "SELECT * FROM shows ORDER BY title;";
using (SQLiteCommand cmd = new SQLiteCommand(query, sqlConnection))
{
diff --git a/Kyoo/InternalAPI/ThumbnailsManager/ThumbnailsManager.cs b/Kyoo/InternalAPI/ThumbnailsManager/ThumbnailsManager.cs
index 4600c91e..0080e786 100644
--- a/Kyoo/InternalAPI/ThumbnailsManager/ThumbnailsManager.cs
+++ b/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;
}