From b7f74d9f966f4f02fb4e65b966acfdef499c341f Mon Sep 17 00:00:00 2001
From: Jamie Rees <tidusjar@gmail.com>
Date: Fri, 8 Mar 2019 10:32:21 +0000
Subject: [PATCH] more refactoring around the details pages !wip

---
 .../src/app/media-details/components/index.ts |   4 +
 .../movie/movie-details.component.html        | 326 ++++++++----------
 .../cast-carousel.component.html              |  24 ++
 .../cast-carousel/cast-carousel.component.ts  |  10 +
 .../media-poster/media-poster.component.html  |  10 +
 .../media-poster/media-poster.component.ts    |  10 +
 .../social-icons/social-icons.component.ts    |   4 +-
 .../components/tv/tv-details.component.html   | 151 ++++----
 8 files changed, 267 insertions(+), 272 deletions(-)
 create mode 100644 src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html
 create mode 100644 src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.ts
 create mode 100644 src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html
 create mode 100644 src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.ts

diff --git a/src/Ombi/ClientApp/src/app/media-details/components/index.ts b/src/Ombi/ClientApp/src/app/media-details/components/index.ts
index 7346ac6c0..0e149c06c 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/index.ts
+++ b/src/Ombi/ClientApp/src/app/media-details/components/index.ts
@@ -5,6 +5,8 @@ import { MovieInformationPanelComponent } from "./movie/panels/movie-information
 import { TvInformationPanelComponent } from "./tv/panels/tv-information-panel.component";
 import { TopBannerComponent } from "./shared/top-banner/top-banner.component";
 import { SocialIconsComponent } from "./shared/social-icons/social-icons.component";
+import { MediaPosterComponent } from "./shared/media-poster/media-poster.component";
+import { CastCarouselComponent } from "./shared/cast-carousel/cast-carousel.component";
 
 export const components: any[] = [
     MovieDetailsComponent,
@@ -14,4 +16,6 @@ export const components: any[] = [
     TvInformationPanelComponent,
     TopBannerComponent,
     SocialIconsComponent,
+    MediaPosterComponent,
+    CastCarouselComponent,
 ];
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
index a8ffa8657..5ce3fe39d 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
@@ -1,204 +1,170 @@
 <div *ngIf="movie" class="dark-theme">
 
-    <top-banner [background]="movie.background" [available]="movie.available" 
-        [title]="movie.title" [releaseDate]="movie.releaseDate" [tagline]="movie.tagline"></top-banner>
+  <top-banner [background]="movie.background" [available]="movie.available" [title]="movie.title" [releaseDate]="movie.releaseDate"
+    [tagline]="movie.tagline"></top-banner>
 
-    
 
-    <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">
+  <section id="info-wrapper">
+    <div class="small-middle-container">
+
+      <div class="row">
+
+        <media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
+
+        <!--Next to poster-->
+        <div class="col-10 col-lg-3 col-xl-3 media-row">
+
+          <social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos.results.length > 0"
+            (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId"
+            [instagram]="movie.externalIds.instagramId" [available]="movie.available" [plexUrl]="movie.plexUrl"
+            [embyUrl]="movie.embyUrl"></social-icons>
+
+        </div>
+
+        <div class="col-12 col-lg-6 col-xl-6 media-row">
+
+          <button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
+            'Common.Available' | translate }}</button>
+          <span *ngIf="!movie.available">
+            <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
+            <ng-template #requestedBtn>
+              <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i class="fa fa-check"></i>
+                {{ 'Common.Requested' | translate }}</button>
+            </ng-template>
+            <ng-template #notRequestedBtn>
+              <button mat-raised-button class="btn-spacing" (click)="request()">
+                <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i *ngIf="!movie.requestProcessing && !movie.processed"
+                  class="fa fa-plus"></i>
+                <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
+                'Common.Request' | translate }}</button>
+            </ng-template>
+          </span>
+          <span *ngIf="isAdmin && hasRequest">
+            <button (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
+              <i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
+            </button>
+
+            <button mat-raised-button class="btn-spacing" color="warn" (click)="deny()"> <i class="fa fa-times"></i> {{
+              'Requests.Deny' | translate }}</button></span>
+
+        </div>
+      </div>
+
+      <div class="row">
+
+        <div class="col-12 col-md-2">
+          <button *ngIf="movie.belongsToCollection" mat-raised-button class="spacing-below full-width mat-elevation-z8">{{movie.belongsToCollection.name}}</button>
+
+          <mat-card class="mat-elevation-z8">
+            <mat-card-content class="medium-font">
+              <movie-information-panel [movie]="movie"></movie-information-panel>
+            </mat-card-content>
+          </mat-card>
+        </div>
+
+        <div class="col-12 col-md-10">
+          <div class="row">
+            <div class="col-12">
+              <mat-card class=" mat-elevation-z8 spacing-below">
+                <mat-card-content>
+                  {{movie.overview}}
+                </mat-card-content>
+              </mat-card>
+
+
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-12">
+                <cast-carousel [cast]="movie.credits.cast"></cast-carousel>
+            
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-12">
+              <mat-accordion class="mat-elevation-z8  spacing-below">
+                <mat-expansion-panel>
+                  <mat-expansion-panel-header>
+                    <mat-panel-title>
+                      Recommendations
+                    </mat-panel-title>
+                  </mat-expansion-panel-header>
+
+                  <div class="row card-spacer" *ngIf="movie.recommendations.results.length > 0">
+
+                    <div class="col-md-2" *ngFor="let r of movie.recommendations.results">
+                      <div class="sidebar affixable affix-top preview-poster">
                         <div class="poster">
-                            <img class="real" src="https://image.tmdb.org/t/p/w300/{{movie.posterPath}}" alt="Poster"
-                                style="display: block;">
+                          <a [routerLink]="'/details/movie/'+r.id">
+                            <img class="real grow" matTooltip="{{r.title}}" src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}"
+                              alt="Poster" style="display: block;">
+                          </a>
                         </div>
