unixaxwell/jellyfin-plugin-skin-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update my Repo

Browse Source
This commit is contained in:
Prayag
2021-01-16 11:11:15 +05:30
parent fafbae507b
commit 2869f6bb00
2 changed files with 143 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
View File

@@ -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,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 += '<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) {
@@ -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%;
}
.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;
}
</style>
<style>
.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;
color: #000;
background: #292929;
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;
background: #fff
color: #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>

88
skins-3.0.json
View File

@@ -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",