From cd5e680f12c24943c3e6058c1de35a9136a95645 Mon Sep 17 00:00:00 2001
From: dr3amer <91037083+dr3am37@users.noreply.github.com>
Date: Sun, 1 May 2022 13:50:04 -0700
Subject: [PATCH] Movie details component fixes

Fixed recommendations and similar not changing the data on the component by calling the init function again on param change

Moved the ngif results > 0 to the mat-expansion panel to avoid rendering  the entire element if it doesn't have any results instead of having an empty panel.
---
 .../components/movie/movie-details.component.html    | 12 ++++++------
 .../components/movie/movie-details.component.ts      |  9 ++++++++-
 2 files changed, 14 insertions(+), 7 deletions(-)

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 2207ea323..1589c263b 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
@@ -107,7 +107,7 @@
                                 </span>
                             </span>
                         </span>
-                        
+
                         <span *ngIf="movieRequest?.showSubscribe">
                             <button *ngIf="!movieRequest?.subscribed" (click)="notify()" id="notifyBtn"
                                 mat-raised-button class="btn-spacing"> <i class="fas fa-bell"></i>
@@ -239,14 +239,14 @@
                             </div>
 
                             <mat-accordion class=" mat-elevation-z8 spacing-below ">
-                                <mat-expansion-panel>
+                                <mat-expansion-panel *ngIf="movie.recommendations?.results?.length> 0">
                                     <mat-expansion-panel-header>
                                         <mat-panel-title>
                                             {{'MediaDetails.RecommendationsTitle' | translate}}
                                         </mat-panel-title>
                                     </mat-expansion-panel-header>
 
-                                    <div class="row card-spacer " *ngIf="movie.recommendations?.results?.length> 0">
+                                    <div class="row card-spacer ">
 
                                         <div class="col-md-2" *ngFor="let r of movie.recommendations?.results">
                                             <div class="sidebar affixable affix-top preview-poster">
@@ -261,14 +261,14 @@
                                         </div>
                                     </div>
                                 </mat-expansion-panel>
-                                <mat-expansion-panel>
+                                <mat-expansion-panel *ngIf="movie.similar?.results?.length > 0">
                                     <mat-expansion-panel-header>
                                         <mat-panel-title>
                                             {{'MediaDetails.SimilarTitle' | translate}}
                                         </mat-panel-title>
                                     </mat-expansion-panel-header>
 
-                                    <div class="row card-spacer" *ngIf="movie.similar?.results?.length > 0">
+                                    <div class="row card-spacer">
 
                                         <div class="col-md-2" *ngFor="let r of movie.similar.results">
                                             <div class="sidebar affixable affix-top preview-poster">
@@ -292,4 +292,4 @@
         <div class="bottom-page-gap">
         </div>
     </section>
-</div>
\ No newline at end of file
+</div>
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 c040fe4e0..b9c375953 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
@@ -45,18 +45,25 @@ export class MovieDetailsComponent implements OnInit{
         private requestService2: RequestServiceV2, private radarrService: RadarrService,
         public messageService: MessageService, private auth: AuthService, private settingsState: SettingsStateService,
         private translate: TranslateService, private featureFacade: FeaturesFacade) {
-        this.route.params.subscribe(async (params: any) => {
+          this.route.params.subscribe(async (params: any) => {
             if (typeof params.movieDbId === 'string' || params.movieDbId instanceof String) {
                 if (params.movieDbId.startsWith("tt")) {
                     this.imdbId = params.movieDbId;
+                    // movieDbId changed, re-init component
+                    this.ngOnInit();
                 }
             }
             this.theMovidDbId = params.movieDbId;
+            // movieDbId changed, re-init component
+            this.ngOnInit();
         });
+
     }
 
     async ngOnInit() {
+      this.theMovidDbId = this.route.snapshot.params.movieDbId;
 
+        // reset scroll location to top
         this.is4KEnabled = this.featureFacade.is4kEnabled();
         this.issuesEnabled = this.settingsState.getIssue();
         this.isAdmin = this.auth.hasRole("admin") || this.auth.hasRole("poweruser");