From 1e199b477edea5537b5b7162344cfa0dbbb3426f Mon Sep 17 00:00:00 2001 From: tidusjar Date: Tue, 12 Jan 2021 22:33:19 +0000 Subject: [PATCH] More work on it... top secret --- src/Ombi/ClientApp/package.json | 2 +- .../card/discover-card-details.component.ts | 2 +- .../card/discover-card.component.html | 25 +- .../card/discover-card.component.scss | 76 +++++- .../card/discover-card.component.ts | 57 ++++- .../discover/discover.component.html | 16 +- .../discover/discover.component.scss | 216 +----------------- .../components/discover/discover.component.ts | 7 +- .../movie-list/movie-list.component.html | 22 +- .../movie-list/movie-list.component.ts | 95 +++----- .../src/app/discover/discover.module.ts | 4 +- src/Ombi/ClientApp/yarn.lock | 14 +- 12 files changed, 204 insertions(+), 332 deletions(-) diff --git a/src/Ombi/ClientApp/package.json b/src/Ombi/ClientApp/package.json index 82c946672..8f1e6384a 100644 --- a/src/Ombi/ClientApp/package.json +++ b/src/Ombi/ClientApp/package.json @@ -52,7 +52,7 @@ "please-wait": "^0.0.5", "popper.js": "^1.14.3", "primeicons": "^4.0.0", - "primeng": "^10.0.3", + "primeng": "^11.0.0", "rxjs": "^6.5.2", "spinkit": "^1.2.5", "store": "^2.0.12", diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.ts b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.ts index 883add54a..804e0e9ec 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.ts @@ -77,7 +77,7 @@ export class DiscoverCardDetailsComponent implements OnInit { this.messageService.send(result.errorMessage, "Ok"); } } else if (this.data.type === RequestType.tvShow) { - this.dialog.open(EpisodeRequestComponent, { width: "700px", data: this.tv, panelClass: 'modal-panel' }) + this.dialog.open(EpisodeRequestComponent, { width: "700px", data: {series: this.tv }, panelClass: 'modal-panel' }) } this.loading = false; diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html index b32bb98d8..cb4fcb23b 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html @@ -1,4 +1,4 @@ -
+ + + + +
+
+ + {{result.title}} +
{{RequestType[result.type] | humanize}}
+
+
{{result.title}}
+
{{result.overview}}
+
+
+ +
+
+
+
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss index 5f232a48e..18da6486b 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss @@ -2,7 +2,7 @@ $ombi-primary:#3f3f3f; $card-background: #2b2b2b; #cardImage { - border-radius: 5px 5px 0px 0px; + border-radius: 5px; height: 75%; } @@ -166,4 +166,76 @@ small { } .ribbon-icon { transform: translateX(0%) translateY(0%) rotate(-45deg); - } \ No newline at end of file + } + + + + +.ombi-card { + padding: 5px; +} +::ng-deep .p-carousel-indicators { + display: none !important; + } + + +.image { + border-radius: 10px; + opacity: 1; + display: block; + width: 100%; + height: auto; + transition: .5s ease; + backface-visibility: hidden; +} + + +.middle { + transition: .5s ease; + opacity: 0; + position: absolute; + top: 67%; + width: 90%; + left: 50%; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); +} + + +.c { + position: relative; +} + +.c:hover .image { + opacity: 0.3; +} + +.c:hover .middle { + opacity: 1; +} + +.small-text { + font-size: 11px; +} +.title { + font-size: 18px; + } + .top-left { + font-size: 14px; + position: absolute; + text-transform: uppercase; + top: 8px; + left: 16px; + + } + .full-width { + width: 100%; + } + + .ellipsis { + display: -webkit-box; + -webkit-line-clamp: 6; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.ts b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.ts index 6512ca3a8..4dd357a89 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.ts @@ -1,11 +1,12 @@ import { Component, OnInit, Input } from "@angular/core"; import { IDiscoverCardResult } from "../../interfaces"; import { RequestType } from "../../../interfaces"; -import { SearchService, SearchV2Service } from "../../../services"; +import { MessageService, RequestService, SearchV2Service } from "../../../services"; import { MatDialog } from "@angular/material/dialog"; import { DiscoverCardDetailsComponent } from "./discover-card-details.component"; import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2"; import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2"; +import { EpisodeRequestComponent } from "../../../shared/episode-request/episode-request.component"; @Component({ selector: "discover-card", @@ -17,8 +18,14 @@ export class DiscoverCardComponent implements OnInit { @Input() public result: IDiscoverCardResult; public RequestType = RequestType; public hide: boolean; + public fullyLoaded = false; + public loading: boolean; - constructor(private searchService: SearchV2Service, private v1Search: SearchService, private dialog: MatDialog) { } + // This data is needed to open the dialog + private tvSearchResult: ISearchTvResultV2; + + constructor(private searchService: SearchV2Service, private dialog: MatDialog, private requestService: RequestService, + public messageService: MessageService) { } public ngOnInit() { if (this.result.type == RequestType.tvShow) { @@ -38,16 +45,16 @@ export class DiscoverCardComponent implements OnInit { public async getExtraTvInfo() { if (this.result.tvMovieDb) { - var result = await this.searchService.getTvInfoWithMovieDbId(+this.result.id); + this.tvSearchResult = await this.searchService.getTvInfoWithMovieDbId(+this.result.id); } else { - var result = await this.searchService.getTvInfo(+this.result.id); + this.tvSearchResult = await this.searchService.getTvInfo(+this.result.id); } - if(result.status === "404") { + if (this.tvSearchResult.status === "404") { this.hide = true; return; } - this.setTvDefaults(result); - this.updateTvItem(result); + this.setTvDefaults(this.tvSearchResult); + this.updateTvItem(this.tvSearchResult); } @@ -55,10 +62,13 @@ export class DiscoverCardComponent implements OnInit { this.searchService.getArtistInformation(this.result.id.toString()).subscribe(x => { if (x.poster) { this.result.posterPath = x.poster; + this.fullyLoaded = true; } else { this.searchService.getReleaseGroupArt(this.result.id.toString()).subscribe(art => { - if(art.image) { + if (art.image) { this.result.posterPath = art.image; + + this.fullyLoaded = true; } }) } @@ -68,8 +78,7 @@ export class DiscoverCardComponent implements OnInit { } public generateDetailsLink(): string { - let link = ""; - switch(this.result.type){ + switch (this.result.type) { case RequestType.movie: return `/details/movie/${this.result.id}`; case RequestType.tvShow: @@ -105,12 +114,36 @@ export class DiscoverCardComponent implements OnInit { return ""; } + public request(event: any) { + event.preventDefault(); + this.loading = true; + switch (this.result.type) { + case RequestType.tvShow: + const dia = this.dialog.open(EpisodeRequestComponent, { width: "700px", data: { series: this.tvSearchResult }, panelClass: 'modal-panel' }); + dia.afterClosed().subscribe(x => this.loading = false); + return; + case RequestType.movie: + this.requestService.requestMovie({ theMovieDbId: +this.result.id, languageCode: null, requestOnBehalf: null }).subscribe(x => { + if (x.result) { + this.result.requested = true; + this.messageService.send(x.message, "Ok"); + } else { + this.messageService.send(x.errorMessage, "Ok"); + } + this.loading = false; + }); + return; + } + } + private getExtraMovieInfo() { if (!this.result.imdbid) { this.searchService.getFullMovieDetails(+this.result.id) .subscribe(m => { this.updateMovieItem(m); }); + } else { + this.fullyLoaded = true; } } @@ -122,6 +155,8 @@ export class DiscoverCardComponent implements OnInit { this.result.rating = updated.voteAverage; this.result.overview = updated.overview; this.result.imdbid = updated.imdbId; + + this.fullyLoaded = true; } @@ -142,6 +177,8 @@ export class DiscoverCardComponent implements OnInit { this.result.url = updated.imdbId; this.result.overview = updated.overview; this.result.approved = updated.approved; + + this.fullyLoaded = true; } } 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 f51f73ede..22be3d83a 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 @@ -40,13 +40,17 @@
--> -

