More work on it... top secret

src/Ombi/ClientApp/package.json

@@ -52,7 +52,7 @@
     "please-wait": "^0.0.5",
     "popper.js": "^1.14.3",
     "primeicons": "^4.0.0",
-    "primeng": "^10.0.3",
+    "primeng": "^11.0.0",
     "rxjs": "^6.5.2",
     "spinkit": "^1.2.5",
     "store": "^2.0.12",

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

@@ -77,7 +77,7 @@ export class DiscoverCardDetailsComponent implements OnInit {
                 this.messageService.send(result.errorMessage, "Ok");
             }
         } else if (this.data.type === RequestType.tvShow) {
-            this.dialog.open(EpisodeRequestComponent, { width: "700px", data: this.tv,  panelClass: 'modal-panel' })
+            this.dialog.open(EpisodeRequestComponent, { width: "700px", data: {series: this.tv },  panelClass: 'modal-panel' })
         }
         this.loading = false;
 

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

@@ -1,4 +1,4 @@
-<div class="card-spacing box" *ngIf="result" [style.display]="hide ? 'none' : 'block'">
+<!-- <div class="card-spacing box" *ngIf="result" [style.display]="hide ? 'none' : 'block'">
     <mat-card class="mat-elevation-z8 dark-card" [routerLink]="generateDetailsLink()">
         <div class="ribbon {{getStatusClass()}} ribbon-top-right"><span>
             {{getAvailbilityStatus()}}
@@ -15,4 +15,27 @@
         </div>
         </mat-card-content>
     </mat-card>
+</div> -->
+
+<p-skeleton  *ngIf="!fullyLoaded" width="100%" height="19.789rem"></p-skeleton>
+
+<div *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
+    <div >
+        
+        <img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"
+            alt="{{result.title}}">
+            <div class="top-left">{{RequestType[result.type] | humanize}}</div>
+        <div class="middle">
+            <div class="title">{{result.title}}</div>
+            <div class="small-text ellipsis">{{result.overview}}</div>
+            <div class="row" *ngIf="!result.available && !result.approved">
+                <div class="col-12">
+                    <button mat-raised-button class="btn-green full-width" (click)="request($event)">
+                        <mat-icon *ngIf="!loading">cloud_download</mat-icon>
+                        <i *ngIf="loading" class="fa fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>

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

@@ -2,7 +2,7 @@ $ombi-primary:#3f3f3f;
 $card-background: #2b2b2b;
 
 #cardImage {
-    border-radius: 5px 5px 0px 0px;
+    border-radius: 5px;
     height: 75%;
 }
 
