Merge pull request #4019 from Ombi-app/develop-test2

Redesign of the wizard Movie Details improvements and some CSS fixes
Ombi-app · Feb 1, 2021 · 91b65f3 · 91b65f3
2 parents 4cd72f5 + 230576a
commit 91b65f3
Show file tree

Hide file tree

Showing 70 changed files with 997 additions and 443 deletions.
diff --git a/src/Ombi/Attributes/WizardActionFilter.cs b/src/Ombi/Attributes/WizardActionFilter.cs
@@ -0,0 +1,26 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.Filters;
+using Microsoft.Extensions.DependencyInjection;
+using Ombi.Core.Settings;
+using Ombi.Settings.Settings.Models;
+using System.Threading.Tasks;
+
+namespace Ombi.Attributes
+{
+    public class WizardActionFilter : IAsyncActionFilter
+    {
+        public async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
+        {
+            var settingsService = context.HttpContext.RequestServices.GetRequiredService<ISettingsService<OmbiSettings>>();
+
+            var settings = await settingsService.GetSettingsAsync();
+
+            if (!settings.Wizard)
+            {
+                await next();
+                return;
+            }
+            context.Result = new UnauthorizedResult();
+        }
+    }
+}
diff --git a/src/Ombi/ClientApp/angular.json b/src/Ombi/ClientApp/angular.json
@@ -29,7 +29,10 @@
               "src/styles/_imports.scss",
               "node_modules/bootstrap/scss/bootstrap.scss",
               "node_modules/primeng/resources/themes/md-dark-deeppurple/theme.css",
-              "node_modules/font-awesome/scss/font-awesome.scss",
+              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
+              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
+              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
+              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
               "node_modules/primeng/resources/primeng.min.css",
               "node_modules/primeicons/primeicons.css",
               "node_modules/please-wait/src/please-wait.scss",

diff --git a/src/Ombi/ClientApp/package.json b/src/Ombi/ClientApp/package.json
@@ -24,6 +24,7 @@
     "@angularclass/hmr": "^2.1.3",
     "@aspnet/signalr": "^1.1.0",
     "@auth0/angular-jwt": "^2.1.0",
+    "@fortawesome/fontawesome-free": "^5.15.2",
     "@fullcalendar/core": "^4.2.0",
     "@fullcalendar/daygrid": "^4.4.0",
     "@fullcalendar/interaction": "^4.2.0",
@@ -39,7 +40,6 @@
     "chart.js": "2.9.4",
     "core-js": "^2.5.4",
     "eventemitter2": "^5.0.1",
-    "font-awesome": "^4.7.0",
     "fullcalendar": "^4.0.0-alpha.4",
     "jquery": "3.3.1",
     "lodash": "^4.17.20",

diff --git a/src/Ombi/ClientApp/src/app/app.component.html b/src/Ombi/ClientApp/src/app/app.component.html
@@ -45,7 +45,7 @@
                     <ul *ngIf="customizationSettings.recentlyAddedPage" class="nav navbar-nav">
                         <li id="RecentlyAdded" [routerLinkActive]="['active']">
                             <a [routerLink]="['/recentlyadded']">
-                                <i class="fa fa-check"></i> {{ 'NavigationBar.RecentlyAdded' | translate }}</a>
+                                <i class="fas fa-check"></i> {{ 'NavigationBar.RecentlyAdded' | translate }}</a>
                         </li>
                     </ul>
                 </div>

diff --git a/src/Ombi/ClientApp/src/app/custompage/custompage.component.html b/src/Ombi/ClientApp/src/app/custompage/custompage.component.html
@@ -5,7 +5,7 @@
             <div class="form-group">
                     <label for="Ip" class="control-label">Page Title
 
-                        <i *ngIf="form.get('title').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Title is required"></i>
+                        <i *ngIf="form.get('title').hasError('required')" class="fas fa-exclamation-circle error-text" pTooltip="Title is required"></i>
                     </label>
 
                         <input type="text" class="form-control form-control-custom " id="Ip" name="Ip" formControlName="title"  [ngClass]="{'form-error': form.get('title').hasError('required')}">
@@ -14,7 +14,7 @@
                 <div class="form-group">
                         <label for="Ip" class="control-label">Font Awesome Icon
 
-                            <i *ngIf="form.get('fontAwesomeIcon').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Font Awesome Icon is required"></i>
+                            <i *ngIf="form.get('fontAwesomeIcon').hasError('required')" class="fas fa-exclamation-circle error-text" pTooltip="Font Awesome Icon is required"></i>
                         </label>
 
                             <input type="text" class="form-control form-control-custom " id="fontAwesomeIcon" name="fontAwesomeIcon" formControlName="fontAwesomeIcon"  [ngClass]="{'form-error': form.get('fontAwesomeIcon').hasError('required')}">

diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.html b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.html
@@ -16,35 +16,35 @@
                     <span *ngIf="movie">
                         <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>
+                                class="fas 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>
+                                class="fas fa-play-circle fa-2x grow"></i>
                         </a>
                         <a *ngIf="movie.jellyfinUrl" class="media-icons" href="{{movie.jellyfinUrl}}" target="_blank">
                             <i matTooltip=" {{'Search.ViewOnJellyfin' | translate}}"
-                                class="fa fa-play-circle fa-2x grow"></i>
+                                class="fas fa-play-circle fa-2x grow"></i>
                         </a>
                     </span>
 
                     <span *ngIf="tv">
                         <a *ngIf="tv.plexUrl" class="media-icons" href="{{tv.plexUrl}}" target="_blank">
                             <i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
-                                class="fa fa-play-circle fa-2x grow"></i>
+                                class="fas fa-play-circle fa-2x grow"></i>
                         </a>
                         <a *ngIf="tv.embyUrl" class="media-icons" href="{{tv.embyUrl}}" target="_blank">
                             <i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
-                                class="fa fa-play-circle fa-2x grow"></i>
+                                class="fas fa-play-circle fa-2x grow"></i>
                         </a>
                         <a *ngIf="tv.jellyfinUrl" class="media-icons" href="{{tv.jellyfinUrl}}" target="_blank">
                             <i matTooltip=" {{'Search.ViewOnJellyfin' | translate}}"
-                                class="fa fa-play-circle fa-2x grow"></i>
+                                class="fas fa-play-circle fa-2x grow"></i>
                         </a>
                     </span>
 
                     <a class="media-icons" (click)="close()">
-                        <i class="fa fa-window-close fa-2x grow"></i>
+                        <i class="fas fa-window-close fa-2x grow"></i>
                     </a>
                 </div>
 
@@ -123,14 +123,14 @@ <h3><strong>{{data.title}}</strong></h3>
             <span *ngIf="!movie.available">
                 <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
                 <ng-template #requestedBtn>
-                    <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i class="fa fa-check"></i>
+                    <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i class="fas fa-check"></i>
                         {{ 'Common.Requested' | translate }}</button>
                 </ng-template>
                 <ng-template #notRequestedBtn>
                     <button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
-            <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
-              *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
-            <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
+            <i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i> <i
+              *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
+            <i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> {{
             'Common.Request' | translate }}</button>
                 </ng-template>
             </span>
@@ -140,27 +140,27 @@ <h3><strong>{{data.title}}</strong></h3>
 
             <div *ngIf="!tv.fullyAvailable" class="dropdown">
                 <button mat-raised-button class="btn-orange btn-spacing" type="button" (click)="request()">
-                    <i class="fa fa-plus"></i>
+                    <i class="fas fa-plus"></i>
                     {{ 'Common.Request' | translate }}
                     <span class="caret"></span>
                 </button>
             </div>
 
             <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent" [disabled]>
-                <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
+                <i class="fas fa-check"></i> {{'Common.Available' | translate }}</button>
               <button *ngIf="tv.partlyAvailable && !tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent"
                 [disabled]>
-                <i class="fa fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
+                <i class="fas fa-check"></i> {{'Common.PartiallyAvailable' | 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' |
+                    href="{{tv.plexUrl}}" target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnPlex' |
                     translate}}</a>
                 <a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
-                    target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
+                    target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnEmby' |
                     translate}}</a>
                 <a *ngIf="tv.jellyfinUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.jellyfinUrl}}"
