From 1d532613823804b25984bd1d223d081a54ad143d Mon Sep 17 00:00:00 2001 From: Hadrien <26697460+ketsapiwiq@users.noreply.github.com> Date: Mon, 22 Aug 2022 21:25:40 +0200 Subject: [PATCH] feat: add crew on movie page (#4722) * add crew on movie page * order by director, add default image and fix click Co-authored-by: tidusjar --- 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 +- .../movie/movie-details.component.ts | 16 +++- .../cast-carousel.component.html | 2 +- .../crew-carousel.component.html | 32 +++++++ .../crew-carousel.component.scss | 87 +++++++++++++++++++ .../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 + 12 files changed, 214 insertions(+), 7 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 @@ - +
+
+
+ +
+
+ +
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 new file mode 100644 index 000000000..15ceedee8 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.html @@ -0,0 +1,32 @@ + + {{'MediaDetails.Crews.CrewTitle' | translate}} + + + +
+
+ + + + + + + + +
+
+ {{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..3c0a2de5b --- /dev/null +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss @@ -0,0 +1,87 @@ +@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; + } +} + +.link { + cursor: pointer; +} \ 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 e63c524d0..f3e2813a9 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 8723bd9c6..be0003e3d 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",