restructured and cleaned up the details pages !wip

src/Ombi/ClientApp/src/app/media-details/components/index.ts

@@ -0,0 +1,17 @@
+import { MovieDetailsComponent } from "./movie/movie-details.component";
+import { YoutubeTrailerComponent } from "./shared/youtube-trailer.component";
+import { TvDetailsComponent } from "./tv/tv-details.component";
+import { MovieInformationPanelComponent } from "./movie/panels/movie-information-panel.component";
+import { TvInformationPanelComponent } from "./tv/panels/tv-information-panel.component";
+import { TopBannerComponent } from "./shared/top-banner/top-banner.component";
+import { SocialIconsComponent } from "./shared/social-icons/social-icons.component";
+
+export const components: any[] = [
+    MovieDetailsComponent,
+    YoutubeTrailerComponent,
+    TvDetailsComponent,
+    MovieInformationPanelComponent,
+    TvInformationPanelComponent,
+    TopBannerComponent,
+    SocialIconsComponent,
+];

src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html

@@ -1,25 +1,9 @@
 <div *ngIf="movie" class="dark-theme">
 
+    <top-banner [background]="movie.background" [available]="movie.available" 
+        [title]="movie.title" [releaseDate]="movie.releaseDate" [tagline]="movie.tagline"></top-banner>
 
-    <section id="summary-wrapper">
-        <div class="full-screenshot enabled" [style.background-image]="movie.background"></div>
-        <div class="shadow-base" [ngClass]="movie.available ? 'available-bottom-border' : ''"></div>
     
-        <div class="container summary">
-            <div class="container">
-                <div class="row">
-                    <div
-                        class="col-xl-12 col-lg-11 offset-lg-1 col-md-8 offset-md-4 col-sm-7 offset-sm-5 col-6 offset-6">
-                        <h1>{{movie.title}} <span *ngIf="movie.releaseDate" class="grey-text align-middle">({{movie.releaseDate
-                                | date:'yyyy'}})</span>
-                        </h1>
-
-                        <h5 class="tagline grey-text">{{movie.tagline}}</h5>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
 
     <section id="info-wrapper">
         <div class="small-middle-container">
@@ -39,47 +23,10 @@
                 <!--Next to poster-->
                 <div class="col-10 col-lg-3 col-xl-3 media-row">
 
