fix(discover): 🚸 Improved the new Genre buttons, it now includes TV results

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

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

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

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

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

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

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

@@ -1,36 +1,37 @@
 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];
@@ -38,13 +39,11 @@ export class GenreButtonSelectComponent implements OnInit {
             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`]);
     }
-
-    
 }

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/discover/components/search-results/search-results.component.scss

@@ -16,4 +16,4 @@
 
 .loading-spinner {
     margin: 10%;
-}
+}

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{

src/Ombi/wwwroot/translations/en.json

@@ -404,6 +404,7 @@
         "Movies": "Movies",
         "Combined": "Combined",
         "Tv": "TV",
+        "Genres": "Genres",
         "CardDetails": {
             "Availability": "Availability",
             "Studio": "Studio",