!wip so the search actually works for artists currently

src/Ombi/ClientApp/app/interfaces/ISearchMusicResult.ts

@@ -0,0 +1,21 @@
+export interface ISearchArtistResult {
+    artistName: string;
+    forignArtistId: string;
+
+    banner: string;
+    overview: string;
+    poster: string;
+    monitored: boolean;
+    approved: boolean;
+    requested: boolean;
+    requestId: number;
+    available: boolean;
+   
+    subscribed: boolean;
+    showSubscribe: boolean;
+
+    // for the UI
+    requestProcessing: boolean;
+    processed: boolean;
+    background: any;
+}

src/Ombi/ClientApp/app/interfaces/index.ts

@@ -15,3 +15,4 @@ export * from "./IUser";
 export * from "./IIssues";
 export * from "./IRecentlyAdded";
 export * from "./ILidarr";
+export * from "./ISearchMusicResult";

src/Ombi/ClientApp/app/search/music/musicsearch.component.html

@@ -3,18 +3,6 @@
     <div class="input-group">
         <input id="search" type="text" class="form-control form-control-custom form-control-search form-control-withbuttons" (keyup)="search($event)">
         <div class="input-group-addon right-radius">
-            <div class="btn-group">
-                <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-                    {{ 'Search.Suggestions' | translate }}
-                    <i class="fa fa-chevron-down"></i>
-                </a>
-                <ul class="dropdown-menu">
-                    <li><a (click)="popularMovies()" [translate]="'Search.Movies.PopularMovies'"></a></li>
-                    <li><a (click)="upcomingMovies()" [translate]="'Search.Movies.UpcomingMovies'"></a></li>
-                    <li><a (click)="topRatedMovies()" [translate]="'Search.Movies.TopRatedMovies'"></a></li>
-                    <li><a (click)="nowPlayingMovies()" [translate]="'Search.Movies.NowPlayingMovies'"></a></li>
-                </ul>
-            </div>
             <i class="fa fa-search"></i>
         </div>
     </div>
@@ -22,33 +10,32 @@
     <br />
     <!-- Movie content -->
     <div id="movieList">
-        <div *ngIf="searchApplied && movieResults?.length <= 0" class='no-search-results'>
+        <div *ngIf="searchApplied && artistResult?.length <= 0" class='no-search-results'>
-            <i class='fa fa-film no-search-results-icon'></i><div class='no-search-results-text' [translate]="'Search.NoResults'"></div>
+            <i class='fa fa-music no-search-results-icon'></i><div class='no-search-results-text' [translate]="'Search.NoResults'"></div>
         </div>
 
-        <div *ngFor="let result of movieResults">
+        <div *ngFor="let result of artistResult">
         
             <div class="row" >
                 
                     <div class="myBg backdrop" [style.background-image]="result.background"></div>
                     <div class="tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>
                 <div class="col-sm-2 small-padding">
-                    <img *ngIf="result.posterPath"  class="img-responsive poster" src="{{result.posterPath}}" alt="poster">
+                    <img *ngIf="result.poster"  class="img-responsive poster" src="{{result.poster}}" alt="poster">
 
                 </div>
                 <div class="col-sm-8 small-padding">
                     <div>
-                        <a href="https://www.themoviedb.org/movie/{{result.id}}/" target="_blank">
+                        <a href="" target="_blank">
-                            <h4>{{result.title}} ({{result.releaseDate | date: 'yyyy'}})</h4>
+                            <h4>{{result.artistName}}</h4>
                         </a>
                     <span class="tags">
