From 0345fa3a6d6b4197bd79a49df4953a23ade82701 Mon Sep 17 00:00:00 2001 From: tidusjar Date: Thu, 14 Jan 2021 22:49:24 +0000 Subject: [PATCH] Super top secret stuff... Stop looking, I will find out --- .../card/discover-card.component.html | 7 +- .../card/discover-card.component.scss | 2 +- .../card/discover-card.component.ts | 5 +- .../carousel-list.component.html | 20 ++ .../carousel-list.component.scss} | 32 +-- .../carousel-list/carousel-list.component.ts | 218 ++++++++++++++++++ .../discover/discover.component.html | 21 +- .../discover/discover.component.scss | 6 +- .../components/discover/discover.component.ts | 6 +- .../src/app/discover/components/index.ts | 4 +- .../movie-list/movie-list.component.html | 5 - .../movie-list/movie-list.component.ts | 46 ---- .../ClientApp/src/styles/new-mat-palette.scss | 98 ++++++++ 13 files changed, 389 insertions(+), 81 deletions(-) create mode 100644 src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html rename src/Ombi/ClientApp/src/app/discover/components/{movie-list/movie-list.component.scss => carousel-list/carousel-list.component.scss} (73%) create mode 100644 src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts delete mode 100644 src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.html delete mode 100644 src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.ts create mode 100644 src/Ombi/ClientApp/src/styles/new-mat-palette.scss 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 cb4fcb23b..bd1a9cf90 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 @@ -17,11 +17,10 @@ --> - +
-
- + {{result.title}}
{{RequestType[result.type] | humanize}}
@@ -37,5 +36,5 @@
- + \ 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 18da6486b..92b940a08 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 @@ -3,7 +3,7 @@ $card-background: #2b2b2b; #cardImage { border-radius: 5px; - height: 75%; + height: 315px; } .dark-card { 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 4dd357a89..2b073d874 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 @@ -49,7 +49,7 @@ export class DiscoverCardComponent implements OnInit { } else { this.tvSearchResult = await this.searchService.getTvInfo(+this.result.id); } - if (this.tvSearchResult.status === "404") { + if (this.tvSearchResult?.status.length > 0 && this.tvSearchResult?.status === "404") { this.hide = true; return; } @@ -161,6 +161,9 @@ export class DiscoverCardComponent implements OnInit { private setTvDefaults(x: ISearchTvResultV2) { + if(!x) { + this.hide = true; + } if (x.imdbId) { x.imdbId = "http://www.imdb.com/title/" + x.imdbId + "/"; } else { diff --git a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html new file mode 100644 index 000000000..0f2284b87 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html @@ -0,0 +1,20 @@ +
+ + {{'Discovery.Combined' | translate}} + {{'Discovery.Movies' | translate}} + {{'Discovery.Tv' | translate}} + +
+ + + + + + +
+ + + + + +
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.scss b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss similarity index 73% rename from src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.scss rename to src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss index b45393718..4fa0b756b 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss @@ -4,8 +4,8 @@ padding: 5px; } ::ng-deep .p-carousel-indicators { - display: none !important; - } + display: none !important; + } .image { @@ -44,15 +44,19 @@ } .small-text { - font-size: 11px; - } - .title { - font-size: 16px; - } - .top-left { - font-size: 14px; - position: absolute; - top: 8px; - left: 16px; - - } \ No newline at end of file + font-size: 11px; +} +.title { + font-size: 16px; +} +.top-left { + font-size: 14px; + position: absolute; + top: 8px; + left: 16px; +} + + +.right { + text-align: right; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts new file mode 100644 index 000000000..ee12dbfc5 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts @@ -0,0 +1,218 @@ +import { Component, OnInit, Input } from "@angular/core"; +import { DiscoverOption, IDiscoverCardResult } from "../../interfaces"; +import { ISearchMovieResult, ISearchTvResult, RequestType } from "../../../interfaces"; +import { SearchV2Service } from "../../../services"; +import { StorageService } from "../../../shared/storage/storage-service"; + +export enum DiscoverType { + Upcoming, + Trending, + Popular, +} + +@Component({ + selector: "carousel-list", + templateUrl: "./carousel-list.component.html", + styleUrls: ["./carousel-list.component.scss"], +}) +export class CarouselListComponent implements OnInit { + + @Input() public discoverType: DiscoverType; + + public DiscoverOption = DiscoverOption; + public discoverOptions: DiscoverOption = DiscoverOption.Combined; + public discoverResults: IDiscoverCardResult[] = []; + public movies: ISearchMovieResult[] = []; + public tvShows: ISearchTvResult[] = []; + public responsiveOptions: any; + public RequestType = RequestType; + public loadingFlag: boolean; + + get mediaTypeStorageKey() { + return "DiscoverOptions" + this.discoverType.toString(); + }; + private amountToLoad = 14; + + constructor(private searchService: SearchV2Service, + private storageService: StorageService) { + 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 + } + ]; + } + + public async ngOnInit() { + const localDiscoverOptions = +this.storageService.get(this.mediaTypeStorageKey); + if (localDiscoverOptions) { + this.discoverOptions = DiscoverOption[DiscoverOption[localDiscoverOptions]]; + } + + var moviePromise: Promise; + var tvPromise: Promise; + switch (this.discoverOptions) { + case DiscoverOption.Combined: + moviePromise = this.loadMovies(); + tvPromise = this.loadTv(); + break; + case DiscoverOption.Movie: + moviePromise = this.loadMovies(); + break; + case DiscoverOption.Tv: + tvPromise = this.loadTv(); + break; + } + + await moviePromise; + await tvPromise; + + this.createInitialModel(); + } + + public async switchDiscoverMode(newMode: DiscoverOption) { + this.loading(); + this.clear(); + this.discoverOptions = newMode; + this.storageService.save(this.mediaTypeStorageKey, newMode.toString()); + await this.ngOnInit(); + this.finishLoading(); + } + + private async loadMovies() { + switch (this.discoverType) { + case DiscoverType.Popular: + this.movies = await this.searchService.popularMoviesByPage(0, this.amountToLoad); + break; + case DiscoverType.Trending: + this.movies = await this.searchService.nowPlayingMoviesByPage(0, this.amountToLoad); + break; + case DiscoverType.Upcoming: + this.movies = await this.searchService.upcomingMoviesByPage(0, this.amountToLoad); + break + } + } + + private async loadTv() { + switch (this.discoverType) { + case DiscoverType.Popular: + this.tvShows = await this.searchService.popularTvByPage(0, this.amountToLoad); + break; + case DiscoverType.Trending: + this.tvShows = await this.searchService.trendingTvByPage(0, this.amountToLoad); + break; + case DiscoverType.Upcoming: + this.tvShows = await this.searchService.anticipatedTvByPage(0, this.amountToLoad); + break + } + } + + private createInitialModel() { + this.clear(); + this.createModel(); + } + + private createModel() { + const tempResults = []; + + switch (this.discoverOptions) { + case DiscoverOption.Combined: + tempResults.push(...this.mapMovieModel()); + tempResults.push(...this.mapTvModel()); + this.shuffle(tempResults); + break; + case DiscoverOption.Movie: + tempResults.push(...this.mapMovieModel()); + break; + case DiscoverOption.Tv: + tempResults.push(...this.mapTvModel()); + break; + } + + this.discoverResults.push(...tempResults); + + this.finishLoading(); + } + + private mapMovieModel(): IDiscoverCardResult[] { + const tempResults = []; + this.movies.forEach(m => { + tempResults.push({ + available: m.available, + posterPath: m.posterPath ? `https://image.tmdb.org/t/p/w500/${m.posterPath}` : "../../../images/default_movie_poster.png", + requested: m.requested, + title: m.title, + type: RequestType.movie, + id: m.id, + url: `http://www.imdb.com/title/${m.imdbId}/`, + rating: m.voteAverage, + overview: m.overview, + approved: m.approved, + imdbid: m.imdbId, + denied: false, + background: m.backdropPath + }); + }); + return tempResults; + } + + private mapTvModel(): IDiscoverCardResult[] { + const tempResults = []; + this.tvShows.forEach(m => { + tempResults.push({ + available: m.available, + posterPath: "../../../images/default_tv_poster.png", + requested: m.requested, + title: m.title, + type: RequestType.tvShow, + id: m.id, + url: undefined, + rating: +m.rating, + overview: m.overview, + approved: m.approved || m.partlyAvailable, + imdbid: m.imdbId, + denied: false, + background: m.background + }); + }); + return tempResults; + } + + private clear() { + this.discoverResults = []; + } + + private shuffle(discover: IDiscoverCardResult[]): IDiscoverCardResult[] { + for (let i = discover.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [discover[i], discover[j]] = [discover[j], discover[i]]; + } + return discover; + } + + private loading() { + this.loadingFlag = true; + } + + private finishLoading() { + this.loadingFlag = false; + } + + +} 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 22be3d83a..8617e340c 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 @@ -39,18 +39,29 @@ --> - +

