From 585d8702508abe191bbe71ca07693297a0a64bfb Mon Sep 17 00:00:00 2001
From: TidusJar <tidusjar@gmail.com>
Date: Wed, 27 Feb 2019 09:58:12 +0000
Subject: [PATCH] Improved the details

---
 .../media-details.component.scss              | 17 +++----
 .../app/media-details/media-details.module.ts |  1 +
 .../movie/movie-details.component.html        | 21 ++++----
 .../tv/tv-details.component.html              | 48 ++++++++++++-------
 .../media-details/tv/tv-details.component.ts  | 11 +++++
 src/Ombi/Controllers/V2/SearchController.cs   | 24 ++++++----
 6 files changed, 81 insertions(+), 41 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
index 60e19573d..6abcee597 100644
--- a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
+++ b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
@@ -33,7 +33,7 @@
     background-size: cover;
     background-position: 50% 10%;
     transition: all .5s;
-    height: 550px;
+    height: 450px;
     color: #fff;
     position: relative;
 }
@@ -49,11 +49,10 @@
 
 #summary-wrapper .shadow-base,
 .summary-wrapper .shadow-base {
-    height: 120px;
     bottom: 0;
-    background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
-    background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
-    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
+    background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
+    background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
+    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
     background-repeat: repeat-x;
 }
 
@@ -101,7 +100,7 @@
 #summary-wrapper .summary .container h1,
 .summary-wrapper .summary .container h1 {
     margin: 0;
-    text-shadow: 0 0 20px #000;
+    text-shadow: 1px 1px 5px #000;
     line-height: 1.2;
 }
 
@@ -115,7 +114,8 @@
 }
 
 #info-wrapper .sidebar-poster {
-    margin-top: -180px;
+    margin-top: -300px;
+    width: 250px;
 }
 
 #info-wrapper .sidebar .poster {
