Fixes #8 - forces Electron to clear cache on start

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 ### Fixed
 - Fixed [Issue 10](https://github.com/delightedCrow/WallberryTheme/issues/10): Background fades not reaching to bottom of screen for other 3rd party MM2 modules.
+- Provided a more permanent fix for [Issue 8](https://github.com/delightedCrow/WallberryTheme/issues/8) by adding an option to clear Electron's cache on start up.
 
 ## 2.0.0 - 2019-2-10
 ### Added

README.md

@@ -88,6 +88,7 @@ The following properties of `WallberryTheme` can be configured. For more informa
 | `brightImageOpacity`        | Number  | Controls the darkness of bright photos (determined by `autoDimOn`). Only used when `autoDimOn` is `true`. <br><br> **Possible values:** Any number from `0.0` (black screen) to `1` (fully bright image)<br> **Default value:** `0.85`
 | `autoDimOn`                 | Boolean | Automatically darkens bright photos to the value set by `brightImageOpacity`. <br><br> **Possible values:** `true` (on) or `false` (off) <br>**Default value:** `true`
 | `addBackgroundFade`         | Array   | Adds darker gradient backgrounds to the top bar region and/or bottom bar regions of MagicMirror (helps with readability for bright or busy background images). <br><br> **Possible values:** `"top"` will add a gradient background to the top bar region, `"bottom"` will add a gradient background to the bottom bar region. Set to an empty list to remove all gradients.  <br>**Default value:** `["top", "bottom"]`
+| `clearCacheOnStart`         | Boolean | Clears Electron's cache on MagicMirror startup, preventing an issue where Electron would sometimes encounter a CORS error when trying to load a previously cached background image ([see this issue here for details](https://github.com/delightedCrow/WallberryTheme/issues/8)).  <br><br> **Possible values:** `true` (on) or `false` (off) <br>**Default value:** `true`
 
 ## Changelog
 

WallberryTheme.js

@@ -17,7 +17,8 @@ Module.register("WallberryTheme", {
 		backgroundOpacity: 1, // between 0 (black background) and 1 (visible opaque background)
 		brightImageOpacity: 0.85, // between 0 (black background) and 1 (visible opaque background), only used when autoDimOn is true
 		autoDimOn: true, // automatically darken bright images
-		addBackgroundFade: ["top", "bottom"] // adds fades for the top and bottom bar regions (leave an empty list to remove fades)
+		addBackgroundFade: ["top", "bottom"], // adds fades for the top and bottom bar regions (leave an empty list to remove fades)
+		clearCacheOnStart: true // clear Electron's cache on MM start
 	},
 
 	photoData: null,
@@ -38,7 +39,11 @@ Module.register("WallberryTheme", {
 
 	start: function() {
 		Log.info("Starting module: " + this.name);
-		this.fetchPhoto();
+		if (this.config.clearCacheOnStart) {
+			this.sendSocketNotification("CLEAR_CACHE");
+		} else {
+			this.fetchPhoto();
+		}
 	},
 
 	getTemplate: function() {
@@ -56,19 +61,13 @@ Module.register("WallberryTheme", {
 		};
 	},
 
-	getFadeHeight: function(regionClassName) {
-		// we auto-adjust the height of the background fades to be at least the height of the top bar region and bottom bar regions, in case they're bigger than the 250px min height we set in the css
-		let region = document.getElementsByClassName(regionClassName)[0];
-		return region.clientHeight + 70; // +70 for margin+padding
-	},
+	socketNotificationReceived: function(notification, payload) {
+		switch(notification) {
+			case "ELECTRON_CACHE_CLEARED":
+				this.fetchPhoto();
+			break;
+		}
 
-	setBackgroundTint: function(tint) {
-		// setting the html/body background colors to the dark shade gives a much richer color to the image when it becomes transparent. We set the image to be transparent when we want to dim it (because the black background then comes through), but having a pure black background can cause the image to look greyish and washed out.
-		let darkBackground = `rgb(${tint.r}, ${tint.g}, ${tint.b})`;
-		let html = document.getElementsByTagName('html')[0];
-		let body = document.getElementsByTagName('body')[0];
-		body.style.backgroundColor = darkBackground;
-		html.style.backgroundColor = darkBackground;
 	},
 
 	fetchPhoto: function() {
@@ -147,5 +146,24 @@ Module.register("WallberryTheme", {
 		img.crossOrigin = "Anonymous"; // otherwise we'll get a security error if we attempt to draw this image on the canvas later (when we check if it's dark or light)
 		img.src = this.photoData.url;
 		this.photoElement = img;
-	}
+	},
+
+	/*
+			NUNJUCKS TEMPLATE HELPERS
+			The following functions are passed to and used by the nunjucks template
+	*/
+	getFadeHeight: function(regionClassName) {
+		// we auto-adjust the height of the background fades to be at least the height of the top bar region and bottom bar regions, in case they're bigger than the 250px min height we set in the css
+		let region = document.getElementsByClassName(regionClassName)[0];
+		return region.clientHeight + 70; // +70 for margin+padding
+	},
+
+	setBackgroundTint: function(tint) {
+		// setting the html/body background colors to the dark shade gives a much richer color to the image when it becomes transparent. We set the image to be transparent when we want to dim it (because the black background then comes through), but having a pure black background can cause the image to look greyish and washed out.
+		let darkBackground = `rgb(${tint.r}, ${tint.g}, ${tint.b})`;
+		let html = document.getElementsByTagName('html')[0];
+		let body = document.getElementsByTagName('body')[0];
+		body.style.backgroundColor = darkBackground;
+		html.style.backgroundColor = darkBackground;
+	},
 });

node_helper.js

@@ -0,0 +1,30 @@
+const NodeHelper = require('node_helper');
+const {BrowserWindow} = require('electron')
+
+module.exports = NodeHelper.create({
+
+	socketNotificationReceived: function(notification, payload) {
+    switch(notification) {
+      case "CLEAR_CACHE":
+        try {
+          const win = BrowserWindow.getAllWindows()[0];
+          const ses = win.webContents.session;
+
+          ses.clearCache(() => {
+            console.log("Electron's cache successfully cleared.");
+            this.sendSocketNotification("ELECTRON_CACHE_CLEARED", {});
+          });
+        } catch (e) {
+          // We'll get a TypeError if MM is being run in server only mode because Electron won't be running the app - if that's the case we can just say the cache has been cleared and call it a day
+          if (e.name == "TypeError") {
+            this.sendSocketNotification("ELECTRON_CACHE_CLEARED", {});
+          } else {
+            console.log("WallberryTheme ERROR: ", e);
+          }
+
+        }
+
+      break;
+    }
+	}
+});