Finishing the top design of the show details view.

This commit is contained in:
Zoe Roux 2019-08-31 00:58:21 +02:00
parent e1a92a3d36
commit 352e4cbf7b
8 changed files with 232 additions and 120 deletions

View File

@ -345,7 +345,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -366,12 +367,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -386,17 +389,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -513,7 +519,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -525,6 +532,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -539,6 +547,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -546,12 +555,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -570,6 +581,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -650,7 +662,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -662,6 +675,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -747,7 +761,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -783,6 +798,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -802,6 +818,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -845,12 +862,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
@ -5839,12 +5858,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -5863,6 +5884,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -5956,6 +5978,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -6041,7 +6064,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -6141,12 +6165,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
@ -11188,7 +11214,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -11209,12 +11236,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -11229,17 +11258,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -11356,7 +11388,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -11368,6 +11401,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -11382,6 +11416,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -11389,12 +11424,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -11413,6 +11450,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -11493,7 +11531,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -11505,6 +11544,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -11590,7 +11630,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -11626,6 +11667,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -11645,6 +11687,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -11688,12 +11731,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},

View File

@ -1,6 +1,6 @@
<header style="height: 68px;">
<div class="fixed-top">
<nav class="navbar navbar-dark bg-secondary">
<nav id="toolbar" class="navbar navbar-dark bg-secondary">
<a class="navbar-brand nav-item ml-3" routerLink="/">
Kyoo
</a>

View File

@ -1,4 +1,6 @@
<div class="container pt-5">
<img id="backdrop" class="backdrop" src="backdrop/{{this.show.slug}}" />
<div class="header container pt-sm-5">
<div class="row">
<img class="poster d-none d-sm-block" src="thumb/{{this.show.slug}}" />
<div class="main col">
@ -33,16 +35,18 @@
</div>
<div class="row pt-3 d-md-none">
<p class="mr-1">Studio: <b><a routerLink="/studio/{{this.show.studio.slug}}">{{this.show.studio.name}}</a></b></p>
<p>Directors: <b></b></p>
<div class="d-sm-none">
<p>Genres: <span *ngFor="let genre of this.show.genres; let isLast = last"><b><a routerLink="/genre/{{genre.slug}}">{{genre.name}}</a></b>{{isLast ? "" : ", "}}</span></p>
<div class="col">
<p class="mr-1 d-inline-block">Studio: <b><a routerLink="/studio/{{this.show.studio.slug}}">{{this.show.studio.name}}</a></b></p>
<p class="d-inline-block">Directors: <b></b></p>
<div class="d-sm-none">
<p>Genres: <span *ngFor="let genre of this.show.genres; let isLast = last"><b><a routerLink="/genre/{{genre.slug}}">{{genre.name}}</a></b>{{isLast ? "" : ", "}}</span></p>
</div>
</div>
</div>
<div class="row pt-3">
<div class="col">
<p class="text-justify">{{this.show.overview}}</p>
<p class="text-justify overview">{{this.show.overview}}</p>
</div>
<mat-divider vertical></mat-divider>
<div class="col-3 d-none d-sm-block">
@ -69,9 +73,3 @@
<button mat-fab id="rightBtn"></button>
</div>
</div>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>

View File

@ -7,6 +7,36 @@ a
color: #ffffff;
}
.backdrop
{
width: 100%;
margin-top: -68px;
max-height: 75vh;
object-fit: cover;
}
.header
{
@include media-breakpoint-up(sm)
{
margin-top: -14rem;
}
@include media-breakpoint-up(md)
{
margin-top: -14rem;
}
@include media-breakpoint-up(lg)
{
margin-top: -20rem;
}
@include media-breakpoint-up(xl)
{
margin-top: -24rem;
}
}
.poster
{
@ -26,6 +56,12 @@ a
.info
{
margin-top: -3.25rem;
@include media-breakpoint-up(sm)
{
margin-top: 0;
}
}
.buttons
@ -38,39 +74,46 @@ a
}
}
.secondary
{
position: relative;
> img
.secondary
{
max-width: 100%;
position: relative;
> img
{
max-width: 100%;
}
> div
{
position: absolute;
bottom: 0;
}
}
> div
.overview
{
position: absolute;
bottom: 0;
@include media-breakpoint-up(sm)
{
padding-top: 2.25rem;
}
}
}
.people-container
{
display: flex;
overflow: hidden;
}
.people-container
{
display: flex;
overflow: hidden;
}
.people
{
width: 15%;
margin: 1em;
text-decoration: none;
color: inherit;
outline: none;
flex-shrink: 0;
flex-grow: 0;
/*@include media-breakpoint-up(md)
.people
{
width: 15%;
margin: 1em;
text-decoration: none;
color: inherit;
outline: none;
flex-shrink: 0;
flex-grow: 0;
/*@include media-breakpoint-up(md)
{
width: 25%;
}
@ -84,7 +127,7 @@ a
{
width: 18%;
}*/
/*&:focus, &:hover
/*&:focus, &:hover
{
> img
{
@ -96,48 +139,48 @@ a
text-decoration: underline;
}
}*/
> img
{
width: 100%;
height: 0;
padding-top: 147.0588%;
background-size: cover;
background-color: #333333;
}
> p
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
margin-bottom: 0px;
&.role
> img
{
opacity: 0.8;
font-size: 0.8em;
width: 100%;
height: 0;
padding-top: 147.0588%;
background-size: cover;
background-color: #333333;
}
> p
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
margin-bottom: 0px;
&.role
{
opacity: 0.8;
font-size: 0.8em;
}
}
&:hover
{
cursor: pointer;
}
}
&:hover
#leftBtn
{
cursor: pointer;
position: absolute;
left: 0;
top: 33%;
outline: none;
}
}
#leftBtn
{
position: absolute;
left: 0;
top: 33%;
outline: none;
}
#rightBtn
{
position: absolute;
right: 0;
top: 33%;
outline: none;
}
#rightBtn
{
position: absolute;
right: 0;
top: 33%;
outline: none;
}

