Made some changes to the cast list from reddit feedback

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="row justify-content-md-center mat-card mat-card-flat carousel-item">
-                    <div class="col-12 bottom-space">
+                    <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.name"><strong>{{item.name}}</strong></span>
-                        <span *ngIf="item.character.name"><strong>{{'MediaDetails.Casts.Character' | translate}}:</strong> {{item.character.name}}</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.character?.name"><small>{{item.character}}</small></span>
-                        <span *ngIf="item.person?.name"><strong>{{'MediaDetails.Casts.Actor' | translate}}:</strong> {{item.person.name}}</span>
+                        <span *ngIf="item.character.name"><small>{{item.character.name}}</small></span>
                     </div>
+
                 </div>
             </ng-template>
         </p-carousel>

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

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

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

src/Ombi/wwwroot/translations/en.json

@@ -249,9 +249,7 @@
         "Budget":"Budget",
         "Keywords":"Keywords/Tags",
         "Casts": {
-            "CastTitle": "Cast",
+            "CastTitle": "Cast"
-            "Character": "Character",
-            "Actor": "Actor"
         },
         "EpisodeSelector": {
             "AllSeasonsTooltip": "This will request every season for this show",