Merge remote-tracking branch 'refs/remotes/merge/feat-background-refr…

…esh/feat-background-refresh'

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();
 

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', [

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();
 

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 },

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',

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

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';
 

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."

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": {