-                        <!--Underneith poster-->
-                        <br />
+                      </div>
+
                     </div>
-                </div>
+                  </div>
+                </mat-expansion-panel>
+                <mat-expansion-panel>
+                  <mat-expansion-panel-header>
+                    <mat-panel-title>
+                      Similar
+                    </mat-panel-title>
+                  </mat-expansion-panel-header>
 
-                <!--Next to poster-->
-                <div class="col-10 col-lg-3 col-xl-3 media-row">
+                  <div class="row card-spacer" *ngIf="movie.similar.results.length > 0">
 
-                    <social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos.results.length > 0"
-                        (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId"
-                        [facebook]="movie.externalIds.facebookId" [instagram]="movie.externalIds.instagramId" [available]="movie.available"
-                        [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl"></social-icons>
-                        
-                </div>
+                    <div class="col-md-2" *ngFor="let r of movie.similar.results">
+                      <div class="sidebar affixable affix-top preview-poster">
+                        <div class="poster ">
+                          <a [routerLink]="'/details/movie/'+r.id">
+                            <img class="real grow" matTooltip="{{r.title}}" src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}"
+                              alt="Poster" style="display: block;">
+                          </a>
+                        </div>
+                      </div>
 
-                <div class="col-12 col-lg-7 col-xl-7 media-row">
+                    </div>
+                  </div>
+                </mat-expansion-panel>
+                <mat-expansion-panel>
+                  <mat-expansion-panel-header>
+                    <mat-panel-title>
+                      Videos
+                    </mat-panel-title>
+                  </mat-expansion-panel-header>
 
-                    <button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
-                            'Common.Available' | translate }}</button>
-                    <span *ngIf="!movie.available">
-                        <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
-                        <ng-template #requestedBtn>
-                            <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i
-                                    class="fa fa-check"></i>
-                                {{ 'Common.Requested' | translate }}</button>
-                        </ng-template>
-                        <ng-template #notRequestedBtn>
-                            <button mat-raised-button class="btn-spacing" (click)="request()">
-                                <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
-                                    *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
-                                <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
-                                'Common.Request' | translate }}</button>
-                        </ng-template>
-                    </span>
-                    <span *ngIf="isAdmin && hasRequest">
-                        <button (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
-                            <i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
-                        </button>
+                  <div class="row card-spacer" *ngIf="movie.videos.results.length > 0">
 
-                        <button mat-raised-button class="btn-spacing" color="warn"
-                            (click)="deny()">  <i class="fa fa-times"></i> {{ 'Requests.Deny' | translate }}</button></span>
-
-                </div>
+                    <div class="col-md-6" *ngFor="let video of movie.videos.results">
+                      <iframe width="100%" height="315px" [src]="'https://www.youtube.com/embed/' + video.key | safe"
+                        frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen></iframe>
+                    </div>
+                  </div>
+                </mat-expansion-panel>
+              </mat-accordion>
             </div>
-
-            <div class="row">
-
-                <div class="col-12 col-md-2">
-                    <button *ngIf="movie.belongsToCollection" mat-raised-button
-                        class="spacing-below full-width mat-elevation-z8">{{movie.belongsToCollection.name}}</button>
-
-                    <mat-card class="mat-elevation-z8">
-                        <mat-card-content class="medium-font">
-                            <movie-information-panel [movie]="movie"></movie-information-panel>
-                        </mat-card-content>
-                    </mat-card>
-                </div>
-
-                <div class="col-12 col-md-10">
-                    <div class="row">
-                        <div class="col-12">
-                            <mat-card class=" mat-elevation-z8 spacing-below">
-                                <mat-card-content>
-                                    {{movie.overview}}
-                                </mat-card-content>
-                            </mat-card>
-
-
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-12">
-                            <mat-card class="mat-elevation-z8  spacing-below">
-                                <mat-card-header>Cast</mat-card-header>
-                                <mat-card-content>
-                                    <p-carousel [value]="movie.credits.cast" [numVisible]="5" easing="easeOutStrong">
-                                        <ng-template let-item pTemplate="item">
-                                            <div class="row justify-content-md-center">
-                                                <div class="col-12">
-                                                    <img class="cast-profile-img" *ngIf="item.profile_path"
-                                                        src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
-                                                    <!-- TODO get profile image default -->
-                                                </div>
-                                                <div class="col-12">
-                                                    <span><strong>Character:</strong> {{item.character}}</span>
-                                                </div>
-                                                <div class="col-12">
-                                                    <span><strong>Actor:</strong> {{item.name}}</span>
-                                                </div>
-                                            </div>
-                                        </ng-template>
-                                    </p-carousel>
-                                </mat-card-content>
-                            </mat-card>
-                        </div>
-                    </div>
-
-                    <div class="row">
-                        <div class="col-12">
-                            <mat-accordion class="mat-elevation-z8  spacing-below">
-                                <mat-expansion-panel>
-                                    <mat-expansion-panel-header>
-                                        <mat-panel-title>
-                                            Recommendations
-                                        </mat-panel-title>
-                                    </mat-expansion-panel-header>
-
-                                    <div class="row card-spacer" *ngIf="movie.recommendations.results.length > 0">
-
-                                        <div class="col-md-2" *ngFor="let r of movie.recommendations.results">
-                                            <div class="sidebar affixable affix-top preview-poster">
-                                                <div class="poster">
-                                                    <a [routerLink]="'/details/movie/'+r.id">
-                                                        <img class="real grow" matTooltip="{{r.title}}"
-                                                            src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}"
-                                                            alt="Poster" style="display: block;">
-                                                    </a>
-                                                </div>
-                                            </div>
-
-                                        </div>
-                                    </div>
-                                </mat-expansion-panel>
-                                <mat-expansion-panel>
-                                    <mat-expansion-panel-header>
-                                        <mat-panel-title>
-                                            Similar
-                                        </mat-panel-title>
-                                    </mat-expansion-panel-header>
-
-                                    <div class="row card-spacer" *ngIf="movie.similar.results.length > 0">
-
-                                        <div class="col-md-2" *ngFor="let r of movie.similar.results">
-                                            <div class="sidebar affixable affix-top preview-poster">
-                                                <div class="poster ">
-                                                    <a [routerLink]="'/details/movie/'+r.id">
-                                                        <img class="real grow" matTooltip="{{r.title}}"
-                                                            src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}"
-                                                            alt="Poster" style="display: block;">
-                                                    </a>
-                                                </div>
-                                            </div>
-
-                                        </div>
-                                    </div>
-                                </mat-expansion-panel>
-                                <mat-expansion-panel>
-                                    <mat-expansion-panel-header>
-                                        <mat-panel-title>
-                                            Videos
-                                        </mat-panel-title>
-                                    </mat-expansion-panel-header>
-
-                                    <div class="row card-spacer" *ngIf="movie.videos.results.length > 0">
-
-                                        <div class="col-md-6" *ngFor="let video of movie.videos.results">
-                                            <iframe width="100%" height="315px"
-                                                [src]="'https://www.youtube.com/embed/' + video.key | safe"
-                                                frameborder="0"
-                                                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                                                allowfullscreen></iframe>
-                                        </div>
-                                    </div>
-                                </mat-expansion-panel>
-                            </mat-accordion>
-                        </div>
-                    </div>
-
-
-
-                </div>
-            </div>
-
+          </div>
 
 
 
         </div>
