github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-07-06 05:01:13 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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.
This commit is contained in:
dr3amer 2022-05-27 02:17:57 -07:00 • committed by GitHub
parent acc0b4a326
commit d5ef1d53e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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',

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

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

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

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