fix(discover): Carousel touch not working when scrolling page and recommendations and similar movie navigation (#4633)

* fixed touch not working on carousels

* fixed touch not working

* 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.

* removed unused line, added scroll to top on init

* updated recommendation refresh implementation

Changed the implementation to use the router instead in order to reload the component instead of just reloading the data.

This implementation makes sure the component gets destroyed on navigation eliminating any memory leaks, reloading CSS in case of having animations on page load and generally a continuation of the experience you get when you browse into a movie from the discover page.

src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts

@@ -48,6 +48,7 @@ export class CarouselListComponent implements OnInit {
     constructor(private searchService: SearchV2Service,
         private storageService: StorageService,
         private featureFacade: FeaturesFacade) {
+        Carousel.prototype.onTouchMove = () => { },
         this.responsiveOptions = [
             {
                 breakpoint: '4000px',

src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html

@@ -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">

src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
 import { ImageService, SearchV2Service, RequestService, MessageService, RadarrService, SettingsStateService } from "../../../services";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { DomSanitizer } from "@angular/platform-browser";
 import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
 import { MatDialog } from "@angular/material/dialog";
@@ -32,31 +32,45 @@ export class MovieDetailsComponent implements OnInit{
     public issuesEnabled: boolean;
     public roleName4k = "Request4KMovie";
     public is4KEnabled = false;
-
     public requestType = RequestType.movie;
-
-
     private theMovidDbId: number;
     private imdbId: string;
+    private snapMovieId: string;
 
-    constructor(private searchService: SearchV2Service, private route: ActivatedRoute,
+
+    constructor(private searchService: SearchV2Service, private route: ActivatedRoute, private router: Router,
         private sanitizer: DomSanitizer, private imageService: ImageService,
         public dialog: MatDialog, private requestService: RequestService,
         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) => {
-            if (typeof params.movieDbId === 'string' || params.movieDbId instanceof String) {
-                if (params.movieDbId.startsWith("tt")) {
-                    this.imdbId = params.movieDbId;
-                }
-            }
-            this.theMovidDbId = params.movieDbId;
+          this.snapMovieId = this.route.snapshot.params.movieDbId;
+          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;
+                      // Check if we user navigated to another movie and if so reload the component
+                      if (this.imdbId !== this.snapMovieId) {
+                        this.reloadComponent()
+                      }
+                  }
+              }
+              this.theMovidDbId = params.movieDbId;
+              // Check if we user navigated to another movie and if so reload the component
+              if (params.movieDbId !== this.snapMovieId) {
+                this.reloadComponent()
+              }
         });
     }
 
-    async ngOnInit() {
+    reloadComponent() {
+      let currentUrl = this.router.url;
+          this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+          this.router.onSameUrlNavigation = 'reload';
+          this.router.navigate([currentUrl]);
+      }
 
+    async ngOnInit() {
         this.is4KEnabled = this.featureFacade.is4kEnabled();
         this.issuesEnabled = this.settingsState.getIssue();
         this.isAdmin = this.auth.hasRole("admin") || this.auth.hasRole("poweruser");