From 3c63b4f5e63f2684c788c552182a324f20c351f9 Mon Sep 17 00:00:00 2001 From: Jamie Rees Date: Sat, 3 Oct 2020 22:40:31 +0100 Subject: [PATCH] wip --- .../discover/discover.component.html | 19 +++- .../components/discover/discover.component.ts | 8 +- .../grid/discover-grid.component.html | 53 ++++++++++ .../grid/discover-grid.component.scss | 100 ++++++++++++++++++ .../grid/discover-grid.component.ts | 85 +++++++++++++++ .../src/app/discover/components/index.ts | 2 + .../src/app/discover/discover.module.ts | 2 + .../ClientApp/src/app/discover/interfaces.ts | 5 + 8 files changed, 271 insertions(+), 3 deletions(-) create mode 100644 src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html create mode 100644 src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss create mode 100644 src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts diff --git a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html index d50a965c4..5c5f09c1d 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html @@ -1,13 +1,23 @@
-
+
+
+ + dashboard + calendar_view_day + +
+
+
+
+
@@ -16,11 +26,16 @@
-
+
+
+
+ +
+
diff --git a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts index ada8b379e..d00f66113 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, Inject } from "@angular/core"; import { SearchV2Service } from "../../../services"; import { ISearchMovieResult, ISearchTvResult, RequestType } from "../../../interfaces"; -import { IDiscoverCardResult, DiscoverOption } from "../../interfaces"; +import { IDiscoverCardResult, DiscoverOption, DisplayOption } from "../../interfaces"; import { trigger, transition, style, animate } from "@angular/animations"; import { StorageService } from "../../../shared/storage/storage-service"; import { DOCUMENT } from "@angular/common"; @@ -26,6 +26,8 @@ export class DiscoverComponent implements OnInit { public discoverOptions: DiscoverOption = DiscoverOption.Combined; public DiscoverOption = DiscoverOption; + public displayOption: DisplayOption = DisplayOption.List; + public DisplayOption = DisplayOption; public defaultTvPoster: string; @@ -221,6 +223,10 @@ export class DiscoverComponent implements OnInit { this.finishLoading(); } + public changeView(view: DisplayOption) { + this.displayOption = view; + } + private createModel() { const tempResults = []; diff --git a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html new file mode 100644 index 000000000..9f3bf3d76 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html @@ -0,0 +1,53 @@ + + + +
+ +
+
+ {{result.title}} +
+
+
+

{{result.title}}

+
+
+ + + {{'Common.Available' | translate}} + + + + {{'Common.ProcessingRequest' | translate}} + + + + {{'Common.RequestDenied' | translate}} + + + + {{'Common.PendingApproval' | translate}} + + + +
+
+

{{result.overview}}

+
+
+
+ +
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss new file mode 100644 index 000000000..748c668e2 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss @@ -0,0 +1,100 @@ +$ombi-primary:#3f3f3f; +$card-background: #2b2b2b; + +#cardImage { + border-radius: 5px 5px 0px 0px; + height: 75%; +} + +.dark-card { + border-radius: 8px; +} + +// Changed height to 100% to make all cards the same height +.top-spacing { + margin-top: 1%; +} + +.card-poster { + width: 100%; +} + + +.rating { + position: absolute; + font-weight: bold; +} + +$border-width: 3px; + +.available { + background-color: #1DE9B6 !important; + color: black !important; +} + +.approved { + background-color: #ff5722 !important; +} + +.requested { + background-color: #ffd740 !important; + color: black !important; +} + +.denied { + background-color: #C2185B !important; +} + +.notrequested { + background-color: #303030 !important; +} + +.expand { + text-align: center; +} + +@media (min-width: 1025px) { + + // Changed height to 100% to make all cards the same height + .grow { + transition: all .2s ease-in-out; + height: 100%; + } + + .grow:hover { + transform: scale(1.1); + } +} + +::ng-deep mat-dialog-container.mat-dialog-container { + // background-color: $ombi-primary; + // color: white; + border-radius: 2% +} + + +/* Title adjust for the Discover page */ +.mat-card-content h6 { + overflow: hidden; + white-space: nowrap; + font-weight: 400; + font-size: 1.1rem; +} + +/* Summary adjust for Discover page */ +.small, +small { + font-size: 0.8rem; +} + +@media (min-width: 2000px) { + #cardImage { + height: 80%; + object-fit: cover; + display: block; + } +} + +.overview { + font-size: 1.2em; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts new file mode 100644 index 000000000..55ac4870d --- /dev/null +++ b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts @@ -0,0 +1,85 @@ +import { Component, OnInit, Input } from "@angular/core"; +import { IDiscoverCardResult } from "../../interfaces"; +import { RequestType, ISearchTvResult, ISearchMovieResult } from "../../../interfaces"; +import { SearchV2Service } from "../../../services"; +import { MatDialog } from "@angular/material/dialog"; +import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2"; +import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2"; + +@Component({ + selector: "discover-grid", + templateUrl: "./discover-grid.component.html", + styleUrls: ["./discover-grid.component.scss"], +}) +export class DiscoverGridComponent implements OnInit { + + @Input() public result: IDiscoverCardResult; + public RequestType = RequestType; + + constructor(private searchService: SearchV2Service, private dialog: MatDialog) { } + + 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; + } + +} diff --git a/src/Ombi/ClientApp/src/app/discover/components/index.ts b/src/Ombi/ClientApp/src/app/discover/components/index.ts index 6e56d29d8..e65e48bd3 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/index.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/index.ts @@ -7,6 +7,7 @@ import { Routes } from "@angular/router"; import { AuthGuard } from "../../auth/auth.guard"; import { SearchService, RequestService } from "../../services"; import { MatDialog } from "@angular/material/dialog"; +import { DiscoverGridComponent } from "./grid/discover-grid.component"; export const components: any[] = [ @@ -15,6 +16,7 @@ export const components: any[] = [ DiscoverCardDetailsComponent, DiscoverCollectionsComponent, DiscoverActorComponent, + DiscoverGridComponent, ]; diff --git a/src/Ombi/ClientApp/src/app/discover/discover.module.ts b/src/Ombi/ClientApp/src/app/discover/discover.module.ts index 31e51fe24..e40cf102a 100644 --- a/src/Ombi/ClientApp/src/app/discover/discover.module.ts +++ b/src/Ombi/ClientApp/src/app/discover/discover.module.ts @@ -1,6 +1,7 @@ import { NgModule } from "@angular/core"; import { RouterModule } from "@angular/router"; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; +import {MatButtonToggleModule} from '@angular/material/button-toggle'; import { SharedModule } from "../shared/shared.module"; import { PipeModule } from "../pipes/pipe.module"; @@ -13,6 +14,7 @@ import * as fromComponents from './components'; RouterModule.forChild(fromComponents.routes), SharedModule, PipeModule, + MatButtonToggleModule, InfiniteScrollModule, ], declarations: [ diff --git a/src/Ombi/ClientApp/src/app/discover/interfaces.ts b/src/Ombi/ClientApp/src/app/discover/interfaces.ts index 9e080ca75..bc933379b 100644 --- a/src/Ombi/ClientApp/src/app/discover/interfaces.ts +++ b/src/Ombi/ClientApp/src/app/discover/interfaces.ts @@ -19,3 +19,8 @@ export enum DiscoverOption { Movie = 2, Tv = 3 } + +export enum DisplayOption { + Card = 1, + List = 2 +}