Merge branch 'develop' of https://github.com/tidusjar/Ombi into develop

.azuredevops/pipelines/templates/variables.yml

@@ -27,4 +27,4 @@ variables:
     value: "4.0.$(Build.BuildId)"
 
   - name: isMain
-    value: $[or(contains(variables['Build.SourceBranch'], 'develop'), contains(variables['Build.SourceBranch'], 'main'))]
+    value: $[or(eq(variables['Build.SourceBranch'], 'refs/heads/develop'), eq(variables['Build.SourceBranch'], 'refs/heads/main'))]

README.md

@@ -58,7 +58,7 @@ Here are some of the features Ombi has:
 
 # Preview
 
-![Preview](https://i.imgur.com/Bz4fz3H.jpg)
+![Preview](https://i.imgur.com/kBXIqer.png)
 
 # Installation
 

src/Ombi.Core/Engine/TvSearchEngine.cs

@@ -59,7 +59,12 @@ namespace Ombi.Core.Engine
                     {
                         continue;
                     }
-                    retVal.Add(await ProcessResult(tvMazeSearch, false));
+                    var mappedResult = await ProcessResult(tvMazeSearch, false);
+                    if (mappedResult == null)
+                    {
+                        continue;
+                    }
+                    retVal.Add(mappedResult);
                 }
                 return retVal;
             }
@@ -194,7 +199,7 @@ namespace Ombi.Core.Engine
             foreach (var tvMazeSearch in items)
             {
                 var result = await ProcessResult(tvMazeSearch, includeImages);
-                if(settings.HideAvailableFromDiscover && result.Available)
+                if (result == null || settings.HideAvailableFromDiscover && result.Available)
                 {
                     continue;
                 }
@@ -211,15 +216,17 @@ namespace Ombi.Core.Engine
 
         private async Task<SearchTvShowViewModel> ProcessResult(SearchTvShowViewModel item, bool includeImages)
         {
+            if (item.Id == 0)
+            {
+                return null;
+            }
             item.TheTvDbId = item.Id.ToString();
             if (includeImages)
             {
-
+                if (item.TheTvDbId.HasValue())
-                    if (item.TheTvDbId.HasValue())
+                {
-                    {
+                    item.BackdropPath = await _imageService.GetTvBackground(item.TheTvDbId);
-                        item.BackdropPath = await _imageService.GetTvBackground(item.TheTvDbId);
+                }
-                    }
-
             }
 
             await RunSearchRules(item);

src/Ombi.Mapping/Profiles/TvProfile.cs

@@ -47,7 +47,7 @@ namespace Ombi.Mapping.Profiles
 
 
             CreateMap<TraktShow, SearchTvShowViewModel>()
-                .ForMember(dest => dest.Id, opts => opts.MapFrom(src => Convert.ToInt32(src.Ids.Tvdb.ToString())))
+                .ForMember(dest => dest.Id, opts => opts.MapFrom(src => src.Ids.Tvdb.HasValue ? Convert.ToInt32(src.Ids.Tvdb.ToString()) : 0))
                 .ForMember(dest => dest.FirstAired, opts => opts.MapFrom(src => src.FirstAired.HasValue ? src.FirstAired.Value.ToString("yyyy-MM-ddTHH:mm:ss") : string.Empty))
                 .ForMember(dest => dest.ImdbId, opts => opts.MapFrom(src => src.Ids.Imdb))
                 .ForMember(dest => dest.Network, opts => opts.MapFrom(src => src.Network))
@@ -57,9 +57,9 @@ namespace Ombi.Mapping.Profiles
                 .ForMember(dest => dest.Title, opts => opts.MapFrom(src => src.Title))
                 .ForMember(dest => dest.Status, opts => opts.MapFrom(src => TraktEnumHelper.GetDescription(src.Status)))
                 .ForMember(dest => dest.Trailer, 
-                    opts => opts.MapFrom(src => src.Trailer.ToString().ToHttpsUrl()))
+                    opts => opts.MapFrom(src => src.Trailer != null ? src.Trailer.ToString().ToHttpsUrl() : string.Empty))
                 .ForMember(dest => dest.Homepage, 
-                    opts => opts.MapFrom(src => src.Homepage.ToString().ToHttpsUrl()));
+                    opts => opts.MapFrom(src => src.Homepage != null ? src.Homepage.ToString().ToHttpsUrl() : string.Empty));
         }
     }
 }

src/Ombi.Store/Repository/Requests/TvRequestRepository.cs

