wip

src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html

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

src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts

@@ -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[]>[];
 

src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html

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

src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss

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

src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts

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

src/Ombi/ClientApp/src/app/discover/components/index.ts

@@ -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,
 ];
 
 

src/Ombi/ClientApp/src/app/discover/discover.module.ts

@@ -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: [

src/Ombi/ClientApp/src/app/discover/interfaces.ts

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