View File

@ -11,14 +11,36 @@ export class ShowDetailsComponent implements OnInit
{
show: Show;
private toolbar: HTMLElement
private backdrop: HTMLElement
constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer) { }
ngOnInit()
{
this.show = this.route.snapshot.data.show;
//document.body.style.backgroundImage = "url(/backdrop/" + this.show.slug + ")";
this.toolbar = document.getElementById("toolbar");
this.backdrop = document.getElementById("backdrop");
window.addEventListener("scroll", this.scroll, true);
this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, 0) !important`);
}
ngOnDestroy()
{
window.removeEventListener("scroll", this.scroll, true);
}
scroll = (event) =>
{
let opacity: number = 2 * window.scrollY / this.backdrop.clientHeight;
this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, ${opacity}) !important`);
}
getPeopleIcon(slug: string)
{
return this.sanitizer.bypassSecurityTrustStyle("url(/peopleimg/" + slug + ")");

View File

@ -481,11 +481,14 @@ namespace Kyoo.InternalAPI
cmd.ExecuteNonQuery();
}
cmd.CommandText = "INSERT INTO studiosLinks (studioID, showID) VALUES($studioID, $showID);";
long studioID = GetOrCreateStudio(show.studio);
cmd.Parameters.AddWithValue("$studioID", studioID);
cmd.Parameters.AddWithValue("$showID", showID);
cmd.ExecuteNonQuery();
if(show.studio != null)
{
cmd.CommandText = "INSERT INTO studiosLinks (studioID, showID) VALUES($studioID, $showID);";
long studioID = GetOrCreateStudio(show.studio);
cmd.Parameters.AddWithValue("$studioID", studioID);
cmd.Parameters.AddWithValue("$showID", showID);
cmd.ExecuteNonQuery();
}
return showID;
}

View File

@ -19,9 +19,13 @@ namespace Kyoo.InternalAPI.ThumbnailsManager
public Show Validate(Show show)
{
string localThumb = Path.Combine(show.Path, "poster.jpg");
string localLogo = Path.Combine(show.Path, "logo.png");
string localBackdrop = Path.Combine(show.Path, "backdrop.jpg");
if (show.ImgPrimary != null)
{
string localThumb = Path.Combine(show.Path, "poster.jpg");
if (!File.Exists(localThumb))
{
using (WebClient client = new WebClient())
@ -29,12 +33,11 @@ namespace Kyoo.InternalAPI.ThumbnailsManager
client.DownloadFileAsync(new Uri(show.ImgPrimary), localThumb);
}
}
show.ImgPrimary = localThumb;
}
show.ImgPrimary = localThumb;
if (show.ImgLogo != null)
{
string localLogo = Path.Combine(show.Path, "logo.png");
if (!File.Exists(localLogo))
{
using (WebClient client = new WebClient())
@ -42,12 +45,11 @@ namespace Kyoo.InternalAPI.ThumbnailsManager
client.DownloadFileAsync(new Uri(show.ImgLogo), localLogo);
}
}
show.ImgLogo = localLogo;
}
show.ImgLogo = localLogo;
if (show.ImgBackdrop != null)
{
string localBackdrop = Path.Combine(show.Path, "backdrop.jpg");
if (!File.Exists(localBackdrop))
{
using (WebClient client = new WebClient())
@ -55,8 +57,8 @@ namespace Kyoo.InternalAPI.ThumbnailsManager
client.DownloadFileAsync(new Uri(show.ImgBackdrop), localBackdrop);
}
}
show.ImgBackdrop = localBackdrop;
}
show.ImgBackdrop = localBackdrop;
return show;
}
@ -65,7 +67,10 @@ namespace Kyoo.InternalAPI.ThumbnailsManager
{
for (int i = 0; i < people?.Count; i++)
{
string localThumb = config.GetValue<string>("peoplePath") + "/" + people[i].slug + ".jpg";
string root = config.GetValue<string>("peoplePath");
Directory.CreateDirectory(root);
string localThumb = root + "/" + people[i].slug + ".jpg";
if (!File.Exists(localThumb))
{
using (WebClient client = new WebClient())

View File

@ -1,15 +1,11 @@
using Kyoo.InternalAPI;
using Kyoo.InternalAPI.MetadataProvider;
using Kyoo.InternalAPI.ThumbnailsManager;
using Kyoo.Models;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.FileProviders;
using System.Diagnostics;
using System.Web.Http;
namespace Kyoo