@@ -22,21 +22,21 @@ namespace Ombi.Store.Repository.Requests
         {
             return await Db.TvRequests.Where(x => x.TvDbId == tvDbId)
                 .Include(x => x.ChildRequests)
-                .ThenInclude(x => x.RequestedUser)
+                    .ThenInclude(x => x.RequestedUser)
                 .Include(x => x.ChildRequests)
-                .ThenInclude(x => x.SeasonRequests)
+                    .ThenInclude(x => x.SeasonRequests)
-                .ThenInclude(x => x.Episodes)
+                    .ThenInclude(x => x.Episodes)
                 .FirstOrDefaultAsync();
         }
 
         public TvRequests GetRequest(int tvDbId)
         {
-            return Db.TvRequests.Where(x => x.TvDbId == tvDbId)
+            return Db.TvRequests.Where(x => x.TvDbId == tvDbId).AsSplitQuery()
                 .Include(x => x.ChildRequests)
-                .ThenInclude(x => x.RequestedUser)
+                    .ThenInclude(x => x.RequestedUser)
                 .Include(x => x.ChildRequests)
-                .ThenInclude(x => x.SeasonRequests)
+                    .ThenInclude(x => x.SeasonRequests)
-                .ThenInclude(x => x.Episodes)
+                    .ThenInclude(x => x.Episodes)
                 .FirstOrDefault();
         }
 

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

@@ -1,24 +1,32 @@
 <p-skeleton  *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
 
 <div *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
-    <div class="ribbon {{getStatusClass()}} ribbon-top-right"><span>
+    <div class="card-top-info">
-        {{getAvailbilityStatus()}}
+        <div class="top-left">
-    </span></div>
+            {{RequestType[result.type] | humanize}}
-    <a>
+        </div>
+        <div class="{{getStatusClass()}} top-right">
+            <span>{{getAvailbilityStatus()}}</span>
+        </div>
+    </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>
+            <a class="poster-overlay" [routerLink]="generateDetailsLink()">
-            <div class="small-text ellipsis">{{result.overview}}</div>
+                <div class="summary">
+                    <div class="title">{{result.title}}</div>
+                    <div class="small-text ellipsis">{{result.overview}}</div>
+                </div>
+            </a>
             <div class="row" *ngIf="!result.available && !result.approved">
                 <div class="col-12">
-                    <button mat-raised-button class="btn-green full-width" (click)="request($event)">
+                    <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>
                     </button>
                 </div>
             </div>
         </div>
-    </a>
 </div>

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

@@ -3,7 +3,6 @@ $card-background: #2b2b2b;
 
 #cardImage {
     border-radius: 5px;
-    height: 315px;
     object-fit:cover;
 }
 
@@ -61,17 +60,14 @@ small {
     font-size: 0.8rem;
 }
 
-@media (min-width: 2000px) {
+.ombi-card{
-    .ombi-card{
+  height:100%;
-      height:100%;
-    }
-
-    #cardImage {
-        height: 100%;
-        object-fit: cover;
-        display: block;
-    }
 }
+ #cardImage {
+  height: 100%;
+  object-fit: cover;
+  display: block;
+ }
 
 
 
@@ -80,79 +76,6 @@ small {
     max-width: 600px;
   }
 
-  /* common */
-  .ribbon {
-    width: 100px;
-    height: 96px;
-    overflow: hidden;
-    position: absolute;
-    text-align:right;
-  }
-  
-  .ribbon span {
-    position: absolute;
-    display: none;
-    background-color: transparent;
-    color: #fff;
-    text-shadow: 0 1px 1px rgba(0,0,0,.2);
-    text-transform: uppercase;
-    text-align: right;
-    font-size: 14px;
-  }
-
-  .ribbon.available span{
-    display:block;
-  }
-
-  .ribbon.available span:before{
-    content: '';
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    -moz-border-radius: 7.5px;
-    -webkit-border-radius: 7.5px;
-    border-radius: 7.5px;
-    background-color: #1DE9B6;
-  }
-
-  .ribbon.approved span {
-    display: block;
-  }
-
-  .ribbon.approved span:before{
-    content: '';
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    -moz-border-radius: 7.5px;
-    -webkit-border-radius: 7.5px;
-    border-radius: 7.5px;
-    background-color: #ff5722;
-  }
-
-  .ribbon.requested span {
-    display: block;
-  }
-
-  .ribbon.requested span:before{
-    content: '';
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    -moz-border-radius: 7.5px;
-    -webkit-border-radius: 7.5px;
-    border-radius: 7.5px;
-    background-color: #ffd740;
-  }
-
-
-  /* top right*/
-  .ribbon-top-right {
-    top: 13px;
-    right: 0px;
-    z-index: 999999;
-  }  
-
 .ombi-card {
   padding: 5px;
 }
