From ea00d6c12f4441da243287d0fbc706d66c0afd82 Mon Sep 17 00:00:00 2001 From: TidusJar Date: Tue, 20 Aug 2024 21:48:04 +0100 Subject: [PATCH] fix(discover): Improved rendering on the discover page --- .../carousel-list.component.html | 8 +++- .../discover/discover.component.html | 5 --- .../genre/genre-button-select.component.html | 39 ++++++++++++------- .../genre/genre-button-select.component.ts | 19 ++++++--- .../recently-requested-list.component.html | 31 ++++++++++----- .../recently-requested-list.component.scss | 4 ++ .../recently-requested-list.component.ts | 9 +++-- 7 files changed, 78 insertions(+), 37 deletions(-) diff --git a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html index 5be2aa1ad..a1b3bc81b 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html @@ -5,9 +5,13 @@ {{'Discovery.Tv' | translate}} - +@defer (when discoverResults.length > 0) { - \ No newline at end of file + +} +@placeholder(minimum 500) { + +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html index ff650d1dc..16a46c0d6 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html @@ -1,12 +1,7 @@
- @defer (on viewport; prefetch on idle) {

{{ 'Discovery.Genres' | translate }}

- } - @placeholder { - - }

{{ 'Discovery.RecentlyRequestedTab' | translate }}

diff --git a/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.html b/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.html index 688634dc7..71ee25709 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.html @@ -1,13 +1,26 @@ -
- - {{genre.name}} - -
-
- - {{genre.name}} - - -
\ No newline at end of file + +@defer (when movieGenreList()) { +
+ + {{genre.name}} + +
+} +@placeholder(minimum 500) { + +} + +@defer (when tvGenreList()) { +
+ + {{genre.name}} + +
+} +@placeholder(minimum 500) { + +} + + \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.ts b/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.ts index 4dbf7233c..a16ca06e7 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit } from "@angular/core"; +import { Component, OnInit, computed, signal } from "@angular/core"; import { SearchV2Service } from "../../../services"; import { MatButtonToggleChange } from "@angular/material/button-toggle"; import { RequestType } from "../../../interfaces"; import { AdvancedSearchDialogDataService } from "app/shared/advanced-search-dialog/advanced-search-dialog-data.service"; import { Router } from "@angular/router"; import { map, Observable } from "rxjs"; +import { toSignal } from '@angular/core/rxjs-interop'; interface IGenreSelect { name: string; @@ -17,8 +18,10 @@ interface IGenreSelect { styleUrls: ["./genre-button-select.component.scss"], }) export class GenreButtonSelectComponent implements OnInit { - public movieGenreList$: Observable = null; - public tvGenreList$: Observable = null; + + public movieGenreList = signal(null); + public tvGenreList = signal(null); + isLoading: boolean = false; @@ -27,8 +30,14 @@ export class GenreButtonSelectComponent implements OnInit { private router: Router) { } public ngOnInit(): void { - this.movieGenreList$ = this.searchService.getGenres("movie").pipe(map(x => x.slice(0, 10).map(y => ({ name: y.name, id: y.id, type: "movie" })))); - this.tvGenreList$ = this.searchService.getGenres("tv").pipe(map(x => x.slice(0, 10).map(y => ({ name: y.name, id: y.id, type: "tv" })))); + this.searchService.getGenres("movie").pipe(map(x => x.slice(0, 10).map(y => ({ name: y.name, id: y.id, type: "movie" } as IGenreSelect)))) + .subscribe(x => { + this.movieGenreList.set(x); + }); + this.searchService.getGenres("tv").pipe(map(x => x.slice(0, 10).map(y => ({ name: y.name, id: y.id, type: "tv" } as IGenreSelect)))) + .subscribe(x => { + this.tvGenreList.set(x); + }); } public async toggleChanged(event: MatButtonToggleChange, type: "movie"|"tv") { diff --git a/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html b/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html index 875e34542..6da28c744 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html @@ -1,9 +1,8 @@ -
-
- + - @defer (on viewport; prefetch on idle) { - } - @placeholder { - - }
-
\ No newline at end of file +}@placeholder(minimum 500) { +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.scss b/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.scss index 81c559a83..01c68db4d 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.scss @@ -109,4 +109,8 @@ ::ng-deep .p-carousel-item{ flex: 1 0 200px !important; } +} + +.loading-container { + margin-left: 10rem; } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.ts b/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.ts index d30b4b66d..ceba645de 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, ViewChild, OnDestroy } from "@angular/core"; +import { Component, OnInit, Input, ViewChild, OnDestroy, signal } from "@angular/core"; import { IRecentlyRequested, IRequestEngineResult, RequestType } from "../../../interfaces"; import { Carousel } from 'primeng/carousel'; import { ResponsiveOptions } from "../carousel.options"; @@ -31,6 +31,7 @@ export class RecentlyRequestedListComponent implements OnInit, OnDestroy { @ViewChild('carousel', {static: false}) carousel: Carousel; public requests$: Observable; + public requests = signal(null); public responsiveOptions: any; public RequestType = RequestType; @@ -119,11 +120,13 @@ export class RecentlyRequestedListComponent implements OnInit, OnDestroy { } private loadData() { - this.requests$ = this.requestServiceV2.getRecentlyRequested().pipe( + this.requestServiceV2.getRecentlyRequested().pipe( tap(() => this.loading()), takeUntil(this.$loadSub), finalize(() => this.finishLoading()) - ); + ).subscribe(x => { + this.requests.set(x); + }); } private loading() {