github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-14 02:26:55 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Finished the additional grid option

Browse source
This commit is contained in:
Jamie Rees 2020-10-04 22:32:26 +01:00
commit 07942dcd04
11 changed files with 218 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts
View file

@ -45,9 +45,9 @@ export class DiscoverActorComponent implements AfterViewInit {
this.discoverResults = [];
this.actorCredits.cast.forEach(m => {
this.discoverResults.push({
available: false,
available: false,
posterPath: m.poster_path ? `https://image.tmdb.org/t/p/w300/${m.poster_path}` : "../../../images/default_movie_poster.png",
requested: false,
requested: false,
title: m.title,
type: RequestType.movie,
id: m.id,
@ -56,6 +56,7 @@ export class DiscoverActorComponent implements AfterViewInit {
overview: m.overview,
approved: false,
imdbid: "",
denied: false
});
});
}

36
src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.html
View file

@ -76,24 +76,24 @@
[translate]="'Common.NotRequested'"></span></ng-template>
</small>
</div>
<div class="col-6">
<strong *ngIf="movie">{{'Discovery.CardDetails.Director' | translate}}: </strong>
<small *ngIf="movie">{{movie.credits.crew[0].name}}</small>
<strong *ngIf="tvCreator">Director: </strong>
<small *ngIf="tvCreator">{{tvCreator}}</small>
</div>
<div class="col-6">
<strong *ngIf="movie">{{'Discovery.CardDetails.InCinemas' | translate}}: </strong>
<small *ngIf="movie">{{movie.releaseDate | amLocal | amDateFormat: 'LL'}}</small>
<strong *ngIf="tv">{{'Discovery.CardDetails.FirstAired' | translate}}: </strong>
<small *ngIf="tv">{{tv.firstAired | amLocal | amDateFormat: 'LL'}}</small>
</div>
<div class="col-6">
<strong *ngIf="movie">{{'Discovery.CardDetails.Writer' | translate}}: </strong>
<small *ngIf="movie">{{movie.credits.crew[1].name}}</small>
<strong *ngIf="tv">{{'Discovery.CardDetails.ExecProducer' | translate}}: </strong>
<small *ngIf="tv">{{tvProducer}}</small>
</div>
<div class="col-6">
<strong *ngIf="movie">{{'Discovery.CardDetails.Director' | translate}}: </strong>
<small *ngIf="movie">{{movie.credits.crew[0].name}}</small>
<strong *ngIf="tvCreator">Director: </strong>
<small *ngIf="tvCreator">{{tvCreator}}</small>
</div>
<div class="col-6">
<strong *ngIf="movie">{{'Discovery.CardDetails.InCinemas' | translate}}: </strong>
<small *ngIf="movie">{{movie.releaseDate | amLocal | amDateFormat: 'LL'}}</small>
<strong *ngIf="tv">{{'Discovery.CardDetails.FirstAired' | translate}}: </strong>
<small *ngIf="tv">{{tv.firstAired | amLocal | amDateFormat: 'LL'}}</small>
</div>
<div class="col-6">
<strong *ngIf="movie">{{'Discovery.CardDetails.Writer' | translate}}: </strong>
<small *ngIf="movie">{{movie.credits.crew[1].name}}</small>
<strong *ngIf="tv">{{'Discovery.CardDetails.ExecProducer' | translate}}: </strong>
<small *ngIf="tv">{{tvProducer}}</small>
</div>
</div>
<div class="row top-spacing overview">

3
src/Ombi/ClientApp/src/app/discover/components/collections/discover-collections.component.ts
View file

@ -54,10 +54,11 @@ export class DiscoverCollectionsComponent implements OnInit {
overview: m.overview,
approved: m.approved,
imdbid: m.imdbId,
denied:false
});
});
}
private loading() {
this.loadingFlag = true;
}

4
src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
View file