Popular

-
- +
+
+

Trending

-
- +
+
+ +
+ +
+

Upcoming

+
+ +
+
\ 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 76e1ce26c..c1add14c9 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,3 +1,7 @@ .section { margin: 20px; -} \ No newline at end of file +} +::ng-deep .p-carousel-indicators { + display: none !important; + } + \ 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 519126715..7b4fc291b 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 @@ -6,6 +6,7 @@ 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"; +import { DiscoverType } from "../carousel-list/carousel-list.component"; @Component({ templateUrl: "./discover.component.html", @@ -30,6 +31,7 @@ export class DiscoverComponent implements OnInit { public tvShows: ISearchTvResult[] = []; public discoverOptions: DiscoverOption = DiscoverOption.Combined; + public DiscoverType = DiscoverType; public DiscoverOption = DiscoverOption; public displayOption: DisplayOption = DisplayOption.Card; public DisplayOption = DisplayOption; @@ -59,8 +61,8 @@ export class DiscoverComponent implements OnInit { public async ngOnInit() { this.loading() - this.upcomingMovies = this.mapTvModel(await this.searchService.popularTvByPage(0, 14)); - this.trendingMovies = this.mapMovieModel(await this.searchService.popularMoviesByPage(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); // if (localDiscoverOptions) { diff --git a/src/Ombi/ClientApp/src/app/discover/components/index.ts b/src/Ombi/ClientApp/src/app/discover/components/index.ts index b26ed5b19..c0f3a7141 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/index.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/index.ts @@ -8,8 +8,8 @@ import { AuthGuard } from "../../auth/auth.guard"; import { SearchService, RequestService } from "../../services"; import { MatDialog } from "@angular/material/dialog"; import { DiscoverGridComponent } from "./grid/discover-grid.component"; -import { MovieListComponent } from "./movie-list/movie-list.component"; import { DiscoverSearchResultsComponent } from "./search-results/search-results.component"; +import { CarouselListComponent } from "./carousel-list/carousel-list.component"; export const components: any[] = [ @@ -20,7 +20,7 @@ export const components: any[] = [ DiscoverActorComponent, DiscoverGridComponent, DiscoverSearchResultsComponent, - MovieListComponent, + CarouselListComponent, ]; 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 deleted file mode 100644 index 908fc941b..000000000 --- a/src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.html +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ 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 deleted file mode 100644 index f8a9ef03b..000000000 --- a/src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { Component, OnInit, Input } from "@angular/core"; -import { IDiscoverCardResult } from "../../interfaces"; -import { RequestType} from "../../../interfaces"; -import { SearchV2Service } from "../../../services"; -import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2"; -import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2"; - -@Component({ - selector: "movie-list", - templateUrl: "./movie-list.component.html", - styleUrls: ["./movie-list.component.scss"], -}) -export class MovieListComponent { - - public RequestType = RequestType; - @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 - } - ]; - } - - -} diff --git a/src/Ombi/ClientApp/src/styles/new-mat-palette.scss b/src/Ombi/ClientApp/src/styles/new-mat-palette.scss new file mode 100644 index 000000000..9d9872775 --- /dev/null +++ b/src/Ombi/ClientApp/src/styles/new-mat-palette.scss @@ -0,0 +1,98 @@ +$ombi-accent: ( + 50: #ecfafe, + 100: #d0f2fe, + 200: #b1e9fd, + 300: #91e0fc, + 400: #7ad9fb, + 500: #62d2fa, + 600: #5acdf9, + 700: #50c7f9, + 800: #46c1f8, + 900: #34b6f6, + A100: #ffffff, + A200: #ffffff, + A400: #d6f1ff, + A700: #bde8ff, + contrast: ( + 50 : #000000, + 100 : #000000, + 200 : #000000, + 300 : #000000, + 400 : #ffffff, + 500 : #ffffff, + 600 : #ffffff, + 700 : #ffffff, + 800 : #ffffff, + 900 : #ffffff, + A100 : #000000, + A200 : #000000, + A400 : #000000, + A700 : #000000, + ) +); + +$ombi-primary: ( + 50 : #e4e5e6, + 100 : #bbbdc1, + 200 : #8d9297, + 300 : #5f666d, + 400 : #3d454e, + 500 : #1b242f, + 600 : #18202a, + 700 : #141b23, + 800 : #10161d, + 900 : #080d12, + A100 : #55aaff, + A200 : #2290ff, + A400 : #0077ee, + A700 : #006ad4, + contrast: ( + 50 : #000000, + 100 : #000000, + 200 : #000000, + 300 : #ffffff, + 400 : #ffffff, + 500 : #ffffff, + 600 : #ffffff, + 700 : #ffffff, + 800 : #ffffff, + 900 : #ffffff, + A100 : #000000, + A200 : #ffffff, + A400 : #ffffff, + A700 : #ffffff, + ) +); + +$ombi-background: ( + 50 : #e2e3e4, + 100 : #b7b9bb, + 200 : #878b8e, + 300 : #575d61, + 400 : #333a3f, + 500 : #0f171d, + 600 : #0d141a, + 700 : #0b1115, + 800 : #080d11, + 900 : #04070a, + A100 : #4fc4ff, + A200 : #1cb3ff, + A400 : #009be8, + A700 : #008ace, + contrast: ( + 50 : #000000, + 100 : #000000, + 200 : #000000, + 300 : #ffffff, + 400 : #ffffff, + 500 : #ffffff, + 600 : #ffffff, + 700 : #ffffff, + 800 : #ffffff, + 900 : #ffffff, + A100 : #000000, + A200 : #000000, + A400 : #ffffff, + A700 : #ffffff, + ) +); \ No newline at end of file