mirror of https://github.com/Ombi-app/Ombi
tidusjar
4 years ago
parent
e6751903a7
commit
878adc5feb
@ -0,0 +1,23 @@
|
||||
<p-carousel [numVisible]="7" [numScroll]="7" [page]="0" [value]="result">
|
||||
<ng-template let-result pTemplate="item">
|
||||
<div class="ombi-card dark-card c">
|
||||
<div [routerLink]="result.type === 1 ? '/details/movie/' + result.id : '/details/tv/' + result.id">
|
||||
<img id="cardImage" src="{{result.posterPath}}" class="image"
|
||||
alt="{{result.title}}">
|
||||
<div class="top-left">{{RequestType[result.type] | humanize}}</div>
|
||||
<div class="middle">
|
||||
<div class="title">{{result.title}}</div>
|
||||
<div class="small-text">{{result.overview | truncate: 80}}</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button mat-raised-button class="btn-blue"><mat-icon>remove_red_eye</mat-icon></button>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button mat-raised-button class="btn-green"><mat-icon>cloud_download</mat-icon></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-carousel>
|
||||
@ -0,0 +1,58 @@
|
||||
|
||||
|
||||
.ombi-card {
|
||||
padding: 5px;
|
||||
}
|
||||
::ng-deep .p-carousel-indicators {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.image {
|
||||
border-radius: 10px;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: .5s ease;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.middle {
|
||||
transition: .5s ease;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 75%;
|
||||
width: 90%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
|
||||
.c {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c:hover .image {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.c:hover .middle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 11px;
|
||||
}
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.top-left {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 16px;
|
||||
|
||||
}
|
||||
@ -0,0 +1,85 @@
|
||||
import { Component, OnInit, Input } from "@angular/core";
|
||||
import { IDiscoverCardResult } from "../../interfaces";
|
||||
import { RequestType} from "../../../interfaces";
|
||||
import { SearchV2Service } from "../../../services";
|
||||
import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
|
||||
import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
|
||||
|
||||
@Component({
|
||||
selector: "movie-list",
|
||||
templateUrl: "./movie-list.component.html",
|
||||
styleUrls: ["./movie-list.component.scss"],
|
||||
})
|
||||
export class MovieListComponent implements OnInit {
|
||||
|
||||
public RequestType = RequestType;
|
||||
@Input() public result: IDiscoverCardResult;
|
||||
|
||||
constructor(private searchService: SearchV2Service) { }
|
||||
|
||||
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