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 #2 from danieladov/master

Browse Source 
Save your current options
This commit is contained in:
Prayag
2020-12-16 08:45:29 +05:30
committed by GitHub
parent d266fd109e 0605248f2f
commit dd75463857
3 changed files with 154 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Jellyfin.Plugin.SkinManager/Configuration/PluginConfiguration.cs
View File

@@ -1,14 +1,18 @@
using MediaBrowser.Model.Plugins;
using System;
using System.Collections.Generic;
namespace Jellyfin.Plugin.SkinManager.Configuration
{
public class PluginConfiguration : BasePluginConfiguration
{
public string selectedCss { get; set; }
public string selectedSkin { get; set; }
public string[] options { get; set; }
public PluginConfiguration()
{
selectedCss = "";
selectedSkin = "";
options = Array.Empty<String>();
}
}
}

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

@@ -44,8 +44,7 @@
});
function loadSkins(){
var cssOptions = document.getElementById("cssOptions");
var skinVersions = document.getElementById("skinVersions");
var versionDescription = document.getElementById("versionDescription");
data.forEach(element => {
var opt = document.createElement("option");
opt.appendChild(document.createTextNode(element.name));
@@ -53,6 +52,7 @@
cssOptions.appendChild(opt);
});
updateSelectors();
loadConfig();
preloadPreviews();
}
@@ -105,41 +105,44 @@
return html;
}
function getCheckBox ( option) {
function getCheckBox ( option,saved) {
var html = "";
var checked = saved=="true"?'checked="checked"' : "";
var id = "chkFolder" ;
var name = option.name;
var css = option.css;
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 += '<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 + '" '+ checked + ' /><span>'+ name +'</span></label><div class="fieldDescription checkboxFieldDescription">'+description+'</div></div>'
return html;
}
function getColorPicker ( option) {
function getColorPicker ( option,saved) {
var html = "";
var id = "favcolor" ;
var name = option.name;
var defaultValue = option.default==undefined?"#000000":option.default;
defaultValue = saved == undefined?defaultValue:saved;
var css = option.css;
var description = option.description;
var mode = option.mode;
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){
function getNumber(option,saved){
var html = "";
var id = "number" ;
var name = option.name;
var css = option.css;
var step = option.step==undefined?1:option.step;
var defaultValue = option.default;
defaultValue = saved == undefined?defaultValue:saved;
var description = option.description;
//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="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;
}
function getSelector(option){
function getSelector(option,saved){
var html = "";
var id = "selector" ;
var name = option.name;
@@ -147,20 +150,21 @@
var defaultValue = option.default;
var description = option.description;
//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" 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,saved)+'</select></div>'
return html;
}
function getOptions(option){
function getOptions(option,saved){
var html = "";
var selections = option.selections
var css = option.css;
selections.forEach(element=>{
var name = element.name;
html+= '<option data-css= "'+css + '"value='+name+'>'+ name +'</option>'
var name = element.name;
var selected = saved==name?'selected="selected"' : "";
html+= '<option data-css= "'+css + '"value='+name+'" '+ selected+'>'+ name +'</option>'
})
return html;
}
function getSlider(option){
function getSlider(option,saved){
var html = "";
var id = "slider" ;
@@ -168,6 +172,7 @@
var css = option.css;
var step = option.step==undefined?1:option.step;
var defaultValue = option.default;
defaultValue = saved == undefined?defaultValue:saved;
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>'
return html
@@ -261,12 +266,141 @@
})
}
var config = undefined;
function loadConfig(){
var pluginId = "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3";
ApiClient.getPluginConfiguration(pluginId).then(function (savedConfig) {
config = savedConfig;
if (!config) {
config.selectedSkin ="";
config.options = [];
}
loadSavedOptions()
});
}
function loadSavedOptions(){
var skin = undefined;
data.forEach(element=> {
if(element.defaultCss == config.selectedSkin){
skin = element
}
})
if(skin == undefined){
return;
}
var count = 0;
for (let option of document.getElementById("cssOptions").options){
if(option.value == config.selectedSkin ){
document.getElementById("cssOptions").selectedIndex = count;
}
count ++;
}
var options = skin.options;
var savedOptions = config.options;
var html = "";
html += '<div data-role="controlgroup">';
options.forEach(element=>{
var savedValue = undefined;
var count = 0;
savedOptions.forEach(savedOption => {
if(element.css == savedOption){
savedValue = savedOptions[count+1];
}
count ++;
})
if(element.type == "checkBox"){
html += getCheckBox(element,savedValue);
}else if(element.type == "colorPicker"){
html += getColorPicker(element,savedValue);
}else if(element.type == "number"){
html += getNumber(element,savedValue);
}else if(element.type == "selector"){
html += getSelector(element,savedValue);
}else if(element.type == "slider"){
html += getSlider(element,savedValue);
}else if(element.type == "section"){
html += getSection(element,savedValue);
}
});
html += loadPreviews(skin);
html += '</div>';
$('#options').html(html).trigger('create');
}
function saveConfig(){
var pluginId = "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3";
config.selectedSkin = $('#cssOptions').val();
var options = [];
var count = 0;
data[document.getElementById("cssOptions").selectedIndex].options.forEach(option => {
options[count] = option.css;
options[count +1 ] = getValue(option);
count += 2;
});
config.options = options;
ApiClient.getPluginConfiguration(pluginId).then(function (oldConfig){
oldConfig = config;
ApiClient.updatePluginConfiguration(pluginId,oldConfig).then(function (res){
Dashboard.processPluginConfigurationUpdateResult(res);});
});
}
function getValue(option){
var result = "";
switch(option.type){
case "checkBox":
document.getElementsByClassName("checkbox emby-checkbox").forEach(element =>{
if(option.css == element.getAttribute("data-css")){
result = element.checked?"true":"false";
}
})
case "number":
document.getElementsByClassName("number emby-input").forEach(element =>{
if(option.css == element.getAttribute("data-css")){
result = element.value;
}
})
case "colorPicker":
document.getElementsByClassName("color").forEach(element =>{
if(option.css == element.getAttribute("data-css")){
result = element.value;
}
})
case "slider":
document.getElementsByClassName("slider").forEach(element =>{
if(option.css == element.getAttribute("data-css")){
result = element.value;
}
})
case "selector":
document.getElementsByClassName("selector emby-select-withcolor emby-select").forEach(element =>{
if(option.css == element.getAttribute("data-css")){
result = element.selectedOptions[0].innerText;;
}
})
}
return result;
}
function setSkin() {
function setSkin() {
saveConfig()
ApiClient.getServerConfiguration().then(function (config) {
ApiClient.updateServerConfiguration(config).then(function() {
ApiClient.getNamedConfiguration('branding').then(function(brandingConfig) {
@@ -299,7 +433,6 @@
};
$('#configPage').on('pageshow', function () {
Dashboard.showLoadingMsg();
loadSavedConfig();
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
$('#cssOptions').val(config.selectedCss).change();
Dashboard.hideLoadingMsg();

2
skins-3.0.json
View File

@@ -209,7 +209,7 @@
"name": "Custom",
"author": "you",
"description": "customize the look of jellyfin by your needs",
"defaultCss": "",
"defaultCss": "/*Custom*/",
"options": [
{
"type": "selector",