From ba0962e0188c0034af0c5c302da832bd54fb9f8c Mon Sep 17 00:00:00 2001
From: Jamie Rees <jamie.rees@myairops.com>
Date: Sat, 20 Jun 2020 22:23:10 +0100
Subject: [PATCH] Made some changes to the cast list from reddit feedback

---
 .../cast-carousel.component.html              | 15 ++++++------
 .../cast-carousel.component.scss              | 19 +++++++++++++++
 .../cast-carousel/cast-carousel.component.ts  | 23 ++++++++++++++++++-
 .../media-details.component.scss              |  5 +++-
 src/Ombi/wwwroot/translations/en.json         |  4 +---
 5 files changed, 54 insertions(+), 12 deletions(-)

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
index 6bd1501a8..d88718552 100644
--- 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
@@ -1,10 +1,10 @@
 <mat-card class="mat-elevation-z8  spacing-below">
     <mat-card-header>{{'MediaDetails.Casts.CastTitle' | translate}}</mat-card-header>
     <mat-card-content>
-        <p-carousel [value]="cast" [numVisible]="5" easing="easeOutStrong">
+        <p-carousel [value]="cast" easing="easeOutStrong" [responsiveOptions]="responsiveOptions" [circular]="true"  [numVisible]="5" >
             <ng-template let-item pTemplate="item">
-                <div class="row justify-content-md-center mat-card mat-card-flat col-12 carousel-item">
-                    <div class="col-12 bottom-space">
+                <div class="row justify-content-md-center mat-card mat-card-flat carousel-item">
+                    <div class="bottom-space">
                         <a *ngIf="item.profile_path" [routerLink]="'/discover/actor/' + item.id">
                             <img class="cast-profile-img" src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
                         </a>
@@ -15,13 +15,14 @@
 
                     </div>
                     <div class="col-12">
-                        <span *ngIf="!item.character?.name"><strong>{{'MediaDetails.Casts.Character' | translate}}:</strong> {{item.character}}</span>
-                        <span *ngIf="item.character.name"><strong>{{'MediaDetails.Casts.Character' | translate}}:</strong> {{item.character.name}}</span>
+                        <span *ngIf="item.name"><strong>{{item.name}}</strong></span>
+                        <span *ngIf="item.person?.name"><strong>{{item.person.name}}</strong></span>
                     </div>
                     <div class="col-12">
-                        <span *ngIf="item.name"><strong>{{'MediaDetails.Casts.Actor' | translate}}:</strong> {{item.name}}</span>
-                        <span *ngIf="item.person?.name"><strong>{{'MediaDetails.Casts.Actor' | translate}}:</strong> {{item.person.name}}</span>
+                        <span *ngIf="!item.character?.name"><small>{{item.character}}</small></span>
+                        <span *ngIf="item.character.name"><small>{{item.character.name}}</small></span>
                     </div>
+
                 </div>
             </ng-template>
         </p-carousel>
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss
index 6d1402716..b73d71007 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss
@@ -61,4 +61,23 @@ body .ui-carousel .ui-carousel-content .ui-carousel-next:not(.ui-state-disabled)
 
 .bottom-space {
     padding-bottom: 10px;
+}
+
+@media (min-width: 979px) {
+
+    .cast-profile-img {
+        border-radius: 100%;
+        width: 200px;
+        max-height: 200px;
+    object-fit: cover;
+    }
+}
+@media (max-width: 978px) {
+
+    .cast-profile-img {
+        border-radius: 100%;
+        width: 100px;
+        max-height: 100px;
+    object-fit: cover;
+    }
 }
\ 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
index d7baa81f0..6924bac6c 100644
--- 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
@@ -6,6 +6,27 @@ import { Component, Input } from "@angular/core";
     styleUrls: ["./cast-carousel.component.scss"]
 })
 export class CastCarouselComponent {
-    
+
+    constructor() {
+        this.responsiveOptions = [
+            {
+                breakpoint: '1024px',
+                numVisible: 5,
+                numScroll: 5
+            },
+            {
+                breakpoint: '768px',
+                numVisible: 3,
+                numScroll: 3
+            },
+            {
+                breakpoint: '560px',
+                numVisible: 1,
+                numScroll: 1
+            }
+        ];
+    }
+
     @Input() cast: any[];
+    public responsiveOptions: any[];
 }
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 19e868ebc..f3c655c6f 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
@@ -194,10 +194,13 @@
 }
 
 .cast-profile-img {
-    border-radius: 10%;
+    border-radius: 100%;
     width: 170px;
 }
 
+
+
+
 .small-middle-container {
     margin: auto;
     width: 95%;
diff --git a/src/Ombi/wwwroot/translations/en.json b/src/Ombi/wwwroot/translations/en.json
index f6fb32259..ff21b1ed4 100644
--- a/src/Ombi/wwwroot/translations/en.json
+++ b/src/Ombi/wwwroot/translations/en.json
@@ -249,9 +249,7 @@
         "Budget":"Budget",
         "Keywords":"Keywords/Tags",
         "Casts": {
-            "CastTitle": "Cast",
-            "Character": "Character",
-            "Actor": "Actor"
+            "CastTitle": "Cast"
         },
         "EpisodeSelector": {
             "AllSeasonsTooltip": "This will request every season for this show",