+      </div>
 
 
 
 
-        <div class="bottom-page-gap">
-        </div>
-    </section>
+    </div>
+
+
+
+
+    <div class="bottom-page-gap">
+    </div>
+  </section>
 
 
 
@@ -207,4 +173,4 @@
 
 
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html
new file mode 100644
index 000000000..310c710ea
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html
@@ -0,0 +1,24 @@
+<mat-card class="mat-elevation-z8  spacing-below">
+    <mat-card-header>Cast</mat-card-header>
+    <mat-card-content>
+      <p-carousel [value]="cast" [numVisible]="5" easing="easeOutStrong">
+        <ng-template let-item pTemplate="item">
+          <div class="row justify-content-md-center">
+            <div class="col-12">
+              <img class="cast-profile-img" *ngIf="item.profile_path" src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
+              <img class="cast-profile-img" *ngIf="item.character?.image?.medium" [src]="item.character.image.medium">
+              <!-- TODO get profile image default -->
+            </div>
+            <div class="col-12">
+              <span *ngIf="!item.character?.name"><strong>Character:</strong> {{item.character}}</span>
+              <span *ngIf="item.character.name"><strong>Character:</strong> {{item.character.name}}</span>
+            </div>
+            <div class="col-12">
+              <span *ngIf="item.name"><strong>Actor:</strong> {{item.name}}</span>
+              <span *ngIf="item.person?.name"><strong>Actor:</strong> {{item.person.name}}</span>
+            </div>
+          </div>
+        </ng-template>
+      </p-carousel>
+    </mat-card-content>
+  </mat-card>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.ts b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.ts
new file mode 100644
index 000000000..203841250
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: "cast-carousel",
+    templateUrl: "./cast-carousel.component.html",
+})
+export class CastCarouselComponent {
+    
+    @Input() cast: any[];
+}
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html
new file mode 100644
index 000000000..74fd2a4c6
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html
@@ -0,0 +1,10 @@
+<div class="col-md-2 col-sm-3 hidden-xs">
+    <div class="sidebar sidebar-poster affixable affix-top">
+        <div class="poster">
+            <img class="real" src="{{posterPath}}" alt="Poster"
+                style="display: block;">
+        </div>
+        <!--Underneith poster-->
+        <br />
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.ts b/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.ts
new file mode 100644
index 000000000..8e7a3b2b4
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.ts
@@ -0,0 +1,10 @@
+import { Component, Inject, Input, Output, EventEmitter } from "@angular/core";
+
+@Component({
+    selector: "media-poster",
+    templateUrl: "./media-poster.component.html",
+})
+export class MediaPosterComponent {
+    
+    @Input() posterPath: string;
+}
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.ts b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.ts
index c21bc10cc..25897b9a1 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.ts
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.ts
@@ -18,10 +18,10 @@ export class SocialIconsComponent {
     @Input() plexUrl: string;
     @Input() embyUrl: string;
     
-    @Output() openTrailer: EventEmitter<any>;
+    @Output() openTrailer: EventEmitter<any> = new EventEmitter();
     
 
     public openDialog() {
-        this.openTrailer.emit;
+        this.openTrailer.emit();
     }
 }
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
index 1de945890..b6ae8644a 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
@@ -1,106 +1,77 @@
 <div *ngIf="tv">
 