@@ -163,6 +163,7 @@
 .tagline {
     margin-top: 10px;
     margin-left: 10px;
+    text-shadow: 1px 1px 5px #000;
 }
 
 .preview-poster {
@@ -193,7 +194,7 @@
 
 .small-middle-container{
 	margin: auto;
-	width: 86%;
+	width: 95%;
 }
 
 .keywords-panel {
diff --git a/src/Ombi/ClientApp/src/app/media-details/media-details.module.ts b/src/Ombi/ClientApp/src/app/media-details/media-details.module.ts
index 6c8074119..a96e40592 100644
--- a/src/Ombi/ClientApp/src/app/media-details/media-details.module.ts
+++ b/src/Ombi/ClientApp/src/app/media-details/media-details.module.ts
@@ -14,6 +14,7 @@ import { YoutubeTrailerComponent } from "./youtube-trailer.component";
 const routes: Routes = [
     { path: "movie/:movieDbId", component: MovieDetailsComponent },
     { path: "tv/:tvdbId/:search", component: TvDetailsComponent },
+    { path: "tv/:tvdbId", component: TvDetailsComponent },
 ];
 @NgModule({
     imports: [
diff --git a/src/Ombi/ClientApp/src/app/media-details/movie/movie-details.component.html b/src/Ombi/ClientApp/src/app/media-details/movie/movie-details.component.html
index e52596932..e68fd3aa8 100644
--- a/src/Ombi/ClientApp/src/app/media-details/movie/movie-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/movie/movie-details.component.html
@@ -23,9 +23,10 @@
 
     <section id="info-wrapper">
         <div class="small-middle-container">
+
             <div class="row">
                 <div class="col-md-2 col-sm-3 hidden-xs">
-                    <div class="sidebar sidebar-poster affixable affix-top" style="width: 173px;">
+                    <div class="sidebar sidebar-poster affixable affix-top">
                         <div class="poster">
                             <img class="real" src="https://image.tmdb.org/t/p/w300/{{movie.posterPath}}" alt="Poster"
                                 style="display: block;">
@@ -88,7 +89,8 @@
                                 'Common.Request' | translate }}</button>
                         </ng-template>
                     </span>
-                    <span *ngIf="isAdmin"><button mat-raised-button class="btn-spacing" color="warn" (click)="deny()">Deny</button></span>
+                    <span *ngIf="isAdmin"><button mat-raised-button class="btn-spacing" color="warn"
+                            (click)="deny()">Deny</button></span>
                     <span *ngIf="movie.available">
                         <a *ngIf="movie.plexUrl" mat-raised-button style="text-align: right"
                             class="btn-spacing btn-greem" href="{{movie.plexUrl}}" target="_blank"><i
@@ -139,12 +141,13 @@
                                     {{movie.budget | currency: 'USD'}}</span>
                             </div>
 
-                            <div>
-                                <span *ngIf="movie.genres"><strong>Genres:</strong>
-                                    <span *ngFor="let genre of movie.genres">
-                                        {{genre.name}} |
-                                    </span>
-                                </span>
+                            <div *ngIf="movie.genres">
+                                <strong>Genres:</strong>
+                                <mat-chip-list>
+                                    <mat-chip *ngFor="let genre of movie.genres">
+                                        {{genre.name}}
+                                    </mat-chip>
+                                </mat-chip-list>
                             </div>
                         </mat-card-content>
                     </mat-card>
@@ -282,7 +285,7 @@
 
 
 
-        
+
         <div class="bottom-page-gap">
         </div>
     </section>
diff --git a/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.html b/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.html
index 65d936b9c..39c6b7893 100644
--- a/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.html
@@ -25,7 +25,7 @@
         <div class="small-middle-container">
             <div class="row">
                 <div class="col-md-2 col-sm-3 hidden-xs">
-                    <div class="sidebar sidebar-poster affixable affix-top" style="width: 173px;">
+                    <div class="sidebar sidebar-poster affixable affix-top">
                         <div class="poster">
                             <img class="real" [src]="tv.images.medium" alt="Poster" style="display: block;">
                         </div>
@@ -58,31 +58,28 @@
                 </div>
 
                 <div class="col-12 col-lg-7 col-xl-7 media-row">
-                 
-                        <button *ngIf="!tv.fullyAvailable" mat-raised-button class="btn-spacing mat-warn" (click)="request()"
-                            ><i class="fa fa-plus"></i>
-                            {{ 'Common.Request' | translate }}</button>
 
-                        <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing mat-primary"  [disabled]>
-                            <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
+                    <button *ngIf="!tv.fullyAvailable" mat-raised-button class="btn-spacing mat-warn"
+                        (click)="request()"><i class="fa fa-plus"></i>
+                        {{ 'Common.Request' | translate }}</button>
+
+                    <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing mat-primary" [disabled]>
+                        <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
 
 
-                        <span *ngIf="tv.available">
-                            <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right"
-                                class="btn-spacing btn-greem" href="{{tv.plexUrl}}" target="_blank"><i
-                                    class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
+                    <span *ngIf="tv.available">
+                        <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
+                            href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
                             translate}}</a>
-                            <a *ngIf="tv.embyUrl" mat-raised-button class="mat-accent btn-spacing" href="{{tv.embyUrl}}"
-                                target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
+                        <a *ngIf="tv.embyUrl" mat-raised-button class="mat-accent btn-spacing" href="{{tv.embyUrl}}"
+                            target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
                             translate}}</a>
-                        </span>
+                    </span>
                 </div>
             </div>
 
             <div class="row">
                 <div class="col-12 col-md-3">
-                    <!-- <button *ngIf="tv.belongsToCollection" mat-raised-button
-                        class="btn-spacing-below full-width mat-elevation-z8">{{tv.belongsToCollection.name}}</button> -->
 
                     <mat-card class="card-full mat-elevation-z8">
                         <mat-card-content>
@@ -102,6 +99,9 @@
                             <div>
                                 <span *ngIf="tv.status"><strong>Status:</strong> {{tv.status}}</span>
                             </div>
+                            <div>
+                                <span *ngIf="tv.network"><strong>Network:</strong> {{tv.network.name}}</span>
+                            </div>
 
                             <div>
                                 <span *ngIf="tv.genre"><strong>Genres:</strong>
@@ -110,6 +110,14 @@
                                     </span>
                                 </span>
                             </div>
+
+
+                            <div>
+                                <span *ngIf="seasonCount"><strong>Seasons:</strong> {{seasonCount}}</span>
+                            </div>
+                            <div>
+                                <span *ngIf="totalEpisodes"><strong>Episodes:</strong> {{totalEpisodes}}</span>
+                            </div>
                         </mat-card-content>
                     </mat-card>
 
@@ -145,6 +153,14 @@
                         </mat-card-content>
                     </mat-card>
                 </div> -->
