From dbe6c78ea18d6d8cdb91db264f092bb18e451bb8 Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Mon, 22 Aug 2022 20:21:17 +0100
Subject: [PATCH] order by director, add default image and fix click

---
 .../components/movie/movie-details.component.ts  | 16 +++++++++++++++-
 .../cast-carousel/cast-carousel.component.html   |  2 +-
 .../crew-carousel/crew-carousel.component.html   |  8 ++++----
 .../crew-carousel/crew-carousel.component.scss   |  4 ++++
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts
index 8d1e5976b..e40945ebb 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts
+++ b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, ViewEncapsulation } from "@angular/core";
 import { ImageService, SearchV2Service, RequestService, MessageService, RadarrService, SettingsStateService } from "../../../services";
 import { ActivatedRoute, Router } from "@angular/router";
 import { DomSanitizer } from "@angular/platform-browser";
-import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
+import { ICrewViewModel, ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
 import { MatDialog } from "@angular/material/dialog";
 import { YoutubeTrailerComponent } from "../shared/youtube-trailer.component";
 import { AuthService } from "../../../auth/auth.service";
@@ -82,6 +82,7 @@ export class MovieDetailsComponent implements OnInit{
             this.searchService.getMovieByImdbId(this.imdbId).subscribe(async x => {
                 this.movie = x;
                 this.checkPoster();
+                this.movie.credits.crew = this.orderCrew(this.movie.credits.crew);
                 if (this.movie.requestId > 0) {
                     // Load up this request
                     this.hasRequest = true;
@@ -93,6 +94,7 @@ export class MovieDetailsComponent implements OnInit{
             this.searchService.getFullMovieDetails(this.theMovidDbId).subscribe(async x => {
                 this.movie = x;
                 this.checkPoster();
+                this.movie.credits.crew = this.orderCrew(this.movie.credits.crew);
                 if (this.movie.requestId > 0) {
                     // Load up this request
                     this.hasRequest = true;
@@ -319,4 +321,16 @@ export class MovieDetailsComponent implements OnInit{
 
         });
     }
+
+    private orderCrew(crew: ICrewViewModel[]): ICrewViewModel[] {
+        return crew.sort((a, b) => {
+            if (a.job === "Director") {
+                return -1;
+            } else if (b.job === "Director") {
+                return 1;
+            } else {
+                return 0;
+            }
+        });
+    }
 }
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 e14323a0e..46dd07d40 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
@@ -11,7 +11,7 @@
                         <a *ngIf="item.profile_path" [routerLink]="'/discover/actor/' + item.id">
                             <ombi-image class="cast-profile-img" src="https://image.tmdb.org/t/p/w300{{item.profile_path}}"></ombi-image>
                         </a>
-                        <!-- TODO get profile image default -->
+                        <i *ngIf="!item.image && !item.profile_path"  class="fa-solid fa-user-large  fa-2xl crew-profile-img" aria-hidden="true"></i>
 
                     </div>
                     <div class="col-12">
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.html
index af42dc4d5..15ceedee8 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.html
@@ -4,14 +4,14 @@
         <p-carousel [value]="crew" easing="easeOutStrong" [responsiveOptions]="responsiveOptions"  [numVisible]="5" >
             <ng-template let-item pTemplate="item">
                 <div class="row justify-content-md-center mat-card mat-card-flat carousel-item">
-                    <div class="bottom-space">
-                        <a *ngIf="item.image" [routerLink]="'/discover/actor/' + item.id">
+                    <div [routerLink]="'/discover/actor/' + item.id" class="bottom-space link">
+                        <a *ngIf="item.image">
                             <img class="crew-profile-img" src="https://image.tmdb.org/t/p/w300{{item.image}}">
                         </a>
-                        <a *ngIf="item.profile_path" [routerLink]="'/discover/actor/' + item.id">
+                        <a *ngIf="item.profile_path">
                             <img class="crew-profile-img" src="https://image.tmdb.org/t/p/w300{{item.profile_path}}">
                         </a>
-                        <!-- TODO get profile image default -->
+                        <i *ngIf="!item.image && !item.profile_path"  class="fa-solid fa-user-large  fa-2xl crew-profile-img" aria-hidden="true"></i>
 
                     </div>
                     <div class="col-12">
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss
index 390e77c7c..3c0a2de5b 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss
@@ -80,4 +80,8 @@ body .ui-carousel .ui-carousel-content .ui-carousel-next:not(.ui-state-disabled)
         max-height: 100px;
     object-fit: cover;
     }
+}
+
+.link {
+    cursor: pointer;
 }
\ No newline at end of file