Upcoming Movies

-
- +
+

Popular

+
+ +
-

Trending Movies

-
- +
+

Trending

+
+ +
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss index 9c11beab7..76e1ce26c 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss @@ -1,213 +1,3 @@ -.full-height { - height: 100%; -} - -.small-middle-container { - margin: auto; - width: 85%; - padding-left:2%; -} - -.small-padding { - padding-left: 20px; - padding-right: 20px; - margin-bottom: 28px; -} - -.loading-spinner { - margin: 10%; -} - -#scroller { - height: 100vh; - overflow: scroll; -} - -.small-space { - padding-top: 1%; -} - -.discover-layout { - position: absolute; - float: right; - margin-right: 36px; - z-index: 1; -} - -::ng-deep .mat-card-image { - height: 75%; - border-radius: 10px; - width: 100%; - object-fit: cover; - display: block; -} - -.card-spacing { - height: 100%; -} - -.mat-card-content h6 { - overflow: hidden; - white-space: nowrap; - font-weight: 500; - font-size: 1.1rem; -} - -@media (min-width: 300px) { - - .small-middle-container { - margin: inherit; - } - - .col-xl-2 { - flex: 0 0 100%; - max-width: 100%; - min-width: 100%; - } - - .btn-group { - width: 100%; - } - - mat-button-base { - width: 100%; - } - - .col { - padding-right: 10px !important; - padding-left: 10px !important; - } - - .row { - margin-left: 0px; - } - - .small-padding { - padding-left: 5px !important; - padding-right: 0px !important; - height: 40em; - } - - ::ng-deep .mat-card-image { - height: 85% !important; - } -} - -@media (min-width: 600px) { - .justify-content-md-center { - justify-content: center !important; - } - - .small-middle-container { - width: auto; - } - - .btn-group { - width: auto; - } - - mat-button-base { - width: auto; - } - - ::ng-deep .mat-card-image { - height: 75% !important; - } -} - -@media (min-width: 660px) { - .col-xl-2 { - flex: 0 0 50%; - max-width: 50%; - min-width: 50%; - } - - .col { - padding-right: 15px !important; - padding-left: 15px !important; - } - - .small-padding { - padding-left: 20px !important; - padding-right: 20px !important; - height: auto; - } - - .row { - margin-left: 0px; - } - - .small-middle-container { - width: auto; - overflow: hidden; - } - - .btn-group { - width: auto; - } - - mat-button-base { - width: auto; - } -} - -@media (min-width: 870px) { - .col-xl-2 { - flex: 0 0 33.33333%; - max-width: 33.33333%; - min-width: 33.33333%; - } -} - -@media (min-width: 1100px) { - .col-xl-2 { - flex: 0 0 20%; - max-width: 25%; - min-width: 25%; - } -} - -@media (min-width: 1300px) { - .col-xl-2 { - flex: 0 0 18%; - max-width: 20%; - min-width: 20%; - } -} - -@media (min-width: 1600px) { - .col-xl-2 { - flex: 0 0 16.66666667%; - max-width: 16.66666667%; - min-width: 16.66666667%; - } -} - -@media (min-width: 1900px) { - .col-xl-2 { - flex: 0 0 14.285713%; - max-width: 14.285713%; - min-width: 14.285713%; - } -} - -@media (min-width: 2200px) { - .col-xl-2 { - flex: 0 0 12.5%; - max-width: 12.5%; - min-width: 12.5%; - } -} - -@media (min-width: 2500px) { - .col-xl-2 { - flex: 0 0 11.111111%; - max-width: 11.111111%; - min-width: 11.111111%; - } -} -@media (max-width: 420px) { - .discover-layout{ - display: none; - } -} +.section { + margin: 20px; +} \ No newline at end of file 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 6939c51ee..519126715 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 @@ -5,6 +5,7 @@ import { IDiscoverCardResult, DiscoverOption, DisplayOption } from "../../interf import { trigger, transition, style, animate } from "@angular/animations"; import { StorageService } from "../../../shared/storage/storage-service"; import { DOCUMENT } from "@angular/common"; +import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2"; @Component({ templateUrl: "./discover.component.html", @@ -58,7 +59,7 @@ export class DiscoverComponent implements OnInit { public async ngOnInit() { this.loading() - this.upcomingMovies = this.mapMovieModel(await this.searchService.upcomingMoviesByPage(0, 14)); + this.upcomingMovies = this.mapTvModel(await this.searchService.popularTvByPage(0, 14)); this.trendingMovies = this.mapMovieModel(await this.searchService.popularMoviesByPage(0, 14)); this.finishLoading(); // const localDiscoverOptions = +this.storageService.get(this.mediaTypeStorageKey); @@ -286,9 +287,9 @@ this.finishLoading(); return tempResults; } - private mapTvModel(): IDiscoverCardResult[] { + private mapTvModel(tv: ISearchTvResult[]): IDiscoverCardResult[] { const tempResults = []; - this.tvShows.forEach(m => { + tv.forEach(m => { tempResults.push({ available: m.available, posterPath: "../../../images/default_tv_poster.png", diff --git a/src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.html b/src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.html index d37f21d0a..908fc941b 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.html @@ -1,23 +1,5 @@ - + -
-
- {{result.title}} -
{{RequestType[result.type] | humanize}}
-
-
{{result.title}}
-
{{result.overview | truncate: 80}}
-
-
- -
-
- -
-
-
-
-
+ \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.ts b/src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.ts index a58ca6aa6..f8a9ef03b 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.ts @@ -10,76 +10,37 @@ import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2"; templateUrl: "./movie-list.component.html", styleUrls: ["./movie-list.component.scss"], }) -export class MovieListComponent implements OnInit { +export class MovieListComponent { public RequestType = RequestType; - @Input() public result: IDiscoverCardResult; - - constructor(private searchService: SearchV2Service) { } - - 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"; + @Input() public result: IDiscoverCardResult[]; + + public responsiveOptions: any; + + constructor() { + this.responsiveOptions = [ + { + breakpoint: '2559px', + numVisible: 7, + numScroll: 7 + }, + { + breakpoint: '1024px', + numVisible: 4, + numScroll: 4 + }, + { + breakpoint: '768px', + numVisible: 2, + numScroll: 2 + }, + { + breakpoint: '560px', + numVisible: 1, + numScroll: 1 + } + ]; } - 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/discover.module.ts b/src/Ombi/ClientApp/src/app/discover/discover.module.ts index 19882a5e6..931a0861b 100644 --- a/src/Ombi/ClientApp/src/app/discover/discover.module.ts +++ b/src/Ombi/ClientApp/src/app/discover/discover.module.ts @@ -5,7 +5,8 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle'; import { SharedModule } from "../shared/shared.module"; import { PipeModule } from "../pipes/pipe.module"; -import {CarouselModule} from 'primeng/carousel'; +import { CarouselModule } from 'primeng/carousel'; +import { SkeletonModule } from 'primeng/skeleton'; import * as fromComponents from './components'; @@ -18,6 +19,7 @@ import * as fromComponents from './components'; CarouselModule, MatButtonToggleModule, InfiniteScrollModule, + SkeletonModule, ], declarations: [ ...fromComponents.components diff --git a/src/Ombi/ClientApp/yarn.lock b/src/Ombi/ClientApp/yarn.lock index 8c55c594b..8ab0789e1 100644 --- a/src/Ombi/ClientApp/yarn.lock +++ b/src/Ombi/ClientApp/yarn.lock @@ -7005,10 +7005,10 @@ primeicons@^4.0.0: resolved "https://registry.yarnpkg.com/primeicons/-/primeicons-4.0.0.tgz#a3594b3af213dcf8c4c3d6fc99eea05b7c92f57c" integrity sha512-JQBIswGSItn8I0Pq21RchENpKJxSi1MjfBDfggMQpXtoKNKblJoHmol/7tCV3CAV2Dlb94ht8TD8qdIAW01pGg== -primeng@^10.0.3: - version "10.0.3" - resolved "https://registry.yarnpkg.com/primeng/-/primeng-10.0.3.tgz#e9d0ea425b9c5023bc9eef2cb014941939d0c35e" - integrity sha512-Nsiwpmy3RlFPBlxabdzeAYxFn4fXEyZjj7iAi1X5J4RRGD7NoB67+NbnOInE1rXTnNVHYxCca91OvaNiHSWWrg== +primeng@^11.0.0: + version "11.1.0" + resolved "https://registry.yarnpkg.com/primeng/-/primeng-11.1.0.tgz#3957e6bac5bf4cc5e4eb4dc2761a35668e08a780" + integrity sha512-5eQvLbUJeyaa5EwIEQobRhyl92EhNo4jxvh4YGh984t0B8SyuGmWH5TjoM5GmiZeYOBlt8htvHFJ3rz3xKXQFA== dependencies: tslib "^2.0.0" @@ -8767,9 +8767,9 @@ tslib@^1.8.0, tslib@^1.8.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286" tslib@^2.0.0: - version "2.0.3" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c" - integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ== + version "2.1.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a" + integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A== tslint-angular@^1.1.2: version "1.1.2"