@@ -202,28 +125,91 @@ small {
 .title {
     font-size: 18px;
   }
-  .top-left {
+
-    font-size: 14px;
+
-    position: absolute;
+.full-width {
-    text-transform: uppercase;
-    top: 0px;
-    width: 100%;
-    background-color: rgba(15,23,31,0.6);
-    padding-left: 1em;
-    padding-top: 1em;
-    padding-bottom: 0.5em;font-size: 14px;
-    position: absolute;
-    text-transform: uppercase;
-      
-  }
-  .full-width {
     width: 100%;
   }
 
-  .ellipsis {
+.ellipsis {
     display: -webkit-box;
     -webkit-line-clamp: 6;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.card-top-info{
+  position: absolute;
+  text-transform: uppercase;
+  top: 0px;
+  width: 100%;
+  background-color: rgba(15,23,31,0.6);
+  display:flex;
+  justify-content: space-between;
+  padding-top:0.6em;
+  padding-bottom:0.3em;
+  z-index:2;
+}
+
+.top-left {
+  font-size: 14px;
+  padding-left: 0.5em;
+  font-size: 14px; 
+} 
+
+/* common */
+.top-right span {
+  display: none;
+  background-color: transparent;
+  color: #fff;
+  text-shadow: 0 1px 1px rgba(0,0,0,.2);
+  text-align: right;
+  font-size: 14px;
+  padding-right: 1em;
+}
+
+.top-right span:before{
+  content: '';
+  width: 10px;
+  height: 10px;
+  -moz-border-radius: 7.5px;
+  -webkit-border-radius: 7.5px;
+  border-radius: 7.5px;
+  margin-right:5px;
+}
+
+.top-right.available span{
+  display:block;
+}
+
+.top-right.available span:before{
+  display: inline-block;
+  background-color: #1DE9B6;
+}
+
+.top-right.approved span {
+  display: block;
+}
+
+.top-right.approved span:before{
+  display: inline-block;
+  background-color: #ff5722;
+}
+
+.top-right.requested span {
+  display: block;
+}
+
+.top-right.requested span:before{
+  display: inline-block;
+  background-color: #ffd740;
+}
+
+::ng-deep a.poster-overlay{
+  color:#fff;
+}
+
+a.poster-overlay:hover{
+  text-decoration: none;
+}

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

@@ -34,29 +34,94 @@ export class CarouselListComponent implements OnInit {
     get mediaTypeStorageKey() {
         return "DiscoverOptions" + this.discoverType.toString();
     };
-    private amountToLoad = 14;
+    private amountToLoad = 17;
     private currentlyLoaded = 0;
 
     constructor(private searchService: SearchV2Service,
         private storageService: StorageService) {
         this.responsiveOptions = [
             {
-                breakpoint: '2559px',
+                breakpoint: '4000px',
+                numVisible: 17,
+                numScroll: 17
+            },
+            {
+                breakpoint: '3800px',
+                numVisible: 16,
+                numScroll: 16
+            },
+            {
+                breakpoint: '3600px',
+                numVisible: 15,
+                numScroll: 15
+            },
+            {
+                breakpoint: '3400px',
+                numVisible: 14,
+                numScroll: 14
+            },
+            {
+                breakpoint: '3200px',
+                numVisible: 13,
+                numScroll: 13
+            },
+            {
+                breakpoint: '3000px',
+                numVisible: 12,
+                numScroll: 12
+            },
+            {
+                breakpoint: '2800px',
+                numVisible: 11,
+                numScroll: 11
+            },
+            {
+                breakpoint: '2600px',
+                numVisible: 10,
+                numScroll: 10
+            },
+            {
+                breakpoint: '2400px',
+                numVisible: 9,
+                numScroll: 9
+            },
+            {
+                breakpoint: '2200px',
+                numVisible: 8,
+                numScroll: 8
+            },
+            {
+                breakpoint: '2000px',
                 numVisible: 7,
                 numScroll: 7
             },
             {
-                breakpoint: '1024px',
+                breakpoint: '1800px',
+                numVisible: 6,
+                numScroll: 6
+            },
+            {
+                breakpoint: '1650px',
+                numVisible: 5,
+                numScroll: 5
+            },
+            {
+                breakpoint: '1500px',
                 numVisible: 4,
                 numScroll: 4
             },
+            {
+                breakpoint: '1250px',
+                numVisible: 3,
+                numScroll: 3
+            },
             {
                 breakpoint: '768px',
                 numVisible: 2,
                 numScroll: 2
             },
             {
-                breakpoint: '560px',
+                breakpoint: '480px',
                 numVisible: 1,
                 numScroll: 1
             }

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

@@ -1,10 +1,12 @@
 <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
+    <div class="login-gradient-bar">
+    </div>
 </div>
 <div class="small-middle-container">
     <div *ngIf="form && customizationSettings && authenticationSettings">
 
         <mat-card class="mat-elevation-z8 top-margin login-card">
-            <img mat-card-image *ngIf="!customizationSettings.logo" src="{{baseUrl}}/images/logo.png">
+            <H1 *ngIf="!customizationSettings.logo" class="login_logo">OMBI</H1>
             <img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo">
             <mat-card-content id="login-box" *ngIf="!authenticationSettings.enableOAuth || loginWithOmbi">
                 <form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">

src/Ombi/ClientApp/src/app/login/login.component.scss

@@ -1,19 +1,8 @@
-$primary-colour: #df691a;
+@import "~styles/variables.scss";
-$primary-colour-outline: #ff761b;
-$bg-colour: #333333;
-$bg-colour-disabled: #252424;
-$form-color: #4e5d6c;
-$form-color-lighter: #637689;
-$info-colour: #5bc0de;
-$warning-colour: #f0ad4e;
-$danger-colour: #d9534f;
-$success-colour: #5cb85c;
-$placeholder-colour: #3b3b3b;
 
 body, html {
     height: 100% !important;
     background-repeat: no-repeat !important;
-    background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;
 }
 
 img.center {
@@ -22,6 +11,13 @@ img.center {
     max-width: 100%;
 }
 
+.login-gradient-bar{
+    background: linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.6) 20.0%, rgba(0,0,0,0.6) 80.0%, transparent 60%),transparent;
+    height:100%;
+    width:100%;
+    position: absolute;
+}
+
 div.bg {
     background-position: center center;
     background-repeat: no-repeat;
@@ -57,24 +53,6 @@ div.bg {
     user-select: none;
     cursor: default;
 }
-/*
- * Card component
- */
-.card {
-    /*background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;*/
-    background-color: $bg-colour;
-    /* just in case there no content*/
-    padding: 20px 25px 30px;
-    margin: 0 auto 25px;
-    margin-top: 50px;
-    /* shadows and rounded borders */
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    /*-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-        -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);*/
-}
 
 .profile-img-custom {
     width: 100%;
@@ -93,18 +71,6 @@ div.bg {
 /*
  * Form styles
  */
-.profile-name-card {
-    font-size: 16px;
-    font-weight: bold;
-    text-align: center;
-    margin: 10px 0 0;
-    min-height: 1em;
-}
-
-.form-control {
-    color: black;
-    background-color: white !important;
-}
 
 .reauth-email {
     display: block;
@@ -178,32 +144,6 @@ div.bg {
     color: rgb(12, 97, 33);
 }
 
-
-// Placeholders
-
-::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-    color: $placeholder-colour;
-}
-
-:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-    color: $placeholder-colour;
-    opacity: 1;
-}
-
-::-moz-placeholder { /* Mozilla Firefox 19+ */
-    color: $placeholder-colour;
-    opacity: 1;
-}
-
-:-ms-input-placeholder { /* Internet Explorer 10-11 */
-    color: $placeholder-colour;
-}
-
-::-ms-input-placeholder { /* Microsoft Edge */
-    color: $placeholder-colour;
-}
-
-
 .full-width {
     width: 100%;
 }
@@ -212,23 +152,63 @@ div.bg {
     .small-middle-container{
         margin: auto;
         overflow: auto;
+        width:auto;
     }
 }
 @media (min-width: 571px) {
     .small-middle-container{
         margin: auto;
-        width: 25%;
         overflow: auto;
     }
 }
 
-.top-margin {
-    margin-top:10%;
-}
-
 .login-buttons {
     text-align: center;
 }
-.login-card {
+
-    background: #424242;
+::ng-deep button#sign-in{
+    color: $ombi-active-text;
 }
+
+::ng-deep .login-card .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{
+    color: $ombi-active;
+}
+
+::ng-deep .login-card .mat-form-field.mat-focused .mat-form-field-label{
+    color: $ombi-active;
+}
+
+::ng-deep .login-card .mat-input-element{
+    caret-color: $ombi-active;
+}
+
+.small-middle-container{
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    height:100vh;
+}
+
+.login-card.mat-card{
+    background-color: rgba(0,0,0,0.6);
+    padding:60px 40px;
+}
+
+.login-card H1.login_logo{
+    display:flex;
+    font-family: Montserrat,sans-serif;
+    text-transform: uppercase;
+    color:$ombi-active;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 10em;
+    width:100%;
+    margin-bottom:70px;
+}
+
+@media (max-width: 600px){
+    .login-card H1.login_logo{
+        font-size:20vw;
+    }
+}

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

@@ -94,7 +94,7 @@ export class LoginComponent implements OnDestroy, OnInit {
         this.settingsService.getClientId().subscribe(x => this.clientId = x);
         this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
         this.images.getRandomBackground().subscribe(x => {
-            this.background = this.sanitizer.bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%),url(" + x.url + ")");
+            this.background = this.sanitizer.bypassSecurityTrustStyle("url(" + x.url + ")");
         });
         this.timer = setInterval(() => {
             this.cycleBackground();
@@ -206,7 +206,7 @@ export class LoginComponent implements OnDestroy, OnInit {
         });
         this.images.getRandomBackground().subscribe(x => {
             this.background = this.sanitizer
-                .bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%), url(" + x.url + ")");
+                .bypassSecurityTrustStyle("url(" + x.url + ")");
         });
     }
 }

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

@@ -5,7 +5,12 @@
 <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>
+    <div class="social-icons-container">
 
+        <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" [jellyfinUrl]="movie.jellyfinUrl"></social-icons>
+
+    </div>
     <section id="info-wrapper">
         <div class="small-middle-container">
 
@@ -14,56 +19,63 @@
                 <media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
 
                 <!--Next to poster-->
-                <div class="col-12 col-lg-2 col-xl-3 media-row">
+                <div class="col-12 col-lg-8 col-xl-8 media-row">
-
+                    <span *ngIf="movie.available">
-                    <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"
+                        <a *ngIf="movie.plexUrl" href="{{movie.plexUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn plex">
-                        [instagram]="movie.externalIds.instagramId" [available]="movie.available" [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl" [jellyfinUrl]="movie.jellyfinUrl"></social-icons>
+                            {{'Search.ViewOnPlex' | translate}} 
-
+                            <i class="fa fa-play-circle fa-2x"></i>
-                </div>
+                        </a>
-
+                        <a *ngIf="movie.embyUrl" href="{{movie.embyUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn emby">
-                <div class="col-12 col-lg-5 col-xl-5 media-row">
+                            {{'Search.ViewOnEmby' | translate}} 
-
+                            <i class="fa fa-play-circle fa-2x"></i>
-                    <button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
+                        </a>
-            'Common.Available' | translate }}</button>
+                        <a *ngIf="movie.jellyfinUrl" href="{{movie.jellyfinUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn jellyfinUrl">
-                    <span *ngIf="!movie.available">
+                            {{'Search.ViewOnJellyfin' | translate}} 
-            <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
+                            <i class="fa fa-play-circle fa-2x"></i>
-
+                        </a>
-                    <ng-template #requestedBtn>
-                        <button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]><i class="fa 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> {{
-                'Common.Request' | translate }}</button>
-                    </ng-template>
                     </span>
-                    <span *ngIf="isAdmin && hasRequest">
+                        <button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{
-            <button *ngIf="!movie.approved" (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
+                            'Common.Available' | translate }}</button>
-              <i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
+                        <span *ngIf="!movie.available">
-            </button>
+                            <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
-            <button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
+                            <ng-template #requestedBtn>
-              color="accent">
+                                <button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]>
-              <i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
+                                    <i class="fa fa-check"></i>
-            </button>
+                                    {{ '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> 
+                                    {{'Common.Request' | translate }}
+                                </button>
+                            </ng-template>
+                        </span>
+                        <span *ngIf="isAdmin && hasRequest">
+                            <button *ngIf="!movie.approved" (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
+                            <i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
+                            </button>
+                            <button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
+                            color="accent">
+                            <i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
+                            </button>
 
-            <button *ngIf="movieRequest && !movieRequest.denied && !movie.available" mat-raised-button class="btn-spacing" color="warn"
+                            <button *ngIf="movieRequest && !movieRequest.denied && !movie.available" mat-raised-button class="btn-spacing" color="warn" (click)="deny()">
-              (click)="deny()">
+                                <i class="fa fa-times"></i> {{'Requests.Deny' | translate }}
-              <i class="fa fa-times"></i> {{
+                            </button>
-                    'Requests.Deny' | translate }}</button>
+                            <button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing" color="warn">
-            <button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason"
+                                <i class="fa fa-times"></i> {{'MediaDetails.Denied' | translate }}
-              mat-raised-button class="btn-spacing" color="warn">
+                            </button>
-              <i class="fa fa-times"></i> {{
+                        </span>
-                            'MediaDetails.Denied' | translate }}</button>
-          </span>
-
-                    <button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
-            <i class="fa fa-exclamation"></i> {{
-                'Requests.ReportIssue' | translate }}</button>
-                <button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing"><i class="fa fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}</button>
 
+                        <button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
+                            <i class="fa fa-exclamation"></i> {{'Requests.ReportIssue' | translate }}
+                        </button>
+                        <button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing">
+                            <i class="fa fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}
+                        </button>
                 </div>
 
                 <!-- Setting/Configuration admin area -->
@@ -136,7 +148,6 @@
                                                     </a>
                                                 </div>
                                             </div>
-
                                         </div>
                                     </div>
                                 </mat-expansion-panel>
@@ -157,7 +168,6 @@
                                                     </a>
                                                 </div>
                                             </div>
-
                                         </div>
                                     </div>
                                 </mat-expansion-panel>
@@ -178,29 +188,10 @@
                             </mat-accordion>
                         </div>
                     </div>
-
-
-
                 </div>
             </div>
-
-
-
-
         </div>
-
-
-
-
         <div class="bottom-page-gap">
         </div>
     </section>
-
-
-
-
-
-
-
-
 </div>

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

@@ -98,11 +98,11 @@
     </div>
 
     <hr />
-    <div *ngIf="movie.genres">
+    <div class="genre-button-container" *ngIf="movie.genres">
         <strong>{{'MediaDetails.Genres' | translate }}:</strong>
         <div>
             <mat-chip-list>
-                <mat-chip color="accent" selected *ngFor="let genre of movie.genres">
+                <mat-chip selected *ngFor="let genre of movie.genres">
                     {{genre.name}}
                 </mat-chip>
             </mat-chip-list>
@@ -110,10 +110,10 @@
     </div>
 
     <hr />
-    <div *ngIf="movie?.keywords?.keywordsValue?.length > 0">
+    <div class="keyword-button-container" *ngIf="movie?.keywords?.keywordsValue?.length > 0">
         <strong>{{'MediaDetails.Keywords' | translate }}:</strong>
         <mat-chip-list>
-            <mat-chip color="accent" selected *ngFor="let keyword of movie.keywords.keywordsValue">
+            <mat-chip selected *ngFor="let keyword of movie.keywords.keywordsValue">
                 {{keyword.name}}
             </mat-chip>
         </mat-chip-list>

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

@@ -1,7 +1,7 @@
-<a *ngIf="homepage" class="media-icons" href="{{homepage}}" target="_blank">
+<div class="social-icons-container-inner">
+    <a *ngIf="homepage" class="media-icons" href="{{homepage}}" target="_blank">
         <i matTooltip="Homepage" class="fa fa-home fa-2x grow-social"></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-social"></i>
@@ -10,42 +10,18 @@
         <i matTooltip="The TV DB" class="fa fa-tv fa-2x grow-social"></i>
     </a>
 
-    <a *ngIf="hasTrailer" class="media-icons youtube" (click)="openDialog()"><i
+    <a *ngIf="hasTrailer" class="media-icons youtube" (click)="openDialog()">
-            matTooltip="Trailer" class="fa fa-youtube-play fa-2x grow-social"></i></a>
+        <i matTooltip="Trailer" class="fa fa-youtube-play fa-2x grow-social"></i>
-
+    </a>
-    <a *ngIf="imdbId" class="media-icons imdb" [href]="doNotAppend ? imdbid : 'https://imdb.com/title/' + imdbId"
+    <a *ngIf="imdbId" class="media-icons imdb" [href]="doNotAppend ? imdbid : 'https://imdb.com/title/' + imdbId" target="_blank">
-        target="_blank">
         <i matTooltip="Imdb" class="fa fa-imdb fa-2x grow-social"></i>
     </a>
-    <a *ngIf="twitter" class="media-icons"
+    <a *ngIf="twitter" class="media-icons" [href]="doNotAppend ? twitter : 'https://twitter.com/' + twitter" target="_blank">
-        [href]="doNotAppend ? twitter : 'https://twitter.com/' + twitter" target="_blank">
         <i matTooltip="Twitter" class="fa fa-twitter fa-2x grow-social"></i>
     </a>
-    <a *ngIf="facebook" class="media-icons"
+    <a *ngIf="facebook" class="media-icons" [href]="doNotAppend ? facebook : 'https://facebook.com/' + facebook" target="_blank">
-        [href]="doNotAppend ? facebook : 'https://facebook.com/' + facebook" target="_blank">
         <i matTooltip="Facebook" class="fa fa-facebook fa-2x grow-social"></i>
-    </a> <a *ngIf="instagram" class="media-icons"
+    </a> <a *ngIf="instagram" class="media-icons" [href]="doNotAppend ? instagram : 'https://instagram.com/' + instagram" target="_blank">
-        [href]="doNotAppend ? instagram : 'https://instagram.com/' + instagram" target="_blank">
         <i matTooltip="Instagram" class="fa fa-instagram fa-2x grow-social"></i>
     </a>
-
+</div>
-    <span class="left-seperator" *ngIf="available">
-
-        <a *ngIf="plexUrl" href="{{plexUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn plex">
-            {{'Search.ViewOnPlex' | translate}} 
-            <i
-            class="fa fa-play-circle fa-2x"></i>
-        </a>
-
-        <a *ngIf="embyUrl" href="{{embyUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn emby">
-            {{'Search.ViewOnEmby' | translate}} 
-            <i
-            class="fa fa-play-circle fa-2x"></i>
-        </a>
-
-        <a *ngIf="jellyfinUrl" href="{{jellyfinUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn jellyfinUrl">
-            {{'Search.ViewOnJellyfin' | translate}} 
-            <i
-            class="fa fa-play-circle fa-2x"></i>
-        </a>
-    </span>

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

@@ -1,19 +1,6 @@
+@import "~styles/variables.scss";
 
-.viewon-btn {
+a.media-icons:hover{
-    background-color: transparent;
+    color:$ombi-active;
-    margin-top: 7px;
-    text-decoration: none;
 }
 
-.viewon-btn.plex {
-    border: 1px solid #ffd740;
-    color: #ffd740;
-}
-.viewon-btn.emby {
-    border: 1px solid #52b54a;
-    color: #52b54a;
-}
-.viewon-btn.jellyfin {
-    border: 1px solid #00a4dc;
-    color: #00a4dc;
-}

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

@@ -4,15 +4,15 @@
         <div class="shadow-base" [ngClass]="available ? 'available-bottom-border' : ''"></div>
 
         <div class="container summary">
-            <div class="container">
+            <div class="container title-top-banner">
                 <div class="row">
                     <div
-                        class="col-xl-11 col-lg-8 offset-xl-1 offset-lg-4 col-md-8 col-sm-7 col-12 offset-md-4 offset-sm-5 mobile-top-text">
+                        class="mobile-top-text">
-                        <h1 class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text align-middle">
+                        <h1 class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text">
                             ({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span>
                         </h1>
 
-                        <h2 class="tagline grey-text">{{tagline}}</h2>
+                        <h2 class="tagline">{{tagline}}</h2>
                     </div>
                 </div>
             </div>

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

@@ -1,3 +1,14 @@
 .large-text {
     font: 500 40px/30px Roboto, "Helvetica Neue", sans-serif;
-}
+}
+
+@media (min-width:571px){
+    .title-top-banner{
+    padding-left:330px;
+    margin-left:0px;
+}}
+
+@media (max-width:571px){
+    .title-top-banner{
+    text-align:center;
+}}

src/Ombi/ClientApp/src/app/media-details/media-details.component.scss

@@ -43,7 +43,7 @@
     background-size: cover;
     background-position: 50% 10%;
     transition: all .5s;
-    height: 450px;
+    height: 300px;
     color: #fff;
     position: relative;
 }
@@ -90,17 +90,6 @@
     right: 0;
 }
 
-#summary-wrapper,
-.summary-wrapper {
-    background-color: #000;
-    background-size: cover;
-    background-position: 50% 10%;
-    transition: all .5s;
-    height: 550px;
-    color: #fff;
-    position: relative;
-}
-
 .grey-text {
     color: #999;
 }
@@ -182,8 +171,8 @@
 }
 
 .media-icons {
-    color: white !important;
+    color: #FFF;
-    padding: 1%;
+    padding: 5px;
 }
 
 .media-row {
@@ -232,4 +221,37 @@
     border-radius: 1em;
     margin-right: 10px;
     margin-top: 5px;
-}
+}
+
+.social-icons-container{
+    position:absolute;
+    top:84px;
+    right:0px;
+    width:100%;
+    background-color:rgba(15,23,31,.6);
+}
+
+.social-icons-container-inner{
+    text-align:right;
+    display:flex;
+    justify-content: flex-end;
+    padding-right:2em;
+}
+
+.viewon-btn {
+    background-color: transparent;
+    text-decoration: none;
+}
+
+.viewon-btn.plex {
+    border: 1px solid #E5A00D;
+    color: #E5A00D;
+}
+.viewon-btn.emby {
+    border: 1px solid #52b54a;
+    color: #52b54a;
+}
+.viewon-btn.jellyfin {
+    border: 1px solid #00a4dc;
+    color: #00a4dc;
+}

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss

@@ -118,7 +118,7 @@
         align-items:center;
         justify-content: center;
         font-weight: 700;
-        font-size:24px;
+        font-size:36px;
         padding:40px 20px;
         height:auto;
     }
