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; }