Update my Repo

Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html

@@ -101,7 +101,7 @@
         } else if (element.type == "slider") {
           html += getSlider(element);
         } else if (element.type == "googleFonts") {
-          html += getFonts(fonts);
+          html += getFonts();
         }
       });
     });
@@ -244,6 +244,26 @@
     "</select></div>";
     return html;
   }
+  var savedGoogleFont;
+
+  function getFonts(saved) {
+    var html = "";
+
+    var name = "Change Font";
+    var css =
+    "html {font-family:  '$',sans-serif ;  } body,h1,h2,h3 { font-family: '$' ,sans-serif;}";
+    var description = "Change the default fonts";
+    //html += '<label for=number><input is="emby-input" type=number value=' + defaultValue + ' class = "number" data-css = "'+ css+ '" +  data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name  + '</span></label><br>';
+    //html += '<div class="selectContainer" ><select is="emby-select" id = "googleFonts" data-css= "'+css + '"class="selector" label="'+name+' " onchange="updateFontPreview()">' + getFontOptions(fonts)+'</select></div>'
+    //html += '<div class = "fontPreview"> This is a preview </div>';
+    //html += '<div id="font-picker"></div><div class = "apply-font"> This is a preview </div>'
+    html += '	<div class="selectContainer"><label>Change Font </label><br> <input id="font-picker" type="text"> </div>';
+    if(saved != undefined){
+      savedGoogleFont = saved;
+    }
+    hasGoogleFont = true;
+    return html;
+  }
 
   function getFontPreview(categories, option, selections, name) {
     var html = "";
@@ -341,7 +361,7 @@
     return html;
   }
 
-  function createCss() {
+  async function  createCss() {
     var savedHtml = "";
     //process checkbox
     var css = $("#cssOptions").val();
@@ -402,27 +422,34 @@
       element.getAttribute("data-css").replaceAll("$", element.value) +
       "\n";
     }
+
+
+    //procces google Fonts
+
+    if(document.getElementById("font-picker") != undefined){
+      var font = document.getElementById("font-picker").value
+      var url = "https://fonts.googleapis.com/css?family=" + font;
+      var promise  = await fetch(url);
+      css += await promise.text();
+      css += "html {font-family:  '$',sans-serif ;  } body,h1,h2,h3 { font-family: '$' ,sans-serif;}".replaceAll("$",font.replaceAll("+"," "));
+
+      return css;
+      //  fetch(url).then(function (response) {
+      //   response.text().then(function (text) {
+      //     css += text;
+      //     return css;
+      //   });
+      // });
+
+    }else{
       return css;
     }
 
-  function getFonts(json) {
+
-    var fonts = undefined;
-    var html = "";
-    fonts = json;
-    var id = "selector";
-    var name = "Change Font";
-    var css =
-    "html {font-family:  '$',sans-serif ;  } body,h1,h2,h3 { font-family: '$' ,sans-serif;}";
-    var description = "Change the default fonts";
-    //html += '<label for=number><input is="emby-input" type=number value=' + defaultValue + ' class = "number" data-css = "'+ css+ '" +  data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name  + '</span></label><br>';
-    //html += '<div class="selectContainer" ><select is="emby-select" id = "googleFonts" data-css= "'+css + '"class="selector" label="'+name+' " onchange="updateFontPreview()">' + getFontOptions(fonts)+'</select></div>'
-    //html += '<div class = "fontPreview"> This is a preview </div>';
-    //html += '<div id="font-picker"></div><div class = "apply-font"> This is a preview </div>'
-    html += '	<input id="font-picker" type="text">';
-    hasGoogleFont = true;
-    return html;
   }
 
+
+
   function generateFontPicker() {
     if (hasGoogleFont) {
       $(function () {
@@ -440,8 +467,14 @@
             "|"
           ),
         });
+
+        if(savedGoogleFont != undefined){
+          $('#font-picker').trigger('setFont',[savedGoogleFont,900])
+        }
       });
-      $("#font-picker").trigger("setFont", ["Orbitron", 900]);
+
+
+
     }
   }
 
@@ -577,6 +610,8 @@
           html += getSelector(element, savedValue);
         } else if (element.type == "slider") {
           html += getSlider(element, savedValue);
+        } else if (element.type == "googleFonts") {
+          html += getFonts(savedValue);
         }
       });
     });