@@ -131,12 +131,12 @@
     .mat-list-item{
         color:#FFF;
         font-family:Roboto, sans-serif;
-        font-size: 14px;
+        font-size: 16px;
         font-weight: 400;
         padding:10px 20px;
         height:auto;
         width:20rem;
-        margin-bottom:1rem;
+        margin-bottom:0.5rem;
     }
     
     .active-list-item{

src/Ombi/ClientApp/src/app/requests-list/components/albums-grid/albums-grid.component.html

@@ -28,7 +28,7 @@
         </div>
     </div>
     <!-- </div> -->
-    <table mat-table [dataSource]="dataSource" class="table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
+    <table mat-table [dataSource]="dataSource" class="requests table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
 
 
 

src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html

@@ -28,7 +28,7 @@
         </div>
     </div>
     <!-- </div> -->
-    <table mat-table [dataSource]="dataSource" class="table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
+    <table mat-table [dataSource]="dataSource" class="requests table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
 
 
         <ng-container matColumnDef="title">

src/Ombi/ClientApp/src/app/requests-list/components/requests-list.component.scss

@@ -21,10 +21,6 @@
 	float:right;
 }
 
-::ng-deep .mat-form-field-label{
-	font-size: 1.2em;
-}
-
 ::ng-deep .mat-form-field-infix {
 	width: 10em;
 	margin-top:1em;
@@ -62,4 +58,8 @@
 	.justify-content-md-center {
     	justify-content: center !important;
 	}
+}
+
+::ng-deep table.requests button{
+	margin:5px;
 }

