github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-14 02:26:55 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Got lazy loading working on the carousel

Browse source
This commit is contained in:
tidusjar 2021-01-22 23:06:27 +00:00
commit b9a94da736
3 changed files with 45 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html
View file

@ -6,7 +6,7 @@
</mat-button-toggle-group>
</div>
<p-carousel [numVisible]="10" [numScroll]="10" [page]="0" [value]="discoverResults" [responsiveOptions]="responsiveOptions">
<p-carousel #carousel [numVisible]="10" [numScroll]="10" [page]="0" [value]="discoverResults" [responsiveOptions]="responsiveOptions" (onPage)="newPage()">
<ng-template let-result pTemplate="item">
<discover-card [result]="result"></discover-card>
</ng-template>

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

@ -1,9 +1,10 @@
import { Component, OnInit, Input } from "@angular/core";
import { Component, OnInit, Input, ViewChild } from "@angular/core";
import { DiscoverOption, IDiscoverCardResult } from "../../interfaces";
import { ISearchMovieResult, ISearchTvResult, RequestType } from "../../../interfaces";
import { SearchV2Service } from "../../../services";
import { StorageService } from "../../../shared/storage/storage-service";
import { MatButtonToggleChange } from '@angular/material/button-toggle';
import { Carousel } from 'primeng/carousel';
export enum DiscoverType {
Upcoming,
@ -19,6 +20,7 @@ export enum DiscoverType {
export class CarouselListComponent implements OnInit {
@Input() public discoverType: DiscoverType;
@ViewChild('carousel', {static: false}) carousel: Carousel;
public DiscoverOption = DiscoverOption;
public discoverOptions: DiscoverOption = DiscoverOption.Combined;
@ -33,6 +35,7 @@ export class CarouselListComponent implements OnInit {
return "DiscoverOptions" + this.discoverType.toString();
};
private amountToLoad = 14;
private currentlyLoaded = 0;
constructor(private searchService: SearchV2Service,
private storageService: StorageService) {
@ -61,6 +64,7 @@ export class CarouselListComponent implements OnInit {
}
public async ngOnInit() {
this.currentlyLoaded = 0;
const localDiscoverOptions = +this.storageService.get(this.mediaTypeStorageKey);
if (localDiscoverOptions) {
this.discoverOptions = DiscoverOption[DiscoverOption[localDiscoverOptions]];
@ -91,6 +95,32 @@ export class CarouselListComponent implements OnInit {
await this.switchDiscoverMode(event.value);
}
public async newPage() {
// Note this is using the internal carousel APIs
// https://github.com/primefaces/primeng/blob/master/src/app/components/carousel/carousel.ts
var end = this.carousel._page >= (this.carousel.totalDots() - 1);
if (end) {
var moviePromise: Promise<void>;
var tvPromise: Promise<void>;
switch (this.discoverOptions) {
case DiscoverOption.Combined:
moviePromise = this.loadMovies();
tvPromise = this.loadTv();
break;
case DiscoverOption.Movie:
moviePromise = this.loadMovies();
break;
case DiscoverOption.Tv:
tvPromise = this.loadTv();
break;
}
await moviePromise;
await tvPromise;
this.createModel();
}
}
private async switchDiscoverMode(newMode: DiscoverOption) {
if (this.discoverOptions === newMode) {
return;
@ -105,32 +135,35 @@ export class CarouselListComponent implements OnInit {
private async loadMovies() {
switch (this.discoverType) {
case DiscoverType.Popular:
this.movies = await this.searchService.popularMoviesByPage(0, this.amountToLoad);
this.movies = await this.searchService.popularMoviesByPage(this.currentlyLoaded, this.amountToLoad);
break;
case DiscoverType.Trending:
this.movies = await this.searchService.nowPlayingMoviesByPage(0, this.amountToLoad);
this.movies = await this.searchService.nowPlayingMoviesByPage(this.currentlyLoaded, this.amountToLoad);
break;
case DiscoverType.Upcoming:
this.movies = await this.searchService.upcomingMoviesByPage(0, this.amountToLoad);
this.movies = await this.searchService.upcomingMoviesByPage(this.currentlyLoaded, this.amountToLoad);
break
}
this.currentlyLoaded += this.amountToLoad;
}
private async loadTv() {
switch (this.discoverType) {
case DiscoverType.Popular:
this.tvShows = await this.searchService.popularTvByPage(0, this.amountToLoad);
this.tvShows = await this.searchService.popularTvByPage(this.currentlyLoaded, this.amountToLoad);
break;
case DiscoverType.Trending:
this.tvShows = await this.searchService.trendingTvByPage(0, this.amountToLoad);
this.tvShows = await this.searchService.trendingTvByPage(this.currentlyLoaded, this.amountToLoad);
break;
case DiscoverType.Upcoming:
this.tvShows = await this.searchService.anticipatedTvByPage(0, this.amountToLoad);
this.tvShows = await this.searchService.anticipatedTvByPage(this.currentlyLoaded, this.amountToLoad);
break
}
this.currentlyLoaded += this.amountToLoad;
}
private createInitialModel() {
this.clear();
this.createModel();
}
@ -151,8 +184,8 @@ export class CarouselListComponent implements OnInit {
break;
}
this.clear();
this.discoverResults.push(...tempResults);
this.carousel.ngAfterContentInit();
this.finishLoading();
}

6
src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
View file

@ -2,7 +2,7 @@
<div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
</div>
<div class="section">
<h2>Popular <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
<h2>Popular</h2>
<div>
<carousel-list [discoverType]="DiscoverType.Popular"></carousel-list>
</div>
@ -10,7 +10,7 @@
</div>
<div class="section">
<h2>Trending <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
<h2>Trending</h2>
<div >
<carousel-list [discoverType]="DiscoverType.Trending"></carousel-list>
</div>
@ -18,7 +18,7 @@
</div>
<div class="section">
<h2>Upcoming <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
<h2>Upcoming</h2>
<div>
<carousel-list [discoverType]="DiscoverType.Upcoming"></carousel-list>
</div>