mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-20 21:33:15 -07:00
Small improvements on the discover page
This commit is contained in:
parent
e7e8cc3e85
commit
2f150b2818
7 changed files with 100 additions and 43 deletions
|
@ -4,7 +4,9 @@
|
|||
<div *ngIf="!loading" mat-dialog-content class="background">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<a (click)="openDetails()">
|
||||
<img id="cardImage" src="{{data.posterPath}}" class="poster" alt="{{data.title}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
|
||||
|
@ -27,7 +29,8 @@
|
|||
<strong *ngIf="movie">Studio: </strong>
|
||||
<small *ngIf="movie">{{movie.productionCompanies[0].name}}</small>
|
||||
<strong *ngIf="tv">Network: </strong>
|
||||
<small *ngIf="tv">{{tv.network.name}}</small>
|
||||
<small *ngIf="tv && tv.network">{{tv.network.name}}</small>
|
||||
<small *ngIf="tv && !tv.network">Unknown</small>
|
||||
</div>
|
||||
<div class="col-6" *ngIf="!data.available">
|
||||
<strong>Request Status: </strong> <small>
|
||||
|
@ -117,7 +120,7 @@
|
|||
target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
|
||||
translate}}</a>
|
||||
</span>
|
||||
<button mat-raised-button class="btn-green btn-spacing"> {{
|
||||
<button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
|
||||
'Common.ViewDetails' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -5,6 +5,7 @@ import { SearchV2Service, RequestService, MessageService } from "../../services"
|
|||
import { RequestType } from "../../interfaces";
|
||||
import { ISearchMovieResultV2 } from "../../interfaces/ISearchMovieResultV2";
|
||||
import { ISearchTvResultV2 } from "../../interfaces/ISearchTvResultV2";
|
||||
import { RouterLink, Router } from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: "discover-card-details",
|
||||
|
@ -18,39 +19,55 @@ export class DiscoverCardDetailsComponent implements OnInit {
|
|||
public tvCreator: string;
|
||||
public tvProducer: string;
|
||||
public loading: boolean;;
|
||||
public RequestType = RequestType;
|
||||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<DiscoverCardDetailsComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: IDiscoverCardResult, private searchService: SearchV2Service,
|
||||
private requestService: RequestService, public messageService: MessageService) { }
|
||||
|
||||
public async ngOnInit() {
|
||||
this.loading = true;
|
||||
if (this.data.type === RequestType.movie) {
|
||||
this.movie = await this.searchService.getFullMovieDetailsPromise(this.data.id);
|
||||
} else if (this.data.type === RequestType.tvShow) {
|
||||
this.tv = await this.searchService.getTvInfo(this.data.id);
|
||||
const creator = this.tv.crew.filter(tv => {
|
||||
return tv.type === "Creator";
|
||||
})[0];
|
||||
if(creator) {
|
||||
this.tvCreator = creator.person.name;
|
||||
}
|
||||
this.tvProducer = this.tv.crew.filter(tv => {
|
||||
return tv.type === "Executive Producer";
|
||||
})[0].person.name;
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
private requestService: RequestService, public messageService: MessageService, private router: Router) { }
|
||||
|
||||
public onNoClick(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
public async request() {
|
||||
public async ngOnInit() {
|
||||
this.loading = true;
|
||||
if (this.data.type === RequestType.movie) {
|
||||
const result = await this.requestService.requestMovie({theMovieDbId: this.data.id, languageCode: ""}).toPromise();
|
||||
this.movie = await this.searchService.getFullMovieDetailsPromise(this.data.id);
|
||||
} else if (this.data.type === RequestType.tvShow) {
|
||||
this.tv = await this.searchService.getTvInfo(this.data.id);
|
||||
const creator = this.tv.crew.filter(tv => {
|
||||
return tv.type === "Creator";
|
||||
})[0];
|
||||
if (creator && creator.person) {
|
||||
this.tvCreator = creator.person.name;
|
||||
}
|
||||
const crewResult = this.tv.crew.filter(tv => {
|
||||
return tv.type === "Executive Producer";
|
||||
})[0]
|
||||
if (crewResult && crewResult.person) {
|
||||
this.tvProducer = crewResult.person.name;
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
public onNoClick(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
public openDetails() {
|
||||
if (this.data.type === RequestType.movie) {
|
||||
this.router.navigate(['/details/movie/', this.data.id]);
|
||||
} else if (this.data.type === RequestType.tvShow) {
|
||||
this.router.navigate(['/details/tv/', this.data.id]);
|
||||
}
|
||||
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
public async request() {
|
||||
this.loading = true;
|
||||
if (this.data.type === RequestType.movie) {
|
||||
const result = await this.requestService.requestMovie({ theMovieDbId: this.data.id, languageCode: "" }).toPromise();
|
||||
this.loading = false;
|
||||
|
||||
if (result.result) {
|
||||
this.movie.requested = true;
|
||||
this.messageService.send(result.message, "Ok");
|
||||
|
@ -58,6 +75,8 @@ export class DiscoverCardDetailsComponent implements OnInit {
|
|||
this.messageService.send(result.errorMessage, "Ok");
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
|
||||
}
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,16 +2,20 @@
|
|||
|
||||
<div class="row justify-content-md-center top-spacing">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" (click)="popular()" [ngClass]="popularActive ? 'active-button' : ''" mat-raised-button class="btn" color="primary">Popular</button>
|
||||
<button type="button" (click)="trending()" [ngClass]="trendingActive ? 'active-button' : ''" mat-raised-button class="btn" color="primary">Trending</button>
|
||||
<button type="button" (click)="upcoming()" [ngClass]="upcomingActive ? 'active-button' : ''" mat-raised-button class="btn" color="primary">Upcoming</button>
|
||||
<button type="button" (click)="popular()" [ngClass]="popularActive ? 'active-button' : ''" mat-raised-button
|
||||
class="btn" color="primary">Popular</button>
|
||||
<button type="button" (click)="trending()" [ngClass]="trendingActive ? 'active-button' : ''"
|
||||
mat-raised-button class="btn" color="primary">Trending</button>
|
||||
<button type="button" (click)="upcoming()" [ngClass]="upcomingActive ? 'active-button' : ''"
|
||||
mat-raised-button class="btn" color="primary">Upcoming</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
|
||||
<mat-spinner [color]="'accent'"></mat-spinner>
|
||||
</div>
|
||||
<div *ngIf="discoverResults" class="row full-height">
|
||||
<div class="col-xl-2 col-lg-3 col-md-3 col-6 col-sm-4 small-padding" *ngFor="let result of discoverResults">
|
||||
<discover-card [result]="result"></discover-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
|
@ -12,4 +12,8 @@
|
|||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
margin: 10%;
|
||||
}
|
|
@ -28,28 +28,37 @@ export class DiscoverComponent implements OnInit {
|
|||
public trendingActive: boolean;
|
||||
public upcomingActive: boolean;
|
||||
|
||||
constructor(private searchService: SearchV2Service) {
|
||||
public loadingFlag: boolean;
|
||||
|
||||
constructor(private searchService: SearchV2Service) { }
|
||||
|
||||
}
|
||||
public async ngOnInit() {
|
||||
this.loading()
|
||||
|
||||
this.movies = await this.searchService.popularMovies().toPromise();
|
||||
this.tvShows = await this.searchService.popularTv().toPromise();
|
||||
|
||||
|
||||
this.createModel();
|
||||
|
||||
}
|
||||
|
||||
public async popular() {
|
||||
this.clear();
|
||||
this.loading()
|
||||
this.popularActive = true;
|
||||
this.trendingActive = false;
|
||||
this.upcomingActive = false;
|
||||
this.movies = await this.searchService.popularMovies().toPromise();
|
||||
this.tvShows = await this.searchService.popularTv().toPromise();
|
||||
|
||||
|
||||
this.createModel();
|
||||
}
|
||||
|
||||
public async trending() {
|
||||
public async trending() {
|
||||
this.clear();
|
||||
this.loading()
|
||||
this.popularActive = false;
|
||||
this.trendingActive = true;
|
||||
this.upcomingActive = false;
|
||||
|
@ -59,7 +68,9 @@ export class DiscoverComponent implements OnInit {
|
|||
this.createModel();
|
||||
}
|
||||
|
||||
public async upcoming() {
|
||||
public async upcoming() {
|
||||
this.clear();
|
||||
this.loading()
|
||||
this.popularActive = false;
|
||||
this.trendingActive = false;
|
||||
this.upcomingActive = true;
|
||||
|
@ -70,7 +81,7 @@ export class DiscoverComponent implements OnInit {
|
|||
}
|
||||
|
||||
private createModel() {
|
||||
this.discoverResults = [];
|
||||
this.finishLoading();
|
||||
this.movies.forEach(m => {
|
||||
this.discoverResults.push({
|
||||
available: m.available,
|
||||
|
@ -81,7 +92,8 @@ export class DiscoverComponent implements OnInit {
|
|||
id: m.id,
|
||||
url: `http://www.imdb.com/title/${m.imdbId}/`,
|
||||
rating: m.voteAverage,
|
||||
overview: m.overview
|
||||
overview: m.overview,
|
||||
approved: m.approved
|
||||
});
|
||||
});
|
||||
this.tvShows.forEach(m => {
|
||||
|
@ -94,7 +106,8 @@ export class DiscoverComponent implements OnInit {
|
|||
id: m.id,
|
||||
url: undefined,
|
||||
rating: +m.rating,
|
||||
overview: m.overview
|
||||
overview: m.overview,
|
||||
approved: m.approved
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -108,4 +121,16 @@ export class DiscoverComponent implements OnInit {
|
|||
}
|
||||
return discover;
|
||||
}
|
||||
|
||||
private loading() {
|
||||
this.loadingFlag = true;
|
||||
}
|
||||
|
||||
private clear() {
|
||||
this.discoverResults = [];
|
||||
}
|
||||
|
||||
private finishLoading() {
|
||||
this.loadingFlag = false;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { NgModule } from "@angular/core";
|
||||
import { RouterModule, Routes } from "@angular/router";
|
||||
|
||||
import { SearchService } from "../services";
|
||||
import { SearchService, RequestService } from "../services";
|
||||
|
||||
import { SharedModule } from "../shared/shared.module";
|
||||
import { DiscoverComponent } from "./discover.component";
|
||||
|
@ -34,6 +34,7 @@ const routes: Routes = [
|
|||
providers: [
|
||||
SearchService,
|
||||
MatDialog,
|
||||
RequestService,
|
||||
],
|
||||
|
||||
})
|
||||
|
|
|
@ -7,6 +7,7 @@ export interface IDiscoverCardResult {
|
|||
title: string;
|
||||
type: RequestType;
|
||||
available: boolean;
|
||||
approved: boolean;
|
||||
requested: boolean;
|
||||
rating: number;
|
||||
overview: string;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue