diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx
index d57107c6..d0c46cb3 100644
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -111,7 +111,7 @@ export default class Marketplace extends PureComponent {
uninstall(this.state.item.type, this.state.item.display_name);
}
- toast(this.getMessage('toats.' + type + 'ed'));
+ toast(this.getMessage('toasts.' + type + 'ed'));
this.setState({
button: (type === 'install') ? this.buttons.uninstall : this.buttons.install
});
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 058959b6..7d8f8fc2 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -230,6 +230,8 @@ export default class BackgroundSettings extends PureComponent {
+
+
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index e1b74ba5..c12d44e7 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -5,7 +5,7 @@ import PhotoInformation from './PhotoInformation';
import EventBus from 'modules/helpers/eventbus';
import Interval from 'modules/helpers/interval';
-import { videoCheck, offlineBackground, gradientStyleBuilder } from 'modules/helpers/background/widget';
+import { videoCheck, offlineBackground, gradientStyleBuilder, randomColourStyleBuilder } from 'modules/helpers/background/widget';
import './scss/index.scss';
@@ -92,7 +92,8 @@ export default class Background extends PureComponent {
});
}
- switch (localStorage.getItem('backgroundType')) {
+ const type = localStorage.getItem('backgroundType');
+ switch (type) {
case 'api':
if (offline) {
return this.setState(offlineBackground());
@@ -185,6 +186,11 @@ export default class Background extends PureComponent {
}
break;
+ case 'random_colour':
+ case 'random_gradient':
+ this.setState(randomColourStyleBuilder(type));
+ break;
+
case 'custom':
let customBackground;
try {
diff --git a/src/modules/helpers/background/widget.js b/src/modules/helpers/background/widget.js
index 1021d089..5cee91ec 100644
--- a/src/modules/helpers/background/widget.js
+++ b/src/modules/helpers/background/widget.js
@@ -37,6 +37,22 @@ export function gradientStyleBuilder({ type, angle, gradient }) {
};
}
+export function randomColourStyleBuilder(type) {
+ // randomColour based on https://stackoverflow.com/a/5092872
+ const randomColour = () => '#000000'.replace(/0/g, () => {return (~~(Math.random()*16)).toString(16)});
+ let style = `background:${randomColour()};`;
+
+ if (type === 'random_gradient') {
+ const directions = ['to right', 'to left', 'to bottom', 'to top', 'to bottom right', 'to bottom left', 'to top right', 'to top left'];
+ style = `background:linear-gradient(${directions[Math.floor(Math.random() * directions.length)]}, ${randomColour()}, ${randomColour()});`;
+ }
+
+ return {
+ type: 'colour',
+ style
+ }
+}
+
// source: https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29
export function lon2tile(lon, zoom) {
return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
diff --git a/src/modules/helpers/interval.js b/src/modules/helpers/interval.js
index 6a822fae..ac0bf8c2 100644
--- a/src/modules/helpers/interval.js
+++ b/src/modules/helpers/interval.js
@@ -1,8 +1,7 @@
// based on https://stackoverflow.com/a/47009962
export default function interval(callback, interval, name) {
const key = name + 'interval';
- const timeInMs = localStorage.getItem(key);
-
+ const ms = localStorage.getItem(key);
const now = Date.now();
const executeCallback = () => {
@@ -10,8 +9,8 @@ export default function interval(callback, interval, name) {
callback();
};
- if (timeInMs) {
- const delta = now - parseInt(timeInMs);
+ if (ms) {
+ const delta = now - parseInt(ms);
if (delta > interval) {
setInterval(executeCallback, interval);
} else {
@@ -23,5 +22,6 @@ export default function interval(callback, interval, name) {
} else {
setInterval(executeCallback, interval);
}
+
localStorage.setItem(key, now);
}
diff --git a/src/translations/de_DE.json b/src/translations/de_DE.json
index b165cc05..2a9720ba 100644
--- a/src/translations/de_DE.json
+++ b/src/translations/de_DE.json
@@ -160,7 +160,9 @@
"title": "Type",
"api": "API",
"custom_image": "Benutzerdefiniertes Bild",
- "custom_colour": "Benutzerdefinierte Farbe/Farbverlauf"
+ "custom_colour": "Benutzerdefinierte Farbe/Farbverlauf",
+ "random_colour": "Random colour",
+ "random_gradient": "Random gradient"
},
"source": {
"title": "Quelle",
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index 8d02a37b..24063333 100644
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@@ -160,7 +160,9 @@
"title": "Type",
"api": "API",
"custom_image": "Custom image",
- "custom_colour": "Custom colour/gradient"
+ "custom_colour": "Custom colour/gradient",
+ "random_colour": "Random colour",
+ "random_gradient": "Random gradient"
},
"source": {
"title": "Source",
diff --git a/src/translations/en_US.json b/src/translations/en_US.json
index d85ab857..9a71e7d7 100644
--- a/src/translations/en_US.json
+++ b/src/translations/en_US.json
@@ -160,7 +160,9 @@
"title": "Type",
"api": "API",
"custom_image": "Custom image",
- "custom_colour": "Custom color/gradient"
+ "custom_colour": "Custom color/gradient",
+ "random_colour": "Random colour",
+ "random_gradient": "Random gradient"
},
"source": {
"title": "Source",
diff --git a/src/translations/es.json b/src/translations/es.json
index 1100f0ed..af62fc70 100644
--- a/src/translations/es.json
+++ b/src/translations/es.json
@@ -160,7 +160,9 @@
"title": "Tipo",
"api": "API",
"custom_image": "Imagen personalizada",
- "custom_colour": "Color/degradado personalizado"
+ "custom_colour": "Color/degradado personalizado",
+ "random_colour": "Random colour",
+ "random_gradient": "Random gradient"
},
"source": {
"title": "Fuente",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index c31af7cf..f2b26300 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -160,7 +160,9 @@
"title": "Type",
"api": "API",
"custom_image": "Image personnalisée",
- "custom_colour": "Couleur / dégradé personnalisé"
+ "custom_colour": "Couleur / dégradé personnalisé",
+ "random_colour": "Random colour",
+ "random_gradient": "Random gradient"
},
"source": {
"title": "Source",
diff --git a/src/translations/nl.json b/src/translations/nl.json
index 8a50f494..0f02b4d3 100644
--- a/src/translations/nl.json
+++ b/src/translations/nl.json
@@ -160,7 +160,9 @@
"title": "Type",
"api": "API",
"custom_image": "Custom image",
- "custom_colour": "Custom colour/gradient"
+ "custom_colour": "Custom colour/gradient",
+ "random_colour": "Random colour",
+ "random_gradient": "Random gradient"
},
"source": {
"title": "Source",
diff --git a/src/translations/no.json b/src/translations/no.json
index 9f869afe..16e7bc83 100644
--- a/src/translations/no.json
+++ b/src/translations/no.json
@@ -160,7 +160,9 @@
"title": "Type",
"api": "API",
"custom_image": "Custom image",
- "custom_colour": "Custom colour/gradient"
+ "custom_colour": "Custom colour/gradient",
+ "random_colour": "Random colour",
+ "random_gradient": "Random gradient"
},
"source": {
"title": "Source",
diff --git a/src/translations/ru.json b/src/translations/ru.json
index 0f1d70a6..4931ba16 100644
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@@ -160,7 +160,9 @@
"title": "Type",
"api": "API",
"custom_image": "Custom image",
- "custom_colour": "Custom colour/gradient"
+ "custom_colour": "Custom colour/gradient",
+ "random_colour": "Random colour",
+ "random_gradient": "Random gradient"
},
"source": {
"title": "Source",
diff --git a/src/translations/zh_CN.json b/src/translations/zh_CN.json
index 44761d9a..d13f4632 100644
--- a/src/translations/zh_CN.json
+++ b/src/translations/zh_CN.json
@@ -160,7 +160,9 @@
"title": "来源",
"api": "API",
"custom_image": "自定义图像",
- "custom_colour": "自定义背景颜色"
+ "custom_colour": "自定义背景颜色",
+ "random_colour": "Random colour",
+ "random_gradient": "Random gradient"
},
"source": {
"title": "来源",