@ -1,7 +1,7 @@
<div class="small-middle-container">
<div class="row justify-content-end">
<div class="btn-group col-1 small-space" role="group">
<mat-button-toggle-group>
<mat-button-toggle-group *ngIf="displayOption">
<mat-button-toggle [ngClass]="displayOption === DisplayOption.Card ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.Card)"><mat-icon>dashboard</mat-icon></mat-button-toggle>
<mat-button-toggle [ngClass]="displayOption === DisplayOption.List ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.List)"><mat-icon>calendar_view_day</mat-icon></mat-button-toggle>
</mat-button-toggle-group>
@ -31,7 +31,7 @@
<discover-card [result]="result"></discover-card>
</div>
</div>
<div *ngIf="discoverResults && displayOption == DisplayOption.List" class="row full-height discoverResults col" infiniteScroll [fromRoot]="false" [infiniteScrollDistance]="0.5" [infiniteScrollDisabled]="scrollDisabled" (scrolled)="onScroll()">
<div *ngIf="discoverResults && displayOption == DisplayOption.List" class="row full-height discoverResults col" infiniteScroll [fromRoot]="true" [infiniteScrollDistance]="1" [infiniteScrollDisabled]="scrollDisabled" (scrolled)="onScroll()">
<div class="col-12 small-padding" *ngFor="let result of discoverResults">
<discover-grid [result]="result"></discover-grid>
</div>

14
src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts
View file

@ -26,7 +26,7 @@ export class DiscoverComponent implements OnInit {
public discoverOptions: DiscoverOption = DiscoverOption.Combined;
public DiscoverOption = DiscoverOption;
public displayOption: DisplayOption = DisplayOption.List;
public displayOption: DisplayOption = DisplayOption.Card;
public DisplayOption = DisplayOption;
public defaultTvPoster: string;
@ -43,6 +43,7 @@ export class DiscoverComponent implements OnInit {
private contentLoaded: number;
private isScrolling: boolean = false;
private mediaTypeStorageKey = "DiscoverOptions";
private displayOptionsKey = "DiscoverDisplayOptions";
constructor(private searchService: SearchV2Service,
private storageService: StorageService,
@ -55,6 +56,10 @@ export class DiscoverComponent implements OnInit {
if (localDiscoverOptions) {
this.discoverOptions = DiscoverOption[DiscoverOption[localDiscoverOptions]];
}
const localDisplayOptions = +this.storageService.get(this.displayOptionsKey);
if (localDisplayOptions) {
this.displayOption = DisplayOption[DisplayOption[localDisplayOptions]];
}
this.scrollDisabled = true;
switch (this.discoverOptions) {
case DiscoverOption.Combined:
@ -225,6 +230,7 @@ export class DiscoverComponent implements OnInit {
public changeView(view: DisplayOption) {
this.displayOption = view;
this.storageService.save(this.displayOptionsKey, view.toString());
}
private createModel() {
@ -263,7 +269,8 @@ export class DiscoverComponent implements OnInit {
rating: m.voteAverage,
overview: m.overview,
approved: m.approved,
imdbid: m.imdbId
imdbid: m.imdbId,
denied: false
});
});
return tempResults;
@ -283,7 +290,8 @@ export class DiscoverComponent implements OnInit {
rating: +m.rating,
overview: m.overview,
approved: m.approved,
imdbid: m.imdbId
imdbid: m.imdbId,
denied: false
});
});
return tempResults;

91
src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html
View file

@ -14,13 +14,13 @@
</div> -->
<div class="top-spacing" *ngIf="result">
<div class="top-spacing">
<mat-card class="mat-elevation-z8 dark-card">
<div class="row">
<div class="row main-container">
<div class="col-2">
<img src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
</div>
<div class="col-6">
<div class="col-8">
<div class="row">
<h1>{{result.title}}</h1>
</div>
@ -38,16 +38,99 @@
{{'Common.RequestDenied' | translate}}
</mat-chip>
<mat-chip *ngIf="!result.approved && !result.availble && !result.denied" class="requested">
<mat-chip *ngIf="!result.approved && !result.available && !result.denied" class="requested">
{{'Common.PendingApproval' | translate}}
</mat-chip>
<mat-chip *ngIf="movie && movie.plexUrl"> <a href="{{movie.plexUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}"
>play_circle_outline</mat-icon></a></mat-chip>
<mat-chip *ngIf="movie && movie.embyUrl"> <a href="{{movie.embyUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnEmby' | translate}}"
>play_circle_outline</mat-icon></a></mat-chip>
<mat-chip *ngIf="tv && tv.plexUrl"> <a href="{{tv.plexUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}"
>play_circle_outline</mat-icon></a></mat-chip>
<mat-chip *ngIf="tv &&tv.embyUrl"> <a href="{{movie.embyUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnEmby' | translate}}"
>play_circle_outline</mat-icon></a></mat-chip>
</mat-chip-list>
</div>
<div class="row">
<mat-chip-list class="top-spacing">
<mat-chip *ngIf="movie && movie.productionCompanies[0]?.name">{{'Discovery.CardDetails.Studio' | translate}}: {{movie.productionCompanies[0].name}}</mat-chip>
<mat-chip *ngIf="tv && tv.network?.name">{{'Discovery.CardDetails.Network' | translate}}: {{tv.network.name}}</mat-chip>
<mat-chip *ngIf="movie && movie.credits?.crew[0]?.name">{{'Discovery.CardDetails.Director' | translate}}: {{movie.credits.crew[0].name}}</mat-chip>
<mat-chip *ngIf="tvCreator">Director: {{tvCreator}}</mat-chip>
<mat-chip *ngIf="movie">{{'Discovery.CardDetails.InCinemas' | translate}}: {{movie.releaseDate | amLocal | amDateFormat: 'LL'}}</mat-chip>
<mat-chip *ngIf="tv">{{'Discovery.CardDetails.FirstAired' | translate}}: {{tv.firstAired | amLocal | amDateFormat: 'LL'}}</mat-chip>
<mat-chip *ngIf="movie && movie.credits?.crew[1]?.name">{{'Discovery.CardDetails.Writer' | translate}}: {{movie.credits.crew[1].name}}</mat-chip>
<mat-chip *ngIf="tv">{{'Discovery.CardDetails.ExecProducer' | translate}}: {{tvProducer}}</mat-chip>
</mat-chip-list>
</div>
<div class="row">
<p class="overview top-spacing">{{result.overview}}</p>
</div>
</div>
<div class="col-2" >
<div style="float:right;">
<button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
'Common.ViewDetails' | translate }}</button>
<div *ngIf="movie">
<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" 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>
</div>
<div *ngIf="tv">
<div *ngIf="!tv.fullyAvailable" class="dropdown">
<button mat-raised-button class="btn-orange btn-spacing" type="button" (click)="request()">
<i class="fa fa-plus"></i>
{{ 'Common.Request' | translate }}
<span class="caret"></span>
</button>
</div>
<button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent" [disabled]>
<i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
<button *ngIf="tv.partlyAvailable && !tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent"
[disabled]>
<i class="fa fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
<span *ngIf="tv.available">
<a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
translate}}</a>
<a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
translate}}</a>
</span>
</div>
</div>
</div>
</div>
</mat-card>
</div>

