open-source-mirrors
/
Ombi
mirror of https://github.com/Ombi-app/Ombi
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

more refactoring around the details pages !wip

Browse Source
pull/3895/head
Jamie Rees 5 years ago
parent 7bf7d558a3
commit b7f74d9f96
8 changed files with 269 additions and 274 deletions
Show Stats Download Patch File Download Diff File

4
src/Ombi/ClientApp/src/app/media-details/components/index.ts
Unescape View File

@ -5,6 +5,8 @@ import { MovieInformationPanelComponent } from "./movie/panels/movie-information
import { TvInformationPanelComponent } from "./tv/panels/tv-information-panel.component";
import { TopBannerComponent } from "./shared/top-banner/top-banner.component";
import { SocialIconsComponent } from "./shared/social-icons/social-icons.component";
import { MediaPosterComponent } from "./shared/media-poster/media-poster.component";
import { CastCarouselComponent } from "./shared/cast-carousel/cast-carousel.component";
export const components: any[] = [
MovieDetailsComponent,
@ -14,4 +16,6 @@ export const components: any[] = [
TvInformationPanelComponent,
TopBannerComponent,
SocialIconsComponent,
MediaPosterComponent,
CastCarouselComponent,
];

316
src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
Unescape View File

@ -1,204 +1,170 @@
<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>
<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">
<div class="col-md-2 col-sm-3 hidden-xs">
<div class="sidebar sidebar-poster affixable affix-top">
<div class="poster">
<img class="real" src="https://image.tmdb.org/t/p/w300/{{movie.posterPath}}" alt="Poster"
style="display: block;">
</div>
<!--Underneith poster-->
<br />
</div>
</div>
<!--Next to poster-->
<div class="col-10 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-7 col-xl-7 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 class="btn-spacing btn-orange" [disabled]><i
class="fa fa-check"></i>
{{ 'Common.Requested' | translate }}</button>
</ng-template>
<ng-template #notRequestedBtn>
<button mat-raised-button class="btn-spacing" (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 mat-raised-button class="btn-spacing" color="warn"
(click)="deny()"> <i class="fa fa-times"></i> {{ 'Requests.Deny' | translate }}</button></span>
</div>
</div>
<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-10 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 class="btn-spacing btn-orange" [disabled]><i class="fa fa-check"></i>
{{ 'Common.Requested' | translate }}</button>
</ng-template>
<ng-template #notRequestedBtn>
<button mat-raised-button class="btn-spacing" (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 mat-raised-button class="btn-spacing" color="warn" (click)="deny()"> <i class="fa fa-times"></i> {{
'Requests.Deny' | translate }}</button></span>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-12 col-md-2">
<button *ngIf="movie.belongsToCollection" mat-raised-button
class="spacing-below full-width mat-elevation-z8">{{movie.belongsToCollection.name}}</button>
<div class="col-12 col-md-2">
<button *ngIf="movie.belongsToCollection" mat-raised-button class="spacing-below full-width mat-elevation-z8">{{movie.belongsToCollection.name}}</button>
<mat-card class="mat-elevation-z8">
<mat-card-content class="medium-font">
<movie-information-panel [movie]="movie"></movie-information-panel>
</mat-card-content>
</mat-card>
</div>
<mat-card class="mat-elevation-z8">
<mat-card-content class="medium-font">
<movie-information-panel [movie]="movie"></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 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>
Recommendations
</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 class="row">
<div class="col-12">
<mat-card class="mat-elevation-z8 spacing-below">
<mat-card-header>Cast</mat-card-header>
<mat-card-content>
<p-carousel [value]="movie.credits.cast" [numVisible]="5" easing="easeOutStrong">
<ng-template let-item pTemplate="item">
<div class="row justify-content-md-center">
<div class="col-12">
<img class="cast-profile-img" *ngIf="item.profile_path"
src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
<!-- TODO get profile image default -->
</div>
<div class="col-12">
<span><strong>Character:</strong> {{item.character}}</span>
</div>
<div class="col-12">
<span><strong>Actor:</strong> {{item.name}}</span>
</div>
</div>
</ng-template>
</p-carousel>
</mat-card-content>
</mat-card>
</div>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Similar
</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 class="row">
<div class="col-12">
<mat-accordion class="mat-elevation-z8 spacing-below">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Recommendations
</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>
Similar
</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>
Videos
</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>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Videos
</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>
</div>
</div>
<div class="bottom-page-gap">
</div>
</section>
<div class="bottom-page-gap">
</div>
</section>
@ -207,4 +173,4 @@
</div>
</div>

24
src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html
Unescape View File

@ -0,0 +1,24 @@
<mat-card class="mat-elevation-z8 spacing-below">
<mat-card-header>Cast</mat-card-header>
<mat-card-content>
<p-carousel [value]="cast" [numVisible]="5" easing="easeOutStrong">
<ng-template let-item pTemplate="item">
<div class="row justify-content-md-center">
<div class="col-12">
<img class="cast-profile-img" *ngIf="item.profile_path" src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
<img class="cast-profile-img" *ngIf="item.character?.image?.medium" [src]="item.character.image.medium">
<!-- TODO get profile image default -->
</div>
<div class="col-12">
<span *ngIf="!item.character?.name"><strong>Character:</strong> {{item.character}}</span>
<span *ngIf="item.character.name"><strong>Character:</strong> {{item.character.name}}</span>
</div>
<div class="col-12">
<span *ngIf="item.name"><strong>Actor:</strong> {{item.name}}</span>
<span *ngIf="item.person?.name"><strong>Actor:</strong> {{item.person.name}}</span>
</div>
</div>
</ng-template>
</p-carousel>
</mat-card-content>
</mat-card>

10
src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.ts
Unescape View File

@ -0,0 +1,10 @@
import { Component, Input } from "@angular/core";
@Component({
selector: "cast-carousel",
templateUrl: "./cast-carousel.component.html",
})
export class CastCarouselComponent {
@Input() cast: any[];
}

10
src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html
Unescape View File

@ -0,0 +1,10 @@
<div class="col-md-2 col-sm-3 hidden-xs">
<div class="sidebar sidebar-poster affixable affix-top">
<div class="poster">
<img class="real" src="{{posterPath}}" alt="Poster"
style="display: block;">
</div>
<!--Underneith poster-->
<br />
</div>
</div>

10
src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.ts
Unescape View File

@ -0,0 +1,10 @@
import { Component, Inject, Input, Output, EventEmitter } from "@angular/core";
@Component({
selector: "media-poster",
templateUrl: "./media-poster.component.html",
})
export class MediaPosterComponent {
@Input() posterPath: string;
}

4
src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.ts
Unescape View File

@ -18,10 +18,10 @@ export class SocialIconsComponent {
@Input() plexUrl: string;
@Input() embyUrl: string;
@Output() openTrailer: EventEmitter<any>;
@Output() openTrailer: EventEmitter<any> = new EventEmitter();
public openDialog() {
this.openTrailer.emit;
this.openTrailer.emit();
}
}

165
src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
Unescape View File

@ -1,106 +1,77 @@
<div *ngIf="tv">
<top-banner [background]="tv.background" [available]="tv.available"
[title]="tv.title" [releaseDate]="tv.firstAired" [tagline]="tv.certification"></top-banner>
<section id="info-wrapper">
<div class="small-middle-container">
<div class="row">
<div class="col-md-2 col-sm-3 hidden-xs">
<div class="sidebar sidebar-poster affixable affix-top">
<div class="poster">
<img class="real" [src]="tv.images.medium" alt="Poster" style="display: block;">
</div>
<!--Underneith poster-->
<br />
</div>
</div>
<!--Next to poster-->
<div class="col-10 col-lg-3 col-xl-3 media-row">
<social-icons [homepage]="tv.homepage" [tvdbId]="tv.id" [hasTrailer]="tv.trailer"
(openTrailer)="openDialog()" [imdbId]="tv.imdbId" [available]="tv.available"
[plexUrl]="tv.plexUrl" [embyUrl]="tv.embyUrl"></social-icons>
</div>
<div class="col-12 col-lg-7 col-xl-7 media-row">
<button *ngIf="!tv.fullyAvailable" mat-raised-button class="btn-spacing mat-warn"
(click)="request()"><i class="fa fa-plus"></i>
{{ 'Common.Request' | translate }}</button>
<button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing mat-primary" [disabled]>
<i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
</div>
</div>
<top-banner [background]="tv.background" [available]="tv.available" [title]="tv.title" [releaseDate]="tv.firstAired"
[tagline]="tv.certification"></top-banner>
<div class="row">
<div class="col-12 col-md-2">
<mat-card class="mat-elevation-z8">
<mat-card-content class="medium-font">
<tv-information-panel [tv]="tv"></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">
<mat-card class="mat-elevation-z8 spacing-below">
<mat-card-header>Cast</mat-card-header>
<mat-card-content>
<p-carousel [value]="tv.cast" [numVisible]="5" easing="easeOutStrong">
<ng-template let-item pTemplate="item">
<div class="row justify-content-md-center">
<div class="col-12">
<img class="cast-profile-img" *ngIf="item.character.image.medium"
[src]="item.character.image.medium">
<!-- TODO get profile image default -->
</div>
<div class="col-12">
<span><strong>Character:</strong> {{item.character.name}}</span>
</div>
<div class="col-12">
<span><strong>Actor:</strong> {{item.person.name}}</span>
</div>
</div>
</ng-template>
</p-carousel>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
<section id="info-wrapper">
<div class="small-middle-container">
<div class="row">
<media-poster [posterPath]="tv.images.medium"></media-poster>
</div>
<!--Next to poster-->
<div class="col-12 col-lg-3 col-xl-3 media-row">
<social-icons [homepage]="tv.homepage" [tvdbId]="tv.id" [hasTrailer]="tv.trailer" (openTrailer)="openDialog()"
[imdbId]="tv.imdbId" [available]="tv.available" [plexUrl]="tv.plexUrl" [embyUrl]="tv.embyUrl"></social-icons>
</div>
<div class="row card-spacer media-row">
<div class="col-12 col-lg-6 col-xl-6 media-row">
<button *ngIf="!tv.fullyAvailable" mat-raised-button class="btn-spacing mat-warn" (click)="request()"><i
class="fa fa-plus"></i>
{{ 'Common.Request' | translate }}</button>
<button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing mat-primary" [disabled]>
<i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
</div>
</div>
<div class="row">
<div class="col-12 col-md-2">
<div class="col-12 col-md-9">
<mat-card class="mat-elevation-z8">
<mat-card-content class="medium-font">
<tv-information-panel [tv]="tv"></tv-information-panel>
</mat-card-content>
</mat-card>
</div>
</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="row card-spacer media-row">
<div class="col-12 col-md-3"></div>
<div class="col-12">
<cast-carousel [cast]="tv.cast"></cast-carousel>
</div>
</div>
<!-- <div class="col-12 col-md-9">
</div>
</div>
<div class="row card-spacer media-row">
<div class="col-12 col-md-9">
</div>
</div>
<div class="row card-spacer media-row">
<div class="col-12 col-md-3"></div>
<!-- <div class="col-12 col-md-9">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
@ -167,15 +138,15 @@
</mat-expansion-panel>
</mat-accordion>
</div> -->
</div>
</div>
</div>
</div>
<div class="bottom-page-gap">
</div>
</section>
<div class="bottom-page-gap">
</div>
</section>
@ -184,4 +155,4 @@
</div>
</div>

Write Preview
Loading…
Cancel
Save