mirror of https://github.com/Ombi-app/Ombi
tidusjar
5 years ago
parent
b5043d0580
commit
ea24e33d31
@ -0,0 +1,211 @@
|
||||
<div *ngIf="!movie" class="justify-content-md-center top-spacing loading-spinner">
|
||||
<mat-spinner [color]="'accent'"></mat-spinner>
|
||||
</div>
|
||||
|
||||
<div *ngIf="movie" class="dark-theme">
|
||||
|
||||
<top-banner [background]="movie.background" [available]="movie.available" [title]="movie.title"
|
||||
[releaseDate]="movie.releaseDate" [tagline]="movie.tagline"></top-banner>
|
||||
|
||||
<section id="info-wrapper">
|
||||
<div class="small-middle-container">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
|
||||
|
||||
<!--Next to poster-->
|
||||
<div class="col-12 col-lg-3 col-xl-3 media-row">
|
||||
|
||||
<social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id"
|
||||
[hasTrailer]="movie.videos.results.length > 0" (openTrailer)="openDialog()" [imdbId]="movie.imdbId"
|
||||
[twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId"
|
||||
[instagram]="movie.externalIds.instagramId" [available]="movie.available" [plexUrl]="movie.plexUrl"
|
||||
[embyUrl]="movie.embyUrl"></social-icons>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 col-xl-6 media-row">
|
||||
|
||||
<button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
|
||||
'Common.Available' | translate }}</button>
|
||||
<span *ngIf="!movie.available">
|
||||
<span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
|
||||
|
||||
<ng-template #requestedBtn>
|
||||
<button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied"
|
||||
class="btn-spacing" color="warn" [disabled]><i class="fa fa-check"></i>
|
||||
{{ 'Common.Requested' | translate }}</button>
|
||||
</ng-template>
|
||||
<ng-template #notRequestedBtn>
|
||||
<button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
|
||||
<i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
|
||||
*ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
|
||||
<i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
|
||||
'Common.Request' | translate }}</button>
|
||||
</ng-template>
|
||||
</span>
|
||||
<span *ngIf="isAdmin && hasRequest">
|
||||
<button (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
|
||||
<i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
|
||||
</button>
|
||||
<button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
|
||||
color="accent">
|
||||
<i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
|
||||
</button>
|
||||
|
||||
<button *ngIf="movieRequest && !movieRequest.denied" mat-raised-button class="btn-spacing" color="warn"
|
||||
(click)="deny()">
|
||||
<i class="fa fa-times"></i> {{
|
||||
'Requests.Deny' | translate }}</button>
|
||||
<button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason"
|
||||
mat-raised-button class="btn-spacing" color="warn">
|
||||
<i class="fa fa-times"></i> {{
|
||||
'MediaDetails.Denied' | translate }}</button>
|
||||
</span>
|
||||
|
||||
<button *ngIf="(hasRequest && movieRequest) || movie.available" mat-raised-button class="btn-spacing"
|
||||
color="danger" (click)="issue()">
|
||||
<i class="fa fa-exclamation"></i> {{
|
||||
'Requests.ReportIssue' | translate }}</button>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12 col-md-2">
|
||||
<button *ngIf="movie.belongsToCollection"
|
||||
[routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button
|
||||
class="spacing-below full-width mat-elevation-z8">{{movie.belongsToCollection.name}}</button>
|
||||
|
||||
<mat-card class="mat-elevation-z8 spacing-below" *ngIf="isAdmin && movieRequest">
|
||||
<mat-card-content class="medium-font">
|
||||
<movie-admin-panel [movie]="movieRequest" (advancedOptionsChange)="setAdvancedOptions($event)">
|
||||
</movie-admin-panel>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="mat-elevation-z8">
|
||||
<mat-card-content class="medium-font">
|
||||
<movie-information-panel [movie]="movie" [advancedOptions]="advancedOptions"></movie-information-panel>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-10">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<mat-card class=" mat-elevation-z8 spacing-below">
|
||||
<mat-card-content>
|
||||
{{movie.overview}}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<cast-carousel [cast]="movie.credits.cast"></cast-carousel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<mat-accordion class="mat-elevation-z8 spacing-below">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{'MediaDetails.RecommendationsTitle' | translate}}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<div class="row card-spacer" *ngIf="movie.recommendations.results.length > 0">
|
||||
|
||||
<div class="col-md-2" *ngFor="let r of movie.recommendations.results">
|
||||
<div class="sidebar affixable affix-top preview-poster">
|
||||
<div class="poster">
|
||||
<a [routerLink]="'/details/movie/'+r.id">
|
||||
<img class="real grow" matTooltip="{{r.title}}"
|
||||
src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}" alt="Poster"
|
||||
style="display: block;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{'MediaDetails.SimilarTitle' | translate}}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<div class="row card-spacer" *ngIf="movie.similar.results.length > 0">
|
||||
|
||||
<div class="col-md-2" *ngFor="let r of movie.similar.results">
|
||||
<div class="sidebar affixable affix-top preview-poster">
|
||||
<div class="poster ">
|
||||
<a [routerLink]="'/details/movie/'+r.id">
|
||||
<img class="real grow" matTooltip="{{r.title}}"
|
||||
src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}" alt="Poster"
|
||||
style="display: block;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{'MediaDetails.VideosTitle' | translate}}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<div class="row card-spacer" *ngIf="movie.videos.results.length > 0">
|
||||
|
||||
<div class="col-md-6" *ngFor="let video of movie.videos.results">
|
||||
<iframe width="100%" height="315px" [src]="'https://www.youtube.com/embed/' + video.key | safe"
|
||||
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bottom-page-gap">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,115 @@
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { ImageService, SearchV2Service, RequestService, MessageService } from "../../../services";
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
import { DomSanitizer } from "@angular/platform-browser";
|
||||
import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
|
||||
import { MatDialog } from "@angular/material";
|
||||
import { YoutubeTrailerComponent } from "../shared/youtube-trailer.component";
|
||||
import { AuthService } from "../../../auth/auth.service";
|
||||
import { IMovieRequests, RequestType, IAdvancedData } from "../../../interfaces";
|
||||
import { DenyDialogComponent } from "../shared/deny-dialog/deny-dialog.component";
|
||||
import { NewIssueComponent } from "../shared/new-issue/new-issue.component";
|
||||
|
||||
@Component({
|
||||
templateUrl: "./artist-details.component.html",
|
||||
styleUrls: ["../../media-details.component.scss"],
|
||||
})
|
||||
export class ArtistDetailsComponent {
|
||||
public movie: ISearchMovieResultV2;
|
||||
public hasRequest: boolean;
|
||||
public movieRequest: IMovieRequests;
|
||||
public isAdmin: boolean;
|
||||
public advancedOptions: IAdvancedData;
|
||||
|
||||
private theMovidDbId: number;
|
||||
|
||||
constructor(private searchService: SearchV2Service, private route: ActivatedRoute,
|
||||
private sanitizer: DomSanitizer, private imageService: ImageService,
|
||||
public dialog: MatDialog, private requestService: RequestService,
|
||||
public messageService: MessageService, private auth: AuthService) {
|
||||
this.route.params.subscribe((params: any) => {
|
||||
this.theMovidDbId = params.movieDbId;
|
||||
this.load();
|
||||
});
|
||||
}
|
||||
|
||||
public load() {
|
||||
|
||||
this.isAdmin = this.auth.hasRole("admin") || this.auth.hasRole("poweruser");
|
||||
this.searchService.getFullMovieDetails(this.theMovidDbId).subscribe(async x => {
|
||||
this.movie = x;
|
||||
if (this.movie.requestId > 0) {
|
||||
// Load up this request
|
||||
this.hasRequest = true;
|
||||
this.movieRequest = await this.requestService.getMovieRequest(this.movie.requestId);
|
||||
}
|
||||
this.imageService.getMovieBanner(this.theMovidDbId.toString()).subscribe(x => {
|
||||
this.movie.background = this.sanitizer.bypassSecurityTrustStyle
|
||||
("url(" + x + ")");
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
public async request() {
|
||||
const result = await this.requestService.requestMovie({ theMovieDbId: this.theMovidDbId, languageCode: null }).toPromise();
|
||||
if (result.result) {
|
||||
this.movie.requested = true;
|
||||
this.messageService.send(result.message, "Ok");
|
||||
} else {
|
||||
this.messageService.send(result.errorMessage, "Ok");
|
||||
}
|
||||
}
|
||||
|
||||
public openDialog() {
|
||||
this.dialog.open(YoutubeTrailerComponent, {
|
||||
width: '560px',
|
||||
data: this.movie.videos.results[0].key
|
||||
});
|
||||
}
|
||||
|
||||
public async deny() {
|
||||
const dialogRef = this.dialog.open(DenyDialogComponent, {
|
||||
width: '250px',
|
||||
data: {requestId: this.movieRequest.id, requestType: RequestType.movie}
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
this.movieRequest.denied = result;
|
||||
if(this.movieRequest.denied) {
|
||||
this.movie.approved = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public async issue() {
|
||||
const dialogRef = this.dialog.open(NewIssueComponent, {
|
||||
width: '500px',
|
||||
data: {requestId: this.movieRequest ? this.movieRequest.id : null, requestType: RequestType.movie, imdbid: this.movie.imdbId}
|
||||
});
|
||||
}
|
||||
|
||||
public async approve() {
|
||||
const result = await this.requestService.approveMovie({ id: this.movieRequest.id }).toPromise();
|
||||
if (result.result) {
|
||||
this.movie.approved = false;
|
||||
this.messageService.send("Successfully Approved", "Ok");
|
||||
} else {
|
||||
this.messageService.send(result.errorMessage, "Ok");
|
||||
}
|
||||
}
|
||||
|
||||
public async markAvailable() {
|
||||
const result = await this.requestService.markMovieAvailable({id: this.movieRequest.id}).toPromise();
|
||||
if (result.result) {
|
||||
this.movie.available = true;
|
||||
this.messageService.send(result.message, "Ok");
|
||||
} else {
|
||||
this.messageService.send(result.errorMessage, "Ok");
|
||||
}
|
||||
}
|
||||
|
||||
public setAdvancedOptions(data: any) {
|
||||
this.advancedOptions = data;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue