From 2acab288034465cf3614ed4f6dde2b6adc2bc439 Mon Sep 17 00:00:00 2001 From: Mister Rajoy Date: Fri, 11 Dec 2020 12:05:13 +0100 Subject: [PATCH 1/3] Add previews to JSON --- skins-3.0.json | 72 +++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 66 insertions(+), 6 deletions(-) diff --git a/skins-3.0.json b/skins-3.0.json index 976b8e8..509a01e 100644 --- a/skins-3.0.json +++ b/skins-3.0.json @@ -4,14 +4,38 @@ "author": "Jellyfin", "description": "Default, stock, Jellyfin.", "defaultCss": "", - "options": [] + "options": [], + "previews":[ + { + "name": "Home", + "url": "" + }, + { + "name": "Title", + "url": "" + }, + + + ] }, { "name": "JellyFlix", "author": "prayagprajapati17", "description": "A theme that aims to replicate the red and black look of Netflix. Theme is by prayag17.", "defaultCss": "@import url(https://prayag17.github.io/JellyFlix/default.css);", - "options": [] + "options": [], + "previews":[ + { + "name": "Home", + "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/Home.png?raw=true" + }, + { + "name": "Title", + "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/TitlePage.png?raw=true" + }, + + + ] }, { "name": "Monochromic", @@ -19,7 +43,7 @@ "description": "This theme aims to be minimalistic and somewhat muted in color. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.", "defaultCss": "@import url('https://ctalvio.github.io/Monochromic/default_style.css');", "options": [ - { + { "type": "checkBox", "name": "Improve performance", "description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect. I may switch to this method being the default.", @@ -51,7 +75,19 @@ "css": "@import url('https://ctalvio.github.io/Monochromic/customcolor_style.css');:root {--accent: $;}", "default": "" } - ] + ], + "previews":[ + { + "name": "Home", + "url": "https://github.com/CTalvio/Monochromic/blob/master/screenshots/1.png?raw=true" + }, + { + "name": "Title", + "url": "https://github.com/CTalvio/Monochromic/blob/master/screenshots/2.png?raw=true" + }, + + + ] }, { "name": "Kaleidochromic", @@ -85,7 +121,19 @@ "css": ":root {--accent: $;}", "default": "#6279cd" } - ] + ], + "previews":[ + { + "name": "Home", + "url": "https://github.com/CTalvio/Kaleidochromic/blob/main/screenshots/6.png?raw=true" + }, + { + "name": "Title", + "url": "https://github.com/CTalvio/Kaleidochromic/blob/main/screenshots/1.png?raw=true" + }, + + + ] }, { "name": "JellySkin", @@ -117,7 +165,19 @@ "description": "changes the Jellyfin themed Hover gradient", "css": "@import url('https://prayag17.github.io/JellySkin/morningGradient.css');" } - ] + ], + "previews":[ + { + "name": "Home", + "url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/Home.png?raw=true" + }, + { + "name": "Title", + "url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/title%202.png?raw=true" + }, + + + ] }, { "name": "Custom", From 63d3de9bfadbd257aef91df958affd42497bf298 Mon Sep 17 00:00:00 2001 From: Mister Rajoy Date: Fri, 11 Dec 2020 12:12:14 +0100 Subject: [PATCH 2/3] Fix Json --- skins-3.0.json | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/skins-3.0.json b/skins-3.0.json index 509a01e..8bae795 100644 --- a/skins-3.0.json +++ b/skins-3.0.json @@ -13,7 +13,7 @@ { "name": "Title", "url": "" - }, + } ] @@ -32,7 +32,7 @@ { "name": "Title", "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/TitlePage.png?raw=true" - }, + } ] @@ -84,7 +84,7 @@ { "name": "Title", "url": "https://github.com/CTalvio/Monochromic/blob/master/screenshots/2.png?raw=true" - }, + } ] @@ -130,9 +130,8 @@ { "name": "Title", "url": "https://github.com/CTalvio/Kaleidochromic/blob/main/screenshots/1.png?raw=true" - }, + } - ] }, { @@ -174,9 +173,8 @@ { "name": "Title", "url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/title%202.png?raw=true" - }, + } - ] }, { From 468334bb0b6a6fad782d47af17c4780d287b6814 Mon Sep 17 00:00:00 2001 From: Mister Rajoy Date: Fri, 11 Dec 2020 12:36:10 +0100 Subject: [PATCH 3/3] Add preview support --- .../Configuration/configurationpage.html | 113 +++++++++++------- 1 file changed, 73 insertions(+), 40 deletions(-) diff --git a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html index a5c625d..aca2550 100644 --- a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html +++ b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html @@ -55,7 +55,8 @@ updateSelectors() } - function loadOptions(options){ + function loadOptions(skin){ + var options = skin.options; var page = $.mobile.activePage; var html = ""; html += '
'; @@ -72,9 +73,20 @@ html += getSlider(element); } }); + html += loadPreviews(skin); html += '
'; $('#options', page).html(html).trigger('create'); } + + function loadPreviews(skin){ + var html = ""; + skin.previews.forEach(element => { + html += getImage(element.url); + }); + return html; + } + + function getCheckBox ( option) { var html = ""; var id = "chkFolder" ; @@ -120,55 +132,65 @@ html += '
' return html; } - function getOptions(option){ - var html = ""; - var selections = option.selections - var css = option.css; - selections.forEach(element=>{ - var name = element.name; - html+= '' + function getOptions(option){ + var html = ""; + var selections = option.selections + var css = option.css; + selections.forEach(element=>{ + var name = element.name; + html+= '' }) return html; + } + function getSlider(option){ + + var html = ""; + var id = "slider" ; + var name = option.name; + var css = option.css; + var step = option.step==undefined?1:option.step; + var defaultValue = option.default; + var description = option.description; + html += '
'+description+'
' + return html + } - function getSlider(option){ - var html = ""; - var id = "slider" ; - var name = option.name; - var css = option.css; - var step = option.step==undefined?1:option.step; - var defaultValue = option.default; - var description = option.description; - html += '
'+description+'
' - return html - } + function getImage(url){ + var html = ""; + html += ''; + return html; + } - function createCss(){ - var savedHtml = ""; - //process checkbox - var css = $('#cssOptions').val(); - savedHtml += document.getElementById("cssOptions").innerHTML; - var checkboxes = document.getElementsByClassName("checkbox"); - for (let element of checkboxes) { - savedHtml += element.innerHTML; - } - var selectedOptions = $('.checkbox:checked').map(function () { + function createCss(){ + var savedHtml = ""; + //process checkbox + var css = $('#cssOptions').val(); + savedHtml += document.getElementById("cssOptions").innerHTML; + var checkboxes = document.getElementsByClassName("checkbox"); + for (let element of checkboxes) { + savedHtml += element.innerHTML; + } + var selectedOptions = $('.checkbox:checked').map(function () { return this.getAttribute('data-css'); }).get(); + selectedOptions.forEach(element => { css += element +"\n"; }); + //proccess selector - var selectors = document.getElementsByClassName("selector"); - for (let element of selectors) { + var selectors = document.getElementsByClassName("selector"); + for (let element of selectors) { css += element.getAttribute("data-css").replaceAll("$",element.value) + "\n"; savedHtml += element.outerHTML; } + //process colorPicker selectedOptions.forEach(element=>{ css += element + "\n"; }) - var colorPickers = document.getElementsByClassName("color"); - for (let element of colorPickers) { + var colorPickers = document.getElementsByClassName("color"); + for (let element of colorPickers) { savedHtml += element.outerHTML if(element.getAttribute("data-mode")=="rgba"){ var rgbColor = hexToRgb( element.value); @@ -178,30 +200,41 @@ } css+= element.getAttribute("data-css").replaceAll("$",color)+ "\n"; } + //procces number selector - var numberSelectors = document.getElementsByClassName("number"); - for (let element of numberSelectors) { - savedHtml += element.outerHTML; + var numberSelectors = document.getElementsByClassName("number"); + for (let element of numberSelectors) { + savedHtml += element.outerHTML; css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n"; } + //procces slider - var sliders = document.getElementsByClassName("slider"); - for (let element of sliders) { - css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n"; + var sliders = document.getElementsByClassName("slider"); + for (let element of sliders) { + css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n"; } return css; } + + function updateSelectors(){ var selected = document.getElementById("cssOptions"); var description = document.getElementById("description"); data.forEach(element=>{ if(element.name == selected.selectedOptions[0].innerText){ - loadOptions(element.options); + loadOptions(element); description.innerHTML=element.description; + } }) } + + + + + + function setSkin() { ApiClient.getServerConfiguration().then(function (config) { ApiClient.updateServerConfiguration(config).then(function() {