@@ -586,6 +621,8 @@
     html += loadPreviews(skin);
     html += "</div>";
     $("#options").html(html).trigger("create");
+    generateFontPicker();
+
   }
 
   function saveConfig() {
@@ -624,7 +661,9 @@
         if (option.css == element.getAttribute("data-css")) {
           result = element.checked ? "true" : "false";
         }
+
       });
+      break;
       case "number":
       Array.from(
         document.getElementsByClassName("number emby-input")
@@ -632,7 +671,9 @@
         if (option.css == element.getAttribute("data-css")) {
           result = element.value;
         }
+
       });
+      break;
       case "colorPicker":
       Array.from(document.getElementsByClassName("color")).forEach(
         (element) => {
@@ -641,6 +682,7 @@
           }
         }
       );
+      break;
       case "slider":
       Array.from(document.getElementsByClassName("slider")).forEach(
         (element) => {
@@ -649,6 +691,7 @@
           }
         }
       );
+      break;
       case "selector":
       Array.from(
         document.getElementsByClassName(
@@ -658,7 +701,13 @@
         if (option.css == element.getAttribute("data-css")) {
           result = element.selectedOptions[0].innerText;
         }
+
+
       });
+      break;
+      case "googleFonts":
+      result += document.getElementById("font-picker").value.replaceAll("+"," ");
+      break;
     }
     return result;
   }
@@ -684,14 +733,14 @@
       }
     );
   }
