mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-19 21:03:17 -07:00
!wip so the search actually works for artists currently
This commit is contained in:
TidusJar
parent
9156673f88
commit
cb2e29edaf
9 changed files with 78 additions and 48 deletions
21
src/Ombi/ClientApp/app/interfaces/ISearchMusicResult.ts
Normal file
21
src/Ombi/ClientApp/app/interfaces/ISearchMusicResult.ts
Normal file
|
|
@ -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)
|
||||
.subscribe(x => {
|
||||
this.movieResults = x;
|
||||
this.searchApplied = true;
|
||||
});
|
||||
} else {
|
||||
if(this.searchAlbum) {
|
||||
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 + ")");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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…
Add table
Add a link
Reference in a new issue