From a8f93e11740546e4b6f6580de82f613e58f52160 Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Fri, 1 May 2020 22:56:21 +0100
Subject: [PATCH] Added the base url to the emby settings and styles the page
 correctly #3505

---
 .../movie/movie-details.component.html        |  12 +-
 .../src/app/settings/emby/emby.component.html | 108 +++++++++---------
 .../src/app/settings/emby/emby.component.scss |   3 +
 .../src/app/settings/emby/emby.component.ts   |   5 +-
 src/Ombi/Controllers/V2/HubController.cs      |   2 +-
 5 files changed, 67 insertions(+), 63 deletions(-)
 create mode 100644 src/Ombi/ClientApp/src/app/settings/emby/emby.component.scss

diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
index bf19ec5c4..4d03e8ef7 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
@@ -16,7 +16,7 @@
                 <!--Next to poster-->
                 <div class="col-12 col-lg-3 col-xl-3 media-row">
 
-                    <social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos.results.length > 0" (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId" [instagram]="movie.externalIds.instagramId"
+                    <social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos?.results?.length > 0" (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId" [instagram]="movie.externalIds.instagramId"
                         [available]="movie.available" [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl"></social-icons>
 
                 </div>
@@ -117,9 +117,9 @@
                                         </mat-panel-title>
                                     </mat-expansion-panel-header>
 
-                                    <div class="row card-spacer" *ngIf="movie.recommendations.results.length > 0">
+                                    <div class="row card-spacer" *ngIf="movie.recommendations?.results?.length > 0">
 
-                                        <div class="col-md-2" *ngFor="let r of movie.recommendations.results">
+                                        <div class="col-md-2" *ngFor="let r of movie.recommendations?.results">
                                             <div class="sidebar affixable affix-top preview-poster">
                                                 <div class="poster">
                                                     <a [routerLink]="'/details/movie/'+r.id">
@@ -138,7 +138,7 @@
                                         </mat-panel-title>
                                     </mat-expansion-panel-header>
 
-                                    <div class="row card-spacer" *ngIf="movie.similar.results.length > 0">
+                                    <div class="row card-spacer" *ngIf="movie.similar?.results?.length > 0">
 
                                         <div class="col-md-2" *ngFor="let r of movie.similar.results">
                                             <div class="sidebar affixable affix-top preview-poster">
@@ -159,9 +159,9 @@
                                         </mat-panel-title>
                                     </mat-expansion-panel-header>
 
-                                    <div class="row card-spacer" *ngIf="movie.videos.results.length > 0">
+                                    <div class="row card-spacer" *ngIf="movie.videos?.results?.length > 0">
 
-                                        <div class="col-md-6" *ngFor="let video of movie.videos.results">
+                                        <div class="col-md-6" *ngFor="let video of movie.videos?.results">
                                             <iframe width="100%" height="315px" [src]="'https://www.youtube.com/embed/' + video.key | safe" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                         </div>
                                     </div>
diff --git a/src/Ombi/ClientApp/src/app/settings/emby/emby.component.html b/src/Ombi/ClientApp/src/app/settings/emby/emby.component.html
index 18d42bb47..902a18f36 100644
--- a/src/Ombi/ClientApp/src/app/settings/emby/emby.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/emby/emby.component.html
@@ -1,6 +1,7 @@
 
 <settings-menu></settings-menu>
-<div *ngIf="settings">
+
+<div *ngIf="settings" class="container">
     <fieldset>
         <legend>
             Emby/Jellyfin Configuration
@@ -8,13 +9,15 @@
 
         <div class="row">
             <div class="form-group col-md-3">
-                <div class="checkbox">
-                    <input type="checkbox" id="enable" [(ngModel)]="settings.enable" [checked]="settings.enable">
-                    <label for="enable">Enable</label>
+                <div>
+                    <mat-checkbox [(ngModel)]="settings.enable" [checked]="settings.enable">
+                        Enable</mat-checkbox>
                 </div>
+    
             </div>
-            <div class="col-md-2 col-md-push-7">
-                <button type="button" (click)="addTab()" class="btn btn-success-outline">Add Server</button>
+
+            <div class="col-md-2 offset-md-7">  
+                <button mat-raised-button type="button" (click)="addTab()" color="accent">Add Server</button>
             </div>
         </div>
 
@@ -22,85 +25,82 @@
             <div *ngFor="let server of settings.servers">
                 <ngb-tab [id]="server.id" [title]="server.name">
                     <ng-template ngbTabContent>
+              
                         <br />
                         <br />
-                        <div class="col-md-2" style="float: right;">
-                            <button type="button" (click)="removeServer(server)" class="btn btn-danger-outline">Remove Server</button>
-                        </div>
+                        <div class="row">
                         <br />
                         <br />
                         <div class="col-md-6">
-                            <div class="form-group">
-                                <label for="name" class="control-label">Server name</label>
-                                <div>
-                                    <input type="text" class="form-control form-control-custom " id="name" name="name" placeholder="Server" [(ngModel)]="server.name" value="{{server.name}}">
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label for="Ip" class="control-label">Hostname or IP</label>
-                                <div>
-                                    <input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" [(ngModel)]="server.ip" value="{{server.ip}}">
-                                </div>
-                            </div>
+                            <mat-form-field class="full">
+                                <input matInput placeholder="Server Name" [(ngModel)]="server.name" value="{{server.name}}">
+                            </mat-form-field>
+                           
+                            <mat-form-field class="full">
+                                <input matInput placeholder="Hostname or IP" [(ngModel)]="server.ip" value="{{server.ip}}">
+                            </mat-form-field>
+                   
 
-                            <div class="form-group">
-                                <label for="portNumber" class="control-label">Port</label>
-                                <div>
-                                    <input type="text" [(ngModel)]="server.port" class="form-control form-control-custom " id="portNumber" name="Port" placeholder="Port Number" value="{{server.port}}">
-                                </div>
-                            </div>
+                            <mat-form-field class="full">
+                                <input matInput placeholder="Port" [(ngModel)]="server.port" value="{{server.port}}">
+                            </mat-form-field>
 
-                            <div class="form-group">
-                                <div class="checkbox">
-                                    <input type="checkbox" id="ssl" [(ngModel)]="server.ssl" ng-checked="server.ssl">
-                                    <label for="ssl">SSL</label>
-                                </div>
-                            </div>
+                                <mat-checkbox [(ngModel)]="server.ssl" [checked]="server.ssl">
+                                    SSL</mat-checkbox>
+                   
 
-                            <div class="form-group">
-                                <label for="authToken" class="control-label">Emby Api Key</label>
-                                <div class="">
-                                    <input type="text" class="form-control-custom form-control" id="authToken" [(ngModel)]="server.apiKey" placeholder="Emby Api Key" value="{{server.apiKey}}">
-                                </div>
-                            </div>
+                                    <mat-form-field class="full">
+                                        <input matInput placeholder="Api Key" [(ngModel)]="server.apiKey" value="{{server.apiKey}}">
+                                    </mat-form-field>
+                                    
+                                    <mat-form-field class="full">
+                                        <input matInput placeholder="Base Url" [(ngModel)]="server.subDir" value="{{server.subDir}}">
+                                    </mat-form-field>
 
+                            <label> Externally Facing Hostname
+                                <i class="fa fa-question-circle"
+                                matTooltip="This will be the external address that users will navigate to when they press the 'View On Emby' button"></i>                                    
+                            </label>
+                            <mat-form-field class="full">
+                                <input matInput placeholder="e.g. https://jellyfin.server.com/" [(ngModel)]="server.serverHostname" value="{{server.serverHostname}}">
+                            </mat-form-field>
+                            <small>
+                                <span *ngIf="server.serverHostname">Current URL: "{{server.serverHostname}}/#!/{{settings.isJellyfin ? ("itemdetails"): ("item/item")}}.html?id=1"</span>
+                                <span *ngIf="!server.serverHostname">Current URL: "https://app.emby.media/#!/{{settings.isJellyfin ? ("itemdetails"): ("item/item")}}.html?id=1</span>
+                            </small>
+
+                            
                             <div class="form-group">
-                                <label for="authToken" class="control-label">Externally Facing Hostname
-                                    <i class="fa fa-question-circle"
-                                    pTooltip="This will be the external address that users will navigate to when they press the 'View On Emby' button"></i>                                    
-                                </label>
                                 <div>
-                                    <input type="text" class="form-control-custom form-control" id="authToken" [(ngModel)]="server.serverHostname" placeholder="e.g. https://jellyfin.server.com/" value="{{server.serverHostname}}">
-                                    <small><span *ngIf="server.serverHostname">Current URL: "{{server.serverHostname}}/#!/{{settings.isJellyfin ? ("itemdetails"): ("item/item")}}.html?id=1"</span>
-                                    <span *ngIf="!server.serverHostname">Current URL: "https://app.emby.media/#!/{{settings.isJellyfin ? ("itemdetails"): ("item/item")}}.html?id=1</span></small>
+                                    <button mat-raised-button id="testEmby" type="button" (click)="test(server)" color="primary">Test Connectivity <div id="spinner"></div></button>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <div>
-                                    <button id="testEmby" type="button" (click)="test(server)" class="btn btn-primary-outline">Test Connectivity <div id="spinner"></div></button>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <div>
-                                    <button id="discover" type="button" (click)="discoverServerInfo(server)" class="btn btn-primary-outline">Discover Server Information <div id="spinner"></div></button>
+                                    <button mat-raised-button id="discover" type="button" (click)="discoverServerInfo(server)" color="accent">Discover Server Information <div id="spinner"></div></button>
                                 </div>
                             </div>
                         </div>
+                        <div class="col-md-2 offset-md-4">
+                            <button mat-raised-button type="button" (click)="removeServer(server)" color="warn">Remove Server</button>
+                        </div>
+                    </div>
                     </ng-template>
                 </ngb-tab>
             </div>
         </ngb-tabset>
+        <
         <div class="col-md-1">
             <div class="form-group">
                 <div>
-                    <button [disabled]="!hasDiscovered" (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                    <button mat-raised-button [disabled]="!hasDiscovered" (click)="save()" type="submit" id="save" color="accent">Submit</button>
                 </div>
             </div>
         </div>
         <div class="col-md-1">
             <div class="form-group">
                 <div>
-                    <button (click)="runCacher()" type="button" id="save" class="btn btn-primary-outline">Manually Run Cacher</button>
+                    <button mat-raised-button (click)="runCacher()" type="button" id="save"  color="primary">Manually Run Cacher</button>
                 </div>
             </div>
         </div>
diff --git a/src/Ombi/ClientApp/src/app/settings/emby/emby.component.scss b/src/Ombi/ClientApp/src/app/settings/emby/emby.component.scss
new file mode 100644
index 000000000..b0859947c
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/settings/emby/emby.component.scss
@@ -0,0 +1,3 @@
+.full {
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/settings/emby/emby.component.ts b/src/Ombi/ClientApp/src/app/settings/emby/emby.component.ts
index bc1d2bbb2..816718f61 100644
--- a/src/Ombi/ClientApp/src/app/settings/emby/emby.component.ts
+++ b/src/Ombi/ClientApp/src/app/settings/emby/emby.component.ts
@@ -5,6 +5,7 @@ import { EmbyService, JobService, NotificationService, SettingsService, TesterSe
 
 @Component({
     templateUrl: "./emby.component.html",
+    styleUrls: ["./emby.component.scss"]
 })
 export class EmbyComponent implements OnInit {
 
@@ -33,13 +34,13 @@ export class EmbyComponent implements OnInit {
             this.settings.servers = [];
         }
         this.settings.servers.push({
-            name: "New*",
+            name: " ",
             id: Math.floor(Math.random() * (99999 - 0 + 1) + 1),
             apiKey: "",
             administratorId: "",
             enableEpisodeSearching: false,
             ip: "",
-            port: 0,
+            port: 8097,
             ssl: false,
             subDir: "",
         } as IEmbyServer);
diff --git a/src/Ombi/Controllers/V2/HubController.cs b/src/Ombi/Controllers/V2/HubController.cs
index 73804531a..3520595a6 100644
--- a/src/Ombi/Controllers/V2/HubController.cs
+++ b/src/Ombi/Controllers/V2/HubController.cs
@@ -32,7 +32,7 @@ namespace Ombi.Controllers.V2
             var model = new List<ConnectedUsersViewModel>();
             foreach (var user in users)
             {
-                var ombiUser = await allUsers.FirstOrDefaultAsync(x => x.Id.Equals(user.UserId, StringComparison.InvariantCultureIgnoreCase));
+                var ombiUser = await allUsers.FirstOrDefaultAsync(x => x.Id == user.UserId);
 
                 if (ombiUser == null)
                 {