BreizhHardware/jellyfin-plugin-skin-manager
1
0
Fork 0
mirror of https://github.com/danieladov/jellyfin-plugin-skin-manager.git synced 2026-01-18 16:37:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1 from danieladov/master

Browse Source 
Preload images
This commit is contained in:
Prayag
2020-12-14 07:41:01 +05:30
committed by GitHub
parent 78aeadff4f db40ecba08
commit d6e8ed3d43
2 changed files with 62 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,9 +37,9 @@
<script type="text/javascript">
var data;
Dashboard.showLoadingMsg();
$.getJSON('https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/cssEditor/skins-3.0.json', function(json) {
$.getJSON('https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/skins-3.0.json', function(json) {
data=json;
loadSkins();
loadSkins();
Dashboard.hideLoadingMsg();
});
function loadSkins(){
@@ -52,12 +52,12 @@
opt.value=element.defaultCss;
cssOptions.appendChild(opt);
});
updateSelectors()
updateSelectors();
preloadPreviews();
}
function loadOptions(skin){
var options = skin.options;
var page = $.mobile.activePage;
var html = "";
html += '<div data-role="controlgroup">';
options.forEach(element=>{
@@ -71,11 +71,25 @@
html += getSelector(element);
}else if(element.type == "slider"){
html += getSlider(element);
}else if(element.type == "section"){
html += getSection(element);
}
});
html += loadPreviews(skin);
html += '</div>';
$('#options', page).html(html).trigger('create');
$('#options').html(html).trigger('create');
}
function preloadPreviews(){
data.forEach(skin => {
if(skin.previews != undefined){
skin.previews.forEach(img => {
var image = new Image();
image.src = img.url;
})
}
})
}
function loadPreviews(skin){
@@ -106,11 +120,11 @@
var html = "";
var id = "favcolor" ;
var name = option.name;
var defaultValue = option.default;
var defaultValue = option.default==undefined?"#000000":option.default;
var css = option.css;
var description = option.description;
var mode = option.mode;
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"><label><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 +'" /><span>'+ name +'</span></label><div class="fieldDescription">'+description+'</div></div>';
return html;
}
function getNumber(option){
@@ -159,7 +173,7 @@
return html
}
function getImage(url){
function getImage(url){
var html = "";
html += '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="'+url+'">';
return html;
@@ -169,7 +183,14 @@
var html = "";
html += '<legend>'+name+'</legend></fieldset>';
return html;
}
}
function getSection(option){
var html = "";
var name = option.name;
html += html += '<h2 class="sectionTitle" >'+ name +'</h2>';
return html;
}
function createCss(){
var savedHtml = "";

55
skins-3.0.json
View File

@@ -163,31 +163,27 @@
"name": "JellySkin",
"author": "prayagprajapati17",
"description": "A very bright and colorful look using lots of drop shadows. Theme is by prayag17.",
"defaultCss": "@import url('https://prayag17.github.io/JellySkin/default.4');",
"defaultCss": "@import url('https://prayag17.github.io/JellySkin/default.css');",
"options": [
{
"type": "checkBox",
"name": "Sea Gradient",
"description": "changes the Jellyfin themed Hover gradient",
"css": "@import url('https://prayag17.github.io/JellySkin/seaGradient.css');"
},
{
"type": "checkBox",
"name": "Sunset Gradient",
"description": "changes the Jellyfin themed Hover gradient",
"css": "@import url('https://prayag17.github.io/JellySkin/sunsetGradient.css');"
},
{
"type": "checkBox",
"name": "Night Sky Gradient",
"description": "changes the Jellyfin themed Hover gradient",
"css": "@import url('https://prayag17.github.io/JellySkin/nightSkyGradient.css');"
},
{
"type": "checkBox",
"name": "Morning Gradient",
"description": "changes the Jellyfin themed Hover gradient",
"css": "@import url('https://prayag17.github.io/JellySkin/morningGradient.css');"
"type": "selector",
"name": "Gradient",
"description": "Changes the Jellyfin themed Hover gradient",
"css": "@import url('https://prayag17.github.io/JellySkin/$.css');",
"selections": [
{
"name": "seaGradient"
},
{
"name": "sunsetGradient"
},
{
"name": "nightSkyGradient"
},
{
"name": "morningGradient"
}
]
}
],
"previews":[
@@ -306,6 +302,19 @@
"description": "This modifies the colors of the cast, search and user buttons in the top right.",
"css": ".headerRight { color: $; }",
"default":"#ffffff"
},
{
"type": "section",
"name": "Buttons"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Interact Buttons Color",
"description": "This modifies the color of interact buttons.",
"css": ".paper-icon-button-light { color: $ !important; } .paper-icon-button-light:hover:not(:disabled) { color:$ !important; background-color: $ !important; } .paper-icon-button-light:focus:not(:disabled) { color:$ !important; background-color: $ !important; }",
"default":"#00a4dc",
"preview":"https://github.com/LambadaCorez/custom_css_jellyfin/blob/master/ui/buttons/colored_interact_buttons/colored_buttons_example3.png?raw=true"
},
{
"type": "number",