src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html

@@ -28,7 +28,7 @@
         </div>
     </div>
 
-    <table mat-table [dataSource]="dataSource" class="table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
+    <table mat-table [dataSource]="dataSource" class="requests table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
 
 
         <ng-container matColumnDef="series">

src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.html

@@ -20,7 +20,7 @@
             <td>{{RequestType[v.type] | humanize}}</td>
             <td class="vcenter">{{v.retryCount}}</td>
             <td class="vcenter"> <i [pTooltip]="v.error" class="fa fa-info-circle"></i></td>
-            <td class="vcenter"><button class="btn btn-sm btn-danger-outline" (click)="remove(v)">Remove</button></td>
+            <td class="vcenter"><button type="button" class="mat-focus-indicator mat-flat-button mat-button-base mat-warn" (click)="remove(v)">Remove</button></td>
         </tr>
     </tbody>
 </table>

src/Ombi/ClientApp/src/app/settings/logs/logs.component.scss

@@ -9,5 +9,10 @@
 }
 
 ::ng-deep .dark .code-block {
-	color:#FFF !important;
+	color:#FFF;
+}
+
+::ng-deep .code-block {
+	color:#FFF;
+	font-family: Menlo, Monaco, "Courier New", Courier, monospace;
 }

src/Ombi/ClientApp/src/app/usermanagement/usermanagement.component.scss

