!wip so the search actually works for artists currently

pull/2478/head
TidusJar 6 years ago
parent 9156673f88
commit cb2e29edaf

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

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

@ -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'>
<i class='fa fa-film no-search-results-icon'></i><div class='no-search-results-text' [translate]="'Search.NoResults'"></div>
<div *ngIf="searchApplied && artistResult?.length <= 0" class='no-search-results'>
<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">
<h4>{{result.title}} ({{result.releaseDate | date: 'yyyy'}})</h4>
<a href="" target="_blank">
<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>
<span *ngIf="result.quality" id="qualityLabel" class="label label-success">{{result.quality}}p</span>
<a *ngIf="result.trailer" href="{{result.trailer}}" id="trailerLabel" target="_blank"><span class="label label-info" [translate]="'Search.Movies.Trailer'"></span></a> -->
<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:red" (click)="unSubscribe(result)" pTooltip="Unsubscribe notification"> <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> -->
</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>

@ -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) {
this.searchService.searchArtist(this.searchText)
if(this.searchAlbum) {
this.searchService.searchAlbum(this.searchText)
.subscribe(x => {
this.movieResults = x;
this.artistResult = x;
this.searchApplied = true;
this.setBackground();
});
} else {
this.searchService.searchAlbum(this.searchText)
this.searchService.searchArtist(this.searchText)
.subscribe(x => {
this.movieResults = 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 + ")");
});
}
}

@ -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> {
return this.http.get<any>(`${this.url}/Music/Artist/` + searchTerm);
public searchArtist(searchTerm: string): Observable<ISearchArtistResult[]> {
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);

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

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

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

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

Loading…
Cancel
Save