diff --git a/src/component/customThemeTile/index.js b/src/component/customThemeTile/index.js index bff4cbb3..4de48e18 100644 --- a/src/component/customThemeTile/index.js +++ b/src/component/customThemeTile/index.js @@ -86,7 +86,7 @@ export const CustomThemeTile = function({ theme.font.ui.load(); - theme.background.image.render(); + theme.background.image.load(); theme.background.video.clear(); diff --git a/src/component/menuContent/themeSetting/index.js b/src/component/menuContent/themeSetting/index.js index e974f999..157a46c1 100644 --- a/src/component/menuContent/themeSetting/index.js +++ b/src/component/menuContent/themeSetting/index.js @@ -111,6 +111,7 @@ themeSetting.disable = () => { themeSetting.control.background.image.opacity.disable(); themeSetting.control.background.image.vignette.opacity.disable(); themeSetting.control.background.image.vignette.range.disable(); + themeSetting.control.background.image.refresh.disable(); themeSetting.control.background.video.url.disable(); themeSetting.control.background.video.urlHelper.disable(); themeSetting.control.background.video.blur.disable(); @@ -136,6 +137,7 @@ themeSetting.disable = () => { themeSetting.control.background.image.opacity.disable(); themeSetting.control.background.image.vignette.opacity.disable(); themeSetting.control.background.image.vignette.range.disable(); + themeSetting.control.background.image.refresh.disable(); themeSetting.control.background.video.url.disable(); themeSetting.control.background.video.urlHelper.disable(); themeSetting.control.background.video.blur.disable(); @@ -161,6 +163,7 @@ themeSetting.disable = () => { themeSetting.control.background.image.opacity.disable(); themeSetting.control.background.image.vignette.opacity.disable(); themeSetting.control.background.image.vignette.range.disable(); + themeSetting.control.background.image.refresh.disable(); themeSetting.control.background.video.url.disable(); themeSetting.control.background.video.urlHelper.disable(); themeSetting.control.background.video.blur.disable(); @@ -186,6 +189,7 @@ themeSetting.disable = () => { themeSetting.control.background.image.opacity.enable(); themeSetting.control.background.image.vignette.opacity.enable(); themeSetting.control.background.image.vignette.range.enable(); + themeSetting.control.background.image.refresh.enable(); themeSetting.control.background.video.url.disable(); themeSetting.control.background.video.urlHelper.disable(); themeSetting.control.background.video.blur.disable(); @@ -211,6 +215,7 @@ themeSetting.disable = () => { themeSetting.control.background.image.opacity.disable(); themeSetting.control.background.image.vignette.opacity.disable(); themeSetting.control.background.image.vignette.range.disable(); + themeSetting.control.background.image.refresh.disable(); themeSetting.control.background.video.url.enable(); themeSetting.control.background.video.urlHelper.enable(); themeSetting.control.background.video.blur.enable(); @@ -1517,7 +1522,27 @@ themeSetting.background = (parent) => { } } }) - } + }, + refresh: new Control_sliderSlim({ + object: state.get.current(), + path: 'theme.background.image.refresh', + id: 'theme-background-image-refresh', + labelText: message.get('menuContentThemeBackgroundImageRefresh'), + value: state.get.current().theme.background.image.refresh, + defaultValue: state.get.default().theme.background.image.refresh, + min: state.get.minMax().theme.background.image.refresh.min, + max: state.get.minMax().theme.background.image.refresh.max, + action: () => { + theme.background.image.delay(); + applyCSSVar('theme.background.image.refresh'); + data.save(); + } + }), + refreshHelper: new Control_helperText({ + text: [ + message.get('menuContentThemeBackgroundImageRefreshHelperPara1') + ] + }) }, video: { alert: new Alert({ @@ -1695,7 +1720,9 @@ themeSetting.background = (parent) => { ] }) ] - }) + }), + themeSetting.control.background.image.refresh.wrap(), + themeSetting.control.background.image.refreshHelper.wrap() ]); const themeBackgroundVideoArea = node('div', [ diff --git a/src/component/presetThemeTile/index.js b/src/component/presetThemeTile/index.js index 6880de04..6b356a4e 100644 --- a/src/component/presetThemeTile/index.js +++ b/src/component/presetThemeTile/index.js @@ -78,7 +78,7 @@ export const PresetThemeTile = function ({ theme.font.ui.load(); - theme.background.image.render(); + theme.background.image.load(); theme.background.video.clear(); diff --git a/src/component/state/index.js b/src/component/state/index.js index 9cc64f71..4dfe458f 100644 --- a/src/component/state/index.js +++ b/src/component/state/index.js @@ -95,7 +95,7 @@ state.default = { start: { hsl: { h: 206, s: 16, l: 40 }, rgb: { r: 86, g: 104, b: 118 } }, end: { hsl: { h: 219, s: 28, l: 12 }, rgb: { r: 22, g: 28, b: 39 } } }, - image: { url: '', blur: 0, grayscale: 0, scale: 100, accent: 0, opacity: 100, vignette: { opacity: 0, start: 90, end: 70 } }, + image: { url: '', blur: 0, grayscale: 0, scale: 100, accent: 0, opacity: 100, vignette: { opacity: 0, start: 90, end: 70 }, refresh: 0 }, video: { url: '', blur: 0, grayscale: 0, scale: 100, accent: 0, opacity: 100, vignette: { opacity: 0, start: 90, end: 70 } } }, opacity: { general: 100 }, @@ -202,7 +202,7 @@ state.minMax = { rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } } }, }, - image: { blur: { min: 0, max: 200 }, grayscale: { min: 0, max: 100 }, scale: { min: 100, max: 400 }, accent: { min: 0, max: 100 }, opacity: { min: 0, max: 100 }, vignette: { opacity: { min: 0, max: 100 }, start: { min: 0, max: 100 }, end: { min: 0, max: 100 } } }, + image: { blur: { min: 0, max: 200 }, grayscale: { min: 0, max: 100 }, scale: { min: 100, max: 400 }, accent: { min: 0, max: 100 }, opacity: { min: 0, max: 100 }, vignette: { opacity: { min: 0, max: 100 }, start: { min: 0, max: 100 }, end: { min: 0, max: 100 } }, refresh: { min: 0, max: 1440 } }, video: { blur: { min: 0, max: 200 }, grayscale: { min: 0, max: 100 }, scale: { min: 100, max: 400 }, accent: { min: 0, max: 100 }, opacity: { min: 0, max: 100 }, vignette: { opacity: { min: 0, max: 100 }, start: { min: 0, max: 100 }, end: { min: 0, max: 100 } } } }, radius: { min: 0, max: 500 }, diff --git a/src/component/theme/index.js b/src/component/theme/index.js index ab55dae5..a4599afa 100644 --- a/src/component/theme/index.js +++ b/src/component/theme/index.js @@ -383,6 +383,30 @@ theme.background.area = { }; theme.background.image = { + timer: false, + delay: () => { + + if (theme.background.image.timer) { + clearTimeout(theme.background.image.timer); + + theme.background.image.timer = false; + } + + const timeout = state.get.current().theme.background.image.refresh; + + if (timeout) { + theme.background.image.timer = setInterval(() => { + theme.background.image.render(); + }, timeout * 1000 * 60); + } + + }, + load: () => { + + theme.background.image.delay(); + theme.background.image.render(); + + }, render: () => { const html = document.querySelector('html'); @@ -448,7 +472,7 @@ theme.init = () => { theme.font.display.load(); theme.font.ui.load(); theme.background.area.render(); - theme.background.image.render(); + theme.background.image.load(); theme.background.video.render(); applyCSSVar([ 'theme.accent.rgb.r', diff --git a/src/component/update/index.js b/src/component/update/index.js index deae4856..c38c37a6 100644 --- a/src/component/update/index.js +++ b/src/component/update/index.js @@ -627,6 +627,14 @@ update.mod['7.5.0'] = function(data) { }; +update.mod['7.6.0'] = function(data) { + + data.state.theme.background.image.refresh = 0; + + return data; + +}; + update.run = (data) => { // loop over all updates in mod.all object diff --git a/src/component/version/index.js b/src/component/version/index.js index b77a3d1e..5abf2c72 100644 --- a/src/component/version/index.js +++ b/src/component/version/index.js @@ -1,6 +1,6 @@ export const version = {}; -version.number = '7.5.0'; +version.number = '7.6.0'; version.name = 'Delightful Komodo Dragon'; diff --git a/src/locale/en_GB/messages.json b/src/locale/en_GB/messages.json index 125dc3e0..48ebf6b9 100644 --- a/src/locale/en_GB/messages.json +++ b/src/locale/en_GB/messages.json @@ -707,6 +707,14 @@ "message": "Shade start", "description": "Range for image vignette right." }, + "menuContentThemeBackgroundImageRefresh": { + "message": "Refresh", + "description": "Range background image refresh." + }, + "menuContentThemeBackgroundImageRefreshHelperPara1": { + "message": "Load a random background image upon every refresh (in minutes).", + "description": "Helper text for background image refresh." + }, "menuContentThemeBackgroundVideoAlertPara1": { "message": "YouTube page URLs can not be used.", "description": "Alert for video background." diff --git a/src/manifest.json b/src/manifest.json index 302de7f0..d64730c8 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -2,7 +2,7 @@ "name": "__MSG_appName__", "short_name": "__MSG_appShortName__", "description": "__MSG_appDescription__", - "version": "7.5.0", + "version": "7.6.0", "manifest_version": 2, "default_locale": "en_GB", "chrome_url_overrides": {