-                        <span *ngIf="result.releaseDate" class="label label-info" id="releaseDateLabel" target="_blank">{{ 'Search.TheatricalRelease' | translate: {date: result.releaseDate | date: 'mediumDate'} }}</span>
+                        <!-- <span *ngIf="result.releaseDate" class="label label-info" id="releaseDateLabel" target="_blank">{{ 'Search.TheatricalRelease' | translate: {date: result.releaseDate | date: 'mediumDate'} }}</span>
                         <span *ngIf="result.digitalReleaseDate" class="label label-info" id="releaseDateLabel" target="_blank">{{ 'Search.DigitalDate' | translate: {date: result.digitalReleaseDate | date: 'mediumDate'} }}</span>
 
                         <a *ngIf="result.homepage" href="{{result.homepage}}" id="homePageLabel" target="_blank"><span class="label label-info" [translate]="'Search.Movies.HomePage'"></span></a>
 
-                        <a *ngIf="result.trailer" href="{{result.trailer}}" id="trailerLabel" target="_blank"><span class="label label-info" [translate]="'Search.Movies.Trailer'"></span></a>
+                        <a *ngIf="result.trailer" href="{{result.trailer}}" id="trailerLabel" target="_blank"><span class="label label-info" [translate]="'Search.Movies.Trailer'"></span></a> -->
-                        <span *ngIf="result.quality" id="qualityLabel" class="label label-success">{{result.quality}}p</span>
                         
                         <ng-template [ngIf]="result.available"><span class="label label-success" id="availableLabel" [translate]="'Common.Available'"></span></ng-template>
                         <ng-template [ngIf]="result.approved && !result.available"><span class="label label-info" id="processingRequestLabel" [translate]="'Common.ProcessingRequest'"></span></ng-template>
@@ -60,7 +47,7 @@
 
                         <br/>
                     </div>
-                    <p style="font-size: 0.9rem !important">{{result.overview}}</p>
+                    <p style="font-size: 0.9rem !important">{{result.overview | truncate: 350 }}</p>
                 </div>
 
 
@@ -68,8 +55,8 @@
                     <div class="row" *ngIf="result.requested">
                         <div class="col-md-2 col-md-push-10">
     
-                            <a *ngIf="result.showSubscribe && !result.subscribed" style="color:white" (click)="subscribe(result)" pTooltip="Subscribe for notifications"> <i class="fa fa-rss"></i></a>
+                            <!-- <a *ngIf="result.showSubscribe && !result.subscribed" style="color:white" (click)="subscribe(result)" pTooltip="Subscribe for notifications"> <i class="fa fa-rss"></i></a>
-                            <a *ngIf="result.showSubscribe && result.subscribed" style="color:red" (click)="unSubscribe(result)" pTooltip="Unsubscribe notification"> <i class="fa fa-rss"></i></a>
+                            <a *ngIf="result.showSubscribe && result.subscribed" style="color:red" (click)="unSubscribe(result)" pTooltip="Unsubscribe notification"> <i class="fa fa-rss"></i></a> -->
                         </div>
                     </div>
                     <div *ngIf="result.available">
@@ -81,25 +68,22 @@
                         <button style="text-align: right" class="btn btn-primary-outline disabled" [disabled]><i class="fa fa-check"></i> {{ 'Common.Requested' | translate }}</button>
                     </ng-template>
                     <ng-template #notRequestedBtn>
-                        <button id="{{result.id}}" style="text-align: right" class="btn btn-primary-outline" (click)="request(result)">
+                        <button style="text-align: right" class="btn btn-primary-outline" (click)="request(result)">
                             <i *ngIf="result.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i *ngIf="!result.requestProcessing && !result.processed" class="fa fa-plus"></i>
-                            <i *ngIf="result.processed && !result.requestProcessing" class="fa fa-check"></i>{{ 'Common.Request' | translate }}</button>
+                            <i *ngIf="result.processed && !result.requestProcessing" class="fa fa-check"></i> {{ 'Common.Request' | translate }}</button>
                     </ng-template>
                         </div>
