Feature/search by genres

src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html

@@ -1,5 +1,8 @@
 <div class="small-middle-container">
-
+    <div class="section">
+        <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>
         <div>

src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.html

@@ -0,0 +1,21 @@
+<div class="type-select-container">
+    <input type="radio" id="Movies" name="Movies" [checked]="this.selectedType == 'movie'"
+        (change)="onTypeChange('movie')">
+    <label for="Movies">Movies</label>
+    <input type="radio" id="TvShows" name="TvShows" [checked]="this.selectedType == 'tv'" (change)="onTypeChange('tv')">
+    <label for="TvShows">Tv Shows</label>
+</div>
+<div class="genre-container" *ngIf="movieGenreList$ | async as movies"
+    [ngClass]="{'hidden' : this.selectedType != 'movie' }">
+    <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" [ngClass]="{'hidden' : this.selectedType != '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>
+    <mat-spinner *ngIf="isLoading" [diameter]="30"></mat-spinner>
+</div>

src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.scss

@@ -0,0 +1,57 @@
+
+h2{
+    margin-top:40px;
+    margin-left:40px;
+    font-size: 24px;
+}
+
+.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;
+  }
+}
+.button-active{
+    background:#293a4c;
+  }
+
+.genre-container {
+    margin-left: 35px;
+}
+
+.type-select-container {
+  margin-left: 40px;
+  margin-bottom: 10px;
+  display: inline-block;
+}
+
+.type-select-container label {
+  margin-right: 10px;
+}
+
+.type-select-container input {
+  margin-right: 2px;
+}
+
+
+
+.hidden {
+  display: none;
+}

src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.ts

@@ -0,0 +1,60 @@
+import { Component, Injectable, OnInit } from "@angular/core";
+import { SearchV2Service } from "../../../services";
+import { MatButtonToggleChange } from "@angular/material/button-toggle";
+import { RequestType } from "../../../interfaces";
+import { AdvancedSearchDialogDataService } from "app/shared/advanced-search-dialog/advanced-search-dialog-data.service";
+import { Router } from "@angular/router";
+import { Observable, map } from "rxjs";
+
+interface IGenreSelect {
+    name: string;
+    id: number;
+    type: "movie"|"tv";
+}
+
+@Injectable({
+    providedIn: "root"
+})
+@Component({
+    selector: "genre-button-select",
+    templateUrl: "./genre-button-select.component.html",
+    styleUrls: ["./genre-button-select.component.scss"],
+})
+export class GenreButtonSelectComponent implements OnInit {
+    public movieGenreList$: Observable<IGenreSelect[]> = null;
+    public tvGenreList$: Observable<IGenreSelect[]> = null;
+
+    isLoading: boolean = false;
+    selectedType: string = "movie";
+
+    constructor(private searchService: SearchV2Service, 
+        private advancedSearchService: AdvancedSearchDialogDataService,
+        private router: Router) { }
+
+    public ngOnInit(): void {
+        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, type: "movie"|"tv") {
+        this.isLoading = true;
+
+        const genres: number[] = [event.value];
+        const data = await this.searchService.advancedSearch({
+            watchProviders: [],
+            genreIds: genres,
+            keywordIds: [],
+            type: type,
+        }, 0, 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`]);
+    }
+
+    public onTypeChange(value) {
+        this.selectedType = value;
+    }
+
+
+}

src/Ombi/ClientApp/src/app/discover/components/index.ts

@@ -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[] = [

src/Ombi/ClientApp/src/app/discover/components/search-results/search-results.component.html

@@ -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>

src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss

@@ -63,6 +63,7 @@ $ombi-accent: #258a6d;
 
 ::ng-deep .discoverResults{
     margin-top:40px;
+    margin-left: 35px;
 }
 
 ::ng-deep button:focus{