From 40d2fc46b3995dde9b4e43605624bb6870a636ad Mon Sep 17 00:00:00 2001 From: Hadrien Date: Sat, 6 Aug 2022 17:38:59 +0200 Subject: [PATCH 1/2] add crew on movie page --- src/.idea/.idea.Ombi/.idea/contentModel.xml | 6 ++ .../actor/discover-actor.component.ts | 25 +++++- .../src/app/media-details/components/index.ts | 2 + .../movie/movie-details.component.html | 8 +- .../crew-carousel.component.html | 32 +++++++ .../crew-carousel.component.scss | 83 +++++++++++++++++++ .../crew-carousel/crew-carousel.component.ts | 32 +++++++ .../media-details.component.scss | 5 ++ src/Ombi/wwwroot/translations/en.json | 3 + src/Ombi/wwwroot/translations/fr.json | 3 + 10 files changed, 194 insertions(+), 5 deletions(-) create mode 100644 src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.html create mode 100644 src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss create mode 100644 src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.ts diff --git a/src/.idea/.idea.Ombi/.idea/contentModel.xml b/src/.idea/.idea.Ombi/.idea/contentModel.xml index 438274536..ffc2d3ce6 100644 --- a/src/.idea/.idea.Ombi/.idea/contentModel.xml +++ b/src/.idea/.idea.Ombi/.idea/contentModel.xml @@ -268,6 +268,12 @@ + + + + + + diff --git a/src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts b/src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts index 5c333522c..da82d1297 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from "@angular/core"; import { ActivatedRoute } from "@angular/router"; import { SearchV2Service } from "../../../services"; -import { IActorCredits, IActorCast } from "../../../interfaces/ISearchTvResultV2"; +import { IActorCredits, IActorCast, IActorCrew } from "../../../interfaces/ISearchTvResultV2"; import { IDiscoverCardResult } from "../../interfaces"; import { RequestType } from "../../../interfaces"; import { AuthService } from "../../../auth/auth.service"; @@ -38,13 +38,13 @@ export class DiscoverActorComponent implements OnInit { this.searchService.getMoviesByActor(this.actorId), this.searchService.getTvByActor(this.actorId) ]).subscribe(([movie, tv]) => { - this.pushDiscoverResults(movie.cast, RequestType.movie); - this.pushDiscoverResults(tv.cast, RequestType.tvShow); + this.pushDiscoverResults(movie.crew, movie.cast, RequestType.movie); + this.pushDiscoverResults(tv.crew, tv.cast, RequestType.tvShow); this.finishLoading(); }); } - pushDiscoverResults(cast: IActorCast[], type: RequestType) { + pushDiscoverResults(crew: IActorCrew[], cast: IActorCast[], type: RequestType) { cast.forEach(m => { this.discoverResults.push({ available: false, @@ -62,6 +62,23 @@ export class DiscoverActorComponent implements OnInit { background: "" }); }); + crew.forEach(m => { + this.discoverResults.push({ + available: false, + posterPath: m.poster_path ? `https://image.tmdb.org/t/p/w300/${m.poster_path}` : "../../../images/default_movie_poster.png", + requested: false, + title: m.title, + type: type, + id: m.id, + url: null, + rating: 0, + overview: m.overview, + approved: false, + imdbid: "", + denied: false, + background: "" + }); + }); } private loading() { diff --git a/src/Ombi/ClientApp/src/app/media-details/components/index.ts b/src/Ombi/ClientApp/src/app/media-details/components/index.ts index eadc8d635..8d3e24621 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/index.ts +++ b/src/Ombi/ClientApp/src/app/media-details/components/index.ts @@ -4,6 +4,7 @@ import { ArtistDetailsComponent } from "./artist/artist-details.component"; import { ArtistInformationPanel } from "./artist/panels/artist-information-panel/artist-information-panel.component"; import { ArtistReleasePanel } from "./artist/panels/artist-release-panel/artist-release-panel.component"; import { CastCarouselComponent } from "./shared/cast-carousel/cast-carousel.component"; +import { CrewCarouselComponent } from "./shared/crew-carousel/crew-carousel.component"; import { DenyDialogComponent } from "./shared/deny-dialog/deny-dialog.component"; import { IssuesPanelComponent } from "./shared/issues-panel/issues-panel.component"; import { MediaPosterComponent } from "./shared/media-poster/media-poster.component"; @@ -32,6 +33,7 @@ export const components: any[] = [ SocialIconsComponent, MediaPosterComponent, CastCarouselComponent, + CrewCarouselComponent, DenyDialogComponent, TvRequestsPanelComponent, MovieAdvancedOptionsComponent, diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html index 20f5d303b..c1aeb067d 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html +++ b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html @@ -197,13 +197,19 @@ - +
+
+
+ +
+
+ + + +
+ {{item.name}} + {{item.person}} +
+
+ {{item.job}} + {{item.position}} + {{item.title}} + {{item.overview}} +
+ + + + + + \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss new file mode 100644 index 000000000..390e77c7c --- /dev/null +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss @@ -0,0 +1,83 @@ +@import "~@angular/material/theming"; +@import "~styles/variables.scss"; + ::ng-deep body .ui-carousel .ui-carousel-content .ui-carousel-prev, +body .ui-carousel .ui-carousel-content .ui-carousel-next { + background-color: #ffffff; + border: solid 1px rgba(178, 193, 205, 0.64); + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + margin: 0.2em; + color: #333333; + -moz-transition: color 0.2s; + -o-transition: color 0.2s; + -webkit-transition: color 0.2s; + transition: color 0.2s; +} + +::ng-deep body .ui-carousel .ui-carousel-content .ui-carousel-prev:not(.ui-state-disabled):hover, +body .ui-carousel .ui-carousel-content .ui-carousel-next:not(.ui-state-disabled):hover { + background-color: #ffffff; + color: #000; + border-color: solid 1px rgba(178, 193, 205, 0.64); +} + +::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item>.ui-button { + border-color: transparent; + background-color: transparent; +} + +::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item .ui-carousel-dot-icon { + width: 20px; + height: 6px; + background-color: rgba(255, 255, 255, 0.44); + margin: 0 0.2em; +} + +::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item .ui-carousel-dot-icon::before { + content: " "; +} + +::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item.ui-state-highlight .ui-carousel-dot-icon { + background-color: #FFF; +} + +.carousel-item { + text-align: center; +} + +::ng-deep .ui-carousel-next { + background-color: #ffffff; + border: solid 1px rgba(178, 193, 205, 0.64); + border-radius: 50%; + margin: 0.2em; + color: #333333; + transition: color 0.2s; +} + +::ng-deep .ui-carousel-content button:focus { + outline: none; +} + +.bottom-space { + padding-bottom: 10px; +} + +@media (min-width: 979px) { + + .crew-profile-img { + border-radius: 100%; + width: 200px; + max-height: 200px; + object-fit: cover; + } +} +@media (max-width: 978px) { + + .crew-profile-img { + border-radius: 100%; + width: 100px; + max-height: 100px; + object-fit: cover; + } +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.ts b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.ts new file mode 100644 index 000000000..44513818a --- /dev/null +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.ts @@ -0,0 +1,32 @@ +import { Component, Input } from "@angular/core"; + +@Component({ + selector: "crew-carousel", + templateUrl: "./crew-carousel.component.html", + styleUrls: ["./crew-carousel.component.scss"] +}) +export class CrewCarouselComponent { + + constructor() { + this.responsiveOptions = [ + { + breakpoint: '1024px', + numVisible: 5, + numScroll: 5 + }, + { + breakpoint: '768px', + numVisible: 3, + numScroll: 3 + }, + { + breakpoint: '560px', + numVisible: 1, + numScroll: 1 + } + ]; + } + + @Input() crew: any[]; + public responsiveOptions: any[]; +} diff --git a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss index 119035062..bad70928b 100644 --- a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss +++ b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss @@ -181,6 +181,11 @@ } +.crew-profile-img { + border-radius: 100%; + width: 170px; +} + .small-middle-container { margin: auto; diff --git a/src/Ombi/wwwroot/translations/en.json b/src/Ombi/wwwroot/translations/en.json index de38effd3..a766bc2d9 100644 --- a/src/Ombi/wwwroot/translations/en.json +++ b/src/Ombi/wwwroot/translations/en.json @@ -364,6 +364,9 @@ "Casts": { "CastTitle": "Cast" }, + "Crews": { + "CrewTitle": "Crew" + }, "EpisodeSelector": { "AllSeasonsTooltip": "This will request every season for this show", "FirstSeasonTooltip": "This will only request the First Season for this show", diff --git a/src/Ombi/wwwroot/translations/fr.json b/src/Ombi/wwwroot/translations/fr.json index 24d1306ac..c72715101 100644 --- a/src/Ombi/wwwroot/translations/fr.json +++ b/src/Ombi/wwwroot/translations/fr.json @@ -364,6 +364,9 @@ "Casts": { "CastTitle": "Casting" }, + "Crews": { + "CrewTitle": "Equipe" + }, "EpisodeSelector": { "AllSeasonsTooltip": "Cette action demandera toutes les saisons de cette série", "FirstSeasonTooltip": "Cette action ne demandera que la Première Saison de cette série", From dbe6c78ea18d6d8cdb91db264f092bb18e451bb8 Mon Sep 17 00:00:00 2001 From: tidusjar Date: Mon, 22 Aug 2022 20:21:17 +0100 Subject: [PATCH 2/2] order by director, add default image and fix click --- .../components/movie/movie-details.component.ts | 16 +++++++++++++++- .../cast-carousel/cast-carousel.component.html | 2 +- .../crew-carousel/crew-carousel.component.html | 8 ++++---- .../crew-carousel/crew-carousel.component.scss | 4 ++++ 4 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts index 8d1e5976b..e40945ebb 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts +++ b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, ViewEncapsulation } from "@angular/core"; import { ImageService, SearchV2Service, RequestService, MessageService, RadarrService, SettingsStateService } from "../../../services"; import { ActivatedRoute, Router } from "@angular/router"; import { DomSanitizer } from "@angular/platform-browser"; -import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2"; +import { ICrewViewModel, ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2"; import { MatDialog } from "@angular/material/dialog"; import { YoutubeTrailerComponent } from "../shared/youtube-trailer.component"; import { AuthService } from "../../../auth/auth.service"; @@ -82,6 +82,7 @@ export class MovieDetailsComponent implements OnInit{ this.searchService.getMovieByImdbId(this.imdbId).subscribe(async x => { this.movie = x; this.checkPoster(); + this.movie.credits.crew = this.orderCrew(this.movie.credits.crew); if (this.movie.requestId > 0) { // Load up this request this.hasRequest = true; @@ -93,6 +94,7 @@ export class MovieDetailsComponent implements OnInit{ this.searchService.getFullMovieDetails(this.theMovidDbId).subscribe(async x => { this.movie = x; this.checkPoster(); + this.movie.credits.crew = this.orderCrew(this.movie.credits.crew); if (this.movie.requestId > 0) { // Load up this request this.hasRequest = true; @@ -319,4 +321,16 @@ export class MovieDetailsComponent implements OnInit{ }); } + + private orderCrew(crew: ICrewViewModel[]): ICrewViewModel[] { + return crew.sort((a, b) => { + if (a.job === "Director") { + return -1; + } else if (b.job === "Director") { + return 1; + } else { + return 0; + } + }); + } } diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html index e14323a0e..46dd07d40 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html @@ -11,7 +11,7 @@ - +
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.html index af42dc4d5..15ceedee8 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.html +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.html @@ -4,14 +4,14 @@
-
- +
+ - + - +
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss index 390e77c7c..3c0a2de5b 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss @@ -80,4 +80,8 @@ body .ui-carousel .ui-carousel-content .ui-carousel-next:not(.ui-state-disabled) max-height: 100px; object-fit: cover; } +} + +.link { + cursor: pointer; } \ No newline at end of file