+                <div class="col-12 col-md-3">
+                    <mat-card class="mat-elevation-z8">
+                        <mat-card-content>
+
+
+                        </mat-card-content>
+                    </mat-card>
+                </div>
 
                 <div class="col-12 col-md-9">
                     <mat-card class="card-full mat-elevation-z8">
diff --git a/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.ts b/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.ts
index 3742fa062..70f6762db 100644
--- a/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.ts
+++ b/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.ts
@@ -15,6 +15,11 @@ import { EpisodeRequestComponent } from "../../shared/episode-request/episode-re
 export class TvDetailsComponent {
     public tv: ISearchTvResultV2;
     public fromSearch: boolean;
+
+    public seasonCount: number;
+    public totalEpisodes: number = 0;
+    public nextEpisode: any;
+
     private tvdbId: number;
 
     constructor(private searchService: SearchV2Service, private route: ActivatedRoute,
@@ -35,6 +40,12 @@ export class TvDetailsComponent {
         } else {
             this.tv = await this.searchService.getTvInfo(this.tvdbId);
         }
+
+        this.tv.seasonRequests.forEach(season => {
+            this.totalEpisodes = this.totalEpisodes + season.episodes.length;
+        });
+        this.seasonCount = this.tv.seasonRequests.length;
+
         const tvBanner = await this.imageService.getTvBanner(this.tvdbId).toPromise();
         this.tv.background = this.sanitizer.bypassSecurityTrustStyle("url(" + tvBanner + ")");
     }
diff --git a/src/Ombi/Controllers/V2/SearchController.cs b/src/Ombi/Controllers/V2/SearchController.cs
index 0e6a826e9..139deb9f9 100644
--- a/src/Ombi/Controllers/V2/SearchController.cs
+++ b/src/Ombi/Controllers/V2/SearchController.cs
@@ -1,11 +1,13 @@
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Http;
+
+using System.Threading.Tasks;
+using System.Collections.Generic;
+
+using Ombi.Core;
 using Ombi.Api.TheMovieDb.Models;
 using Ombi.Core.Engine.V2;
-using System.Collections.Generic;
-using Microsoft.AspNetCore.Http;
-using Ombi.Core;
 using Ombi.Core.Engine.Interfaces;
 using Ombi.Core.Models.Search;
 using Ombi.Core.Models.Search.V2;
@@ -18,8 +20,8 @@ namespace Ombi.Controllers.V2
     [ApiController]
     public class SearchController : ControllerBase
     {
-        public SearchController(IMultiSearchEngine multiSearchEngine,
-            ITvSearchEngine tvSearchEngine, IMovieEngineV2 v2Movie, ITVSearchEngineV2 v2Tv)
+        public SearchController(IMultiSearchEngine multiSearchEngine, ITvSearchEngine tvSearchEngine,
+            IMovieEngineV2 v2Movie, ITVSearchEngineV2 v2Tv)
         {
             _multiSearchEngine = multiSearchEngine;
             _tvSearchEngine = tvSearchEngine;
@@ -37,6 +39,10 @@ namespace Ombi.Controllers.V2
         /// <summary>
         /// Returns search results for both TV and Movies
         /// </summary>
+        /// <remarks>The ID's returned by this are all TheMovieDbID's even for the TV Shows. You can call <see cref="GetTvInfoByMovieId"/> to get TV
+        ///  Show information using the MovieDbId.</remarks>
+        /// <param name="searchTerm">The search you want, this can be for a movie or TV show e.g. Star Wars will return
+        ///  all Star Wars movies and Star Wars Rebels the TV Sho</param>
         /// <returns></returns>
         [HttpGet("multi/{searchTerm}")]
         public async Task<List<MultiSearch>> MultiSearch(string searchTerm)
@@ -47,6 +53,7 @@ namespace Ombi.Controllers.V2
         /// <summary>
         /// Returns details for a single movie
         /// </summary>
+        /// <param name="movieDbId">The MovieDB Id</param>
         [HttpGet("movie/{movieDbId}")]
         public async Task<MovieFullInfoViewModel> GetMovieInfo(int movieDbId)
         {
@@ -57,7 +64,8 @@ namespace Ombi.Controllers.V2
         /// <summary>
         /// Returns details for a single show
         /// </summary>
-        /// <returns></returns>
+        /// <remarks>TVMaze is the TV Show Provider</remarks>
+        /// <param name="tvdbid">The TVDB Id</param>
         [HttpGet("tv/{tvdbId}")]
         public async Task<SearchFullInfoTvShowViewModel> GetTvInfo(int tvdbid)
         {