mirror of https://github.com/Ombi-app/Ombi
Jamie Rees
4 years ago
parent
ff17117f89
commit
3c63b4f5e6
@ -0,0 +1,53 @@
|
||||
<!-- <div class="card-spacing" *ngIf="result">
|
||||
<mat-card class="mat-elevation-z8 dark-card grow">
|
||||
<a [routerLink]="result.type === RequestType.movie ? '/details/movie/' + result.id : '/details/tv/' + result.id">
|
||||
<img id="cardImage" mat-card-image src="{{result.posterPath}}" class="card-poster" [ngClass]="getStatusClass()" alt="{{result.title}}">
|
||||
</a>
|
||||
<mat-card-content>
|
||||
<h6 *ngIf="result.title.length <= 20">{{result.title}}</h6>
|
||||
<h6 *ngIf="result.title.length > 20" matTooltip="{{result.title}}">{{result.title | truncate:20}}</h6>
|
||||
<div class="fade-text">
|
||||
<small class="overview-text">{{result.overview | truncate: 75}}</small>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div> -->
|
||||
|
||||
|
||||
<div class="top-spacing" *ngIf="result">
|
||||
<mat-card class="mat-elevation-z8 dark-card">
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<img src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="row">
|
||||
<h1>{{result.title}}</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<mat-chip-list>
|
||||
<mat-chip *ngIf="result.available" class="available">
|
||||
{{'Common.Available' | translate}}
|
||||
</mat-chip>
|
||||
|
||||
<mat-chip *ngIf="result.approved && !result.available" class="approved">
|
||||
{{'Common.ProcessingRequest' | translate}}
|
||||
</mat-chip>
|
||||
|
||||
<mat-chip *ngIf="result.denied" class="denied">
|
||||
{{'Common.RequestDenied' | translate}}
|
||||
</mat-chip>
|
||||
|
||||
<mat-chip *ngIf="!result.approved && !result.availble && !result.denied" class="requested">
|
||||
{{'Common.PendingApproval' | translate}}
|
||||
</mat-chip>
|
||||
|
||||
</mat-chip-list>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p class="overview top-spacing">{{result.overview}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
@ -0,0 +1,100 @@
|
||||
$ombi-primary:#3f3f3f;
|
||||
$card-background: #2b2b2b;
|
||||
|
||||
#cardImage {
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
.dark-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// Changed height to 100% to make all cards the same height
|
||||
.top-spacing {
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.card-poster {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.rating {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
$border-width: 3px;
|
||||
|
||||
.available {
|
||||
background-color: #1DE9B6 !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.approved {
|
||||
background-color: #ff5722 !important;
|
||||
}
|
||||
|
||||
.requested {
|
||||
background-color: #ffd740 !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.denied {
|
||||
background-color: #C2185B !important;
|
||||
}
|
||||
|
||||
.notrequested {
|
||||
background-color: #303030 !important;
|
||||
}
|
||||
|
||||
.expand {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
|
||||
// Changed height to 100% to make all cards the same height
|
||||
.grow {
|
||||
transition: all .2s ease-in-out;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grow:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep mat-dialog-container.mat-dialog-container {
|
||||
// background-color: $ombi-primary;
|
||||
// color: white;
|
||||
border-radius: 2%
|
||||
}
|
||||
|
||||
|
||||
/* Title adjust for the Discover page */
|
||||
.mat-card-content h6 {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Summary adjust for Discover page */
|
||||
.small,
|
||||
small {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
#cardImage {
|
||||
height: 80%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.overview {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
@ -0,0 +1,85 @@
|
||||
import { Component, OnInit, Input } from "@angular/core";
|
||||
import { IDiscoverCardResult } from "../../interfaces";
|
||||
import { RequestType, ISearchTvResult, ISearchMovieResult } from "../../../interfaces";
|
||||
import { SearchV2Service } from "../../../services";
|
||||
import { MatDialog } from "@angular/material/dialog";
|
||||
import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
|
||||
import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
|
||||
|
||||
@Component({
|
||||
selector: "discover-grid",
|
||||
templateUrl: "./discover-grid.component.html",
|
||||
styleUrls: ["./discover-grid.component.scss"],
|
||||
})
|
||||
export class DiscoverGridComponent implements OnInit {
|
||||
|
||||
@Input() public result: IDiscoverCardResult;
|
||||
public RequestType = RequestType;
|
||||
|
||||
constructor(private searchService: SearchV2Service, private dialog: MatDialog) { }
|
||||
|
||||
public ngOnInit() {
|
||||
if (this.result.type == RequestType.tvShow) {
|
||||
this.getExtraTvInfo();
|
||||
}
|
||||
if (this.result.type == RequestType.movie) {
|
||||
this.getExtraMovieInfo();
|
||||
}
|
||||
}
|
||||
|
||||
public async getExtraTvInfo() {
|
||||
var result = await this.searchService.getTvInfo(this.result.id);
|
||||
this.setTvDefaults(result);
|
||||
this.updateTvItem(result);
|
||||
|
||||
}
|
||||
|
||||
public getStatusClass(): string {
|
||||
if (this.result.available) {
|
||||
return "available";
|
||||
}
|
||||
if (this.result.approved) {
|
||||
return "approved";
|
||||
}
|
||||
if (this.result.requested) {
|
||||
return "requested";
|
||||
}
|
||||
return "notrequested";
|
||||
}
|
||||
|
||||
private getExtraMovieInfo() {
|
||||
if (!this.result.imdbid) {
|
||||
this.searchService.getFullMovieDetails(this.result.id)
|
||||
.subscribe(m => {
|
||||
this.updateMovieItem(m);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private updateMovieItem(updated: ISearchMovieResultV2) {
|
||||
this.result.url = "http://www.imdb.com/title/" + updated.imdbId + "/";
|
||||
this.result.available = updated.available;
|
||||
this.result.requested = updated.requested;
|
||||
this.result.requested = updated.requestProcessing;
|
||||
this.result.rating = updated.voteAverage;
|
||||
}
|
||||
|
||||
|
||||
private setTvDefaults(x: ISearchTvResultV2) {
|
||||
if (!x.imdbId) {
|
||||
x.imdbId = "https://www.tvmaze.com/shows/" + x.seriesId;
|
||||
} else {
|
||||
x.imdbId = "http://www.imdb.com/title/" + x.imdbId + "/";
|
||||
}
|
||||
}
|
||||
|
||||
private updateTvItem(updated: ISearchTvResultV2) {
|
||||
this.result.title = updated.title;
|
||||
this.result.id = updated.id;
|
||||
this.result.available = updated.fullyAvailable;
|
||||
this.result.posterPath = updated.banner;
|
||||
this.result.requested = updated.requested;
|
||||
this.result.url = updated.imdbId;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in new issue