more !wip

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

@@ -57,7 +57,7 @@ const routes: Routes = [
     { path: "token", component: TokenResetPasswordComponent },
     { path: "landingpage", component: LandingPageComponent },
     { path: "auth/cookie", component: CookieComponent },
-    { loadChildren: "./home/home.module#HomeModule", path: "home" },
+    { loadChildren: "./discover/discover.module#DiscoverModule", path: "home" },
     { loadChildren: "./issues/issues.module#IssuesModule", path: "issues" },
     { loadChildren: "./settings/settings.module#SettingsModule", path: "Settings" },
     { loadChildren: "./wizard/wizard.module#WizardModule", path: "Wizard" },

src/Ombi/ClientApp/src/app/discover/card/discover-card.component.html

@@ -0,0 +1,19 @@
+<mat-card>
+
+    <a *ngIf="result.url" href="{{result.url}}" target="_blank">
+        <img mat-card-image src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
+    </a>
+    <img *ngIf="!result.url" mat-card-image src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
+
+    <mat-card-content>
+
+        <h5 *ngIf="result.title.length <= 10">{{result.title}}</h5>
+        <h6 *ngIf="result.title.length > 10 && result.title.length <= 13">{{result.title}}</h6>
+        <h6 *ngIf="result.title.length > 13" matTooltip="{{result.title}}">{{result.title | truncate:13}}</h6>
+    </mat-card-content>
+    <mat-card-actions>
+        <button *ngIf="!result.requested && !result.available" mat-raised-button color="primary">Request</button>
+        <button *ngIf="result.requested && !result.available" mat-raised-button color="warn">Requested</button>
+        <button *ngIf="!result.requested && result.available" mat-raised-button color="accent">Available</button>
+    </mat-card-actions>
+</mat-card>

src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss

@@ -0,0 +1,3 @@
+.card-poster {
+    max-height: 225px;
+}

src/Ombi/ClientApp/src/app/discover/card/discover-card.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { IDiscoverCardResult } from "../interfaces";
+import { RequestType, ISearchTvResult, ISearchMovieResult } from "../../interfaces";
+import { SearchService } from "../../services";
+
+@Component({
+    selector: "discover-card",
+    templateUrl: "./discover-card.component.html",
+    styleUrls: ["./discover-card.component.scss"],
+})
+export class DiscoverCardComponent implements OnInit {
+
+    @Input() public result: IDiscoverCardResult;
+
+    constructor(private searchService: SearchService) { }
+
+    public ngOnInit() {
+        if (this.result.type == RequestType.tvShow) {
+            this.getExtraTvInfo();
+        }
+        if (this.result.type == RequestType.movie) {
+            this.getExtraMovieInfo();
+        }
+    }
+
+    public getExtraTvInfo() {
+        this.searchService.getShowInformation(this.result.id)
+            .subscribe(x => {
+                if (x) {
+                    this.setTvDefaults(x);
+                    this.updateTvItem(x);
+                }
+            });
+    }
+    private getExtraMovieInfo() {
+        this.searchService.getMovieInformation(this.result.id)
+            .subscribe(m => {
+                this.updateMovieItem(m);
+            });
+    }
+
+    private updateMovieItem(updated: ISearchMovieResult) {
+        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;
+    }
+
+
+    private setTvDefaults(x: ISearchTvResult) {
+        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: ISearchTvResult) {
+        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/discover.component.html

@@ -0,0 +1,5 @@
+<div *ngIf="discoverResults" class="row">
+    <div class="col-lg-2 col-md-4 col-6" *ngFor="let result of discoverResults">
+        <discover-card [result]="result"></discover-card>
+    </div>
+</div>

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

@@ -0,0 +1,58 @@
+import { Component, OnInit } from "@angular/core";
+import { SearchService } from "../services";
+import { ISearchMovieResult, ISearchTvResult, RequestType } from "../interfaces";
+import { IDiscoverCardResult } from "./interfaces";
+
+@Component({
+    templateUrl: "./discover.component.html",
+})
+export class DiscoverComponent implements OnInit {
+
+    public discoverResults: IDiscoverCardResult[] = [];
+    private movies: ISearchMovieResult[];
+    private tvShows: ISearchTvResult[];
+
+    public defaultTvPoster: string;
+
+    constructor(private searchService: SearchService) {
+
+    }
+    public async ngOnInit() {
+        this.movies = await this.searchService.popularMovies().toPromise();
+        this.tvShows = await this.searchService.popularTv().toPromise();
+
+        this.movies.forEach(m => {
+            debugger;
+            this.discoverResults.push({
+                available: m.available,
+                posterPath: `https://image.tmdb.org/t/p/w300/${m.posterPath}`,
+                requested: m.requested,
+                title: m.title,
+                type: RequestType.movie,
+                id: m.id,
+                url: `http://www.imdb.com/title/${m.imdbId}/`
+            });
+        });
+        this.tvShows.forEach(m => {
+            this.discoverResults.push({
+                available: m.available,
+                posterPath: "../../../images/default_tv_poster.png",
+                requested: m.requested,
+                title: m.title,
+                type: RequestType.tvShow,
+                id: m.id,
+                url: undefined
+            });
+        });
+
+        this.shuffle(this.discoverResults);
+    }
+
+    private shuffle(discover: IDiscoverCardResult[]) : IDiscoverCardResult[] {
+        for (let i = discover.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [discover[i], discover[j]] = [discover[j], discover[i]];
+        }
+        return discover;
+    }
+}

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

@@ -6,12 +6,11 @@ import { SearchService } from "../services";
 import { AuthGuard } from "../auth/auth.guard";
 
 import { SharedModule } from "../shared/shared.module";
-import { HomeComponent } from "./home.component";
+import { DiscoverComponent } from "./discover.component";
-import { PopularMoviesComponent } from "./movies/popular-movies.component";
+import { DiscoverCardComponent } from "./card/discover-card.component";
-import { PopularTvComponent } from "./tv/popular-tv.component";
 
 const routes: Routes = [
-    { path: "", component: HomeComponent, canActivate: [AuthGuard] },
+    { path: "", component: DiscoverComponent, canActivate: [AuthGuard] },
 ];
 @NgModule({
     imports: [
@@ -19,9 +18,8 @@ const routes: Routes = [
         SharedModule,
     ],
     declarations: [
-        HomeComponent,
+        DiscoverComponent,
-        PopularMoviesComponent,
+        DiscoverCardComponent
-        PopularTvComponent,
     ],
     exports: [
         RouterModule,
@@ -31,4 +29,4 @@ const routes: Routes = [
         ],
 
 })
-export class HomeModule { }
+export class DiscoverModule { }

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

@@ -0,0 +1,11 @@
+import { RequestType } from "../interfaces";
+
+export interface IDiscoverCardResult {
+    id: number;
+    posterPath: string;
+    url: string | undefined;
+    title: string;
+    type: RequestType;
+    available: boolean;
+    requested: boolean;
+}

src/Ombi/ClientApp/src/app/home/home.component.html

@@ -1,6 +0,0 @@
-<h3>Movies</h3>
-<popular-movies></popular-movies>
-    <mat-divider></mat-divider>
-<h3>TV Shows</h3>
-
-<popular-tv></popular-tv>

src/Ombi/ClientApp/src/app/home/home.component.ts

@@ -1,23 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-import { SearchService } from "../services";
-import { ISearchMovieResult, ISearchTvResult } from "../interfaces";
-
-@Component({
-    templateUrl: "./home.component.html",
-})
-export class HomeComponent implements OnInit {
-
-    public movies: ISearchMovieResult[];
-    public tvShows: ISearchTvResult[];
-
-    public defaultTvPoster: string;
-
-    constructor(private searchService: SearchService) {
-
-    }
-    public ngOnInit() {
-        this.defaultTvPoster = "../../../images/default_tv_poster.png";
-        this.searchService.popularMovies().subscribe(x => this.movies = x);
-        this.searchService.popularTv().subscribe(x => this.tvShows = x);
-    }
-}

src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.html

@@ -1,16 +0,0 @@
-
-<div *ngIf="movies" class="row">
-        <div class="col-lg-2 col-md-4 col-6" *ngFor="let movie of movies">
-            <mat-card>
-    
-                <img mat-card-image src="https://image.tmdb.org/t/p/w300/{{movie.posterPath}}" alt="{{movie.title}}">
-                <mat-card-content>
-    
-                    <h5>{{movie.title}}</h5>
-                </mat-card-content>
-                <mat-card-actions>
-                    <button mat-raised-button color="primary">Request</button>
-                </mat-card-actions>
-            </mat-card>
-        </div>
-    </div>

src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.ts

@@ -1,19 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-import { SearchService } from "../../services";
-import { ISearchMovieResult, ISearchTvResult } from "../../interfaces";
-
-@Component({
-    selector:"popular-movies",
-    templateUrl: "./popular-movies.component.html",
-})
-export class PopularMoviesComponent implements OnInit {
-
-    public movies: ISearchMovieResult[];
-
-    constructor(private searchService: SearchService) {
-
-    }
-    public ngOnInit() {
-        this.searchService.popularMovies().subscribe(x => this.movies = x);
-    }
-}

src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.html

@@ -1,15 +0,0 @@
-<div *ngIf="tvShows" class="row">
-        <div class="col-lg-2 col-md-4 col-6" *ngFor="let tv of tvShows">
-            <mat-card>
-    
-                <img mat-card-image src="{{tv.banner}}" alt="{{tv.title}}">
-                <mat-card-content>
-    
-                    <h5>{{tv.title}}</h5>
-                </mat-card-content>
-                <mat-card-actions>
-                    <button mat-raised-button color="primary">Request</button>
-                </mat-card-actions>
-            </mat-card>
-        </div>
-    </div>

src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.ts

@@ -1,66 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-import { SearchService } from "../../services";
-import { ISearchTvResult } from "../../interfaces";
-
-@Component({
-    selector: "popular-tv",
-    templateUrl: "./popular-tv.component.html",
-})
-export class PopularTvComponent implements OnInit {
-
-    public tvShows: ISearchTvResult[];
-
-    public defaultPoster: string;
-
-    constructor(private searchService: SearchService) {
-
-    }
-
-    public ngOnInit() {
-        this.defaultPoster = "../../../images/default_tv_poster.png";
-        this.searchService.popularTv().subscribe(x => {this.tvShows = x; this.getExtraInfo();});
-    }
-
-    public getExtraInfo() {
-        this.tvShows.forEach((val, index) => {
-            this.searchService.getShowInformation(val.id)
-                .subscribe(x => {
-                    if (x) {
-                        this.setDefaults(x);
-                        this.updateItem(val, x);
-                    } else {
-                        const index = this.tvShows.indexOf(val, 0);
-                        if (index > -1) {
-                            this.tvShows.splice(index, 1);
-                        }
-                    }
-                });
-        });
-    }
-
-    private setDefaults(x: ISearchTvResult) {
-        if (x.banner === null) {
-            x.banner = this.defaultPoster;
-        }
-
-        if (x.imdbId === null) {
-            x.imdbId = "https://www.tvmaze.com/shows/" + x.seriesId;
-        } else {
-            x.imdbId = "http://www.imdb.com/title/" + x.imdbId + "/";
-        }
-    }
-
-    private updateItem(key: ISearchTvResult, updated: ISearchTvResult) {
-        const index = this.tvShows.indexOf(key, 0);
-        if (index > -1) {
-            // Update certain properties, otherwise we will loose some data
-            this.tvShows[index].title = updated.title;
-            this.tvShows[index].banner = updated.banner;
-            this.tvShows[index].imdbId = updated.imdbId;
-            this.tvShows[index].seasonRequests = updated.seasonRequests;
-            this.tvShows[index].seriesId = updated.seriesId;
-            this.tvShows[index].fullyAvailable = updated.fullyAvailable;
-            this.tvShows[index].background = updated.banner;
-        }
-    }
-}

src/Ombi/ClientApp/src/app/nav/nav.component.html

@@ -3,7 +3,7 @@
       [mode]="(isHandset | async)!.matches ? 'over' : 'side'" [opened]="!(isHandset | async)!.matches">
       <mat-toolbar color="primary">Ombi</mat-toolbar>
       <mat-nav-list>
-          <a mat-list-item routerLink="/">Home</a>
+          <a mat-list-item routerLink="/">Discover</a>
           <a mat-list-item routerLink="/search">Search</a>
           <a mat-list-item routerLink="/settings">Settings</a>
       </mat-nav-list>

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

@@ -10,7 +10,7 @@ import { IssuesReportComponent } from "./issues-report.component";
 import { InputSwitchModule, SidebarModule } from "primeng/primeng";
 
 import {
-  MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule} from '@angular/material';
+  MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule} from '@angular/material';
   import {  MatCardModule, MatInputModule, MatTabsModule } from "@angular/material";
 
 @NgModule({
@@ -51,6 +51,7 @@ import {
       MatSidenavModule, 
       MatListModule, 
       MatToolbarModule,
+      MatTooltipModule,
     ],
 })
 export class SharedModule {}

src/Ombi/ClientApp/src/styles/Styles.scss

@@ -1 +1,24 @@
-@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$ombi-app-primary: mat-palette($mat-blue-grey, 900);
+$ombi-app-accent:  mat-palette($mat-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$ombi-app-warn:    mat-palette($mat-deep-orange);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$ombi-app-theme: mat-light-theme($ombi-app-primary, $ombi-app-accent, $ombi-app-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($ombi-app-theme);

src/Ombi/ClientApp/src/styles/scrollbar.scss

@@ -1,23 +0,0 @@
-::-webkit-scrollbar {
-    width: 15px;
-}
-
-::-webkit-scrollbar-track {
-    background-color: rgba(0,0,0,.2);
-}
-
-::-webkit-scrollbar-thumb {
-    min-height: 50px;
-    background-color: rgba(255,255,255,.15);
-    border: 3px solid transparent;
-    border-radius: 8px;
-    background-clip: padding-box;
-}
-
-pre::-webkit-scrollbar-track {
-    background-color: rgba(255,255,255,.2);
-}
-
-pre::-webkit-scrollbar-thumb {
-    background-color: rgba(0,0,0,.15);
-}