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

wip

Browse source
This commit is contained in:
Jamie Rees 2020-10-03 22:40:31 +01:00
parent ff17117f89
commit 3c63b4f5e6
8 changed files with 271 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
View file

@ -1,13 +1,23 @@
<div class="small-middle-container">
<div class="row justify-content-md-center top-space">
<div class="row justify-content-end">
<div class="btn-group col-1 small-space" role="group">
<mat-button-toggle-group>
<mat-button-toggle [ngClass]="displayOption === DisplayOption.Card ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.Card)"><mat-icon>dashboard</mat-icon></mat-button-toggle>
<mat-button-toggle [ngClass]="displayOption === DisplayOption.List ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.List)"><mat-icon>calendar_view_day</mat-icon></mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
<div class="row justify-content-md-center">
<div class="btn-group" role="group">
<button type="button" (click)="switchDiscoverMode(DiscoverOption.Movie)" [attr.color]="popularActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Movie ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Discovery.Movies' | translate}}</button>
<button type="button" (click)="switchDiscoverMode(DiscoverOption.Combined)" [attr.color]="trendingActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Combined ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow"
color="primary">{{'Discovery.Combined' | translate}}</button>
<button type="button" (click)="switchDiscoverMode(DiscoverOption.Tv)" [attr.color]="upcomingActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Tv ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow" color="primary">{{'Discovery.Tv' | translate}}</button>
</div>
</div>
<div class="row justify-content-md-center small-space">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" (click)="popular()" [attr.color]="popularActive ? 'accent' : 'primary'" [ngClass]="popularActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Discovery.PopularTab' | translate}}</button>
@ -16,11 +26,16 @@
</div>
</div>
<div *ngIf="discoverResults" class="row full-height discoverResults col" infiniteScroll [fromRoot]="false" [infiniteScrollDistance]="0.5" [infiniteScrollDisabled]="scrollDisabled" (scrolled)="onScroll()">
<div *ngIf="discoverResults && displayOption === DisplayOption.Card" class="row full-height discoverResults col" infiniteScroll [fromRoot]="false" [infiniteScrollDistance]="0.5" [infiniteScrollDisabled]="scrollDisabled" (scrolled)="onScroll()">
<div class="col-xl-2 col-lg-3 col-md-4 col-12 col-sm-6 small-padding" *ngFor="let result of discoverResults">
<discover-card [result]="result"></discover-card>
</div>
</div>
<div *ngIf="discoverResults && displayOption == DisplayOption.List" class="row full-height discoverResults col" infiniteScroll [fromRoot]="false" [infiniteScrollDistance]="0.5" [infiniteScrollDisabled]="scrollDisabled" (scrolled)="onScroll()">
<div class="col-12 small-padding" *ngFor="let result of discoverResults">
<discover-grid [result]="result"></discover-grid>
</div>
</div>
<div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
<mat-spinner [color]="'accent'"></mat-spinner>
</div>

8
src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts
View file

@ -1,7 +1,7 @@
import { Component, OnInit, Inject } from "@angular/core";
import { SearchV2Service } from "../../../services";
import { ISearchMovieResult, ISearchTvResult, RequestType } from "../../../interfaces";
import { IDiscoverCardResult, DiscoverOption } from "../../interfaces";
import { IDiscoverCardResult, DiscoverOption, DisplayOption } from "../../interfaces";
import { trigger, transition, style, animate } from "@angular/animations";
import { StorageService } from "../../../shared/storage/storage-service";
import { DOCUMENT } from "@angular/common";
@ -26,6 +26,8 @@ export class DiscoverComponent implements OnInit {
public discoverOptions: DiscoverOption = DiscoverOption.Combined;
public DiscoverOption = DiscoverOption;
public displayOption: DisplayOption = DisplayOption.List;
public DisplayOption = DisplayOption;
public defaultTvPoster: string;
@ -221,6 +223,10 @@ export class DiscoverComponent implements OnInit {
this.finishLoading();
}
public changeView(view: DisplayOption) {
this.displayOption = view;
}
private createModel() {
const tempResults = <IDiscoverCardResult[]>[];

53
src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html Normal file
View file

@ -0,0 +1,53 @@
<!-- <div class="card-spacing" *ngIf="result">
<mat-card class="mat-elevation-z8 dark-card grow">
<a [routerLink]="result.type === RequestType.movie ? '/details/movie/' + result.id : '/details/tv/' + result.id">
<img id="cardImage" mat-card-image src="{{result.posterPath}}" class="card-poster" [ngClass]="getStatusClass()" alt="{{result.title}}">
</a>
<mat-card-content>
<h6 *ngIf="result.title.length <= 20">{{result.title}}</h6>
<h6 *ngIf="result.title.length > 20" matTooltip="{{result.title}}">{{result.title | truncate:20}}</h6>
<div class="fade-text">
<small class="overview-text">{{result.overview | truncate: 75}}</small>
</div>
</mat-card-content>
</mat-card>
</div> -->
<div class="top-spacing" *ngIf="result">
<mat-card class="mat-elevation-z8 dark-card">
<div class="row">
<div class="col-2">
<img src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
</div>
<div class="col-6">
<div class="row">
<h1>{{result.title}}</h1>
</div>
<div class="row">
<mat-chip-list>
<mat-chip *ngIf="result.available" class="available">
{{'Common.Available' | translate}}
</mat-chip>
<mat-chip *ngIf="result.approved && !result.available" class="approved">
{{'Common.ProcessingRequest' | translate}}
</mat-chip>
<mat-chip *ngIf="result.denied" class="denied">
{{'Common.RequestDenied' | translate}}
</mat-chip>
<mat-chip *ngIf="!result.approved && !result.availble && !result.denied" class="requested">
{{'Common.PendingApproval' | translate}}
</mat-chip>
</mat-chip-list>
</div>
<div class="row">
<p class="overview top-spacing">{{result.overview}}</p>
</div>
</div>
</div>
</mat-card>
</div>

100
src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss Normal file
View file

@ -0,0 +1,100 @@
$ombi-primary:#3f3f3f;
$card-background: #2b2b2b;
#cardImage {
border-radius: 5px 5px 0px 0px;
height: 75%;
}
.dark-card {
border-radius: 8px;
}
// Changed height to 100% to make all cards the same height
.top-spacing {
margin-top: 1%;
}
.card-poster {
width: 100%;
}
.rating {
position: absolute;
font-weight: bold;
}
$border-width: 3px;
.available {
background-color: #1DE9B6 !important;
color: black !important;
}
.approved {
background-color: #ff5722 !important;
}
.requested {
background-color: #ffd740 !important;
color: black !important;
}
.denied {
background-color: #C2185B !important;
}
.notrequested {
background-color: #303030 !important;
}
.expand {
text-align: center;
}
@media (min-width: 1025px) {
// Changed height to 100% to make all cards the same height
.grow {
transition: all .2s ease-in-out;
height: 100%;
}
.grow:hover {
transform: scale(1.1);
}
}
::ng-deep mat-dialog-container.mat-dialog-container {
// background-color: $ombi-primary;
// color: white;
border-radius: 2%
}
/* Title adjust for the Discover page */
.mat-card-content h6 {
overflow: hidden;
white-space: nowrap;
font-weight: 400;
font-size: 1.1rem;
}
/* Summary adjust for Discover page */
.small,
small {
font-size: 0.8rem;
}
@media (min-width: 2000px) {
#cardImage {
height: 80%;
object-fit: cover;
display: block;
}
}
.overview {
font-size: 1.2em;
}

