feat(customization): ✨ Added possibility for custom favicons

2 years ago · 40af6593b6
parent 3dfb503ee7
commit 40af6593b6
6 changed files with 30 additions and 6 deletions
--- a/src/Ombi.Settings/Settings/Models/CustomizationSettings.cs
+++ b/src/Ombi.Settings/Settings/Models/CustomizationSettings.cs
@ -12,6 +12,7 @@
        public bool RecentlyAddedPage { get; set; }
        public bool UseCustomPage { get; set; }
        public bool HideAvailableFromDiscover { get; set; }
+        public string Favicon { get; set; }

        public string AddToUrl(string part)
        {
--- a/src/Ombi/ClientApp/src/app/app.component.ts
+++ b/src/Ombi/ClientApp/src/app/app.component.ts
@ -1,4 +1,4 @@
-import { OverlayContainer } from '@angular/cdk/overlay';
+import { OverlayContainer } from '@angular/cdk/overlay';

 import { Component, OnInit, HostBinding, Inject } from "@angular/core";
 import { NavigationStart, Router } from "@angular/router";
@ -34,6 +34,7 @@ export class AppComponent implements OnInit {
    public userName: string;
    public userEmail: string;
    public accessToken: string;
+    public favicon: string;

    private hubConnected: boolean;

@ -88,9 +89,15 @@ export class AppComponent implements OnInit {
        this.customizationFacade.settings$().subscribe(x => {
            this.customizationSettings = x;
            if (this.customizationSettings && this.customizationSettings.applicationName) {
-                this.applicationName = this.customizationSettings.applicationName;
-                this.document.getElementsByTagName('title')[0].innerText = this.applicationName;
+                this.applicationName = this.customizationSettings.applicationName;              
+                this.document.getElementsByTagName('title')[0].innerText = this.applicationName;              
            }
+
+            if (this.customizationSettings && this.customizationSettings.favicon) {                
+                this.favicon = this.customizationSettings.favicon;
+                this.document.getElementById('favicon').setAttribute('href', this.favicon);
+            }
+
            if (this.customizationSettings && this.customizationSettings.customCss) {
                var dom = this.document.getElementsByTagName('head')[0];
                var css = document.createElement("style");
--- a/src/Ombi/ClientApp/src/app/interfaces/ISettings.ts
+++ b/src/Ombi/ClientApp/src/app/interfaces/ISettings.ts
@ -1,4 +1,4 @@
-import { ISettings } from "./ICommon";
+import { ISettings } from "./ICommon";
 import { RequestLimitType } from ".";

 export interface IExternalSettings extends ISettings {
@ -193,6 +193,7 @@ export interface ICustomizationSettings extends ISettings {
  recentlyAddedPage: boolean;
  useCustomPage: boolean;
  hideAvailableFromDiscover: boolean;
+  favicon: string;
 }

 export interface IJobSettings {
--- a/src/Ombi/ClientApp/src/app/settings/customization/customization.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/customization/customization.component.html
@ -34,6 +34,15 @@
                </div>
            </div>
        </div>
+        <mat-hint>
+            The favicon url should be an externally accesible URL. Leave blank for default.
+        </mat-hint>
+        <div class="md-form-field">
+            <mat-form-field appearance="outline">
+                <mat-label>Custom Favicon</mat-label>
+                <input matInput type="url" [(ngModel)]="settings.favicon">
+            </mat-form-field>
+        </div>
        <div class="md-form-field">
            <mat-slide-toggle [(ngModel)]="settings.hideAvailableFromDiscover" matTooltip="Any media content that is available will now be hidden on the discover page, the user still can search for it">
                Hide Available Content On The Discover Page
--- a/src/Ombi/ClientApp/src/index.html
+++ b/src/Ombi/ClientApp/src/index.html
@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">

-<head>
+<head>  
    <script type='text/javascript'>window["baseHref"] = '/';</script>
    <base href="/" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-    <link rel="icon" type="image/png" href="images/favicon/favicon.ico"/>
+    <link id="favicon" rel="icon" type="image/png" href="images/favicon/favicon.ico"/>
    <link rel="apple-touch-icon" type="image/png" href="images/favicon/apple-touch-icon.png"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
--- a/src/Ombi/Views/Shared/_Layout.cshtml
+++ b/src/Ombi/Views/Shared/_Layout.cshtml
@ -23,6 +23,12 @@
        appName = "Ombi";
    }

+    var favicon = customization.Favicon;
+    if (string.IsNullOrEmpty(favicon))
+    {
+        favicon = "images/favicon/favicon.ico";
+    }
+

 }
 <!DOCTYPE html>