-    <top-banner [background]="tv.background" [available]="tv.available" 
-        [title]="tv.title" [releaseDate]="tv.firstAired" [tagline]="tv.certification"></top-banner>
+  <top-banner [background]="tv.background" [available]="tv.available" [title]="tv.title" [releaseDate]="tv.firstAired"
+    [tagline]="tv.certification"></top-banner>
 
-    <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">
-                        <div class="poster">
-                            <img class="real" [src]="tv.images.medium" alt="Poster" style="display: block;">
-                        </div>
-                        <!--Underneith poster-->
-                        <br />
-                    </div>
-                </div>
+  <section id="info-wrapper">
+    <div class="small-middle-container">
+      <div class="row">
 
-                <!--Next to poster-->
-                <div class="col-10 col-lg-3 col-xl-3 media-row">
+        <media-poster [posterPath]="tv.images.medium"></media-poster>
 
-                        <social-icons [homepage]="tv.homepage" [tvdbId]="tv.id" [hasTrailer]="tv.trailer"
-                                (openTrailer)="openDialog()" [imdbId]="tv.imdbId" [available]="tv.available"
-                                [plexUrl]="tv.plexUrl" [embyUrl]="tv.embyUrl"></social-icons>
-               
-                </div>
+        <!--Next to poster-->
+        <div class="col-12 col-lg-3 col-xl-3 media-row">
 
