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): Improved rendering on the discover page

Browse source
This commit is contained in:
TidusJar 2024-08-20 21:48:04 +01:00
parent d9787dc32a
commit ea00d6c12f
7 changed files with 78 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,9 +5,13 @@
<mat-button-toggle id="{{id}}Tv" [ngClass]="{'button-active': discoverOptions === DiscoverOption.Tv}" value="{{DiscoverOption.Tv}}" class="discover-filter-button">{{'Discovery.Tv' | translate}}</mat-button-toggle>
</mat-button-toggle-group>
</div>
@defer (when discoverResults.length > 0) {
<p-carousel #carousel [numVisible]="10" [numScroll]="10" [page]="0" [value]="discoverResults" [responsiveOptions]="responsiveOptions" (onPage)="newPage()">
<ng-template let-result pTemplate="item">
<discover-card [discoverType]="discoverType" [isAdmin]="isAdmin" [result]="result" [is4kEnabled]="is4kEnabled"></discover-card>
</ng-template>
</p-carousel>
</p-carousel>
}
@placeholder(minimum 500) {
<p-skeleton width="100%" height="18rem"></p-skeleton>
}

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

@ -1,12 +1,7 @@
<div class="small-middle-container">
<div class="section">
@defer (on viewport; prefetch on idle) {
<h2 id="genreHeading" data-toggle="collapse" href="#genreCollapse" role="button">{{ 'Discovery.Genres' | translate }}</h2>
<genre-button-select class="collapse show" id="genreCollapse"></genre-button-select>
}
@placeholder {
<p-skeleton width="100%" height="2rem"></p-skeleton>
}
</div>
<div class="section">
<h2>{{ 'Discovery.RecentlyRequestedTab' | translate }}</h2>

39
src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.html
View file

@ -1,13 +1,26 @@
<div class="genre-container" *ngIf="movieGenreList$ | async as movies">
<mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event, genre.type)" *ngFor="let genre of movies"
class="discover-filter-buttons-group">
<mat-button-toggle value="{{genre.id}}" class="discover-filter-button">{{genre.name}}</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div class="genre-container" *ngIf="tvGenreList$ | async as tv">
<mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event, genre.type)" *ngFor="let genre of tv"
class="discover-filter-buttons-group">
<mat-button-toggle value="{{genre.id}}" class="discover-filter-button">{{genre.name}}</mat-button-toggle>
</mat-button-toggle-group>
<mat-spinner *ngIf="isLoading" [diameter]="30"></mat-spinner>
</div>
@defer (when movieGenreList()) {
<div class="genre-container">
<mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event, genre.type)" *ngFor="let genre of movieGenreList()"
class="discover-filter-buttons-group">
<mat-button-toggle value="{{genre.id}}" class="discover-filter-button">{{genre.name}}</mat-button-toggle>
</mat-button-toggle-group>
</div>
}
@placeholder(minimum 500) {
<p-skeleton width="100%" height="3.5rem"></p-skeleton>
}
@defer (when tvGenreList()) {
<div class="genre-container">
<mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event, genre.type)" *ngFor="let genre of tvGenreList()"
class="discover-filter-buttons-group">
<mat-button-toggle value="{{genre.id}}" class="discover-filter-button">{{genre.name}}</mat-button-toggle>
</mat-button-toggle-group>
</div>
}
@placeholder(minimum 500) {
<p-skeleton width="100%" height="3.5rem"></p-skeleton>
}
<mat-spinner *ngIf="isLoading" [diameter]="30"></mat-spinner>

19
src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.ts
View file

@ -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<IGenreSelect[]> = null;
public tvGenreList$: Observable<IGenreSelect[]> = null;
public movieGenreList = signal<IGenreSelect[]>(null);
public tvGenreList = signal<IGenreSelect[]>(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") {

31
src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html
View file

@ -1,9 +1,8 @@
<div *ngIf="requests$ | async as requests">
<div *ngIf="requests.length > 0">
<p-carousel #carousel [value]="requests" [numVisible]="3" [numScroll]="1"
@defer (when requests()) {
<div *ngIf="requests().length > 0">
<p-carousel #carousel [value]="requests()" [numVisible]="3" [numScroll]="1"
[responsiveOptions]="responsiveOptions" [page]="0">
<ng-template let-result pTemplate="item">
@defer (on viewport; prefetch on idle) {
<ombi-detailed-card
[request]="result"
[isAdmin]="isAdmin"
@ -11,11 +10,25 @@
(onApprove)="approve(result)"
(onDeny)="deny(result)">
</ombi-detailed-card>
}
@placeholder {
<p-skeleton width="100%" height="315px"></p-skeleton>
}
</ng-template>
</p-carousel>
</div>
</div>
}@placeholder(minimum 500) {
<div class="row loading-container">
<div class="col-2">
<p-skeleton width="100%" height="270px"></p-skeleton>
</div>
<div class="col-2">
<p-skeleton width="100%" height="270px"></p-skeleton>
</div>
<div class="col-2">
<p-skeleton width="100%" height="270px"></p-skeleton>
</div>
<div class="col-2">
<p-skeleton width="100%" height="270px"></p-skeleton>
</div>
<div class="col-2">
<p-skeleton width="100%" height="270px"></p-skeleton>
</div>
</div>
}

4
src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.scss
View file

@ -109,4 +109,8 @@
::ng-deep .p-carousel-item{
flex: 1 0 200px !important;
}
}
.loading-container {
margin-left: 10rem;
}

9
src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.ts
View file

@ -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<IRecentlyRequested[]>;
public requests = signal<IRecentlyRequested[]>(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() {