Search by genre

From discovery page can now view a list of buttons that represent each genre.  When user clicks on a genre button they will be taken to a page of movies within that genre.
pull/4912/head
Ryan Castles 1 year ago
parent a70e9403c7
commit 2c35b0221c

@ -1,5 +1,8 @@
<div class="small-middle-container">
<div class="section">
<h2>Jump to Genre</h2>
<genre-button-select></genre-button-select>
</div>
<div class="section">
<h2>{{'Discovery.RecentlyRequestedTab' | translate}}</h2>
<div>

@ -0,0 +1,7 @@
<div class="genre-container">
<mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event)" *ngFor="let genre of genreList"
class="discover-filter-buttons-group">
<mat-button-toggle value="{{genre.id}}" class="discover-filter-button">{{genre.name}}</mat-button-toggle>
</mat-button-toggle-group>
<mat-spinner *ngIf="isLoading" [diameter]="30"></mat-spinner>
</div>

@ -0,0 +1,32 @@
h2{
margin-top:40px;
margin-left:40px;
font-size: 24px;
}
.discover-filter-buttons-group {
border: 1px solid #293a4c;
border-radius: 30px;
color:#fff;
margin-bottom:10px;
.discover-filter-button{
background:inherit;
color:inherit;
padding:0 0px;
border-radius: 30px;
padding-left: 20px;
padding-right: 20px;
border-left:none;
}
}
.button-active{
background:#293a4c;
}
.genre-container {
margin-left: 35px;
}

@ -0,0 +1,50 @@
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";
@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";
isLoading: boolean = false;
constructor(private searchService: SearchV2Service,
private advancedSearchService: AdvancedSearchDialogDataService,
private router: Router) { }
public ngOnInit(): void {
this.searchService.getGenres(this.mediaType).subscribe(results => {
this.genreList = results;
});
}
public async toggleChanged(event: MatButtonToggleChange) {
this.isLoading = true;
const genres: number[] = [event.value];
const data = await this.searchService.advancedSearch({
watchProviders: [],
genreIds: genres,
keywordIds: [],
type: this.mediaType,
}, 0, 30);
this.advancedSearchService.setData(data, RequestType.movie);
this.advancedSearchService.setOptions([], genres, [], null, RequestType.movie, 30);
this.router.navigate([`discover/advanced/search`]);
}
}

@ -12,6 +12,7 @@ import { MatDialog } from "@angular/material/dialog";
import { RequestServiceV2 } from "../../services/requestV2.service";
import { Routes } from "@angular/router";
import { DetailedCardComponent } from "app/components";
import { GenreButtonSelectComponent } from "./genre/genre-button-select.component";
export const components: any[] = [
DiscoverComponent,
@ -22,6 +23,7 @@ export const components: any[] = [
CarouselListComponent,
RecentlyRequestedListComponent,
DetailedCardComponent,
GenreButtonSelectComponent
];
export const providers: any[] = [

Loading…
Cancel
Save