github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-07-16 02:02:55 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Album search actually looks pretty good !wip

Browse source
This commit is contained in:
TidusJar 2018-08-24 09:06:41 +01:00
parent fa60a2b826
commit f72e48659c
9 changed files with 139 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/Ombi.Core/Engine/MusicSearchEngine.cs
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)
{

77
src/Ombi/ClientApp/app/search/music/albumsearch.component.html
View file

@ -1,19 +1,29 @@
<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>
<!--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)">
<h4>{{result.artistName}}</h4>
{{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>
@ -22,24 +32,35 @@
<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>
<div class="col-sm-2 small-padding">
<!--Buttons-->
<div class="col-sm-12 small-padding">
<div class="row" *ngIf="result.requested">
<div class="col-md-2 col-md-push-10">
@ -48,16 +69,19 @@
</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>
<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>
<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.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>
@ -66,7 +90,8 @@
<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">
<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>

3
src/Ombi/ClientApp/app/search/music/albumsearch.component.scss Normal file
View file

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

1
src/Ombi/ClientApp/app/search/music/albumsearch.component.ts
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 {

10
src/Ombi/ClientApp/app/search/music/musicsearch.component.html
View file

@ -20,10 +20,12 @@
<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>
<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">
@ -31,11 +33,13 @@
<br/>
<br/>
</div>
<div *ngFor="let result of albumResult">
<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>

13
src/Ombi/ClientApp/app/search/music/musicsearch.component.ts
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.disk === null) {
if(val.cover === null) {
val.cover = this.defaultPoster;
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
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
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
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;
}