32
src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss
View file

@ -1,6 +1,31 @@
$ombi-primary:#3f3f3f;
$card-background: #2b2b2b;
$blue: #1976D2;
$pink: #C2185B;
$green:#1DE9B6;
$orange:#F57C00;
.btn-blue {
background-color: $blue;
}
.btn-pink {
background-color: $pink;
}
.btn-green {
background-color: $green;
}
.btn-orange {
background-color: $orange;
}
.btn-spacing {
margin-top:10%;
}
#cardImage {
border-radius: 5px 5px 0px 0px;
height: 75%;
@ -17,6 +42,13 @@ $card-background: #2b2b2b;
.card-poster {
width: 100%;
border-radius: 8px 0px 0px 8px;
margin-top: -6.5%;
margin-bottom: -6.6%;
}
.main-container {
margin-left: -2%;
}

65
src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts
View file

@ -1,10 +1,13 @@
import { Component, OnInit, Input } from "@angular/core";
import { IDiscoverCardResult } from "../../interfaces";
import { RequestType, ISearchTvResult, ISearchMovieResult } from "../../../interfaces";
import { SearchV2Service } from "../../../services";
import { RequestType, ISearchTvResult, ISearchMovieResult, ISearchMovieResultContainer } from "../../../interfaces";
import { RequestService, SearchV2Service } from "../../../services";
import { MatDialog } from "@angular/material/dialog";
import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
import { EpisodeRequestComponent } from "../../../shared/episode-request/episode-request.component";
import { MatSnackBar } from "@angular/material/snack-bar";
import { Router } from "@angular/router";
@Component({
selector: "discover-grid",
@ -15,8 +18,16 @@ export class DiscoverGridComponent implements OnInit {
@Input() public result: IDiscoverCardResult;
public RequestType = RequestType;
public requesting: boolean;
constructor(private searchService: SearchV2Service, private dialog: MatDialog) { }
public tv: ISearchTvResultV2;
public tvCreator: string;
public tvProducer: string;
public movie: ISearchMovieResultV2;
constructor(private searchService: SearchV2Service, private dialog: MatDialog,
private requestService: RequestService, private notification: MatSnackBar,
private router: Router) { }
public ngOnInit() {
if (this.result.type == RequestType.tvShow) {
@ -28,12 +39,32 @@ export class DiscoverGridComponent implements OnInit {
}
public async getExtraTvInfo() {
var result = await this.searchService.getTvInfo(this.result.id);
this.setTvDefaults(result);
this.updateTvItem(result);
this.tv = await this.searchService.getTvInfo(this.result.id);
this.setTvDefaults(this.tv);
this.updateTvItem(this.tv);
const creator = this.tv.crew.filter(tv => {
return tv.type === "Creator";
})[0];
if (creator && creator.person) {
this.tvCreator = creator.person.name;
}
const crewResult = this.tv.crew.filter(tv => {
return tv.type === "Executive Producer";
})[0]
if (crewResult && crewResult.person) {
this.tvProducer = crewResult.person.name;
}
}
public openDetails() {
if (this.result.type === RequestType.movie) {
this.router.navigate(['/details/movie/', this.result.id]);
} else if (this.result.type === RequestType.tvShow) {
this.router.navigate(['/details/tv/', this.result.id]);
}
}
public getStatusClass(): string {
if (this.result.available) {
return "available";
@ -48,12 +79,13 @@ export class DiscoverGridComponent implements OnInit {
}
private getExtraMovieInfo() {
if (!this.result.imdbid) {
// if (!this.result.imdbid) {
this.searchService.getFullMovieDetails(this.result.id)
.subscribe(m => {
this.movie = m;
this.updateMovieItem(m);
});
}
// }
}
private updateMovieItem(updated: ISearchMovieResultV2) {
@ -82,4 +114,21 @@ export class DiscoverGridComponent implements OnInit {
this.result.url = updated.imdbId;
}
public async request() {
this.requesting = true;
if (this.result.type === RequestType.movie) {
const result = await this.requestService.requestMovie({ theMovieDbId: this.result.id, languageCode: "" }).toPromise();
if (result.result) {
this.result.requested = true;
this.notification.open(result.message, "Ok");
} else {
this.notification.open(result.errorMessage, "Ok");
}
} else if (this.result.type === RequestType.tvShow) {
this.dialog.open(EpisodeRequestComponent, { width: "700px", data: this.tv, panelClass: 'modal-panel' })
}
this.requesting = false;
}
}

1
src/Ombi/ClientApp/src/app/discover/interfaces.ts
View file

@ -8,6 +8,7 @@ export interface IDiscoverCardResult {
type: RequestType;
available: boolean;
approved: boolean;
denied: boolean;
requested: boolean;
rating: number;
overview: string;

2
src/Ombi/ClientApp/src/index.html
View file

@ -57,7 +57,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
</head>
<body class="mat-typography">
<body class="mat-typography custom-background">
<app-ombi>
<script type="text/javascript">

4
src/Ombi/ClientApp/src/styles/shared.scss
View file

@ -44,6 +44,10 @@ body {
-webkit-overflow-scrolling: touch;
}
.custom-background {
background-color: $background-dark !important;
}
.spinner-container {
position: relative;
margin-left: 50%;