85
src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts Normal file
View file

@ -0,0 +1,85 @@
import { Component, OnInit, Input } from "@angular/core";
import { IDiscoverCardResult } from "../../interfaces";
import { RequestType, ISearchTvResult, ISearchMovieResult } from "../../../interfaces";
import { SearchV2Service } from "../../../services";
import { MatDialog } from "@angular/material/dialog";
import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
@Component({
selector: "discover-grid",
templateUrl: "./discover-grid.component.html",
styleUrls: ["./discover-grid.component.scss"],
})
export class DiscoverGridComponent implements OnInit {
@Input() public result: IDiscoverCardResult;
public RequestType = RequestType;
constructor(private searchService: SearchV2Service, private dialog: MatDialog) { }
public ngOnInit() {
if (this.result.type == RequestType.tvShow) {
this.getExtraTvInfo();
}
if (this.result.type == RequestType.movie) {
this.getExtraMovieInfo();
}
}
public async getExtraTvInfo() {
var result = await this.searchService.getTvInfo(this.result.id);
this.setTvDefaults(result);
this.updateTvItem(result);
}
public getStatusClass(): string {
if (this.result.available) {
return "available";
}
if (this.result.approved) {
return "approved";
}
if (this.result.requested) {
return "requested";
}
return "notrequested";
}
private getExtraMovieInfo() {
if (!this.result.imdbid) {
this.searchService.getFullMovieDetails(this.result.id)
.subscribe(m => {
this.updateMovieItem(m);
});
}
}
private updateMovieItem(updated: ISearchMovieResultV2) {
this.result.url = "http://www.imdb.com/title/" + updated.imdbId + "/";
this.result.available = updated.available;
this.result.requested = updated.requested;
this.result.requested = updated.requestProcessing;
this.result.rating = updated.voteAverage;
}
private setTvDefaults(x: ISearchTvResultV2) {
if (!x.imdbId) {
x.imdbId = "https://www.tvmaze.com/shows/" + x.seriesId;
} else {
x.imdbId = "http://www.imdb.com/title/" + x.imdbId + "/";
}
}
private updateTvItem(updated: ISearchTvResultV2) {
this.result.title = updated.title;
this.result.id = updated.id;
this.result.available = updated.fullyAvailable;
this.result.posterPath = updated.banner;
this.result.requested = updated.requested;
this.result.url = updated.imdbId;
}
}

2
src/Ombi/ClientApp/src/app/discover/components/index.ts
View file

@ -7,6 +7,7 @@ import { Routes } from "@angular/router";
import { AuthGuard } from "../../auth/auth.guard";
import { SearchService, RequestService } from "../../services";
import { MatDialog } from "@angular/material/dialog";
import { DiscoverGridComponent } from "./grid/discover-grid.component";
export const components: any[] = [
@ -15,6 +16,7 @@ export const components: any[] = [
DiscoverCardDetailsComponent,
DiscoverCollectionsComponent,
DiscoverActorComponent,
DiscoverGridComponent,
];

2
src/Ombi/ClientApp/src/app/discover/discover.module.ts
View file

@ -1,6 +1,7 @@
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import { SharedModule } from "../shared/shared.module";
import { PipeModule } from "../pipes/pipe.module";
@ -13,6 +14,7 @@ import * as fromComponents from './components';
RouterModule.forChild(fromComponents.routes),
SharedModule,
PipeModule,
MatButtonToggleModule,
InfiniteScrollModule,
],
declarations: [

5
src/Ombi/ClientApp/src/app/discover/interfaces.ts
View file

@ -19,3 +19,8 @@ export enum DiscoverOption {
Movie = 2,
Tv = 3
}
export enum DisplayOption {
Card = 1,
List = 2
}