You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Ombi/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html

172 lines
8.6 KiB

<div *ngIf="!tv" class="justify-content-md-center top-spacing loading-spinner">
<mat-spinner [color]="'accent'"></mat-spinner>
</div>
<div *ngIf="tv" class="main-content-container">
<div *ngIf="tv.id === 0; else main">
<div class="small-middle-container no-info">
<h1><i class="far fa-frown-o" aria-hidden="true"></i></h1>
<h3> {{ 'MediaDetails.NotEnoughInfo' | translate }}</h3>
</div>
</div>
<ng-template #main>
<div>
<top-banner [background]="tv.background" [available]="tv.available" [title]="tv.title"
[releaseDate]="tv.firstAired" [tagline]="tv.tagline"></top-banner>
<div class="social-icons-container">
<social-icons
[homepage]="tv.homepage"
[theMoviedbId]="tv.id"
[hasTrailer]="tv.trailer"
[twitter]="tv.externalIds?.twitterId"
[facebook]="tv.externalIds?.facebookId"
[instagram]="tv.externalIds?.instagramId"
(openTrailer)="openDialog()"
[imdbId]="tv.imdbId"
[isAdmin]="isAdmin"
[canShowAdvanced]="showAdvanced && showRequest"
[type]="requestType"
(onAdvancedOptions)="openAdvancedOptions()"
>
</social-icons>
</div>
<section id="info-wrapper">
<div class="small-middle-container">
<div class="row justify-content-center justify-content-sm-start header-container">
<div class="details-poster-container">
<media-poster [posterPath]=tv.images.original></media-poster>
</div>
<!--Next to poster-->
<div class="details-button-container">
<div class="col-12 media-row">
<ng-container *ngIf="tv.fullyAvailable || tv.partlyAvailable">
<a id="viewOnPlexButton" *ngIf="tv.plexUrl" href="{{tv.plexUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn plex">
{{'Search.ViewOnPlex' | translate}}
<i class="far fa-play-circle fa-2x"></i>
</a>
<a id="viewOnEmbyButton" *ngIf="tv.embyUrl" href="{{tv.embyUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn emby">
{{'Search.ViewOnEmby' | translate}}
<i class="far fa-play-circle fa-2x"></i>
</a>
<a id="viewOnJellyfinButton" *ngIf="tv.jellyfinUrl" href="{{tv.jellyfinUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn jellyfin">
{{'Search.ViewOnJellyfin' | translate}}
<i class="far fa-play-circle fa-2x"></i>
</a>
</ng-container>
<button *ngIf="!tv.fullyAvailable && !allEpisodesRequested()" mat-raised-button id="requestBtn" class="btn-spacing" color="primary"
(click)="request()"><i class="fas fa-plus"></i>
{{ 'Common.Request' | translate }}</button>
<button *ngIf="!tv.denied && allEpisodesRequested()" mat-raised-button class="btn-spacing" color="warn" [disabled]>
<i class="fas fa-check"></i>
{{ 'Common.Requested' | translate }}</button>
<button *ngIf="tv.fullyAvailable && !tv.partlyAvailable" id="availableBtn" mat-raised-button class="btn-spacing" color="accent"
[disabled]>
<i class="fas fa-check"></i> {{'Common.Available' | translate }}</button>
<button *ngIf="tv.partlyAvailable && !tv.fullyAvailable" id="partiallyAvailableBtn" mat-raised-button
class="btn-spacing" color="accent" [disabled]>
<i class="fas fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
<!-- There are unaired episodes-->
<button *ngIf="tv.partlyAvailable && tv.fullyAvailable" id="partiallyAvailableBtn" mat-raised-button
class="btn-spacing" color="accent" [disabled]>
<i class="fas fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
<!-- end unaired episodes-->
<button id="deniedButton" *ngIf="tv.denied" [matTooltip]="tv.deniedReason" mat-raised-button class="btn-spacing" color="warn">
<i class="fas fa-times"></i> {{'Common.Denied' | translate }}
</button>
<button mat-raised-button class="btn-spacing" color="danger" id="reportIssueBtn" *ngIf="issuesEnabled" (click)="issue()">
<i class="fas fa-exclamation"></i> {{
'Requests.ReportIssue' | translate }}</button>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-2">
<mat-card class="mat-elevation-z8 spacing-below">
<mat-card-content>
<tv-information-panel [tv]="tv" [request]="showRequest"
[advancedOptions]="showAdvanced"></tv-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>
{{tv.overview}}
</mat-card-content>
</mat-card>
</div>
<div class="col-12">
<cast-carousel [cast]="tv.cast"></cast-carousel>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-2">
<!--Just some space yo-->
</div>
<div class="col-12 col-md-10">
<tv-request-grid id="requests-grid" [tvRequest]="tvRequest" [isAdmin]="isAdmin" [tv]="tv"></tv-request-grid>
</div>
<div class="col-12 col-md-2">
<!--Just some space yo-->
</div>
<div class="col-12 col-md-10">
<div class="issuesPanel">
<issues-panel [providerId]="tv.id" [isAdmin]="isAdmin"></issues-panel>
</div>
<mat-accordion id="requests-panel">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{'Requests.Title' | translate}}
</mat-panel-title>
</mat-expansion-panel-header>
<tv-requests-panel [tvRequest]="tvRequest" [isAdmin]="isAdmin" [manageOwnRequests]="manageOwnRequests"></tv-requests-panel>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</div>
<div class="bottom-page-gap">
</div>
</section>
</div>
</ng-template>
</div>