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

Fix code

Browse Source
This commit is contained in:
Prayag
2020-12-11 21:13:47 +05:30
committed by GitHub
parent 435c256ec3
commit b9511d2501
1 changed files with 282 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,20 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Skin Manager</title> <title>Skin Manager</title>
</head> </head>
<body> <body>
<div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage" data-require="emby-input,emby-button"> <div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage" data-require="emby-input,emby-button">
<div data-role="content"> <div data-role="content">
<div class="content-primary"> <div class="content-primary">
<form class="tbsConfigurationPage"> <form class="tbsConfigurationPage">
<div class="sectionTitleContainer flex align-items-center"> <div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">Skin Manager</h2> <a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank" href="https://github.com/danieladov/jellyfin-plugin-skin-manager">Help</a> </div> <h2 class="sectionTitle">Skin Manager</h2>
<a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank" href="https://github.com/danieladov/jellyfin-plugin-skin-manager">Help</a>
</div>
<div class="verticalSection"> <div class="verticalSection">
<p> Select the skin you want to install and click Set Skin </p> <p>
<br> </div> Select the skin you want to install and click Set Skin
</p>
<br>
</div>
<div class="allOptions"> <div class="allOptions">
<div class="selectContainer"> <div class="selectContainer">
<label for="css">Skin</label> <label for="css">Skin</label>
@@ -23,8 +26,11 @@
<div class="fieldDescription" id="description"></div> <div class="fieldDescription" id="description"></div>
</div> </div>
<div class="checkboxList checkboxList-verticalwrap" id ="options"></div> <div class="checkboxList checkboxList-verticalwrap" id ="options"></div>
<br> </div> <br>
<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()> <span>Set Skin</span> </button> </div>
<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()>
<span>Set Skin</span>
</button>
</form> </form>
</div> </div>
</div> </div>
@@ -36,7 +42,6 @@
loadSkins(); loadSkins();
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
}); });
function loadSkins(){ function loadSkins(){
var cssOptions = document.getElementById("cssOptions"); var cssOptions = document.getElementById("cssOptions");
var skinVersions = document.getElementById("skinVersions"); var skinVersions = document.getElementById("skinVersions");
@@ -74,10 +79,13 @@
} }
function loadPreviews(skin){ function loadPreviews(skin){
if(skin.previews == undefined){
return "";
}
var html = ""; var html = "";
skin.previews.forEach(element => { skin.previews.forEach(element => {
html += getImgnames(element.name);
html += getImage(element.url); html += getImage(element.url);
html += getImgnames(element.name);
}); });
return html; return html;
} }
@@ -88,11 +96,11 @@
var name = option.name; var name = option.name;
var css = option.css; var css = option.css;
var description = option.description; var description = option.description;
//html += '<label><input is="emby-checkbox" class="chkLibrary" type="checkbox" data-mini="true" id="' + id + '" name="' + id + '" data-value="' + value + '" '+' /><span>' + name + '</span></label>'; //html += '<label><input is="emby-checkbox" class="chkLibrary" type="checkbox" data-mini="true" id="' + id + '" name="' + id + '" data-value="' + value + '" '+' /><span>' + name + '</span></label>';
html += '<div class="checkboxContainer checkboxContainer-withDescription"><label><input class = "checkbox" type="checkbox" is="emby-checkbox" id="' + id + '"name="' + id + '" data-css="' + css + '" '+' /><span>'+ name +'</span></label><div class="fieldDescription checkboxFieldDescription">'+description+'</div></div>' html += '<div class="checkboxContainer checkboxContainer-withDescription"><label><input class = "checkbox" type="checkbox" is="emby-checkbox" id="' + id + '"name="' + id + '" data-css="' + css + '" '+' /><span>'+ name +'</span></label><div class="fieldDescription checkboxFieldDescription">'+description+'</div></div>'
return html; return html;
} }
function getColorPicker ( option) { function getColorPicker ( option) {
var html = ""; var html = "";
var id = "favcolor" ; var id = "favcolor" ;
@@ -104,7 +112,6 @@
html += '<div class="inputContainer"><input style="height: 1em; padding: 0px; border: none;" type=color class = "color" value="' + defaultValue + '"data-css = "'+ css+ '" data-mode="'+mode+'" id="' + id + '" name="' + id + '" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>'; html += '<div class="inputContainer"><input style="height: 1em; padding: 0px; border: none;" type=color class = "color" value="' + defaultValue + '"data-css = "'+ css+ '" data-mode="'+mode+'" id="' + id + '" name="' + id + '" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>';
return html; return html;
} }
function getNumber(option){ function getNumber(option){
var html = ""; var html = "";
var id = "number" ; var id = "number" ;
@@ -117,7 +124,6 @@
html += '<div class="inputContainer"><input is="emby-input" type="number" class = "number" value=' + defaultValue + ' step=' + step + ' data-css = "'+ css+ '" id="' + id + '" name="' + id + '" min="0" max="300" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>' html += '<div class="inputContainer"><input is="emby-input" type="number" class = "number" value=' + defaultValue + ' step=' + step + ' data-css = "'+ css+ '" id="' + id + '" name="' + id + '" min="0" max="300" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>'
return html; return html;
} }
function getSelector(option){ function getSelector(option){
var html = ""; var html = "";
var id = "selector" ; var id = "selector" ;
@@ -129,7 +135,6 @@
html += '<div class="selectContainer"><select is="emby-select" data-css= "'+css + '"class="selector" label="'+name+'">' + getOptions(option)+'</select></div>' html += '<div class="selectContainer"><select is="emby-select" data-css= "'+css + '"class="selector" label="'+name+'">' + getOptions(option)+'</select></div>'
return html; return html;
} }
function getOptions(option){ function getOptions(option){
var html = ""; var html = "";
var selections = option.selections var selections = option.selections
@@ -140,8 +145,8 @@
}) })
return html; return html;
} }
function getSlider(option){ function getSlider(option){
var html = ""; var html = "";
var id = "slider" ; var id = "slider" ;
var name = option.name; var name = option.name;
@@ -151,8 +156,8 @@
var description = option.description; var description = option.description;
html += '<div class="inputContainer"><input is="emby-slider" type="range" class = "slider" value=' + defaultValue + ' step=' + step + ' data-css = "'+ css+ '" id="' + id + '" name="' + id + '" min="0" max="300" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>' html += '<div class="inputContainer"><input is="emby-slider" type="range" class = "slider" value=' + defaultValue + ' step=' + step + ' data-css = "'+ css+ '" id="' + id + '" name="' + id + '" min="0" max="300" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>'
return html return html
}
}
function getImage(url){ function getImage(url){
var html = ""; var html = "";
html += '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="'+url+'">'; html += '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="'+url+'">';
@@ -177,15 +182,18 @@
var selectedOptions = $('.checkbox:checked').map(function () { var selectedOptions = $('.checkbox:checked').map(function () {
return this.getAttribute('data-css'); return this.getAttribute('data-css');
}).get(); }).get();
selectedOptions.forEach(element => { selectedOptions.forEach(element => {
css += element +"\n"; css += element +"\n";
}); });
//proccess selector //proccess selector
var selectors = document.getElementsByClassName("selector"); var selectors = document.getElementsByClassName("selector");
for (let element of selectors) { for (let element of selectors) {
css += element.getAttribute("data-css").replaceAll("$",element.value) + "\n"; css += element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
savedHtml += element.outerHTML; savedHtml += element.outerHTML;
} }
//process colorPicker //process colorPicker
selectedOptions.forEach(element=>{ selectedOptions.forEach(element=>{
css += element + "\n"; css += element + "\n";
@@ -201,12 +209,14 @@
} }
css+= element.getAttribute("data-css").replaceAll("$",color)+ "\n"; css+= element.getAttribute("data-css").replaceAll("$",color)+ "\n";
} }
//procces number selector //procces number selector
var numberSelectors = document.getElementsByClassName("number"); var numberSelectors = document.getElementsByClassName("number");
for (let element of numberSelectors) { for (let element of numberSelectors) {
savedHtml += element.outerHTML; savedHtml += element.outerHTML;
css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n"; css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
} }
//procces slider //procces slider
var sliders = document.getElementsByClassName("slider"); var sliders = document.getElementsByClassName("slider");
for (let element of sliders) { for (let element of sliders) {
@@ -215,6 +225,7 @@
return css; return css;
} }
function updateSelectors(){ function updateSelectors(){
var selected = document.getElementById("cssOptions"); var selected = document.getElementById("cssOptions");
var description = document.getElementById("description"); var description = document.getElementById("description");
@@ -222,10 +233,17 @@
if(element.name == selected.selectedOptions[0].innerText){ if(element.name == selected.selectedOptions[0].innerText){
loadOptions(element); loadOptions(element);
description.innerHTML=element.description; description.innerHTML=element.description;
} }
}) })
} }
function setSkin() { function setSkin() {
ApiClient.getServerConfiguration().then(function (config) { ApiClient.getServerConfiguration().then(function (config) {
ApiClient.updateServerConfiguration(config).then(function() { ApiClient.updateServerConfiguration(config).then(function() {
@@ -239,7 +257,6 @@
}); });
}); });
} }
function hexToRgb(hex) { function hexToRgb(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
@@ -281,16 +298,7 @@
img{ img{
width: 100%; width: 100%;
} }
fieldset.verticalSection.verticalSection-extrabottompadding {
border: 1px dotted #2d2d2d;
}
legend {
font-size: 135%;
}
</style> </style>
</div> </div>
</body> </body>
</html> </html>