-                    target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnJellyfin' |
+                    target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnJellyfin' |
                     translate}}</a>
             </span>
             <button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{

diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
@@ -6,7 +6,7 @@
             {{RequestType[result.type] | humanize}}
         </div>
         <div class="{{getStatusClass()}} top-right">
-            <span>{{getAvailbilityStatus()}}</span>
+            <span class="indicator"></span><span class="indicator-text">{{getAvailbilityStatus()}}</span>
         </div>
     </div>
         <img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"
@@ -22,7 +22,7 @@
                 <div class="col-12">
                     <button mat-raised-button class="btn-green full-width poster-request-btn" (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>
+                        <i *ngIf="loading" class="fas fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>

diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss
@@ -159,17 +159,27 @@ small {
 } 
 
 /* common */
-.top-right span {
+.top-right{
+  display:flex;
+}
+
+.top-right span.indicator, span.indicator-text {
   display: none;
   background-color: transparent;
   color: #fff;
   text-shadow: 0 1px 1px rgba(0,0,0,.2);
   text-align: right;
   font-size: 14px;
+}
+
+.top-right span.indicator{
+  padding-right: 0px;
+}
+.top-right span.indicator-text{
   padding-right: 1em;
 }
 
-.top-right span:before{
+.top-right span.indicator:before{
   content: '';
   width: 10px;
   height: 10px;
@@ -179,29 +189,29 @@ small {
   margin-right:5px;
 }
 
-.top-right.available span{
+.top-right.available span.indicator, span.indicator-text{
   display:block;
 }
 
-.top-right.available span:before{
+.top-right.available span.indicator:before{
   display: inline-block;
   background-color: #1DE9B6;
 }
 
-.top-right.approved span {
+.top-right.approved span.indicator, span.indicator-text {
   display: block;
 }
 
-.top-right.approved span:before{
+.top-right.approved span.indicator:before{
   display: inline-block;
   background-color: #ff5722;
 }
 
-.top-right.requested span {
+.top-right.requested span.indicator, span.indicator-text {
   display: block;
 }
 
-.top-right.requested span:before{
+.top-right.requested span.indicator:before{
   display: inline-block;
   background-color: #ffd740;
 }
@@ -212,4 +222,18 @@ small {
 
 a.poster-overlay:hover{
   text-decoration: none;
+}
+
+@media screen and (max-width: 400px){
+  .ellipsis{
+    display:none;
+  }
+
+  .top-right span.indicator-text{
+    display:none;
+  }
+
+  .top-right span.indicator{
+    padding-right:1em;
+  }
 }
diff --git a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss
@@ -9,4 +9,9 @@ h2{
     margin-top:40px;
     margin-left:40px;
     font-size: 24px;
+}
+
+::ng-deep .p-carousel-item{
+    min-height:290px;
+    max-height:290px;
 }
diff --git a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html
@@ -118,14 +118,14 @@ <h1>{{result.title}}</h1>
                                 *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
                             <ng-template #requestedBtn>
                                 <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i
-                                        class="fa fa-check"></i>
+                                        class="fas fa-check"></i>
                                     {{ 'Common.Requested' | translate }}</button>
                             </ng-template>
                             <ng-template #notRequestedBtn>
                                 <button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
-                                    <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-                                    <i *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
-                                    <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
+                                    <i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i>
+                                    <i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
+                                    <i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> {{
                         'Common.Request' | translate }}</button>
                             </ng-template>
                         </span>
@@ -135,29 +135,29 @@ <h1>{{result.title}}</h1>
 
                         <div *ngIf="!tv.fullyAvailable" class="dropdown">
                             <button mat-raised-button class="btn-orange btn-spacing" type="button" (click)="request()">
-                                <i class="fa fa-plus"></i>
+                                <i class="fas fa-plus"></i>
                                 {{ 'Common.Request' | translate }}
                                 <span class="caret"></span>
                             </button>
                         </div>
 
                         <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent"
                             [disabled]>
-                            <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
+                            <i class="fas fa-check"></i> {{'Common.Available' | translate }}</button>
                         <button *ngIf="tv.partlyAvailable && !tv.fullyAvailable" mat-raised-button class="btn-spacing"
                             color="accent" [disabled]>
-                            <i class="fa fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
+                            <i class="fas fa-check"></i> {{'Common.PartiallyAvailable' | 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' |
+                                    class="far fa-eye"></i> {{'Search.ViewOnPlex' |
                                 translate}}</a>
                             <a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
-                                target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
+                                target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnEmby' |
                                 translate}}</a>
                             <a *ngIf="tv.jellyfinUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.jellyfinUrl}}"
-                                target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnJellyfin' |
+                                target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnJellyfin' |
                                 translate}}</a>
                         </span>
                     </div>

diff --git a/src/Ombi/ClientApp/src/app/discover/components/search-results/search-results.component.html b/src/Ombi/ClientApp/src/app/discover/components/search-results/search-results.component.html
@@ -9,7 +9,7 @@
     </div>
     <div *ngIf="!discoverResults || discoverResults.length === 0">
         <div  class="row justify-content-md-center top-spacing loading-spinner">
-            <h1> {{'Discovery.NoSearch' | translate}} <i class="fa fa-frown-o" aria-hidden="true"></i></h1>
+            <h1> {{'Discovery.NoSearch' | translate}} <i class="far fa-frown" aria-hidden="true"></i></h1>
         </div>
     </div>
 </div>
diff --git a/src/Ombi/ClientApp/src/app/interfaces/IPlex.ts b/src/Ombi/ClientApp/src/app/interfaces/IPlex.ts
@@ -14,6 +14,8 @@ export interface IPlexOAuthViewModel {
 
 export interface IPlexOAuthAccessToken {
     accessToken: string;
+    success: boolean;
+    error: string;
 }
 
 export interface IPlexUser {

diff --git a/src/Ombi/ClientApp/src/app/issues/issueDetails.component.html b/src/Ombi/ClientApp/src/app/issues/issueDetails.component.html
@@ -61,7 +61,7 @@ <h3 class="panel-title">
                         <div *ngFor="let comment of comments" class="row msg_container" [ngClass]="{'base_sent': comment.adminComment, 'base_receive': !comment.adminComment}">
                             <div class="col-md-10 col-xs-10">
 
-                                <div class="messages msg_sent"> <i *ngIf="isAdmin" style="float:right;" class="fa fa-times" aria-hidden="true" (click)="deleteComment(comment.id)"></i>
+                                <div class="messages msg_sent"> <i *ngIf="isAdmin" style="float:right;" class="fas fa-times" aria-hidden="true" (click)="deleteComment(comment.id)"></i>
                                     <p>{{comment.comment}}</p>
                                     <time>{{comment.username}} • {{comment.date  | amLocal | amDateFormat: 'l LT'}}</time>
                                 </div>