From 2869f6bb005a24e95ce8db25e5572b9cda411f65 Mon Sep 17 00:00:00 2001 From: Prayag Date: Sat, 16 Jan 2021 11:11:15 +0530 Subject: [PATCH] Update my Repo --- .../Configuration/configurationpage.html | 160 ++++++++++-------- skins-3.0.json | 88 ++++++---- 2 files changed, 143 insertions(+), 105 deletions(-) diff --git a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html index 508190e..f3a0ffe 100644 --- a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html +++ b/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 @@ ""; 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 += '
'; + //html += '
' + //html += '
This is a preview
'; + //html += '
This is a preview
' + html += '

'; + 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,26 +422,33 @@ element.getAttribute("data-css").replaceAll("$", element.value) + "\n"; } - return css; + + + //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 += '
'; - //html += '
' - //html += '
This is a preview
'; - //html += '
This is a preview
' - html += ' '; - hasGoogleFont = true; - return html; - } + function generateFontPicker() { if (hasGoogleFont) { @@ -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 += ""; $("#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%; - } - .font-select-active > span { - 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; - } + + + + diff --git a/skins-3.0.json b/skins-3.0.json index 45da901..ceba347 100644 --- a/skins-3.0.json +++ b/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",