@@ -22,10 +22,6 @@
 	float:right;
 }
 
-::ng-deep .mat-form-field-label{
-	font-size: 1.2em;
-}
-
 ::ng-deep .mat-form-field-infix {
 	width: 10em;
 	margin-top:1em;

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

@@ -20,4 +20,83 @@
             accent: $ombi-dark-app-accent,
         )
     ), $ombi-dark-app-accent);
+
     @include angular-material-theme($theme);
+
+    .mat-table {
+        background: $ombi-background-accent;
+    }
+
+    .mat-paginator {
+        background: $ombi-background-accent;
+    }
+
+    .mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary{
+        background-color: $ombi-background-accent;
+    }
+
+    .mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent{
+        color: $ombi-active-text;
+    }
+
+    .mat-menu-panel{
+        background: $ombi-background-accent;
+    }
+
+    .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{
+        color: $ombi-active;
+    }
+    
+    .mat-form-field.mat-focused .mat-form-field-label{
+        color: $ombi-active;
+    }
+    
+    .mat-input-element{
+        caret-color: $ombi-active;
+    }
+
+    .mat-card {
+        background: $ombi-background-accent;
+    }
+
+    .mat-expansion-panel{
+        background: $ombi-background-accent;
+    }
+
+    .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent{
+        color:$ombi-active-text;
+    }
+
+    .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary{
+        background-color: $ombi-background-primary;
+    }
+
+    .mat-bottom-sheet-container{
+        background: $ombi-background-accent;
+    }
+
+    .grow:hover{
+        color: $ombi-active;
+    }
+
+    .mat-accent.grow:hover{
+        color: $ombi-active-text;
+    }
+
+    .mat-dialog-container{
+        background: $ombi-background-accent;
+    }
+
+    .mat-autocomplete-panel{
+        background: $ombi-background-accent;
+    }
+
+    .mat-form-field.mat-focused .mat-form-field-ripple{
+        background-color: $ombi-active;
+    }
+
+    @media (hover: none){
+        .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover{
+            background: $ombi-background-accent;
+        }
+    }