-  function setSkin() {
+  async function setSkin() {
     saveConfig();
     ApiClient.getServerConfiguration().then(function (config) {
       ApiClient.updateServerConfiguration(config).then(function () {
-        ApiClient.getNamedConfiguration("branding").then(function (
+        ApiClient.getNamedConfiguration("branding").then(async function (
           brandingConfig
         ) {
-          brandingConfig.CustomCss = createCss();
+          brandingConfig.CustomCss = await createCss();
           ApiClient.updateNamedConfiguration(
             "branding",
             brandingConfig
@@ -754,49 +803,10 @@
   legend {
     font-size: 135%;
   }
-  .font-select {
+
-    width: 100%;
+
-  }
+  </style>
-  .font-select-active > span {
+  <style>
-    background-color: #292929;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  .font-select .fs-search input {
-    background: #292929;
-    border-bottom: 1px solid #292929;
-  }
-  .fs-drop {
-    color: white !important;
-  }
-  .font-select .fs-drop {
-    position: absolute;
-    top: 38px;
-    left: 0;
-    z-index: 999;
-    background: #292929;
-    color: #000;
-    width: 100%;
-    border: 1px solid #292929;
-    border-top: 0;
-    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
-    border-radius: 0 0 4px 4px;
-  }
-  .font-select > span {
-    outline: 0;
-    border-radius: 0.25rem;
-    border: .07em solid #292929;
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    height: 38px;
-    line-height: 32px;
-    padding: 3px 8px 3px 8px;
-    color: inherit;
-    user-select: none;
-    background: #292929;
-  }
   .tooltip {
     position: relative;
     display: inline-block;
@@ -830,6 +840,7 @@
   }
   </style>
   <style>
+
   .font-select * {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -840,6 +851,7 @@
     width: 240px;
     position: relative;
     display: inline-block;
+    border-color: red;
   }
 
   .font-select .fs-drop {
@@ -847,13 +859,14 @@
     top: 38px;
     left: 0;
     z-index: 999;
-    background: #fff;
+    background: #292929;
-    color: #000;
+    color: #fff;
     width: 100%;
     border: 1px solid #aaa;
     border-top: 0;
     box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
     border-radius: 0 0 4px 4px;
+
   }
 
   .font-select > span {
@@ -867,8 +880,8 @@
     height: 38px;
     line-height: 32px;
     padding: 3px 8px 3px 8px;
-    color: #444;
+    color: #fff;
-    background: #fff
+    background: #292929
     url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
     no-repeat right 0.75rem center/8px 10px;
     -webkit-user-select: none;
@@ -878,7 +891,7 @@
   }
 
   .font-select-active > span {
-    background-color: #eee;
+    background-color: #292929;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
@@ -909,6 +922,7 @@
   .font-select .fs-search {
     border-bottom: 1px solid #aaa;
     padding: 4px;
+    background: #292929;
   }
 
   .font-select .fs-search input {
@@ -918,6 +932,8 @@
     font: 16px Helvetica, Sans-serif;
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
     border-radius: 0.1875rem;
+    background: #292929;
+    color: #fff
   }
   </style>
 

skins-3.0.json

@@ -212,10 +212,6 @@
             "description": "Changes the Jellyfin themed Hover gradient",
             "css": "@import url('https://prayag17.github.io/JellySkin/$.css');",
             "selections": [
-              {
-                "name": "Default",
-                "value": ""
-              },
               {
                 "name": "Sea Gradient",
                 "value": "seaGradient"
@@ -248,7 +244,56 @@
         "name": "Fonts",
         "options": [
           {
-            "type": "googleFonts"
+            "type": "selector",
+            "name": "Change Font",
+            "description": "Change the default fonts",
+            "css": "html {font-family: $,sans-serif ;  } body,h1,h2,h3 { font-family:$ ,sans-serif;} @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800;1,900&display=swap');",
+            "selections": [
+              {
+                "name": "Noto Sans",
+                "value": "Noto Sans"
+              },
+              {
+                "name": "Times New Roman",
+                "value": "Times New Roman"
+              },
+              {
+                "name": "Arial",
+                "value": "Arial"
+              },
+              {
+                "name": "Helvetica",
+                "value": "Helvetica"
+              },
+              {
+                "name": "Times",
+                "value": "Times"
+              },
+              {
+                "name": "Courier New",
+                "value": "Courier New"
+              },
+              {
+                "name": "Verdana",
+                "value":  "Verdana"
+              },
+              {
+                "name": "Courier",
+                "value":"Courier"
+              },
+              {
+                "name": "Arial Narrow",
+                "value": "Arial Narrow"
+              },
+              {
+                "name": "Candara",
+                "value":"Candara"
+              },
+              {
+                "name": "Poppins",
+                "value":"Poppins"
+              }
+            ]
           },
           {
             "type": "number",
@@ -258,6 +303,10 @@
             "css": "h1 {font-size: $em;}",
             "default": "1.8"
           },
+          {
+            "type": "googleFonts"
+            "css" : "/*googleFonts*/"
+          },
           {
             "type": "colorPicker",
             "mode": "rgba",
@@ -269,7 +318,7 @@
           {
             "type": "colorPicker",
             "mode": "hex",
-            "name": "SideBar Text Color",
+            "name": "Console Panel Color",
             "description": "Modifies the color of the left menu panel.",
             "css": ".mainDrawer-scrollContainer { color: $; }",
             "default": "#ffffff"
@@ -304,33 +353,6 @@
       {
         "name": "Miscellaneous",
         "options": [
-          {
-            "type": "selector",
-            "name": "Poster card hover effect",
-            "description": "Changes the hover effect on Movie/TV show/Music poster card.",
-            "selections": [
-              {
-                "name": "Scale in and out",
-                "css": "/*Dynamic Poster effect-option1*/.cardBox-bottompadded{margin-bottom; 1em !important;}.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s;}.cardBox:hover {transform: scale(1.1);}"
-              },
-              {
-                "name": "Pop up and down",
-                "css": "/*Dynamic Poster effect-option2*/.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s, box-shadow .2s;}.cardBox:hover {transform: translatey(-5px);box-shadow: 0px 5px 10px black;}"
-              },
-              {
-                "name": "Poster Image in and out",
-                "css": "/*Dynamic Poster effect-option3*/button.cardImageContainer:hover {filter: brightness(30%);transform: scale(1.1);}button.cardImageContainer {z-index: 1;transition: filter .2s, transform .25s;}.cardScalable {overflow: hidden;}"
-              },
-              {
-                "name": "Poster Image blur",
-                "css": "/*Dynamic Poster effect-option4*/button.cardImageContainer:hover {filter: brightness(30%) blur(2px);}button.cardImageContainer {z-index: 1;transition: filter .2s;}"
-              },
-              {
-                "name": "Poster Image in and out",
-                "css": "/*Dynamic Poster effect-option4*/button.cardImageContainer:hover {filter: brightness(30%) blur(2px);transform: scale(1.1);}button.cardImageContainer {z-index: 1;transition: filter .2s, transform .25s;}.cardScalable {overflow: hidden;}"
-              }
-            ]
-          },
           {
             "type": "colorPicker",
             "mode": "hex",