@@ -167,3 +167,75 @@ small {
   .ribbon-icon {
     transform: translateX(0%) translateY(0%) rotate(-45deg);
   }
+
+
+  
+
+.ombi-card {
+  padding: 5px;
+}
+::ng-deep .p-carousel-indicators {
+  display: none !important;
+  }
+
+  
+.image {
+  border-radius: 10px;
+  opacity: 1;
+  display: block;
+  width: 100%;
+  height: auto;
+  transition: .5s ease;
+  backface-visibility: hidden;
+}
+
+
+.middle {
+  transition: .5s ease;
+  opacity: 0;
+  position: absolute;
+  top: 67%;
+  width: 90%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+}
+
+
+.c {
+  position: relative;
+}
+
+.c:hover .image {
+  opacity: 0.3;
+}
+
+.c:hover .middle {
+  opacity: 1;
+}
+
+.small-text {
+  font-size: 11px;
+}
+.title {
+    font-size: 18px;
+  }
+  .top-left {
+      font-size: 14px;
+      position: absolute;
+      text-transform: uppercase;
+      top: 8px;
+      left: 16px;
+      
+    }
+    .full-width {
+      width: 100%;
+    }
+
+    .ellipsis {
+      display: -webkit-box;
+      -webkit-line-clamp: 6;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+  }

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

@@ -1,11 +1,12 @@
 import { Component, OnInit, Input } from "@angular/core";
 import { IDiscoverCardResult } from "../../interfaces";
 import { RequestType } from "../../../interfaces";
-import { SearchService, SearchV2Service } from "../../../services";
+import { MessageService, RequestService, SearchV2Service } from "../../../services";
 import { MatDialog } from "@angular/material/dialog";
 import { DiscoverCardDetailsComponent } from "./discover-card-details.component";
 import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
 import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
+import { EpisodeRequestComponent } from "../../../shared/episode-request/episode-request.component";
 
 @Component({
     selector: "discover-card",
@@ -17,8 +18,14 @@ export class DiscoverCardComponent implements OnInit {
     @Input() public result: IDiscoverCardResult;
     public RequestType = RequestType;
     public hide: boolean;
+    public fullyLoaded = false;
+    public loading: boolean;
 
-    constructor(private searchService: SearchV2Service, private v1Search: SearchService, private dialog: MatDialog) { }
+    // This data is needed to open the dialog
+    private tvSearchResult: ISearchTvResultV2;
+
+    constructor(private searchService: SearchV2Service, private dialog: MatDialog, private requestService: RequestService,
+        public messageService: MessageService) { }
 
     public ngOnInit() {
         if (this.result.type == RequestType.tvShow) {
@@ -38,16 +45,16 @@ export class DiscoverCardComponent implements OnInit {
 
     public async getExtraTvInfo() {
         if (this.result.tvMovieDb) {
-            var result = await this.searchService.getTvInfoWithMovieDbId(+this.result.id);
+            this.tvSearchResult = await this.searchService.getTvInfoWithMovieDbId(+this.result.id);
         } else {
-            var result = await this.searchService.getTvInfo(+this.result.id);
+            this.tvSearchResult = await this.searchService.getTvInfo(+this.result.id);
         }
-        if(result.status === "404") {
+        if (this.tvSearchResult.status === "404") {
             this.hide = true;
             return;
         }
-        this.setTvDefaults(result);
+        this.setTvDefaults(this.tvSearchResult);
-        this.updateTvItem(result);
+        this.updateTvItem(this.tvSearchResult);
 
     }
 
@@ -55,10 +62,13 @@ export class DiscoverCardComponent implements OnInit {
         this.searchService.getArtistInformation(this.result.id.toString()).subscribe(x => {
             if (x.poster) {
                 this.result.posterPath = x.poster;
+                this.fullyLoaded = true;
             } else {
                 this.searchService.getReleaseGroupArt(this.result.id.toString()).subscribe(art => {
                     if (art.image) {
                         this.result.posterPath = art.image;
+
+                        this.fullyLoaded = true;
                     }
                 })
             }
@@ -68,7 +78,6 @@ export class DiscoverCardComponent implements OnInit {
     }
 
     public generateDetailsLink(): string {
-        let link = "";
         switch (this.result.type) {
             case RequestType.movie:
                 return `/details/movie/${this.result.id}`;
@@ -105,12 +114,36 @@ export class DiscoverCardComponent implements OnInit {
         return "";
     }
 
+    public request(event: any) {
+        event.preventDefault();
+        this.loading = true;
+        switch (this.result.type) {
+            case RequestType.tvShow:
+                const dia = this.dialog.open(EpisodeRequestComponent, { width: "700px", data: { series: this.tvSearchResult }, panelClass: 'modal-panel' });
+                dia.afterClosed().subscribe(x => this.loading = false);
+                return;
+            case RequestType.movie:
+                this.requestService.requestMovie({ theMovieDbId: +this.result.id, languageCode: null, requestOnBehalf: null }).subscribe(x => {
+                    if (x.result) {
+                        this.result.requested = true;
+                        this.messageService.send(x.message, "Ok");
+                    } else {
+                        this.messageService.send(x.errorMessage, "Ok");
+                    }
+                    this.loading = false;
+                });
+                return;
+        }
+    }
+
     private getExtraMovieInfo() {
         if (!this.result.imdbid) {
             this.searchService.getFullMovieDetails(+this.result.id)
                 .subscribe(m => {
                     this.updateMovieItem(m);
                 });
+        } else {
+            this.fullyLoaded = true;
         }
     }
 
@@ -122,6 +155,8 @@ export class DiscoverCardComponent implements OnInit {
         this.result.rating = updated.voteAverage;
         this.result.overview = updated.overview;
         this.result.imdbid = updated.imdbId;
+
+        this.fullyLoaded = true;
     }
 
 
@@ -142,6 +177,8 @@ export class DiscoverCardComponent implements OnInit {
         this.result.url = updated.imdbId;
         this.result.overview = updated.overview;
         this.result.approved = updated.approved;
+
+        this.fullyLoaded = true;
     }
 
 }

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

@@ -40,13 +40,17 @@
         <mat-spinner [color]="'accent'"></mat-spinner>
     </div> -->
 
-    <h2>Upcoming Movies <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
+    <div class="section">
+        <h2>Popular <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
         <div *ngIf="!loadingFlag">
             <movie-list [result]="upcomingMovies"></movie-list>
         </div>
+    </div>
 
-    <h2>Trending Movies <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
+    <div class="section">
+        <h2>Trending <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
         <div *ngIf="!loadingFlag">
             <movie-list [result]="trendingMovies"></movie-list>
         </div>
     </div>
+</div>

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

@@ -1,213 +1,3 @@
-.full-height {
+.section {
-    height: 100%;
+    margin: 20px;
-}
-
-.small-middle-container {
-    margin: auto;
-    width: 85%;
-    padding-left:2%;
-}
-
-.small-padding {
-    padding-left: 20px;
-    padding-right: 20px;
-    margin-bottom: 28px;
-}
-
-.loading-spinner {
-    margin: 10%;
-}
-
-#scroller {
-    height: 100vh;
-    overflow: scroll;
-}
-
-.small-space {
-    padding-top: 1%;
-}
-
-.discover-layout {
-    position: absolute;
-    float: right;
-    margin-right: 36px;
-    z-index: 1;
-}
-
-::ng-deep .mat-card-image {
-    height: 75%;
-    border-radius: 10px;
-    width: 100%;
-    object-fit: cover;
-    display: block;
-}
-
-.card-spacing {
-    height: 100%;
-}
-
-.mat-card-content h6 {
-    overflow: hidden;
-    white-space: nowrap;
-    font-weight: 500;
-    font-size: 1.1rem;
-}
-
-@media (min-width: 300px) {
-
-    .small-middle-container {
-        margin: inherit;
-    }
-
-    .col-xl-2 {
-        flex: 0 0 100%;
-        max-width: 100%;
-        min-width: 100%;
-    }
-
-    .btn-group {
-        width: 100%;
-    }
-
-    mat-button-base {
-        width: 100%;
-    }
-
-    .col {
-        padding-right: 10px !important;
-        padding-left: 10px !important;
-    }
-
-    .row {
-        margin-left: 0px;
-    }
-
-    .small-padding {
-        padding-left: 5px !important;
-        padding-right: 0px !important;
-        height: 40em;
-    }
-
-    ::ng-deep .mat-card-image {
-        height: 85% !important;
-    }
-}
-
-@media (min-width: 600px) {
-    .justify-content-md-center {
-        justify-content: center !important;
-    }
-
-    .small-middle-container {
-        width: auto;
-    }
-
-    .btn-group {
-        width: auto;
-    }
-
-    mat-button-base {
-        width: auto;
-    }
-
-    ::ng-deep .mat-card-image {
-        height: 75% !important;
-    }
-}
-
-@media (min-width: 660px) {
-    .col-xl-2 {
-        flex: 0 0 50%;
-        max-width: 50%;
-        min-width: 50%;
-    }
-
-    .col {
-        padding-right: 15px !important;
-        padding-left: 15px !important;
-    }
-
-    .small-padding {
-        padding-left: 20px !important;
-        padding-right: 20px !important;
-        height: auto;
-    }
-
-    .row {
-        margin-left: 0px;
-    }
-
-    .small-middle-container {
-        width: auto;
-        overflow: hidden;
-    }
-
-    .btn-group {
-        width: auto;
-    }
-
-    mat-button-base {
-        width: auto;
-    }
-}
-
-@media (min-width: 870px) {
-    .col-xl-2 {
-        flex: 0 0 33.33333%;
-        max-width: 33.33333%;
-        min-width: 33.33333%;
-    }
-}
-
-@media (min-width: 1100px) {
-    .col-xl-2 {
-        flex: 0 0 20%;
-        max-width: 25%;
-        min-width: 25%;
-    }
-}
-
-@media (min-width: 1300px) {
-    .col-xl-2 {
-        flex: 0 0 18%;
-        max-width: 20%;
-        min-width: 20%;
-    }
-}
-
-@media (min-width: 1600px) {
-    .col-xl-2 {
-        flex: 0 0 16.66666667%;
-        max-width: 16.66666667%;
-        min-width: 16.66666667%;
-    }
-}
-
-@media (min-width: 1900px) {
-    .col-xl-2 {
-        flex: 0 0 14.285713%;
-        max-width: 14.285713%;
-        min-width: 14.285713%;
-    }
-}
-
-@media (min-width: 2200px) {
-    .col-xl-2 {
-        flex: 0 0 12.5%;
-        max-width: 12.5%;
-        min-width: 12.5%;
-    }
-}
-
-@media (min-width: 2500px) {
-    .col-xl-2 {
-        flex: 0 0 11.111111%;
-        max-width: 11.111111%;
-        min-width: 11.111111%;
-    }
-}
-@media (max-width: 420px) {
-    .discover-layout{
-        display: none;
-    }
 }

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

@@ -5,6 +5,7 @@ import { IDiscoverCardResult, DiscoverOption, DisplayOption } from "../../interf
 import { trigger, transition, style, animate } from "@angular/animations";
 import { StorageService } from "../../../shared/storage/storage-service";
 import { DOCUMENT } from "@angular/common";
+import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
 
 @Component({
     templateUrl: "./discover.component.html",
@@ -58,7 +59,7 @@ export class DiscoverComponent implements OnInit {
 
     public async ngOnInit() {
         this.loading()
-        this.upcomingMovies = this.mapMovieModel(await this.searchService.upcomingMoviesByPage(0, 14));
+        this.upcomingMovies = this.mapTvModel(await this.searchService.popularTvByPage(0, 14));
         this.trendingMovies = this.mapMovieModel(await this.searchService.popularMoviesByPage(0, 14));
 this.finishLoading();
         // const localDiscoverOptions = +this.storageService.get(this.mediaTypeStorageKey);
@@ -286,9 +287,9 @@ this.finishLoading();
         return tempResults;
     }
 
-    private mapTvModel(): IDiscoverCardResult[] {
+    private mapTvModel(tv: ISearchTvResult[]): IDiscoverCardResult[] {
         const tempResults = <IDiscoverCardResult[]>[];
-        this.tvShows.forEach(m => {
+        tv.forEach(m => {
             tempResults.push({
                 available: m.available,
                 posterPath: "../../../images/default_tv_poster.png",

src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.html

@@ -1,23 +1,5 @@
-<p-carousel [numVisible]="7" [numScroll]="7" [page]="0" [value]="result">
+<p-carousel *ngIf="result" [numVisible]="10" [numScroll]="10" [page]="0" [value]="result" [responsiveOptions]="responsiveOptions">
     <ng-template let-result pTemplate="item">
-        <div class="ombi-card dark-card c">
+        <discover-card [result]="result"></discover-card>
-            <div [routerLink]="result.type === 1 ? '/details/movie/' + result.id : '/details/tv/' + result.id">
-                <img id="cardImage" src="{{result.posterPath}}" class="image"
-                    alt="{{result.title}}">
-                    <div class="top-left">{{RequestType[result.type] | humanize}}</div>
-                <div class="middle">
-                    <div class="title">{{result.title}}</div>
-                    <div class="small-text">{{result.overview | truncate: 80}}</div>
-                    <div class="row">
-                        <div class="col-6">
-                            <button mat-raised-button class="btn-blue"><mat-icon>remove_red_eye</mat-icon></button>
-                        </div>
-                        <div class="col-6">
-                            <button mat-raised-button class="btn-green"><mat-icon>cloud_download</mat-icon></button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
     </ng-template>
 </p-carousel>

src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.ts

@@ -10,76 +10,37 @@ import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
     templateUrl: "./movie-list.component.html",
     styleUrls: ["./movie-list.component.scss"],
 })
-export class MovieListComponent implements OnInit {
+export class MovieListComponent  {
 
     public RequestType = RequestType;
-    @Input() public result: IDiscoverCardResult;
+    @Input() public result: IDiscoverCardResult[];
 
-    constructor(private searchService: SearchV2Service) { }
+    public responsiveOptions: any;
 
-    public ngOnInit() {
+    constructor() {
-        if (this.result.type == RequestType.tvShow) {
+        this.responsiveOptions = [
-            this.getExtraTvInfo();
+            {
-        }
+                breakpoint: '2559px',
-        if (this.result.type == RequestType.movie) {
+                numVisible: 7,
-            this.getExtraMovieInfo();
+                numScroll: 7
+            },
+            {
+                breakpoint: '1024px',
+                numVisible: 4,
+                numScroll: 4
+            },
+            {
+                breakpoint: '768px',
+                numVisible: 2,
+                numScroll: 2
+            },
+            {
+                breakpoint: '560px',
+                numVisible: 1,
+                numScroll: 1
             }
+        ];
     }
 
 
-    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/discover.module.ts

@@ -6,6 +6,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import { SharedModule } from "../shared/shared.module";
 import { PipeModule } from "../pipes/pipe.module";
 import { CarouselModule } from 'primeng/carousel';
+import { SkeletonModule } from 'primeng/skeleton';
 
 import * as fromComponents from './components';
 
@@ -18,6 +19,7 @@ import * as fromComponents from './components';
         CarouselModule,
         MatButtonToggleModule,
         InfiniteScrollModule,
+        SkeletonModule,
     ],
     declarations: [
         ...fromComponents.components

src/Ombi/ClientApp/yarn.lock

@@ -7005,10 +7005,10 @@ primeicons@^4.0.0:
   resolved "https://registry.yarnpkg.com/primeicons/-/primeicons-4.0.0.tgz#a3594b3af213dcf8c4c3d6fc99eea05b7c92f57c"
   integrity sha512-JQBIswGSItn8I0Pq21RchENpKJxSi1MjfBDfggMQpXtoKNKblJoHmol/7tCV3CAV2Dlb94ht8TD8qdIAW01pGg==
 
-primeng@^10.0.3:
+primeng@^11.0.0:
-  version "10.0.3"
+  version "11.1.0"
-  resolved "https://registry.yarnpkg.com/primeng/-/primeng-10.0.3.tgz#e9d0ea425b9c5023bc9eef2cb014941939d0c35e"
+  resolved "https://registry.yarnpkg.com/primeng/-/primeng-11.1.0.tgz#3957e6bac5bf4cc5e4eb4dc2761a35668e08a780"
-  integrity sha512-Nsiwpmy3RlFPBlxabdzeAYxFn4fXEyZjj7iAi1X5J4RRGD7NoB67+NbnOInE1rXTnNVHYxCca91OvaNiHSWWrg==
+  integrity sha512-5eQvLbUJeyaa5EwIEQobRhyl92EhNo4jxvh4YGh984t0B8SyuGmWH5TjoM5GmiZeYOBlt8htvHFJ3rz3xKXQFA==
   dependencies:
     tslib "^2.0.0"
 
@@ -8767,9 +8767,9 @@ tslib@^1.8.0, tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
 
 tslib@^2.0.0:
-  version "2.0.3"
+  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
-  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
+  integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
 
 tslint-angular@^1.1.2:
   version "1.1.2"