src/Ombi/ClientApp/src/styles/material-overrides.scss

@@ -22,16 +22,36 @@ td.mat-cell {
 }
 
 // lighter bg
-.mat-expansion-panel,
+::ng-deep .mat-expansion-panel,
 .mat-card,
 .mat-dialog-container,
 .mat-menu-content,
 .mat-table,
 .mat-paginator {
-    background: $ombi-background-accent !important;
+    background: $ombi-background-accent;
 }
 
 // Dark bg
 .mat-sidenav-container {
     background: $ombi-background-primary;
-}
+}
+
+//Login Screen CSS
+
+.login-buttons button{
+    margin:1em;
+    &#sign-in{
+        background-color: $ombi-active;
+        color: $ombi-active-text;
+    }
+    &#sign-plex{
+        background-color: #282A2D;
+        color: #E5A00D;
+    }
+}
+
+::ng-deep #main-container .mat-table {
+    background: $ombi-background-accent;
+}
+
+// General Buttons CSS

src/Ombi/ClientApp/src/styles/shared.scss

@@ -86,7 +86,6 @@ body {
 
     .grow:hover {
         transform: scale(1.1);
-        color: black;
     }
 }
 

src/Ombi/ClientApp/src/styles/variables.scss

@@ -43,4 +43,5 @@ $warn-dark: mat-color($ombi-dark-app-warn);
 $ombi-active: mat-color($ombi-dark-app-accent);
 $ombi-background-accent: mat-color($ombi-dark-app-primary);
 $ombi-background-primary: #0f171f;
-$ombi-background-primary-accent: #35465c;
+$ombi-background-primary-accent: #35465c;
+$ombi-active-text:#1b242f;