From d5ef1d53e5f77d19dba8b8059c80b538a3e14f2a Mon Sep 17 00:00:00 2001 From: dr3amer <91037083+dr3am37@users.noreply.github.com> Date: Fri, 27 May 2022 02:17:57 -0700 Subject: [PATCH] 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. --- .../carousel-list/carousel-list.component.ts | 1 + .../movie/movie-details.component.html | 8 ++-- .../movie/movie-details.component.ts | 40 +++++++++++++------ 3 files changed, 32 insertions(+), 17 deletions(-) diff --git a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts index 9617c993e..43cde5036 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts +++ b/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', 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 282683fed..90cf455f0 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 @@ -239,14 +239,14 @@ - + {{'MediaDetails.RecommendationsTitle' | translate}} -
+
@@ -261,14 +261,14 @@
- + {{'MediaDetails.SimilarTitle' | translate}} -
+
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 079af8db5..88956e706 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 @@ -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");