-                    <a *ngIf="movie.homepage" class="media-icons" h href="{{movie.homepage}}" target="_blank">
+                    <social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos.results.length > 0"
-                        <i matTooltip="Homepage" class="fa fa-home fa-2x grow"></i>
+                        (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId"
-                    </a>
+                        [facebook]="movie.externalIds.facebookId" [instagram]="movie.externalIds.instagramId" [available]="movie.available"
-
+                        [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl"></social-icons>
-                    <a *ngIf="movie.id" href="https://www.themoviedb.org/movie/{{movie.id}}" class="media-icons"
-                        target="_blank">
-                        <i matTooltip="The Movie DB" class="fa fa-film fa-2x grow"></i>
-                    </a>
-
-                    <a *ngIf="movie.videos.results.length > 0" class="media-icons" (click)="openDialog()"><i
-                            matTooltip="Trailer" class="fa fa-youtube-play fa-2x grow"></i></a>
-
-                    <a *ngIf="movie.imdbId" class="media-icons" href="https://imdb.com/title/{{movie.imdbId}}"
-                        target="_blank">
-                        <i matTooltip="Imdb" class="fa fa-imdb fa-2x grow"></i>
-                    </a>
-                    <a *ngIf="movie.externalIds.twitterId" class="media-icons"
-                        href="https://twitter.com/{{movie.externalIds.twitterId}}" target="_blank">
-                        <i matTooltip="Twitter" class="fa fa-twitter fa-2x grow"></i>
-                    </a>
-                    <a *ngIf="movie.externalIds.facebookId" class="media-icons"
-                        href="https://facebook.com/{{movie.externalIds.facebookId}}" target="_blank">
-                        <i matTooltip="Facebook" class="fa fa-facebook fa-2x grow"></i>
-                    </a> <a *ngIf="movie.externalIds.instagramId" class="media-icons"
-                        href="https://instagram.com/{{movie.externalIds.instagramId}}" target="_blank">
-                        <i matTooltip="Instagram" class="fa fa-instagram fa-2x grow"></i>
-                    </a>
-
-                    <span class="left-seperator" *ngIf="movie.available">
-                        <a *ngIf="movie.plexUrl" class="media-icons" href="{{movie.plexUrl}}" target="_blank">
-                            <i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
-                                class="fa fa-play-circle fa-2x grow"></i>
-                        </a>
-
-                        <a *ngIf="movie.embyUrl" class="media-icons" href="{{movie.embyUrl}}" target="_blank">
-                            <i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
-                                class="fa fa-play-circle fa-2x grow"></i>
-                        </a>
-
-                    </span>
-
                         
                 </div>
 

src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts

@@ -1,16 +1,16 @@
 import { Component, ViewEncapsulation } from "@angular/core";
-import { ImageService, SearchV2Service, RequestService, MessageService, RadarrService } from "../../services";
+import { ImageService, SearchV2Service, RequestService, MessageService, RadarrService } from "../../../services";
 import { ActivatedRoute } from "@angular/router";
 import { DomSanitizer } from "@angular/platform-browser";
-import { ISearchMovieResultV2 } from "../../interfaces/ISearchMovieResultV2";
+import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
 import { MatDialog } from "@angular/material";
-import { YoutubeTrailerComponent } from "../youtube-trailer.component";
+import { YoutubeTrailerComponent } from "../shared/youtube-trailer.component";
-import { AuthService } from "../../auth/auth.service";
+import { AuthService } from "../../../auth/auth.service";
-import { IMovieRequests, IRadarrProfile, IRadarrRootFolder } from "../../interfaces";
+import { IMovieRequests, IRadarrProfile, IRadarrRootFolder } from "../../../interfaces";
 
 @Component({
     templateUrl: "./movie-details.component.html",
-    styleUrls: ["../media-details.component.scss"],
+    styleUrls: ["../../media-details.component.scss"],
     encapsulation: ViewEncapsulation.None
 })
 export class MovieDetailsComponent {

src/Ombi/ClientApp/src/app/media-details/components/movie/panels/movie-information-panel.component.ts

@@ -1,9 +1,9 @@
 import { Component, ViewEncapsulation, Input } from "@angular/core";
-import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
+import { ISearchMovieResultV2 } from "../../../../interfaces/ISearchMovieResultV2";
 
 @Component({
     templateUrl: "./movie-information-panel.component.html",
-    styleUrls: ["../../media-details.component.scss"],
+    styleUrls: ["../../../media-details.component.scss"],
     selector: "movie-information-panel",
     encapsulation: ViewEncapsulation.None
 })

src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html

@@ -0,0 +1,43 @@
+<a *ngIf="homepage" class="media-icons" href="{{homepage}}" target="_blank">
+        <i matTooltip="Homepage" class="fa fa-home fa-2x grow"></i>
+    </a>
+
+    <a *ngIf="theMoviedbId" href="https://www.themoviedb.org/movie/theMoviedbId" class="media-icons"
+        target="_blank">
+        <i matTooltip="The Movie DB" class="fa fa-film fa-2x grow"></i>
+    </a>
+    <a *ngIf="tvdbId" href="https://www.thetvdb.org/tv/{{tvdbId}}" class="media-icons" target="_blank">
+        <i matTooltip="The TV DB" class="fa fa-tv fa-2x grow"></i>
+    </a>
+
+    <a *ngIf="hasTrailer" class="media-icons" (click)="openDialog()"><i
+            matTooltip="Trailer" class="fa fa-youtube-play fa-2x grow"></i></a>
+
+    <a *ngIf="imdbId" class="media-icons" href="https://imdb.com/title/{{imdbId}}"
+        target="_blank">
+        <i matTooltip="Imdb" class="fa fa-imdb fa-2x grow"></i>
+    </a>
+    <a *ngIf="twitter" class="media-icons"
+        href="https://twitter.com/{{twitter}}" target="_blank">
+        <i matTooltip="Twitter" class="fa fa-twitter fa-2x grow"></i>
+    </a>
+    <a *ngIf="facebook" class="media-icons"
+        href="https://facebook.com/{{facebook}}" target="_blank">
+        <i matTooltip="Facebook" class="fa fa-facebook fa-2x grow"></i>
+    </a> <a *ngIf="instagram" class="media-icons"
+        href="https://instagram.com/{{instagram}}" target="_blank">
+        <i matTooltip="Instagram" class="fa fa-instagram fa-2x grow"></i>
+    </a>
+
+    <span class="left-seperator" *ngIf="available">
+        <a *ngIf="plexUrl" class="media-icons" href="{{plexUrl}}" target="_blank">
+            <i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
+                class="fa fa-play-circle fa-2x grow"></i>
+        </a>
+
+        <a *ngIf="embyUrl" class="media-icons" href="{{embyUrl}}" target="_blank">
+            <i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
+                class="fa fa-play-circle fa-2x grow"></i>
+        </a>
+
+    </span>

src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.ts

@@ -0,0 +1,27 @@
+import { Component, Inject, Input, Output, EventEmitter } from "@angular/core";
+
+@Component({
+    selector: "social-icons",
+    templateUrl: "./social-icons.component.html",
+})
+export class SocialIconsComponent {
+    
+    @Input() homepage: string;
+    @Input() theMoviedbId: number;
+    @Input() hasTrailer: boolean;
+    @Input() imdbId: string;
+    @Input() tvdbId: string;
+    @Input() twitter: string;
+    @Input() facebook: string;
+    @Input() instagram: string;
+    @Input() available: boolean;
+    @Input() plexUrl: string;
+    @Input() embyUrl: string;
+    
+    @Output() openTrailer: EventEmitter<any>;
+    
+
+    public openDialog() {
+        this.openTrailer.emit;
+    }
+}

src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html

@@ -0,0 +1,20 @@
+
+    <section id="summary-wrapper">
+        <div class="full-screenshot enabled" [style.background-image]="background"></div>
+        <div class="shadow-base" [ngClass]="available ? 'available-bottom-border' : ''"></div>
+
+        <div class="container summary">
+            <div class="container">
+                <div class="row">
+                    <div
+                        class="col-xl-12 col-lg-11 offset-lg-1 col-md-8 offset-md-4 col-sm-7 offset-sm-5 col-6 offset-6">
+                        <h1>{{title}} <span *ngIf="releaseDate" class="grey-text align-middle">
+                            ({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span>
+                        </h1>
+
+                        <h5 class="tagline grey-text">{{tagline}}</h5>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>

src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.ts

@@ -0,0 +1,15 @@
+import { Component, Inject, Input } from "@angular/core";
+
+@Component({
+    selector: "top-banner",
+    templateUrl: "./top-banner.component.html",
+})
+export class TopBannerComponent {
+    
+    @Input() title: string;
+    @Input() releaseDate: Date;
+    @Input() tagline: string;
+    @Input() available: boolean;
+    @Input() background: any;
+    
+}

src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-information-panel.component.ts

@@ -1,9 +1,9 @@
 import { Component, ViewEncapsulation, Input } from "@angular/core";
-import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
+import { ISearchTvResultV2 } from "../../../../interfaces/ISearchTvResultV2";
 
 @Component({
     templateUrl: "./tv-information-panel.component.html",
-    styleUrls: ["../../media-details.component.scss"],
+    styleUrls: ["../../../media-details.component.scss"],
     selector: "tv-information-panel",
     encapsulation: ViewEncapsulation.None
 })

src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html

@@ -1,25 +1,7 @@
 <div *ngIf="tv">
 
-
+    <top-banner [background]="tv.background" [available]="tv.available" 
-    <section id="summary-wrapper">
+        [title]="tv.title" [releaseDate]="tv.firstAired" [tagline]="tv.certification"></top-banner>
-        <div class="full-screenshot enabled" [style.background-image]="tv.background"></div>
-        <div class="shadow-base" [ngClass]="tv.available ? 'available-bottom-border' : ''"></div>
-
-        <div class="container summary">
-            <div class="container">
-                <div class="row">
-                    <div
-                        class="col-xl-12 col-lg-11 offset-lg-1 col-md-8 offset-md-4 col-sm-7 offset-sm-5 col-6 offset-6">
-                        <h1>{{tv.title}} <span *ngIf="tv.firstAired"
-                                class="grey-text align-middle">({{tv.firstAired  | amLocal | amDateFormat: 'YYYY'}})</span>
-                        </h1>
-
-                        <h5 class="tagline grey-text">{{tv.certification}}</h5>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
 
     <section id="info-wrapper">
         <div class="small-middle-container">
@@ -37,23 +19,9 @@
                 <!--Next to poster-->
                 <div class="col-10 col-lg-3 col-xl-3 media-row">
 
-                    <a *ngIf="tv.homepage" class="media-icons" h href="{{tv.homepage}}" target="_blank">
+                        <social-icons [homepage]="tv.homepage" [tvdbId]="tv.id" [hasTrailer]="tv.trailer"
-                        <i matTooltip="Homepage" class="fa fa-home fa-2x grow"></i>
+                                (openTrailer)="openDialog()" [imdbId]="tv.imdbId" [available]="tv.available"
-                    </a>
+                                [plexUrl]="tv.plexUrl" [embyUrl]="tv.embyUrl"></social-icons>
-
-                    <a *ngIf="tv.id" href="https://www.thetvdb.org/tv/{{tv.id}}" class="media-icons" target="_blank">
-                        <i matTooltip="The TV DB" class="fa fa-tv fa-2x grow"></i>
-                    </a>
-
-                    <a *ngIf="tv.trailer" class="media-icons" (click)="openDialog()"><i matTooltip="Trailer"
-                            class="fa fa-youtube-play fa-2x grow"></i></a>
-
-                    <a *ngIf="tv.imdbId" class="media-icons" href="https://imdb.com/title/{{tv.imdbId}}"
-                        target="_blank">
-                        <i matTooltip="Imdb" class="fa fa-imdb fa-2x grow"></i>
-                    </a>
-
-
                
                 </div>
 
@@ -65,16 +33,6 @@
 
                     <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing mat-primary" [disabled]>
                         <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
-
-
-                    <span *ngIf="tv.available">
-                        <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
-                            href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
-                            translate}}</a>
-                        <a *ngIf="tv.embyUrl" mat-raised-button class="mat-accent btn-spacing" href="{{tv.embyUrl}}"
-                            target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
-                            translate}}</a>
-                    </span>
                 </div>
             </div>
 

src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.ts

@@ -1,15 +1,15 @@
 import { Component, ViewEncapsulation } from "@angular/core";
-import { ImageService, SearchV2Service, RequestService, MessageService } from "../../services";
+import { ImageService, SearchV2Service, RequestService, MessageService } from "../../../services";
 import { ActivatedRoute } from "@angular/router";
 import { DomSanitizer } from "@angular/platform-browser";
-import { ISearchTvResultV2 } from "../../interfaces/ISearchTvResultV2";
+import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
 import { MatDialog } from "@angular/material";
-import { YoutubeTrailerComponent } from "../youtube-trailer.component";
+import { YoutubeTrailerComponent } from "../shared/youtube-trailer.component";
-import { EpisodeRequestComponent } from "../../shared/episode-request/episode-request.component";
+import { EpisodeRequestComponent } from "../../../shared/episode-request/episode-request.component";
 
 @Component({
     templateUrl: "./tv-details.component.html",
-    styleUrls: ["../media-details.component.scss"],
+    styleUrls: ["../../media-details.component.scss"],
     encapsulation: ViewEncapsulation.None
 })
 export class TvDetailsComponent {

src/Ombi/ClientApp/src/app/media-details/media-details.module.ts

@@ -6,17 +6,19 @@ import { SearchService, RequestService, RadarrService } from "../services";
 import {CarouselModule} from 'primeng/carousel';
 
 import { SharedModule } from "../shared/shared.module";
-import { MovieDetailsComponent } from "./movie/movie-details.component";
+import { MovieDetailsComponent } from "./components/movie/movie-details.component";
-import { TvDetailsComponent } from "./tv/tv-details.component";
+import { TvDetailsComponent } from "./components/tv/tv-details.component";
 import { PipeModule } from "../pipes/pipe.module";
-import { YoutubeTrailerComponent } from "./youtube-trailer.component";
+import { YoutubeTrailerComponent } from "./components/shared/youtube-trailer.component";
-import { MovieInformationPanelComponent } from "./movie/panels/movie-information-panel.component";
+
-import { TvInformationPanelComponent } from "./tv/panels/tv-information-panel.component";
+import * as fromComponents from './components';
+import { AuthGuard } from "../auth/auth.guard";
+
 
 const routes: Routes = [
-    { path: "movie/:movieDbId", component: MovieDetailsComponent },
+    { path: "movie/:movieDbId", component: MovieDetailsComponent, canActivate: [AuthGuard] },
-    { path: "tv/:tvdbId/:search", component: TvDetailsComponent },
+    { path: "tv/:tvdbId/:search", component: TvDetailsComponent, canActivate: [AuthGuard] },
-    { path: "tv/:tvdbId", component: TvDetailsComponent },
+    { path: "tv/:tvdbId", component: TvDetailsComponent, canActivate: [AuthGuard] },
 ];
 @NgModule({
     imports: [
@@ -26,11 +28,7 @@ const routes: Routes = [
         CarouselModule,
     ],
     declarations: [
-        MovieDetailsComponent,
+        ...fromComponents.components
-        YoutubeTrailerComponent,
-        TvDetailsComponent,
-        MovieInformationPanelComponent,
-        TvInformationPanelComponent,
     ],
     exports: [
         RouterModule,