open-source-mirrors
/
Ombi
mirror of https://github.com/Ombi-app/Ombi
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Album search actually looks pretty good !wip

Browse Source
pull/2478/head
TidusJar 7 years ago
parent fa60a2b826
commit f72e48659c
9 changed files with 138 additions and 85 deletions
Show Stats Download Patch File Download Diff File

3
src/Ombi.Core/Engine/MusicSearchEngine.cs
Unescape View File

@ -139,7 +139,8 @@ namespace Ombi.Core.Engine
Monitored = a.monitored,
Rating = a.ratings?.value ?? 0m,
ReleaseDate = a.releaseDate,
Title = a.title
Title = a.title,
Disk = a.images?.FirstOrDefault(x => x.coverType.Equals("disc"))?.url
};
if (vm.Monitored)
{

145
src/Ombi/ClientApp/app/search/music/albumsearch.component.html
Unescape View File

@ -1,80 +1,105 @@
<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-3 small-padding">
<img *ngIf="result.cover" class="img-responsive poster" src="{{result.cover}}" alt="poster">
</div>
<div class="col-sm-7 small-padding">
<div>
<a href="" target="_blank">
<h4>{{result.title}}</h4>
</a>
<a href="" (click)="selectArtist($event, result.foreignArtistId)">
<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>
<div>
<!--Backdrop-->
<div class="album-bg backdrop" [style.background-image]="result.background"></div>
<div class="album-tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>
<!--Album Art-->
<div class="col-sm-12 small-padding">
<img *ngIf="result.disk" class="img-responsive poster album-cover" src="{{result.disk}}" alt="poster">
</div>
<!--Artist Title-->
<div class="col-sm-12 small-padding">
<div>
<h4>
<a href="" (click)="selectArtist($event, result.foreignArtistId)">
{{result.artistName}}
</a>
-
<a href="" target="_blank">
{{result.title}}
</a>
</h4>
</div>
<!--Tags-->
<div>
<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.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> -->
<ng-template [ngIf]="result.releaseDate"><span class="label label-info" id="availableLabel">Release Date: {{result.releaseDate | date:'yyyy-MM-dd'}}</span></ng-template>
<ng-template [ngIf]="result.releaseDate">
<span class="label label-info" id="availableLabel">Release Date: {{result.releaseDate | date:'yyyy-MM-dd'}}</span>
</ng-template>
<ng-template [ngIf]="result.rating">
<span class="label label-info" id="availableLabel">{{result.rating}}/10</span>
</ng-template>
<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>
<ng-template [ngIf]="result.requested && !result.approved && !result.available"><span class="label label-warning" id="pendingApprovalLabel" [translate]="'Common.PendingApproval'"></span></ng-template>
<ng-template [ngIf]="!result.requested && !result.available && !result.approved"><span class="label label-danger" id="notRequestedLabel" [translate]="'Common.NotRequested'"></span></ng-template>
<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>
<ng-template [ngIf]="result.requested && !result.approved && !result.available">
<span class="label label-warning" id="pendingApprovalLabel" [translate]="'Common.PendingApproval'"></span>
</ng-template>
<ng-template [ngIf]="!result.requested && !result.available && !result.approved">
<span class="label label-danger" id="notRequestedLabel" [translate]="'Common.NotRequested'"></span>
</ng-template>
</span>
<br/>
</div>
<p style="font-size: 0.9rem !important">{{result.overview | truncate: 350 }}</p>
</div>
</span>
</div>
</div>
<div class="col-sm-2 small-padding">
<div class="row" *ngIf="result.requested">
<div class="col-md-2 col-md-push-10">
<!--Buttons-->
<div class="col-sm-12 small-padding">
<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> -->
</div>
</div>
</div>
<div *ngIf="result.available">
<button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fa fa-check"></i> {{ 'Common.Available' | translate }}</button>
</div>
<div *ngIf="!result.available">
<div *ngIf="result.requested || result.approved; then requestedBtn else notRequestedBtn"></div>
<ng-template #requestedBtn>
<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 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>
</ng-template>
<div *ngIf="result.available">
<button style="text-align: right" class="btn btn-success-outline disabled" disabled>
<i class="fa fa-check"></i> {{ 'Common.Available' | translate }}</button>
</div>
<div *ngIf="!result.available">
<div *ngIf="result.requested || result.approved; then requestedBtn else notRequestedBtn"></div>
<ng-template #requestedBtn>
<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 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>
</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> -->
<br/>
<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> -->
</ul>
</div>
</div>
<br/>
<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> -->
</ul>
</div>
</div>
</div>

3
src/Ombi/ClientApp/app/search/music/albumsearch.component.scss
Unescape View File

@ -0,0 +1,3 @@
.album-cover {
width:300px;
}

1
src/Ombi/ClientApp/app/search/music/albumsearch.component.ts
Unescape View File

@ -9,6 +9,7 @@ import { NotificationService, RequestService } from "../../services";
@Component({
selector: "album-search",
templateUrl: "./albumsearch.component.html",
styleUrls: ["./albumsearch.component.scss"],
})
export class AlbumSearchComponent {

38
src/Ombi/ClientApp/app/search/music/musicsearch.component.html
Unescape View File

@ -7,39 +7,43 @@
</div>
</div>
<div class="form-group">
<div class="radio">
<input type="radio" id="Artist" name="Mode" [checked]="!searchAlbum" (click)="searchMode(false)">
<label for="Artist">Artist Search</label>
<input type="radio" id="Album" name="Mode" [checked]="searchAlbum" (click)="searchMode(true)">
<label for="Album">Album Search</label>
</div>
<div class="radio">
<input type="radio" id="Artist" name="Mode" [checked]="!searchAlbum" (click)="searchMode(false)">
<label for="Artist">Artist Search</label>
<input type="radio" id="Album" name="Mode" [checked]="searchAlbum" (click)="searchMode(true)">
<label for="Album">Album Search</label>
</div>
</div>
<br />
<br />
<div id="movieList">
<div *ngIf="searchApplied && artistResult?.length <= 0 && !searchAlbum" class='no-search-results'>
<i class='fa fa-music 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 *ngIf="searchApplied && albumResult?.length <= 0 && searchAlbum" 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>
<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 artistResult">
<artist-search [result]="result" [defaultPoster]="defaultPoster"></artist-search>
<artist-search [result]="result" [defaultPoster]="defaultPoster"></artist-search>
<br/>
<br/>
</div>
<div *ngFor="let result of albumResult">
<album-search [result]="result" [defaultPoster]="defaultPoster" (setSearch)="setArtistSearch($event)"></album-search>
<br/>
<br/>
</div>
<div class="col-md-12">
<div *ngFor="let result of albumResult" class="col-md-4">
<album-search [result]="result" [defaultPoster]="defaultPoster" (setSearch)="setArtistSearch($event)"></album-search>
<br/>
<br/>
</div>
</div>
</div>
</div>
<issue-report [movie]="true" [visible]="issuesBarVisible" (visibleChange)="issuesBarVisible = $event;" [title]="issueRequestTitle"
[issueCategory]="issueCategorySelected" [id]="issueRequestId" [providerId]="issueProviderId"></issue-report>
[issueCategory]="issueCategorySelected" [id]="issueRequestId" [providerId]="issueProviderId"></issue-report>

15
src/Ombi/ClientApp/app/search/music/musicsearch.component.ts
Unescape View File

@ -22,7 +22,7 @@ export class MusicSearchComponent implements OnInit {
public albumResult: ISearchAlbumResult[];
public result: IRequestEngineResult;
public searchApplied = false;
public searchAlbum: boolean;
public searchAlbum: boolean = true;
@Input() public issueCategories: IIssueCategory[];
@Input() public issuesEnabled: boolean;
@ -54,6 +54,9 @@ export class MusicSearchComponent implements OnInit {
return;
}
if(this.searchAlbum) {
if(!this.searchText) {
this.searchText = "iowa"; // REMOVE
}
this.searchService.searchAlbum(this.searchText)
.subscribe(x => {
this.albumResult = x;
@ -167,9 +170,15 @@ export class MusicSearchComponent implements OnInit {
private setAlbumBackground() {
this.albumResult.forEach((val, index) => {
if (val.cover === null) {
val.cover = this.defaultPoster;
if (val.disk === null) {
if(val.cover === null) {
val.disk = this.defaultPoster;
} else {
val.disk = val.cover;
}
}
val.background = this.sanitizer.bypassSecurityTrustStyle
("url(" + val.cover + ")");
});
}
}

4
src/Ombi/ClientApp/app/search/search.component.html
Unescape View File

@ -22,11 +22,11 @@
<div class="tab-content">
<div [hidden]="!showMovie">
<movie-search [issueCategories]="issueCategories" [issuesEnabled]="issuesEnabled"></movie-search>
<!-- <movie-search [issueCategories]="issueCategories" [issuesEnabled]="issuesEnabled"></movie-search> -->
</div>
<div [hidden]="!showTv">
<tv-search [issueCategories]="issueCategories" [issuesEnabled]="issuesEnabled"></tv-search>
<!-- <tv-search [issueCategories]="issueCategories" [issuesEnabled]="issuesEnabled"></tv-search> -->
</div>
<div [hidden]="!showMusic">
<music-search></music-search>

4
src/Ombi/ClientApp/app/search/search.component.ts
Unescape View File

@ -21,9 +21,9 @@ export class SearchComponent implements OnInit {
public ngOnInit() {
this.settingsService.getLidarr().subscribe(x => this.musicEnabled = x.enabled);
this.showMovie = true;
this.showMovie = false;
this.showTv = false;
this.showMusic = false;
this.showMusic = true;
this.issuesService.getCategories().subscribe(x => this.issueCategories = x);
this.settingsService.getIssueSettings().subscribe(x => this.issuesEnabled = x.enabled);
}

10
src/Ombi/ClientApp/styles/Themes/plex.scss
Unescape View File

@ -345,11 +345,21 @@ button.list-group-item:focus {
height: 100%;
position: absolute;
}
.album-bg {
width: 92%;
height: 100%;
position: absolute;
}
.tint {
width: 100%;
height: 100%;
position: absolute;
}
.album-tint {
width: 92%;
height: 100%;
position: absolute;
}
table.table > thead > tr > th.active {
background-color: $primary-colour;
}
Write Preview
Loading…
Cancel
Save