Skip to content

Commit

Permalink
fix(discover): 🚸 Improved the new Genre buttons, it now includes TV r…
Browse files Browse the repository at this point in the history
…esults
  • Loading branch information
tidusjar committed Apr 24, 2023
1 parent faf6553 commit b087d60
Show file tree
Hide file tree
Showing 8 changed files with 36 additions and 26 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="small-middle-container">
<div class="section">
<h2>Jump to Genre</h2>
<genre-button-select></genre-button-select>
<h2 id="genreHeading" data-toggle="collapse" href="#genreCollapse" role="button">{{'Discovery.Genres' | translate}}</h2>
<genre-button-select class="collapse show" id="genreCollapse"></genre-button-select>
</div>
<div class="section">
<h2>{{'Discovery.RecentlyRequestedTab' | translate}}</h2>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<div class="genre-container">
<mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event)" *ngFor="let genre of genreList"
<div class="genre-container" *ngIf="movieGenreList$ | async as movies">
<mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event, genre.type)" *ngFor="let genre of movies"
class="discover-filter-buttons-group">
<mat-button-toggle value="{{genre.id}}" class="discover-filter-button">{{genre.name}}</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div class="genre-container" *ngIf="tvGenreList$ | async as tv">
<mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event, genre.type)" *ngFor="let genre of tv"
class="discover-filter-buttons-group">
<mat-button-toggle value="{{genre.id}}" class="discover-filter-button">{{genre.name}}</mat-button-toggle>
</mat-button-toggle-group>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,20 @@ h2{

.discover-filter-buttons-group {
border: 1px solid #293a4c;
border-radius: 30px;
border-radius: 15px;
color:#fff;
margin-bottom:10px;
margin-bottom:5px;
margin-right: 5px;

.discover-filter-button{

transform: scale(0.9);
background:inherit;
color:inherit;
padding:0 0px;
border-radius: 30px;
padding-left: 20px;
padding-right: 20px;
padding-left: 10px;
padding-right: 10px;
border-left:none;
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,50 +1,49 @@
import { Component, OnInit } from "@angular/core";
import { SearchV2Service } from "../../../services";
import { AuthService } from "../../../auth/auth.service";
import { IMovieDbKeyword } from "../../../interfaces";
import { MatButtonToggleChange } from "@angular/material/button-toggle";
import { CarouselListComponent } from "../carousel-list/carousel-list.component";
import { RequestType } from "../../../interfaces";
import { AdvancedSearchDialogDataService } from "app/shared/advanced-search-dialog/advanced-search-dialog-data.service";
import { Router } from "@angular/router";
import { map, Observable } from "rxjs";

interface IGenreSelect {
name: string;
id: number;
type: "movie"|"tv";
}
@Component({
selector: "genre-button-select",
templateUrl: "./genre-button-select.component.html",
styleUrls: ["./genre-button-select.component.scss"],
})
export class GenreButtonSelectComponent implements OnInit {
public genreList: IMovieDbKeyword[] = [];
public selectedGenre: IMovieDbKeyword;
public mediaType: string = "movie";
public movieGenreList$: Observable<IGenreSelect[]> = null;
public tvGenreList$: Observable<IGenreSelect[]> = null;

isLoading: boolean = false;

constructor(private searchService: SearchV2Service,
constructor(private searchService: SearchV2Service,
private advancedSearchService: AdvancedSearchDialogDataService,
private router: Router) { }

public ngOnInit(): void {
this.searchService.getGenres(this.mediaType).subscribe(results => {
this.genreList = results;
});
this.movieGenreList$ = this.searchService.getGenres("movie").pipe(map(x => x.slice(0, 10).map(y => ({ name: y.name, id: y.id, type: "movie" }))));
this.tvGenreList$ = this.searchService.getGenres("tv").pipe(map(x => x.slice(0, 10).map(y => ({ name: y.name, id: y.id, type: "tv" }))));
}

public async toggleChanged(event: MatButtonToggleChange) {
public async toggleChanged(event: MatButtonToggleChange, type: "movie"|"tv") {
this.isLoading = true;

const genres: number[] = [event.value];
const data = await this.searchService.advancedSearch({
watchProviders: [],
genreIds: genres,
keywordIds: [],
type: this.mediaType,
type: type,
}, 0, 30);

this.advancedSearchService.setData(data, RequestType.movie);
this.advancedSearchService.setOptions([], genres, [], null, RequestType.movie, 30);
this.advancedSearchService.setData(data, type == "movie" ? RequestType.movie : RequestType.tvShow);
this.advancedSearchService.setOptions([], genres, [], null, type == "movie" ? RequestType.movie : RequestType.tvShow, 30);
this.router.navigate([`discover/advanced/search`]);
}


}
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
[infiniteScrollDistance]="3"
[infiniteScrollThrottle]="200"
(scrolled)="onScroll()">
<div id="searchResults" class="col-xl-2 col-lg-3 col-md-3 col-6 col-sm-4 small-padding" *ngFor="let result of discoverResults" data-test="searchResultsCount" attr.search-count="{{discoverResults.length}}">
<div id="searchResults" class="col-xl-2 col-lg-3 col-md-3 col-6 col-sm-4 small-padding card-container" *ngFor="let result of discoverResults" data-test="searchResultsCount" attr.search-count="{{discoverResults.length}}">
<discover-card [isAdmin]="isAdmin" [result]="result" [is4kEnabled]="is4kEnabled"></discover-card>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@

.loading-spinner {
margin: 10%;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ $ombi-accent: #258a6d;

::ng-deep .discoverResults{
margin-top:40px;
margin-left: 35px;
}

::ng-deep button:focus{
Expand Down
1 change: 1 addition & 0 deletions src/Ombi/wwwroot/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -404,6 +404,7 @@
"Movies": "Movies",
"Combined": "Combined",
"Tv": "TV",
"Genres": "Genres",
"CardDetails": {
"Availability": "Availability",
"Studio": "Studio",
Expand Down

0 comments on commit b087d60

Please sign in to comment.