-                        <button style="text-align: right" class="btn btn-sm btn-info-outline" (click)="similarMovies(result.id)"> <i class="fa fa-eye"></i> {{ 'Search.Similar' | translate }}</button>
+                        <!-- <button style="text-align: right" class="btn btn-sm btn-info-outline" (click)="similarMovies(result.id)"> <i class="fa fa-eye"></i> {{ 'Search.Similar' | translate }}</button> -->
                     
                     <br/>
-                    <div *ngIf="result.available">
+
-                        <a *ngIf="result.plexUrl" style="text-align: right" class="btn btn-sm btn-success-outline" href="{{result.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> View On Plex</a>
-                        <a *ngIf="result.embyUrl" style="text-align: right" id="embybtn" class="btn btn-sm btn-success-outline" href="{{result.embyUrl}}" target="_blank"><i class="fa fa-eye"></i> View On Emby</a>
-                    </div>
                     <div class="dropdown" *ngIf="result.available && issueCategories && issuesEnabled">
                         <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                             <i class="fa fa-plus"></i> Report Issue
                             <span class="caret"></span>
                         </button>
                         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-                            <li *ngFor="let cat of issueCategories"><a [routerLink]="" (click)="reportIssue(cat, result)">{{cat.value}}</a></li>
+                            <!-- <li *ngFor="let cat of issueCategories"><a [routerLink]="" (click)="reportIssue(cat, result)">{{cat.value}}</a></li> -->
                         </ul>
                     </div>
 

src/Ombi/ClientApp/app/search/music/musicsearch.component.ts

@@ -1,11 +1,13 @@
 import { PlatformLocation } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
 import { TranslateService } from "@ngx-translate/core";
 import { Subject } from "rxjs";
 import { debounceTime, distinctUntilChanged } from "rxjs/operators";
 
 import { AuthService } from "../../auth/auth.service";
 import { IIssueCategory, IRequestEngineResult, ISearchMovieResult } from "../../interfaces";