-                <div class="col-12 col-lg-7 col-xl-7 media-row">
+          <social-icons [homepage]="tv.homepage" [tvdbId]="tv.id" [hasTrailer]="tv.trailer" (openTrailer)="openDialog()"
+            [imdbId]="tv.imdbId" [available]="tv.available" [plexUrl]="tv.plexUrl" [embyUrl]="tv.embyUrl"></social-icons>
 
-                    <button *ngIf="!tv.fullyAvailable" mat-raised-button class="btn-spacing mat-warn"
-                        (click)="request()"><i class="fa fa-plus"></i>
-                        {{ 'Common.Request' | translate }}</button>
+        </div>
 
-                    <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing mat-primary" [disabled]>
-                        <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
-                </div>
+        <div class="col-12 col-lg-6 col-xl-6 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>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-12 col-md-2">
+
+          <mat-card class="mat-elevation-z8">
+            <mat-card-content class="medium-font">
+              <tv-information-panel [tv]="tv"></tv-information-panel>
+            </mat-card-content>
+          </mat-card>
+
+        </div>
+
+
+        <div class="col-12 col-md-10">
+          <div class="row">
+            <div class="col-12">
+              <mat-card class="mat-elevation-z8 spacing-below">
+                <mat-card-content>
+                  {{tv.overview}}
+                </mat-card-content>
+              </mat-card>
+            </div>
+            <div class="col-12">
+              <cast-carousel [cast]="tv.cast"></cast-carousel>
             </div>
 
-            <div class="row">
-                <div class="col-12 col-md-2">
+          </div>
 
-                    <mat-card class="mat-elevation-z8">
-                        <mat-card-content class="medium-font">
-                            <tv-information-panel [tv]="tv"></tv-information-panel>
-                        </mat-card-content>
-                    </mat-card>
-
-                </div>
+        </div>
 
 
-                <div class="col-12 col-md-10">
-                    <div class="row">
-                        <div class="col-12">
-                            <mat-card class="mat-elevation-z8 spacing-below">
-                                <mat-card-content>
-                                    {{tv.overview}}
-                                </mat-card-content>
-                            </mat-card>
-                        </div>
-                        <div class="col-12">
-                            <mat-card class="mat-elevation-z8 spacing-below">
-                                <mat-card-header>Cast</mat-card-header>
-                                <mat-card-content>
-                                    <p-carousel [value]="tv.cast" [numVisible]="5" easing="easeOutStrong">
-                                        <ng-template let-item pTemplate="item">
-                                            <div class="row justify-content-md-center">
-                                                <div class="col-12">
-                                                    <img class="cast-profile-img" *ngIf="item.character.image.medium"
-                                                        [src]="item.character.image.medium">
-                                                    <!-- TODO get profile image default -->
-                                                </div>
-                                                <div class="col-12">
-                                                    <span><strong>Character:</strong> {{item.character.name}}</span>
-                                                </div>
-                                                <div class="col-12">
-                                                    <span><strong>Actor:</strong> {{item.person.name}}</span>
-                                                </div>
-                                            </div>
-                                        </ng-template>
-                                    </p-carousel>
-                                </mat-card-content>
-                            </mat-card>
-                        </div>
-
-                    </div>
-
-                </div>
+      </div>
 
 
-            </div>
+      <div class="row card-spacer media-row">
 
 
-            <div class="row card-spacer media-row">
+        <div class="col-12 col-md-9">
 
+        </div>
+      </div>
+      <div class="row card-spacer media-row">
+        <div class="col-12 col-md-3"></div>
 
-                <div class="col-12 col-md-9">
-
-                </div>
-            </div>
-            <div class="row card-spacer media-row">
-                <div class="col-12 col-md-3"></div>
-
-                <!-- <div class="col-12 col-md-9">
+        <!-- <div class="col-12 col-md-9">
                     <mat-accordion>
                         <mat-expansion-panel>
                             <mat-expansion-panel-header>
@@ -167,15 +138,15 @@
                         </mat-expansion-panel>
                     </mat-accordion>
                 </div> -->
-            </div>
-        </div>
+      </div>
+    </div>
 
 
 
 
-        <div class="bottom-page-gap">
-        </div>
-    </section>
+    <div class="bottom-page-gap">
+    </div>
+  </section>
 
 
 
@@ -184,4 +155,4 @@
 
 
 
-</div>
\ No newline at end of file
+</div>