+import { ISearchArtistResult } from "../../interfaces/ISearchMusicResult";
 import { NotificationService, RequestService, SearchService } from "../../services";
 
 @Component({
@@ -16,10 +18,10 @@ export class MusicSearchComponent implements OnInit {
 
     public searchText: string;
     public searchChanged: Subject<string> = new Subject<string>();
-    public movieResults: ISearchMovieResult[];
+    public artistResult: ISearchArtistResult[];
     public result: IRequestEngineResult;
     public searchApplied = false;
-    public searchArtist: boolean;
+    public searchAlbum: boolean;
 
     @Input() public issueCategories: IIssueCategory[];
     @Input() public issuesEnabled: boolean;
@@ -34,7 +36,8 @@ export class MusicSearchComponent implements OnInit {
         private searchService: SearchService, private requestService: RequestService,
         private notificationService: NotificationService, private authService: AuthService,
         private readonly translate: TranslateService,
-        private readonly platformLocation: PlatformLocation) {
+        private readonly platformLocation: PlatformLocation,
+        private sanitizer: DomSanitizer) {
 
         this.searchChanged.pipe(
             debounceTime(600), // Wait Xms after the last event before emitting last event
@@ -45,20 +48,21 @@ export class MusicSearchComponent implements OnInit {
                 this.clearResults();
                 return;
             }
-            if(this.searchArtist) {
+            if(this.searchAlbum) {
-                this.searchService.searchArtist(this.searchText)
-                .subscribe(x => {
-                    this.movieResults = x;
-                    this.searchApplied = true;
-                });
-            } else {
                 this.searchService.searchAlbum(this.searchText)
                 .subscribe(x => {
-                    this.movieResults = x;
+                    this.artistResult = x;
                     this.searchApplied = true;
+                    this.setBackground();
+                });
+            } else {
+                this.searchService.searchArtist(this.searchText)
+                .subscribe(x => {
+                    this.artistResult = x;
+                    this.searchApplied = true;
+                    this.setBackground();
                 });
             }
-
         });
         this.defaultPoster = "../../../images/default_movie_poster.png";
         const base = this.platformLocation.getBaseHrefFromDOM();
@@ -69,7 +73,7 @@ export class MusicSearchComponent implements OnInit {
 
     public ngOnInit() {
         this.searchText = "";
-        this.movieResults = [];
+        this.artistResult = [];
         this.result = {
             message: "",
             result: false,
@@ -121,7 +125,17 @@ export class MusicSearchComponent implements OnInit {
     }
 
     private clearResults() {
-        this.movieResults = [];
+        this.artistResult = [];
         this.searchApplied = false;
     }
+
+    private setBackground() {
+        this.artistResult.forEach((val, index) => {
+            if (val.poster === null) {
+                val.poster = this.defaultPoster;
+            }
+            val.background = this.sanitizer.bypassSecurityTrustStyle
+                ("url(" + val.banner + ")");
+        });
+    }
 }

src/Ombi/ClientApp/app/services/search.service.ts

@@ -7,6 +7,7 @@ import { Observable } from "rxjs";
 import { TreeNode } from "primeng/primeng";
 import { ISearchMovieResult } from "../interfaces";
 import { ISearchTvResult } from "../interfaces";
+import { ISearchArtistResult } from "../interfaces/ISearchMusicResult";
 import { ServiceHelpers } from "./service.helpers";
 
 @Injectable()
@@ -69,8 +70,8 @@ export class SearchService extends ServiceHelpers {
         return this.http.get<ISearchTvResult[]>(`${this.url}/Tv/trending`, {headers: this.headers});
     }
     // Music
-    public searchArtist(searchTerm: string): Observable<any> {
+    public searchArtist(searchTerm: string): Observable<ISearchArtistResult[]> {
-        return this.http.get<any>(`${this.url}/Music/Artist/` + searchTerm);
+        return this.http.get<ISearchArtistResult[]>(`${this.url}/Music/Artist/` + searchTerm);
     }
     public searchAlbum(searchTerm: string): Observable<any> {
         return this.http.get<any>(`${this.url}/Music/Album/` + searchTerm);

src/Ombi/ClientApp/app/shared/shared.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { TranslateModule } from "@ngx-translate/core";
+import { TruncateModule } from "@yellowspot/ng-truncate";
 
 import { IssuesReportComponent } from "./issues-report.component";
 
@@ -15,6 +16,7 @@ import { SidebarModule } from "primeng/primeng";
     SidebarModule,
     FormsModule,
     CommonModule,
+    TruncateModule,
   ],
   exports: [
       TranslateModule,
@@ -22,6 +24,7 @@ import { SidebarModule } from "primeng/primeng";
       FormsModule,
       SidebarModule,
       IssuesReportComponent,
+      TruncateModule,
     ],
 })
 export class SharedModule {}

src/Ombi/package.json

@@ -35,6 +35,7 @@
     "@types/webpack": "^4.4.4",
     "@types/webpack-bundle-analyzer": "^2.9.2",
     "@types/webpack-merge": "^4.1.3",
+    "@yellowspot/ng-truncate": "^1.4.0",
     "angular-router-loader": "^0.8.5",
     "angular2-template-loader": "^0.6.2",
     "aspnet-webpack": "^3.0.0",

src/Ombi/webpack.config.vendor.ts

@@ -52,6 +52,7 @@ module.exports = (env: any) => {
                 "@ngx-translate/core",
                 "@ngx-translate/http-loader",
                 "ngx-order-pipe",
+                "@yellowspot/ng-truncate",
             ]),
         },
         plugins: prod ? [] : [

src/Ombi/yarn.lock

@@ -320,6 +320,10 @@
     text-table "^0.2.0"
     webpack-log "^1.1.2"
 
+"@yellowspot/ng-truncate@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@yellowspot/ng-truncate/-/ng-truncate-1.4.0.tgz#dcb40f5571ef71a9cf09f6a24e83e1f43b2d2a6c"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"