Release 2.26.0 (#3319)

## [2.26.0] - 01-01-2024

Thanks to: @bnitkin, @bugsounet, @dependabot, @jkriegshauser,
@kaennchenstruggle, @KristjanESPERANTO and @Ybbet.

Special thanks to @khassel, @rejas and @sdetweil for taking over most
(if not all) of the work on this release as project collaborators. This
version would not be there without their effort. Thank you guys! You are
awesome!

This release also marks the latest release by Michael Teeuw. For more
info, please read the following post: [A New Chapter for MagicMirror:
The Community Takes the
Lead](https://forum.magicmirror.builders/topic/18329/a-new-chapter-for-magicmirror-the-community-takes-the-lead).

### Added

- Added update notification updater (for 3rd party modules)
- Added node 21 to the test matrix
- Added transform object to calendar:customEvents
- Added ESLint rules for jest (including jest/expect-expect and
jest/no-done-callback)

### Removed

- Removed Codecov workflow (not working anymore, other workflow
required) (#3107)
- Removed titleReplace from calendar, replaced + extended by
customEvents (backward compatibility included) (#3249)
- Removed failing unit test (#3254)
- Removed some unused variables

### Updated

- Update electron to v27 and update other dependencies as well as github
actions
- Update newsfeed: Use `html-to-text` instead of regex for transform
description
- Review ESLint config (#3269)
- Updated dependencies
- Clock module: optionally display current moon phase in addition to
rise/set times
- electron is now per default started without gpu, if needed it must be
enabled with new env var `ELECTRON_ENABLE_GPU=1` on startup (#3226)
- Replace prettier by stylistic in ESLint config to lint JavaScript (and
disable some rules for `config/config.js*` files)
- Update node-ical to v0.17.1 and fix tests

### Fixed

- Avoid fade out/in on updateDom when many calendars are used
- Fix the option eventClass on customEvents.
- Fix yr API version in locationforecast and sunrise call (#3227)
- Fix cloneObject() function to respect RegExp (#3237)
- Fix newsfeed module for feeds using "a10:updated" tag (#3238)
- Fix issue template (#3167)
- Fix #3256 filter out bad results from rrule.between
- Fix calendar events sometimes not respecting deleted events (#3250)
- Fix electron loadurl locally on Windows when address "0.0.0.0" (#2550)
- Fix updatanotification (update_helper.js): catch error if reponse is
not an JSON format (check PM2)
- Fix missing typeof in calendar module
- Fix style issues after prettier update
- Fix calendar test (#3291) by moving "Exdate check" from e2e to
electron to run on a Thursday
- Fix calendar config params `fetchInterval` and `excludedEvents` were
never used from single calendar config (#3297)
- Fix MM_PORT variable not used in electron and allow full path for
MM_CONFIG_FILE variable (#3302)

---------

Signed-off-by: naveen <172697+naveensrinivasan@users.noreply.github.com>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Karsten Hassel <hassel@gmx.de>
Co-authored-by: Malte Hallström <46646495+SkySails@users.noreply.github.com>
Co-authored-by: Veeck <github@veeck.de>
Co-authored-by: veeck <michael@veeck.de>
Co-authored-by: dWoolridge <dwoolridge@charter.net>
Co-authored-by: Johan <jojjepersson@yahoo.se>
Co-authored-by: Dario Mratovich <dario_mratovich@hotmail.com>
Co-authored-by: Dario Mratovich <dario.mratovich@outlook.com>
Co-authored-by: Magnus <34011212+MagMar94@users.noreply.github.com>
Co-authored-by: Naveen <172697+naveensrinivasan@users.noreply.github.com>
Co-authored-by: buxxi <buxxi@omfilm.net>
Co-authored-by: Thomas Hirschberger <47733292+Tom-Hirschberger@users.noreply.github.com>
Co-authored-by: Kristjan ESPERANTO <35647502+KristjanESPERANTO@users.noreply.github.com>
Co-authored-by: Andrés Vanegas Jiménez <142350+angeldeejay@users.noreply.github.com>
Co-authored-by: Dave Child <dave@addedbytes.com>
Co-authored-by: grenagit <46225780+grenagit@users.noreply.github.com>
Co-authored-by: Grena <grena@grenabox.fr>
Co-authored-by: Magnus Marthinsen <magmar@online.no>
Co-authored-by: Patrick <psieg@users.noreply.github.com>
Co-authored-by: Piotr Rajnisz <56397164+rajniszp@users.noreply.github.com>
Co-authored-by: Suthep Yonphimai <tomzt@users.noreply.github.com>
Co-authored-by: CarJem Generations (Carter Wallace) <cwallacecs@gmail.com>
Co-authored-by: Nicholas Fogal <nfogal.misc@gmail.com>
Co-authored-by: JakeBinney <126349119+JakeBinney@users.noreply.github.com>
Co-authored-by: OWL4C <124401812+OWL4C@users.noreply.github.com>
Co-authored-by: Oscar Björkman <17575446+oscarb@users.noreply.github.com>
Co-authored-by: Ismar Slomic <ismar@slomic.no>
Co-authored-by: Jørgen Veum-Wahlberg <jorgen.wahlberg@amedia.no>
Co-authored-by: Eddie Hung <6740044+eddiehung@users.noreply.github.com>
Co-authored-by: Bugsounet - Cédric <github@bugsounet.fr>
Co-authored-by: bugsounet <bugsounet@bugsounet.fr>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Knapoc <Knapoc@users.noreply.github.com>
Co-authored-by: sam detweiler <sdetweil@gmail.com>
Co-authored-by: veeck <michael.veeck@nebenan.de>
Co-authored-by: Paranoid93 <6515818+Paranoid93@users.noreply.github.com>
Co-authored-by: NolanKingdon <27908974+NolanKingdon@users.noreply.github.com>
Co-authored-by: J. Kenzal Hunter <kenzal.hunter@gmail.com>
Co-authored-by: Teddy <teddy.payet@gmail.com>
Co-authored-by: TeddyStarinvest <teddy.payet@starinvest.com>
Co-authored-by: martingron <61826403+martingron@users.noreply.github.com>
Co-authored-by: dgoth <132394363+dgoth@users.noreply.github.com>
Co-authored-by: kaennchenstruggle <54073894+kaennchenstruggle@users.noreply.github.com>
Co-authored-by: jkriegshauser <jkriegshauser@gmail.com>
Co-authored-by: Ben Nitkin <ben@nitkin.net>

.eslintrc.json

@@ -1,9 +1,9 @@
 {
-	"extends": ["eslint:recommended", "plugin:prettier/recommended", "plugin:jsdoc/recommended"],
-	"plugins": ["prettier", "import", "jsdoc", "jest"],
+	"extends": ["eslint:recommended", "plugin:@stylistic/all-extends", "plugin:import/recommended", "plugin:jest/recommended", "plugin:jsdoc/recommended"],
+	"plugins": [],
 	"env": {
 		"browser": true,
-		"es2022": true,
+		"es2023": true,
 		"jest/globals": true,
 		"node": true
 	},
@@ -16,7 +16,7 @@
 	},
 	"parserOptions": {
 		"sourceType": "module",
-		"ecmaVersion": 2022,
+		"ecmaVersion": 2023,
 		"ecmaFeatures": {
 			"globalReturn": true
 		}
@@ -24,11 +24,60 @@
 	"rules": {
 		"eqeqeq": "error",
 		"import/order": "error",
+		"import/extensions": "error",
+		"import/newline-after-import": "error",
+		"jest/consistent-test-it": "warn",
+		"jest/expect-expect": "warn",
+		"jest/no-done-callback": "warn",
+		"jest/prefer-expect-resolves": "warn",
+		"jest/prefer-mock-promise-shorthand": "warn",
+		"jest/prefer-to-be": "warn",
+		"jest/prefer-to-have-length": "warn",
 		"no-param-reassign": "error",
 		"no-prototype-builtins": "off",
 		"no-throw-literal": "error",
 		"no-unused-vars": "off",
 		"no-useless-return": "error",
-		"prefer-template": "error"
-	}
+		"object-shorthand": ["error", "methods"],
+		"prefer-template": "error",
+		"@stylistic/array-element-newline": ["error", "consistent"],
+		"@stylistic/arrow-parens": ["error", "always"],
+		"@stylistic/brace-style": "off",
+		"@stylistic/comma-dangle": ["error", "never"],
+		"@stylistic/dot-location": ["error", "property"],
+		"@stylistic/function-call-argument-newline": ["error", "consistent"],
+		"@stylistic/function-paren-newline": ["error", "consistent"],
+		"@stylistic/implicit-arrow-linebreak": ["error", "beside"],
+		"@stylistic/max-statements-per-line": ["error", { "max": 2 }],
+		"@stylistic/multiline-ternary": ["error", "always-multiline"],
+		"@stylistic/newline-per-chained-call": ["error", { "ignoreChainWithDepth": 4 }],
+		"@stylistic/no-extra-parens": "off",
+		"@stylistic/no-tabs": "off",
+		"@stylistic/object-curly-spacing": ["error", "always"],
+		"@stylistic/object-property-newline": ["error", { "allowAllPropertiesOnSameLine": true }],
+		"@stylistic/operator-linebreak": ["error", "before"],
+		"@stylistic/padded-blocks": "off",
+		"@stylistic/quote-props": ["error", "as-needed"],
+		"@stylistic/quotes": ["error", "double"],
+		"@stylistic/indent": ["error", "tab"],
+		"@stylistic/semi": ["error", "always"],
+		"@stylistic/space-before-function-paren": ["error", "always"],
+		"@stylistic/spaced-comment": "off"
+	},
+	"overrides": [
+		{
+			"files": ["config/config.js*"],
+			"rules": {
+				"@stylistic/comma-dangle": "off",
+				"@stylistic/indent": "off",
+				"@stylistic/no-multi-spaces": "off"
+			}
+		},
+		{
+			"files": ["tests/configs/modules/weather/*.js"],
+			"rules": {
+				"@stylistic/quotes": "off"
+			}
+		}
+	]
 }

.github/CONTRIBUTING.md

@@ -43,7 +43,7 @@ When submitting a new issue, please supply the following information:
 
 **Platform**: Place your platform here... give us your web browser/Electron version _and_ your hardware (Raspberry Pi 2/3/4, Windows, Mac, Linux, System V UNIX).
 
-**Node Version**: Make sure it's version 16 or later (recommended is 18).
+**Node Version**: Make sure it's version 18 or later (recommended is 20).
 
 **MagicMirror² Version**: Please let us know which version of MagicMirror² you are running. It can be found in the `package.json` file.
 

.github/ISSUE_TEMPLATE.md

@@ -1,6 +1,6 @@
 Hello and thank you for opening an issue.
 
-**Please make sure that you have read the following lines before submitting your Issue:**
+**⚠️ Please make sure that you have read the following lines before submitting your Issue:**
 
 ## I'm not sure if this is a bug
 
@@ -22,6 +22,10 @@ If you are facing an issue or found a bug while trying to install MagicMirror²
 If you are facing an issue or found a bug while running MagicMirror² inside a Docker container please create an issue in the corresponding repository:
 [https://gitlab.com/khassel/magicmirror](https://gitlab.com/khassel/magicmirror)
 
+## I'm having troubles installing or configuring foreign modules
+
+Please open an issue in the module repository or ask for help in the [forum](https://forum.magicmirror.builders/)
+
 ---
 
 ## I found a bug in MagicMirror
@@ -31,7 +35,7 @@ When submitting a new issue, please supply the following information:
 
 **Platform**: Place your platform here... give us your web browser/Electron version _and_ your hardware (Raspberry Pi 2/3/4, Windows, Mac, Linux, System V UNIX).
 
-**Node Version**: Make sure it's version 16 or later (recommended is 18).
+**Node Version**: Make sure it's version 18 or later (recommended is 20).
 
 **MagicMirror² Version**: Please let us know which version of MagicMirror² you are running. It can be found in the `package.json` file.
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,7 +3,6 @@ Hello and thank you for wanting to contribute to the MagicMirror² project
 **Please make sure that you have followed these 4 rules before submitting your Pull Request:**
 
 > 1. Base your pull requests against the `develop` branch.
->
 > 2. Include these infos in the description:
 >
 > - Does the pull request solve a **related** issue?
@@ -13,7 +12,6 @@ Hello and thank you for wanting to contribute to the MagicMirror² project
 >
 > 3. Please run `npm run lint:prettier` before submitting so that
 >    style issues are fixed.
->
 > 4. Don't forget to add an entry about your changes to
 >    the CHANGELOG.md file.
 

.github/dependabot.yaml

@@ -5,3 +5,21 @@ updates:
     schedule:
       interval: "weekly"
     target-branch: "develop"
+
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    target-branch: "develop"
+
+  - package-ecosystem: "npm"
+    directory: "/vendor"
+    schedule:
+      interval: "monthly"
+    target-branch: "develop"
+
+  - package-ecosystem: "npm"
+    directory: "/fonts"
+    schedule:
+      interval: "monthly"
+    target-branch: "develop"

.github/workflows/automated-tests.yaml

@@ -18,12 +18,12 @@ jobs:
     timeout-minutes: 30
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 20.x]
+        node-version: [18.x, 20.x, 21.x]
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: "Use Node.js ${{ matrix.node-version }}"
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: "npm"

.github/workflows/codecov-test-suites.yaml

@@ -1,35 +0,0 @@
-# This workflow runs the automated test and uploads the coverage results to codecov.io
-# For more information see: https://github.com/codecov/codecov-action
-
-name: "Run Codecov Tests"
-
-on:
-  push:
-    branches: [master, develop]
-  pull_request:
-    branches: [master, develop]
-
-permissions:
-  contents: read
-
-jobs:
-  run-and-upload-coverage-report:
-    runs-on: ubuntu-latest
-    timeout-minutes: 30
-    steps:
-      - name: "Checkout code"
-        uses: actions/checkout@v3
-      - name: "Install dependencies"
-        run: |
-          npm ci
-      - name: "Run coverage"
-        run: |
-          Xvfb :99 -screen 0 1024x768x16 &
-          export DISPLAY=:99
-          touch css/custom.css
-          npm run test:coverage
-      - name: "Upload coverage results to codecov"
-        uses: codecov/codecov-action@v3
-        with:
-          files: ./coverage/lcov.info
-          fail_ci_if_error: true

.github/workflows/depsreview.yaml

@@ -13,6 +13,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: "Dependency Review"
         uses: actions/dependency-review-action@v3

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+audit=false

.prettierignore

@@ -1,3 +1,6 @@
+*.js
+.prettierignore
 /config
 /coverage
 package-lock.json
+**.ics

CHANGELOG.md

@@ -5,6 +5,113 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ❤️ **Donate:** Enjoying MagicMirror²? [Please consider a donation!](https://magicmirror.builders/donate) With your help we can continue to improve the MagicMirror².
 
+## [2.26.0] - 01-01-2024
+
+Thanks to: @bnitkin, @bugsounet, @dependabot, @jkriegshauser, @kaennchenstruggle, @KristjanESPERANTO and @Ybbet.
+
+Special thanks to @khassel, @rejas and @sdetweil for taking over most (if not all) of the work on this release as project collaborators. This version would not be there without their effort. Thank you guys! You are awesome!
+
+This release also marks the latest release by Michael Teeuw. For more info, please read the following post: [A New Chapter for MagicMirror: The Community Takes the Lead](https://forum.magicmirror.builders/topic/18329/a-new-chapter-for-magicmirror-the-community-takes-the-lead).
+
+### Added
+
+- Added update notification updater (for 3rd party modules)
+- Added node 21 to the test matrix
+- Added transform object to calendar:customEvents
+- Added ESLint rules for jest (including jest/expect-expect and jest/no-done-callback)
+
+### Removed
+
+- Removed Codecov workflow (not working anymore, other workflow required) (#3107)
+- Removed titleReplace from calendar, replaced + extended by customEvents (backward compatibility included) (#3249)
+- Removed failing unit test (#3254)
+- Removed some unused variables
+
+### Updated
+
+- Update electron to v27 and update other dependencies as well as github actions
+- Update newsfeed: Use `html-to-text` instead of regex for transform description
+- Review ESLint config (#3269)
+- Updated dependencies
+- Clock module: optionally display current moon phase in addition to rise/set times
+- electron is now per default started without gpu, if needed it must be enabled with new env var `ELECTRON_ENABLE_GPU=1` on startup (#3226)
+- Replace prettier by stylistic in ESLint config to lint JavaScript (and disable some rules for `config/config.js*` files)
+- Update node-ical to v0.17.1 and fix tests
+
+### Fixed
+
+- Avoid fade out/in on updateDom when many calendars are used
+- Fix the option eventClass on customEvents.
+- Fix yr API version in locationforecast and sunrise call (#3227)
+- Fix cloneObject() function to respect RegExp (#3237)
+- Fix newsfeed module for feeds using "a10:updated" tag (#3238)
+- Fix issue template (#3167)
+- Fix #3256 filter out bad results from rrule.between
+- Fix calendar events sometimes not respecting deleted events (#3250)
+- Fix electron loadurl locally on Windows when address "0.0.0.0" (#2550)
+- Fix updatanotification (update_helper.js): catch error if reponse is not an JSON format (check PM2)
+- Fix missing typeof in calendar module
+- Fix style issues after prettier update
+- Fix calendar test (#3291) by moving "Exdate check" from e2e to electron to run on a Thursday
+- Fix calendar config params `fetchInterval` and `excludedEvents` were never used from single calendar config (#3297)
+- Fix MM_PORT variable not used in electron and allow full path for MM_CONFIG_FILE variable (#3302)
+
+## [2.25.0] - 2023-10-01
+
+Thanks to: @bugsounet, @dgoth, @dependabot, @kenzal, @Knapoc, @KristjanESPERANTO, @martingron, @NolanKingdon, @Paranoid93, @TeddyStarinvest and @Ybbet.
+
+Special thanks to @khassel, @rejas and @sdetweil for taking over most (if not all) of the work on this release as project collaborators. This version would not be there without their effort. Thank you guys! You are awesome!
+
+> ⚠️ This release needs nodejs version >= `v18`, older releases have reached end of life and will not work!
+
+### Added
+
+- Added UV Index support to OpenWeatherMap
+- Added 'hideDuplicates' flag to the calendar module
+- Added `allowOverrideNotification` to weather module to enable sending current weather objects with the `CURRENT_WEATHER_OVERRIDE` notification to supplement/replace the current weather displayed
+- Added optional AnimateCSS animate for `hide()`, `show()`, `updateDom()`
+- Added AnimateIn and animateOut in module config definition
+- Apply AnimateIn rules on the first start
+- Added automatic client page reload when server was restarted by setting `reloadAfterServerRestart: true` in `config.js`, per default `false` (#3105)
+- Added eventClass option for customEvents on the default calendar
+- Added AnimateCSS integration in tests suite (#3206)
+- Added npm dependabot [Reserved to developer] (#3210)
+- Added improved logging for calendar (#3110)
+
+### Removed
+
+- **Breaking Change**: Removed `digest` authentication method from calendar module (which was already broken since release `2.15.0`)
+
+### Updated
+
+- Update roboto fonts to version v5
+- Update issue template
+- Update dev/dependencies incl. electron to v26
+- Replace pretty-quick by lint-staged (<https://github.com/azz/pretty-quick/issues/164>)
+- Update engine node >=18. v16 reached its end of life. (#3170)
+- Update typescript definition for modules
+- Cleaned up nunjuck templates
+- Replace `node-fetch` with internal fetch (#2649) and remove `digest-fetch`
+- Update the French translation according to the English file.
+- Update dependabot incl. vendor/fonts (monthly check)
+- Renew `package-lock.json` for release
+
+### Fixed
+
+- Fix engine check on npm install (#3135)
+- Fix undefined formatTime method in clock module (#3143)
+- Fix clientonly startup fails after async added (#3151)
+- Fix electron width/height when using xrandr under bullseye
+- Fix time issue with certain recurring events in calendar module
+- Fix ipWhiteList test (#3179)
+- Fix newsfeed: Convert HTML entities, codes and tag in description (#3191)
+- Respect width/height (no fullscreen) if set in electronOptions (together with `fullscreen: false`) in `config.js` (#3174)
+- Fix: AnimateCSS merge hide() and show() animated css class when we do multiple call
+- Fix `Uncaught SyntaxError: Identifier 'getCorsUrl' has already been declared (at utils.js:1:1)` when using `clock` and `weather` module (#3204)
+- Fix overriding `config.js` when running tests (#3201)
+- Fix issue in weathergov provider with probability of precipitation not showing up on hourly or daily forecast
+- Fix yr weather provider after changes in yr API (#3189)
+
 ## [2.24.0] - 2023-07-01
 
 Thanks to: @angeldeejay, @bugsounet, @buxxi, @CarJem, @dariom, @DaveChild, @dWoolridge, @eddiehung, @grenagit, @Hirschberger, @ismarslomic, @JakeBinney, @KristjanESPERANTO, @MagMar94, @naveensrinivasan, @nfogal, @oscarb, @OWL4C, @psieg, @rajniszp, @retroflex, @SkySails and @tomzt

README.md

@@ -6,9 +6,6 @@
 	</a>
 	<img src="https://img.shields.io/github/actions/workflow/status/michmich/magicmirror/automated-tests.yaml" alt="GitHub Actions">
 	<img src="https://img.shields.io/github/checks-status/michmich/magicmirror/master" alt="Build Status">
-	<a href="https://codecov.io/gh/MichMich/MagicMirror">
-		<img src="https://codecov.io/gh/MichMich/MagicMirror/branch/master/graph/badge.svg?token=LEG1KitZR6" alt="CodeCov Status"/>
-	</a>
 	<a href="https://github.com/MichMich/MagicMirror">
 		<img src="https://img.shields.io/github/stars/michmich/magicmirror?style=social">
 	</a>

clientonly/index.js

@@ -7,7 +7,8 @@
 	/**
 	 * Helper function to get server address/hostname from either the commandline or env
 	 */
-	function getServerAddress() {
+	function getServerAddress () {
+
 		/**
 		 * Get command line parameters
 		 * Assumes that a cmdline parameter is defined with `--key [value]`
@@ -15,7 +16,7 @@
 		 * @param {string} defaultValue value if no key is given at the command line
 		 * @returns {string} the value of the parameter
 		 */
-		function getCommandLineParameter(key, defaultValue = undefined) {
+		function getCommandLineParameter (key, defaultValue = undefined) {
 			const index = process.argv.indexOf(`--${key}`);
 			const value = index > -1 ? process.argv[index + 1] : undefined;
 			return value !== undefined ? String(value) : defaultValue;
@@ -35,7 +36,7 @@
 	 * @param {string} url location where the server is running.
 	 * @returns {Promise} the config
 	 */
-	function getServerConfig(url) {
+	function getServerConfig (url) {
 		// Return new pending promise
 		return new Promise((resolve, reject) => {
 			// Select http or https module, depending on requested url
@@ -64,7 +65,7 @@
 	 * @param {string} message error message to print
 	 * @param {number} code error code for the exit call
 	 */
-	function fail(message, code = 1) {
+	function fail (message, code = 1) {
 		if (message !== undefined && typeof message === "string") {
 			console.log(message);
 		} else {
@@ -84,6 +85,7 @@
 			.then(function (configReturn) {
 				// Pass along the server config via an environment variable
 				const env = Object.create(process.env);
+				env.clientonly = true; // set to pass to electron.js
 				const options = { env: env };
 				configReturn.address = config.address;
 				configReturn.port = config.port;
@@ -120,4 +122,4 @@
 	} else {
 		fail();
 	}
-})();
+}());

config/config.js.sample

@@ -18,17 +18,17 @@ let config = {
 							// - "0.0.0.0", "::" to listen on any interface
 							// Default, when address config is left out or empty, is "localhost"
 	port: 8080,
-	basePath: "/",			// The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
-					  		// you must set the sub path here. basePath must end with a /
+	basePath: "/",	// The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
+									// you must set the sub path here. basePath must end with a /
 	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],	// Set [] to allow all IP addresses
-															// or add a specific IPv4 of 192.168.1.5 :
-															// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
-															// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
-															// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
+									// or add a specific IPv4 of 192.168.1.5 :
+									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
+									// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
+									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
 
-	useHttps: false, 		// Support HTTPS or not, default "false" will use HTTP
-	httpsPrivateKey: "", 	// HTTPS private key path, only require when useHttps is true
-	httpsCertificate: "", 	// HTTPS Certificate path, only require when useHttps is true
+	useHttps: false,			// Support HTTPS or not, default "false" will use HTTP
+	httpsPrivateKey: "",	// HTTPS private key path, only require when useHttps is true
+	httpsCertificate: "",	// HTTPS Certificate path, only require when useHttps is true
 
 	language: "en",
 	locale: "en-US",
@@ -109,4 +109,4 @@ let config = {
 };
 
 /*************** DO NOT EDIT THE LINE BELOW ***************/
-if (typeof module !== "undefined") {module.exports = config;}
+if (typeof module !== "undefined") { module.exports = config; }

fonts/package-lock.json

@@ -1,37 +1,25 @@
 {
 	"name": "magicmirror-fonts",
-	"lockfileVersion": 2,
+	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "magicmirror-fonts",
 			"license": "MIT",
 			"dependencies": {
-				"@fontsource/roboto": "^4.5.8",
-				"@fontsource/roboto-condensed": "^4.5.9"
+				"@fontsource/roboto": "^5.0.8",
+				"@fontsource/roboto-condensed": "^5.0.14"
 			}
 		},
 		"node_modules/@fontsource/roboto": {
-			"version": "4.5.8",
-			"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz",
-			"integrity": "sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA=="
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.8.tgz",
+			"integrity": "sha512-XxPltXs5R31D6UZeLIV1td3wTXU3jzd3f2DLsXI8tytMGBkIsGcc9sIyiupRtA8y73HAhuSCeweOoBqf6DbWCA=="
 		},
 		"node_modules/@fontsource/roboto-condensed": {
-			"version": "4.5.9",
-			"resolved": "https://registry.npmjs.org/@fontsource/roboto-condensed/-/roboto-condensed-4.5.9.tgz",
-			"integrity": "sha512-ql4sQq+h8puBVildZ5ssjYf8DWDONYDe3PD3Bu/p1ZW9GnRETRNPPcCTs/q62HIl3QimwwkiKWynn6wZhQaetg=="
-		}
-	},
-	"dependencies": {
-		"@fontsource/roboto": {
-			"version": "4.5.8",
-			"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz",
-			"integrity": "sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA=="
-		},
-		"@fontsource/roboto-condensed": {
-			"version": "4.5.9",
-			"resolved": "https://registry.npmjs.org/@fontsource/roboto-condensed/-/roboto-condensed-4.5.9.tgz",
-			"integrity": "sha512-ql4sQq+h8puBVildZ5ssjYf8DWDONYDe3PD3Bu/p1ZW9GnRETRNPPcCTs/q62HIl3QimwwkiKWynn6wZhQaetg=="
+			"version": "5.0.14",
+			"resolved": "https://registry.npmjs.org/@fontsource/roboto-condensed/-/roboto-condensed-5.0.14.tgz",
+			"integrity": "sha512-ZNBHUhE5/3z9efMIjpBblFsfLHgGotJjlzKd5Q8DODbkRRWy6Yh+JnbiaJZ8zwQyHyYBNOolk57BG4BcjSzrRg=="
 		}
 	}
 }

fonts/package.json

@@ -10,7 +10,7 @@
 		"url": "https://github.com/MichMich/MagicMirror/issues"
 	},
 	"dependencies": {
-		"@fontsource/roboto": "^4.5.8",
-		"@fontsource/roboto-condensed": "^4.5.9"
+		"@fontsource/roboto": "^5.0.8",
+		"@fontsource/roboto-condensed": "^5.0.14"
 	}
 }

fonts/roboto.css

@@ -1,55 +1,671 @@
+/* roboto-cyrillic-ext-100-normal */
 @font-face {
   font-family: Roboto;
   font-style: normal;
+  font-display: var(--fontsource-display, swap);
   font-weight: 100;
-  src: local("Roboto Thin"), local("Roboto-Thin"), url("node_modules/@fontsource/roboto/files/roboto-all-100-normal.woff") format("woff");
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-100-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
+/* roboto-cyrillic-100-normal */
 @font-face {
-  font-family: "Roboto Condensed";
+  font-family: Roboto;
   font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 100;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-100-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-greek-ext-100-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 100;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-100-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-greek-100-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 100;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-100-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-vietnamese-100-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 100;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-100-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-latin-ext-100-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 100;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-100-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-latin-100-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 100;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-100-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-cyrillic-ext-300-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
   font-weight: 300;
-  src: local("Roboto Condensed Light"), local("RobotoCondensed-Light"), url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-all-300-normal.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Roboto Condensed";
-  font-style: normal;
-  font-weight: 400;
-  src: local("Roboto Condensed"), local("RobotoCondensed-Regular"), url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-all-400-normal.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Roboto Condensed";
-  font-style: normal;
-  font-weight: 700;
-  src: local("Roboto Condensed Bold"), local("RobotoCondensed-Bold"), url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-all-700-normal.woff") format("woff");
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-300-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
+/* roboto-cyrillic-300-normal */
 @font-face {
   font-family: Roboto;
   font-style: normal;
-  font-weight: 400;
-  src: local("Roboto"), local("Roboto-Regular"), url("node_modules/@fontsource/roboto/files/roboto-all-400-normal.woff") format("woff");
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-300-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
+/* roboto-greek-ext-300-normal */
 @font-face {
   font-family: Roboto;
   font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-300-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-greek-300-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-300-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-vietnamese-300-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-300-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-latin-ext-300-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-300-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-latin-300-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-300-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-cyrillic-ext-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-400-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* roboto-cyrillic-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-400-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-greek-ext-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-400-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-greek-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-400-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-vietnamese-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-400-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-latin-ext-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-400-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-latin-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-cyrillic-ext-500-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
   font-weight: 500;
-  src: local("Roboto Medium"), local("Roboto-Medium"), url("node_modules/@fontsource/roboto/files/roboto-all-500-normal.woff") format("woff");
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-500-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
+/* roboto-cyrillic-500-normal */
 @font-face {
   font-family: Roboto;
   font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 500;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-500-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-greek-ext-500-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 500;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-500-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-greek-500-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 500;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-500-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-vietnamese-500-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 500;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-500-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-latin-ext-500-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 500;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-500-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-latin-500-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 500;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-500-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-cyrillic-ext-700-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
   font-weight: 700;
-  src: local("Roboto Bold"), local("Roboto-Bold"), url("node_modules/@fontsource/roboto/files/roboto-all-700-normal.woff") format("woff");
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-700-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
+/* roboto-cyrillic-700-normal */
 @font-face {
   font-family: Roboto;
   font-style: normal;
-  font-weight: 300;
-  src: local("Roboto Light"), local("Roboto-Light"), url("node_modules/@fontsource/roboto/files/roboto-all-300-normal.woff") format("woff");
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-700-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-greek-ext-700-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-700-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-greek-700-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-700-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-vietnamese-700-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-700-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-latin-ext-700-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-700-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-latin-700-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-700-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-condensed-cyrillic-ext-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-ext-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-ext-300-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* roboto-condensed-cyrillic-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-300-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-condensed-greek-ext-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-ext-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-ext-300-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-condensed-greek-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-300-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-condensed-vietnamese-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-vietnamese-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-vietnamese-300-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-condensed-latin-ext-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-ext-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-ext-300-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-condensed-latin-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-300-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-condensed-cyrillic-ext-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-ext-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-ext-400-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* roboto-condensed-cyrillic-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-400-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-condensed-greek-ext-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-ext-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-ext-400-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-condensed-greek-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-400-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-condensed-vietnamese-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-vietnamese-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-vietnamese-400-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-condensed-latin-ext-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-ext-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-ext-400-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-condensed-latin-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-400-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-condensed-cyrillic-ext-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-ext-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-ext-700-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* roboto-condensed-cyrillic-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-700-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-condensed-greek-ext-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-ext-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-ext-700-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-condensed-greek-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-700-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-condensed-vietnamese-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-vietnamese-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-vietnamese-700-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-condensed-latin-ext-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-ext-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-ext-700-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-condensed-latin-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-700-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>MagicMirror²</title>
@@ -13,6 +13,7 @@
     <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
     <link rel="stylesheet" type="text/css" href="css/main.css" />
     <link rel="stylesheet" type="text/css" href="fonts/roboto.css" />
+    <link rel="stylesheet" type="text/css" href="vendor/node_modules/animate.css/animate.min.css" />
     <!-- custom.css is loaded by the loader.js to make sure it's loaded after the module css files. -->
 
     <script type="text/javascript">
@@ -45,6 +46,7 @@
     <script type="text/javascript" src="#CONFIG_FILE#"></script>
     <script type="text/javascript" src="vendor/vendor.js"></script>
     <script type="text/javascript" src="modules/default/defaultmodules.js"></script>
+    <script type="text/javascript" src="modules/default/utils.js"></script>
     <script type="text/javascript" src="js/logger.js"></script>
     <script type="text/javascript" src="translations/translations.js"></script>
     <script type="text/javascript" src="js/translator.js"></script>
@@ -52,6 +54,7 @@
     <script type="text/javascript" src="js/module.js"></script>
     <script type="text/javascript" src="js/loader.js"></script>
     <script type="text/javascript" src="js/socketclient.js"></script>
+    <script type="text/javascript" src="js/animateCSS.js"></script>
     <script type="text/javascript" src="js/main.js"></script>
   </body>
 </html>

js/animateCSS.js

@@ -0,0 +1,164 @@
+/* MagicMirror²
+ * AnimateCSS System from https://animate.style/
+ * by @bugsounet
+ * for Michael Teeuw https://michaelteeuw.nl
+ * MIT Licensed.
+ */
+
+/* enumeration of animations in Array **/
+const AnimateCSSIn = [
+	// Attention seekers
+	"bounce",
+	"flash",
+	"pulse",
+	"rubberBand",
+	"shakeX",
+	"shakeY",
+	"headShake",
+	"swing",
+	"tada",
+	"wobble",
+	"jello",
+	"heartBeat",
+	// Back entrances
+	"backInDown",
+	"backInLeft",
+	"backInRight",
+	"backInUp",
+	// Bouncing entrances
+	"bounceIn",
+	"bounceInDown",
+	"bounceInLeft",
+	"bounceInRight",
+	"bounceInUp",
+	// Fading entrances
+	"fadeIn",
+	"fadeInDown",
+	"fadeInDownBig",
+	"fadeInLeft",
+	"fadeInLeftBig",
+	"fadeInRight",
+	"fadeInRightBig",
+	"fadeInUp",
+	"fadeInUpBig",
+	"fadeInTopLeft",
+	"fadeInTopRight",
+	"fadeInBottomLeft",
+	"fadeInBottomRight",
+	// Flippers
+	"flip",
+	"flipInX",
+	"flipInY",
+	// Lightspeed
+	"lightSpeedInRight",
+	"lightSpeedInLeft",
+	// Rotating entrances
+	"rotateIn",
+	"rotateInDownLeft",
+	"rotateInDownRight",
+	"rotateInUpLeft",
+	"rotateInUpRight",
+	// Specials
+	"jackInTheBox",
+	"rollIn",
+	// Zooming entrances
+	"zoomIn",
+	"zoomInDown",
+	"zoomInLeft",
+	"zoomInRight",
+	"zoomInUp",
+	// Sliding entrances
+	"slideInDown",
+	"slideInLeft",
+	"slideInRight",
+	"slideInUp"
+];
+
+const AnimateCSSOut = [
+	// Back exits
+	"backOutDown",
+	"backOutLeft",
+	"backOutRight",
+	"backOutUp",
+	// Bouncing exits
+	"bounceOut",
+	"bounceOutDown",
+	"bounceOutLeft",
+	"bounceOutRight",
+	"bounceOutUp",
+	// Fading exits
+	"fadeOut",
+	"fadeOutDown",
+	"fadeOutDownBig",
+	"fadeOutLeft",
+	"fadeOutLeftBig",
+	"fadeOutRight",
+	"fadeOutRightBig",
+	"fadeOutUp",
+	"fadeOutUpBig",
+	"fadeOutTopLeft",
+	"fadeOutTopRight",
+	"fadeOutBottomRight",
+	"fadeOutBottomLeft",
+	// Flippers
+	"flipOutX",
+	"flipOutY",
+	// Lightspeed
+	"lightSpeedOutRight",
+	"lightSpeedOutLeft",
+	// Rotating exits
+	"rotateOut",
+	"rotateOutDownLeft",
+	"rotateOutDownRight",
+	"rotateOutUpLeft",
+	"rotateOutUpRight",
+	// Specials
+	"hinge",
+	"rollOut",
+	// Zooming exits
+	"zoomOut",
+	"zoomOutDown",
+	"zoomOutLeft",
+	"zoomOutRight",
+	"zoomOutUp",
+	// Sliding exits
+	"slideOutDown",
+	"slideOutLeft",
+	"slideOutRight",
+	"slideOutUp"
+];
+
+/**
+ * Create an animation with Animate CSS
+ * @param {string} [element] div element to animate.
+ * @param {string} [animation] animation name.
+ * @param {number} [animationTime] animation duration.
+ */
+function addAnimateCSS (element, animation, animationTime) {
+	const animationName = `animate__${animation}`;
+	const node = document.getElementById(element);
+	if (!node) {
+		// don't execute animate: we don't find div
+		Log.warn("addAnimateCSS: node not found for", element);
+		return;
+	}
+	node.style.setProperty("--animate-duration", `${animationTime}s`);
+	node.classList.add("animate__animated", animationName);
+}
+
+/**
+ * Remove an animation with Animate CSS
+ * @param {string} [element] div element to animate.
+ * @param {string} [animation] animation name.
+ */
+function removeAnimateCSS (element, animation) {
+	const animationName = `animate__${animation}`;
+	const node = document.getElementById(element);
+	if (!node) {
+		// don't execute animate: we don't find div
+		Log.warn("removeAnimateCSS: node not found for", element);
+		return;
+	}
+	node.classList.remove("animate__animated", animationName);
+	node.style.removeProperty("--animate-duration");
+}

js/app.js

@@ -12,6 +12,7 @@ const fs = require("fs");
 const path = require("path");
 const envsub = require("envsub");
 const Log = require("logger");
+
 const Server = require(`${__dirname}/server`);
 const Utils = require(`${__dirname}/utils`);
 const defaultModules = require(`${__dirname}/../modules/default/defaultmodules`);
@@ -24,7 +25,7 @@ Log.log(`Starting MagicMirror: v${global.version}`);
 global.root_path = path.resolve(`${__dirname}/../`);
 
 if (process.env.MM_CONFIG_FILE) {
-	global.configuration_file = process.env.MM_CONFIG_FILE;
+	global.configuration_file = process.env.MM_CONFIG_FILE.replace(`${global.root_path}/`, "");
 }
 
 // FIXME: Hotfix Pull Request
@@ -46,7 +47,7 @@ process.on("uncaughtException", function (err) {
  * The core app.
  * @class
  */
-function App() {
+function App () {
 	let nodeHelpers = [];
 	let httpServer;
 
@@ -55,7 +56,7 @@ function App() {
 	 * @async
 	 * @returns {Promise<object>} the loaded config or the defaults if something goes wrong
 	 */
-	async function loadConfig() {
+	async function loadConfig () {
 		Log.log("Loading config ...");
 		const defaults = require(`${__dirname}/defaults`);
 
@@ -135,7 +136,7 @@ function App() {
 	 * if it encounters one option from the deprecated.js list
 	 * @param {object} userConfig The user config
 	 */
-	function checkDeprecatedOptions(userConfig) {
+	function checkDeprecatedOptions (userConfig) {
 		const deprecated = require(`${global.root_path}/js/deprecated`);
 		const deprecatedOptions = deprecated.configs;
 
@@ -149,7 +150,7 @@ function App() {
 	 * Loads a specific module.
 	 * @param {string} module The name of the module (including subpath).
 	 */
-	function loadModule(module) {
+	function loadModule (module) {
 		const elements = module.split("/");
 		const moduleName = elements[elements.length - 1];
 		let moduleFolder = `${__dirname}/../modules/${module}`;
@@ -203,7 +204,7 @@ function App() {
 	 * @param {Module[]} modules All modules to be loaded
 	 * @returns {Promise} A promise that is resolved when all modules been loaded
 	 */
-	async function loadModules(modules) {
+	async function loadModules (modules) {
 		Log.log("Loading module helpers ...");
 
 		for (let module of modules) {
@@ -220,7 +221,7 @@ function App() {
 	 * @returns {number} A positive number if a is larger than b, a negative
 	 * number if a is smaller and 0 if they are the same
 	 */
-	function cmpVersions(a, b) {
+	function cmpVersions (a, b) {
 		let i, diff;
 		const regExStrip0 = /(\.0+)+$/;
 		const segmentsA = a.replace(regExStrip0, "").split(".");

js/check_config.js

@@ -20,7 +20,7 @@ const Utils = require(`${rootPath}/js/utils.js`);
  * Check if set by environment variable MM_CONFIG_FILE
  * @returns {string} path and filename of the config file
  */
-function getConfigFile() {
+function getConfigFile () {
 	// FIXME: This function should be in core. Do you want refactor me ;) ?, be good!
 	return path.resolve(process.env.MM_CONFIG_FILE || `${rootPath}/config/config.js`);
 }
@@ -28,7 +28,7 @@ function getConfigFile() {
 /**
  * Checks the config file using eslint.
  */
-function checkConfigFile() {
+function checkConfigFile () {
 	const configFileName = getConfigFile();
 
 	// Check if file is present

js/class.js

@@ -9,7 +9,7 @@
  */
 (function () {
 	let initializing = false;
-	const fnTest = /xyz/.test(function () {
+	const fnTest = (/xyz/).test(function () {
 		xyz;
 	})
 		? /\b_super\b/
@@ -36,31 +36,31 @@
 		// Copy the properties over onto the new prototype
 		for (const name in prop) {
 			// Check if we're overwriting an existing function
-			prototype[name] =
-				typeof prop[name] === "function" && typeof _super[name] === "function" && fnTest.test(prop[name])
+			prototype[name]
+				= typeof prop[name] === "function" && typeof _super[name] === "function" && fnTest.test(prop[name])
 					? (function (name, fn) {
-							return function () {
-								const tmp = this._super;
+						return function () {
+							const tmp = this._super;
 
-								// Add a new ._super() method that is the same method
-								// but on the super-class
-								this._super = _super[name];
+							// Add a new ._super() method that is the same method
+							// but on the super-class
+							this._super = _super[name];
 
-								// The method only need to be bound temporarily, so we
-								// remove it when we're done executing
-								const ret = fn.apply(this, arguments);
-								this._super = tmp;
+							// The method only need to be bound temporarily, so we
+							// remove it when we're done executing
+							const ret = fn.apply(this, arguments);
+							this._super = tmp;
 
-								return ret;
-							};
-					  })(name, prop[name])
+							return ret;
+						};
+					}(name, prop[name]))
 					: prop[name];
 		}
 
 		/**
 		 * The dummy class constructor
 		 */
-		function Class() {
+		function Class () {
 			// All construction is actually done in the init method
 			if (!initializing && this.init) {
 				this.init.apply(this, arguments);
@@ -78,18 +78,22 @@
 
 		return Class;
 	};
-})();
+}());
 
 /**
  * Define the clone method for later use. Helper Method.
  * @param {object} obj Object to be cloned
  * @returns {object} the cloned object
  */
-function cloneObject(obj) {
+function cloneObject (obj) {
 	if (obj === null || typeof obj !== "object") {
 		return obj;
 	}
 
+	if (obj.constructor.name === "RegExp") {
+		return new RegExp(obj);
+	}
+
 	const temp = obj.constructor(); // give temp the original obj's constructor
 	for (const key in obj) {
 		temp[key] = cloneObject(obj[key]);

js/defaults.js

@@ -29,6 +29,11 @@ const defaults = {
 	// e.g. you need to add `frameguard: false` for embedding MagicMirror in another website, see https://github.com/MichMich/MagicMirror/issues/2847
 	httpHeaders: { contentSecurityPolicy: false, crossOriginOpenerPolicy: false, crossOriginEmbedderPolicy: false, crossOriginResourcePolicy: false, originAgentCluster: false },
 
+	// properties for checking if server is alive and has same startup-timestamp, the check is per default enabled
+	// (interval 30 seconds). If startup-timestamp has changed the client reloads the magicmirror webpage.
+	checkServerInterval: 30 * 1000,
+	reloadAfterServerRestart: false,
+
 	modules: [
 		{
 			module: "updatenotification",

js/electron.js

@@ -8,9 +8,10 @@ const Log = require("./logger");
 let config = process.env.config ? JSON.parse(process.env.config) : {};
 // Module to control application life.
 const app = electron.app;
-// If ELECTRON_DISABLE_GPU is set electron is started with --disable-gpu flag.
+// Per default electron is started with --disable-gpu flag, if you want the gpu enabled,
+// you must set the env var ELECTRON_ENABLE_GPU=1 on startup.
 // See https://www.electronjs.org/docs/latest/tutorial/offscreen-rendering for more info.
-if (process.env.ELECTRON_DISABLE_GPU !== undefined) {
+if (process.env.ELECTRON_ENABLE_GPU !== "1") {
 	app.disableHardwareAcceleration();
 }
 
@@ -24,12 +25,21 @@ let mainWindow;
 /**
  *
  */
-function createWindow() {
+function createWindow () {
+	// see https://www.electronjs.org/docs/latest/api/screen
+	// Create a window that fills the screen's available work area.
+	let electronSize = (800, 600);
+	try {
+		electronSize = electron.screen.getPrimaryDisplay().workAreaSize;
+	} catch {
+		Log.warn("Could not get display size, using defaults ...");
+	}
+
 	let electronSwitchesDefaults = ["autoplay-policy", "no-user-gesture-required"];
 	app.commandLine.appendSwitch(...new Set(electronSwitchesDefaults, config.electronSwitches));
 	let electronOptionsDefaults = {
-		width: 800,
-		height: 600,
+		width: electronSize.width,
+		height: electronSize.height,
 		x: 0,
 		y: 0,
 		darkTheme: true,
@@ -50,6 +60,7 @@ function createWindow() {
 		electronOptionsDefaults.frame = false;
 		electronOptionsDefaults.transparent = true;
 		electronOptionsDefaults.hasShadow = false;
+		electronOptionsDefaults.fullscreen = true;
 	}
 
 	const electronOptions = Object.assign({}, electronOptionsDefaults, config.electronOptions);
@@ -67,8 +78,9 @@ function createWindow() {
 		prefix = "http://";
 	}
 
-	let address = (config.address === void 0) | (config.address === "") ? (config.address = "localhost") : config.address;
-	mainWindow.loadURL(`${prefix}${address}:${config.port}`);
+	let address = (config.address === void 0) | (config.address === "") | (config.address === "0.0.0.0") ? (config.address = "localhost") : config.address;
+	const port = process.env.MM_PORT || config.port;
+	mainWindow.loadURL(`${prefix}${address}:${port}`);
 
 	// Open the DevTools if run with "npm start dev"
 	if (process.argv.includes("dev")) {
@@ -110,18 +122,17 @@ function createWindow() {
 	mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => {
 		let curHeaders = details.responseHeaders;
 		if (config["ignoreXOriginHeader"] || false) {
-			curHeaders = Object.fromEntries(Object.entries(curHeaders).filter((header) => !/x-frame-options/i.test(header[0])));
+			curHeaders = Object.fromEntries(Object.entries(curHeaders).filter((header) => !(/x-frame-options/i).test(header[0])));
 		}
 
 		if (config["ignoreContentSecurityPolicy"] || false) {
-			curHeaders = Object.fromEntries(Object.entries(curHeaders).filter((header) => !/content-security-policy/i.test(header[0])));
+			curHeaders = Object.fromEntries(Object.entries(curHeaders).filter((header) => !(/content-security-policy/i).test(header[0])));
 		}
 
 		callback({ responseHeaders: curHeaders });
 	});
 
 	mainWindow.once("ready-to-show", () => {
-		mainWindow.setFullScreen(true);
 		mainWindow.show();
 	});
 }
@@ -168,6 +179,13 @@ app.on("certificate-error", (event, webContents, url, error, certificate, callba
 	callback(true);
 });
 
+if (process.env.clientonly) {
+	app.whenReady().then(() => {
+		Log.log("Launching client viewer application.");
+		createWindow();
+	});
+}
+
 // Start the core application if server is run on localhost
 // This starts all node helpers and starts the webserver.
 if (["localhost", "127.0.0.1", "::1", "::ffff:127.0.0.1", undefined].includes(config.address)) {

js/fetch.js

@@ -1,27 +0,0 @@
-/**
- * Helper class to provide either third party fetch library or (if node >= 18)
- * return internal node fetch implementation.
- *
- * Attention: After some discussion we always return the third party
- * implementation until the node implementation is stable and more tested
- * @see https://github.com/MichMich/MagicMirror/pull/2952
- * @see https://github.com/MichMich/MagicMirror/issues/2649
- * @param {string} url to be fetched
- * @param {object} options object e.g. for headers
- * @class
- */
-async function fetch(url, options = {}) {
-	// const nodeVersion = process.version.match(/^v(\d+)\.*/)[1];
-	// if (nodeVersion >= 18) {
-	// 	// node version >= 18
-	// 	return global.fetch(url, options);
-	// } else {
-	// 	// node version < 18
-	// 	const nodefetch = require("node-fetch");
-	// 	return nodefetch(url, options);
-	// }
-	const nodefetch = require("node-fetch");
-	return nodefetch(url, options);
-}
-
-module.exports = fetch;

js/loader.js

@@ -7,6 +7,7 @@
  * MIT Licensed.
  */
 const Loader = (function () {
+
 	/* Create helper variables */
 
 	const loadedModuleFiles = [];
@@ -88,6 +89,8 @@ const Loader = (function () {
 				path: `${moduleFolder}/`,
 				file: `${moduleName}.js`,
 				position: moduleData.position,
+				animateIn: moduleData.animateIn,
+				animateOut: moduleData.animateOut,
 				hiddenOnStartup: moduleData.hiddenOnStartup,
 				header: moduleData.header,
 				configDeepMerge: typeof moduleData.configDeepMerge === "boolean" ? moduleData.configDeepMerge : false,
@@ -194,10 +197,11 @@ const Loader = (function () {
 
 	/* Public Methods */
 	return {
+
 		/**
 		 * Load all modules as defined in the config.
 		 */
-		loadModules: async function () {
+		async loadModules () {
 			let moduleData = getModuleData();
 
 			/**
@@ -228,7 +232,7 @@ const Loader = (function () {
 		 * @param {Module} module The module that calls the loadFile function.
 		 * @returns {Promise} resolved when the file is loaded
 		 */
-		loadFileForModule: async function (fileName, module) {
+		async loadFileForModule (fileName, module) {
 			if (loadedFiles.indexOf(fileName.toLowerCase()) !== -1) {
 				Log.log(`File already loaded: ${fileName}`);
 				return;
@@ -254,4 +258,4 @@ const Loader = (function () {
 			return loadFile(module.file(fileName));
 		}
 	};
-})();
+}());

js/logger.js

@@ -22,7 +22,7 @@
 		// Browser globals (root is window)
 		root.Log = factory(root.config);
 	}
-})(this, function (config) {
+}(this, function (config) {
 	let logLevel;
 	let enableLog;
 	if (typeof exports === "object") {
@@ -50,7 +50,7 @@
 
 		logLevel.setLogLevel = function (newLevel) {
 			if (newLevel) {
-				Object.keys(logLevel).forEach(function (key, index) {
+				Object.keys(logLevel).forEach(function (key) {
 					if (!newLevel.includes(key.toLocaleUpperCase())) {
 						logLevel[key] = function () {};
 					}
@@ -59,21 +59,21 @@
 		};
 	} else {
 		logLevel = {
-			debug: function () {},
-			log: function () {},
-			info: function () {},
-			warn: function () {},
-			error: function () {},
-			group: function () {},
-			groupCollapsed: function () {},
-			groupEnd: function () {},
-			time: function () {},
-			timeEnd: function () {},
-			timeStamp: function () {}
+			debug () {},
+			log () {},
+			info () {},
+			warn () {},
+			error () {},
+			group () {},
+			groupCollapsed () {},
+			groupEnd () {},
+			time () {},
+			timeEnd () {},
+			timeStamp () {}
 		};
 
 		logLevel.setLogLevel = function () {};
 	}
 
 	return logLevel;
-});
+}));

js/main.js

@@ -1,4 +1,4 @@
-/* global Loader, defaults, Translator */
+/* global Loader, defaults, Translator, addAnimateCSS, removeAnimateCSS, AnimateCSSIn, AnimateCSSOut */
 
 /* MagicMirror²
  * Main System
@@ -22,6 +22,10 @@ const MM = (function () {
 				return;
 			}
 
+			let haveAnimateIn = null;
+			// check if have valid animateIn in module definition (module.data.animateIn)
+			if (module.data.animateIn && AnimateCSSIn.indexOf(module.data.animateIn) !== -1) haveAnimateIn = module.data.animateIn;
+
 			const wrapper = selectWrapper(module.data.position);
 
 			const dom = document.createElement("div");
@@ -50,7 +54,12 @@ const MM = (function () {
 			moduleContent.className = "module-content";
 			dom.appendChild(moduleContent);
 
-			const domCreationPromise = updateDom(module, 0);
+			// create the domCreationPromise with AnimateCSS (with animateIn of module definition)
+			// or just display it
+			var domCreationPromise;
+			if (haveAnimateIn) domCreationPromise = updateDom(module, { options: { speed: 1000, animate: { in: haveAnimateIn } } }, true);
+			else domCreationPromise = updateDom(module, 0);
+
 			domCreationPromises.push(domCreationPromise);
 			domCreationPromise
 				.then(function () {
@@ -101,11 +110,30 @@ const MM = (function () {
 	/**
 	 * Update the dom for a specific module.
 	 * @param {Module} module The module that needs an update.
-	 * @param {number} [speed] The (optional) number of microseconds for the animation.
+	 * @param {object|number} [updateOptions] The (optional) number of microseconds for the animation or object with updateOptions (speed/animates)
+	 * @param {boolean} [createAnimatedDom] for displaying only animateIn (used on first start of MagicMirror)
 	 * @returns {Promise} Resolved when the dom is fully updated.
 	 */
-	const updateDom = function (module, speed) {
+	const updateDom = function (module, updateOptions, createAnimatedDom = false) {
 		return new Promise(function (resolve) {
+			let speed = updateOptions;
+			let animateOut = null;
+			let animateIn = null;
+			if (typeof updateOptions === "object") {
+				if (typeof updateOptions.options === "object" && updateOptions.options.speed !== undefined) {
+					speed = updateOptions.options.speed;
+					Log.debug(`updateDom: ${module.identifier} Has speed in object: ${speed}`);
+					if (typeof updateOptions.options.animate === "object") {
+						animateOut = updateOptions.options.animate.out;
+						animateIn = updateOptions.options.animate.in;
+						Log.debug(`updateDom: ${module.identifier} Has animate in object: out->${animateOut}, in->${animateIn}`);
+					}
+				} else {
+					Log.debug(`updateDom: ${module.identifier} Has no speed in object`);
+					speed = 0;
+				}
+			}
+
 			const newHeader = module.getHeader();
 			let newContentPromise = module.getDom();
 
@@ -116,7 +144,7 @@ const MM = (function () {
 
 			newContentPromise
 				.then(function (newContent) {
-					const updatePromise = updateDomWithContent(module, speed, newHeader, newContent);
+					const updatePromise = updateDomWithContent(module, speed, newHeader, newContent, animateOut, animateIn, createAnimatedDom);
 
 					updatePromise.then(resolve).catch(Log.error);
 				})
@@ -130,9 +158,12 @@ const MM = (function () {
 	 * @param {number} [speed] The (optional) number of microseconds for the animation.
 	 * @param {string} newHeader The new header that is generated.
 	 * @param {HTMLElement} newContent The new content that is generated.
+	 * @param {string} [animateOut] AnimateCss animation name before hidden
+	 * @param {string} [animateIn] AnimateCss animation name on show
+	 * @param {boolean} [createAnimatedDom] for displaying only animateIn (used on first start)
 	 * @returns {Promise} Resolved when the module dom has been updated.
 	 */
-	const updateDomWithContent = function (module, speed, newHeader, newContent) {
+	const updateDomWithContent = function (module, speed, newHeader, newContent, animateOut, animateIn, createAnimatedDom = false) {
 		return new Promise(function (resolve) {
 			if (module.hidden || !speed) {
 				updateModuleContent(module, newHeader, newContent);
@@ -151,13 +182,28 @@ const MM = (function () {
 				return;
 			}
 
-			hideModule(module, speed / 2, function () {
+			if (createAnimatedDom && animateIn !== null) {
+				Log.debug(`${module.identifier} createAnimatedDom (${animateIn})`);
 				updateModuleContent(module, newHeader, newContent);
 				if (!module.hidden) {
-					showModule(module, speed / 2);
+					showModule(module, speed, null, { animate: animateIn });
 				}
 				resolve();
-			});
+				return;
+			}
+
+			hideModule(
+				module,
+				speed / 2,
+				function () {
+					updateModuleContent(module, newHeader, newContent);
+					if (!module.hidden) {
+						showModule(module, speed / 2, null, { animate: animateIn });
+					}
+					resolve();
+				},
+				{ animate: animateOut }
+			);
 		});
 	};
 
@@ -234,24 +280,65 @@ const MM = (function () {
 
 		const moduleWrapper = document.getElementById(module.identifier);
 		if (moduleWrapper !== null) {
-			moduleWrapper.style.transition = `opacity ${speed / 1000}s`;
-			moduleWrapper.style.opacity = 0;
-			moduleWrapper.classList.add("hidden");
-
 			clearTimeout(module.showHideTimer);
-			module.showHideTimer = setTimeout(function () {
-				// To not take up any space, we just make the position absolute.
-				// since it's fade out anyway, we can see it lay above or
-				// below other modules. This works way better than adjusting
-				// the .display property.
-				moduleWrapper.style.position = "fixed";
+			// reset all animations if needed
+			if (module.hasAnimateOut) {
+				removeAnimateCSS(module.identifier, module.hasAnimateOut);
+				Log.debug(`${module.identifier} Force remove animateOut (in hide): ${module.hasAnimateOut}`);
+				module.hasAnimateOut = false;
+			}
+			if (module.hasAnimateIn) {
+				removeAnimateCSS(module.identifier, module.hasAnimateIn);
+				Log.debug(`${module.identifier} Force remove animateIn (in hide): ${module.hasAnimateIn}`);
+				module.hasAnimateIn = false;
+			}
+			// haveAnimateName for verify if we are using AninateCSS library
+			// we check AnimateCSSOut Array for validate it
+			// and finaly return the animate name or `null` (for default MM² animation)
+			let haveAnimateName = null;
+			// check if have valid animateOut in module definition (module.data.animateOut)
+			if (module.data.animateOut && AnimateCSSOut.indexOf(module.data.animateOut) !== -1) haveAnimateName = module.data.animateOut;
+			// can't be override with options.animate
+			else if (options.animate && AnimateCSSOut.indexOf(options.animate) !== -1) haveAnimateName = options.animate;
 
-				updateWrapperStates();
+			if (haveAnimateName) {
+				// with AnimateCSS
+				Log.debug(`${module.identifier} Has animateOut: ${haveAnimateName}`);
+				module.hasAnimateOut = haveAnimateName;
+				addAnimateCSS(module.identifier, haveAnimateName, speed / 1000);
+				module.showHideTimer = setTimeout(function () {
+					removeAnimateCSS(module.identifier, haveAnimateName);
+					Log.debug(`${module.identifier} Remove animateOut: ${module.hasAnimateOut}`);
+					// AnimateCSS is now done
+					moduleWrapper.style.opacity = 0;
+					moduleWrapper.classList.add("hidden");
+					moduleWrapper.style.position = "fixed";
+					module.hasAnimateOut = false;
 
-				if (typeof callback === "function") {
-					callback();
-				}
-			}, speed);
+					updateWrapperStates();
+					if (typeof callback === "function") {
+						callback();
+					}
+				}, speed);
+			} else {
+				// default MM² Animate
+				moduleWrapper.style.transition = `opacity ${speed / 1000}s`;
+				moduleWrapper.style.opacity = 0;
+				moduleWrapper.classList.add("hidden");
+				module.showHideTimer = setTimeout(function () {
+					// To not take up any space, we just make the position absolute.
+					// since it's fade out anyway, we can see it lay above or
+					// below other modules. This works way better than adjusting
+					// the .display property.
+					moduleWrapper.style.position = "fixed";
+
+					updateWrapperStates();
+
+					if (typeof callback === "function") {
+						callback();
+					}
+				}, speed);
+			}
 		} else {
 			// invoke callback even if no content, issue 1308
 			if (typeof callback === "function") {
@@ -285,6 +372,17 @@ const MM = (function () {
 			}
 			return;
 		}
+		// reset all animations if needed
+		if (module.hasAnimateOut) {
+			removeAnimateCSS(module.identifier, module.hasAnimateOut);
+			Log.debug(`${module.identifier} Force remove animateOut (in show): ${module.hasAnimateOut}`);
+			module.hasAnimateOut = false;
+		}
+		if (module.hasAnimateIn) {
+			removeAnimateCSS(module.identifier, module.hasAnimateIn);
+			Log.debug(`${module.identifier} Force remove animateIn (in show): ${module.hasAnimateIn}`);
+			module.hasAnimateIn = false;
+		}
 
 		module.hidden = false;
 
@@ -296,7 +394,18 @@ const MM = (function () {
 
 		const moduleWrapper = document.getElementById(module.identifier);
 		if (moduleWrapper !== null) {
-			moduleWrapper.style.transition = `opacity ${speed / 1000}s`;
+			clearTimeout(module.showHideTimer);
+
+			// haveAnimateName for verify if we are using AninateCSS library
+			// we check AnimateCSSIn Array for validate it
+			// and finaly return the animate name or `null` (for default MM² animation)
+			let haveAnimateName = null;
+			// check if have valid animateOut in module definition (module.data.animateIn)
+			if (module.data.animateIn && AnimateCSSIn.indexOf(module.data.animateIn) !== -1) haveAnimateName = module.data.animateIn;
+			// can't be override with options.animate
+			else if (options.animate && AnimateCSSIn.indexOf(options.animate) !== -1) haveAnimateName = options.animate;
+
+			if (!haveAnimateName) moduleWrapper.style.transition = `opacity ${speed / 1000}s`;
 			// Restore the position. See hideModule() for more info.
 			moduleWrapper.style.position = "static";
 			moduleWrapper.classList.remove("hidden");
@@ -307,12 +416,27 @@ const MM = (function () {
 			const dummy = moduleWrapper.parentElement.parentElement.offsetHeight;
 			moduleWrapper.style.opacity = 1;
 
-			clearTimeout(module.showHideTimer);
-			module.showHideTimer = setTimeout(function () {
-				if (typeof callback === "function") {
-					callback();
-				}
-			}, speed);
+			if (haveAnimateName) {
+				// with AnimateCSS
+				Log.debug(`${module.identifier} Has animateIn: ${haveAnimateName}`);
+				module.hasAnimateIn = haveAnimateName;
+				addAnimateCSS(module.identifier, haveAnimateName, speed / 1000);
+				module.showHideTimer = setTimeout(function () {
+					removeAnimateCSS(module.identifier, haveAnimateName);
+					Log.debug(`${module.identifier} Remove animateIn: ${haveAnimateName}`);
+					module.hasAnimateIn = false;
+					if (typeof callback === "function") {
+						callback();
+					}
+				}, speed);
+			} else {
+				// default MM² Animate
+				module.showHideTimer = setTimeout(function () {
+					if (typeof callback === "function") {
+						callback();
+					}
+				}, speed);
+			}
 		} else {
 			// invoke callback
 			if (typeof callback === "function") {
@@ -355,7 +479,6 @@ const MM = (function () {
 	 */
 	const loadConfig = function () {
 		// FIXME: Think about how to pass config around without breaking tests
-		/* eslint-disable */
 		if (typeof config === "undefined") {
 			config = defaults;
 			Log.error("Config file is missing! Please create a config file.");
@@ -363,7 +486,6 @@ const MM = (function () {
 		}
 
 		config = Object.assign({}, defaults, config);
-		/* eslint-enable */
 	};
 
 	/**
@@ -371,6 +493,7 @@ const MM = (function () {
 	 * @param {Module[]} modules Array of modules.
 	 */
 	const setSelectionMethodsForModules = function (modules) {
+
 		/**
 		 * Filter modules with the specified classes.
 		 * @param {string|string[]} className one or multiple classnames (array or space divided).
@@ -456,12 +579,13 @@ const MM = (function () {
 	};
 
 	return {
+
 		/* Public Methods */
 
 		/**
 		 * Main init method.
 		 */
-		init: async function () {
+		async init () {
 			Log.info("Initializing MagicMirror².");
 			loadConfig();
 
@@ -475,14 +599,35 @@ const MM = (function () {
 		 * Gets called when all modules are started.
 		 * @param {Module[]} moduleObjects All module instances.
 		 */
-		modulesStarted: function (moduleObjects) {
+		modulesStarted (moduleObjects) {
 			modules = [];
+			let startUp = "";
+
 			moduleObjects.forEach((module) => modules.push(module));
 
 			Log.info("All modules started!");
 			sendNotification("ALL_MODULES_STARTED");
 
 			createDomObjects();
+
+			if (config.reloadAfterServerRestart) {
+				setInterval(async () => {
+					// if server startup time has changed (which means server was restarted)
+					// the client reloads the mm page
+					try {
+						const res = await fetch(`${location.protocol}//${location.host}/startup`);
+						const curr = await res.text();
+						if (startUp === "") startUp = curr;
+						if (startUp !== curr) {
+							startUp = "";
+							window.location.reload(true);
+							console.warn("Refreshing Website because server was restarted");
+						}
+					} catch (err) {
+						Log.error(`MagicMirror not reachable: ${err}`);
+					}
+				}, config.checkServerInterval);
+			}
 		},
 
 		/**
@@ -491,7 +636,7 @@ const MM = (function () {
 		 * @param {*} payload The payload of the notification.
 		 * @param {Module} sender The module that sent the notification.
 		 */
-		sendNotification: function (notification, payload, sender) {
+		sendNotification (notification, payload, sender) {
 			if (arguments.length < 3) {
 				Log.error("sendNotification: Missing arguments.");
 				return;
@@ -514,9 +659,9 @@ const MM = (function () {
 		/**
 		 * Update the dom for a specific module.
 		 * @param {Module} module The module that needs an update.
-		 * @param {number} [speed] The number of microseconds for the animation.
+		 * @param {object|number} [updateOptions] The (optional) number of microseconds for the animation or object with updateOptions (speed/animates)
 		 */
-		updateDom: function (module, speed) {
+		updateDom (module, updateOptions) {
 			if (!(module instanceof Module)) {
 				Log.error("updateDom: Sender should be a module.");
 				return;
@@ -528,14 +673,14 @@ const MM = (function () {
 			}
 
 			// Further implementation is done in the private method.
-			updateDom(module, speed);
+			updateDom(module, updateOptions);
 		},
 
 		/**
 		 * Returns a collection of all modules currently active.
 		 * @returns {Module[]} A collection of all modules currently active.
 		 */
-		getModules: function () {
+		getModules () {
 			setSelectionMethodsForModules(modules);
 			return modules;
 		},
@@ -547,7 +692,7 @@ const MM = (function () {
 		 * @param {Function} callback Called when the animation is done.
 		 * @param {object} [options] Optional settings for the hide method.
 		 */
-		hideModule: function (module, speed, callback, options) {
+		hideModule (module, speed, callback, options) {
 			module.hidden = true;
 			hideModule(module, speed, callback, options);
 		},
@@ -559,12 +704,12 @@ const MM = (function () {
 		 * @param {Function} callback Called when the animation is done.
 		 * @param {object} [options] Optional settings for the show method.
 		 */
-		showModule: function (module, speed, callback, options) {
+		showModule (module, speed, callback, options) {
 			// do not change module.hidden yet, only if we really show it later
 			showModule(module, speed, callback, options);
 		}
 	};
-})();
+}());
 
 // Add polyfill for Object.assign.
 if (typeof Object.assign !== "function") {
@@ -587,7 +732,7 @@ if (typeof Object.assign !== "function") {
 			}
 			return output;
 		};
-	})();
+	}());
 }
 
 MM.init();

js/module.js

@@ -8,6 +8,7 @@
  * MIT Licensed.
  */
 const Module = Class.extend({
+
 	/*********************************************************
 	 * All methods (and properties) below can be subclassed. *
 	 *********************************************************/
@@ -33,14 +34,14 @@ const Module = Class.extend({
 	/**
 	 * Called when the module is instantiated.
 	 */
-	init: function () {
+	init () {
 		//Log.log(this.defaults);
 	},
 
 	/**
 	 * Called when the module is started.
 	 */
-	start: async function () {
+	async start () {
 		Log.info(`Starting module: ${this.name}`);
 	},
 
@@ -48,7 +49,7 @@ const Module = Class.extend({
 	 * Returns a list of scripts the module requires to be loaded.
 	 * @returns {string[]} An array with filenames.
 	 */
-	getScripts: function () {
+	getScripts () {
 		return [];
 	},
 
@@ -56,7 +57,7 @@ const Module = Class.extend({
 	 * Returns a list of stylesheets the module requires to be loaded.
 	 * @returns {string[]} An array with filenames.
 	 */
-	getStyles: function () {
+	getStyles () {
 		return [];
 	},
 
@@ -66,7 +67,7 @@ const Module = Class.extend({
 	 * return Map<String, String> -
 	 * @returns {*} A map with langKeys and filenames.
 	 */
-	getTranslations: function () {
+	getTranslations () {
 		return false;
 	},
 
@@ -76,14 +77,14 @@ const Module = Class.extend({
 	 * Alternatively, the getTemplate method could be subclassed.
 	 * @returns {HTMLElement|Promise} The dom or a promise with the dom to display.
 	 */
-	getDom: function () {
+	getDom () {
 		return new Promise((resolve) => {
 			const div = document.createElement("div");
 			const template = this.getTemplate();
 			const templateData = this.getTemplateData();
 
 			// Check to see if we need to render a template string or a file.
-			if (/^.*((\.html)|(\.njk))$/.test(template)) {
+			if ((/^.*((\.html)|(\.njk))$/).test(template)) {
 				// the template is a filename
 				this.nunjucksEnvironment().render(template, templateData, function (err, res) {
 					if (err) {
@@ -109,7 +110,7 @@ const Module = Class.extend({
 	 * This method needs to be subclassed if the module wants to display modified headers on the mirror.
 	 * @returns {string} The header to display above the header.
 	 */
-	getHeader: function () {
+	getHeader () {
 		return this.data.header;
 	},
 
@@ -120,7 +121,7 @@ const Module = Class.extend({
 	 * If the string ends with '.html' it's considered a file from within the module's folder.
 	 * @returns {string} The template string of filename.
 	 */
-	getTemplate: function () {
+	getTemplate () {
 		return `<div class="normal">${this.name}</div><div class="small dimmed">${this.identifier}</div>`;
 	},
 
@@ -129,7 +130,7 @@ const Module = Class.extend({
 	 * This method needs to be subclassed if the module wants to use a custom data.
 	 * @returns {object} The data for the template
 	 */
-	getTemplateData: function () {
+	getTemplateData () {
 		return {};
 	},
 
@@ -139,7 +140,7 @@ const Module = Class.extend({
 	 * @param {*} payload The payload of the notification.
 	 * @param {Module} sender The module that sent the notification.
 	 */
-	notificationReceived: function (notification, payload, sender) {
+	notificationReceived (notification, payload, sender) {
 		if (sender) {
 			// Log.log(this.name + " received a module notification: " + notification + " from sender: " + sender.name);
 		} else {
@@ -152,7 +153,7 @@ const Module = Class.extend({
 	 * The environment is checked in the _nunjucksEnvironment instance variable.
 	 * @returns {object} The Nunjucks Environment
 	 */
-	nunjucksEnvironment: function () {
+	nunjucksEnvironment () {
 		if (this._nunjucksEnvironment !== null) {
 			return this._nunjucksEnvironment;
 		}
@@ -174,37 +175,39 @@ const Module = Class.extend({
 	 * @param {string} notification The identifier of the notification.
 	 * @param {*} payload The payload of the notification.
 	 */
-	socketNotificationReceived: function (notification, payload) {
+	socketNotificationReceived (notification, payload) {
 		Log.log(`${this.name} received a socket notification: ${notification} - Payload: ${payload}`);
 	},
 
 	/**
 	 * Called when the module is hidden.
 	 */
-	suspend: function () {
+	suspend () {
 		Log.log(`${this.name} is suspended.`);
 	},
 
 	/**
 	 * Called when the module is shown.
 	 */
-	resume: function () {
+	resume () {
 		Log.log(`${this.name} is resumed.`);
 	},
 
 	/*********************************************
-	 * The methods below don"t need subclassing. *
+	 * The methods below don't need subclassing. *
 	 *********************************************/
 
 	/**
 	 * Set the module data.
 	 * @param {object} data The module data
 	 */
-	setData: function (data) {
+	setData (data) {
 		this.data = data;
 		this.name = data.name;
 		this.identifier = data.identifier;
 		this.hidden = false;
+		this.hasAnimateIn = false;
+		this.hasAnimateOut = false;
 
 		this.setConfig(data.config, data.configDeepMerge);
 	},
@@ -214,7 +217,7 @@ const Module = Class.extend({
 	 * @param {object} config The combined module config.
 	 * @param {boolean} deep Merge module config in deep.
 	 */
-	setConfig: function (config, deep) {
+	setConfig (config, deep) {
 		this.config = deep ? configMerge({}, this.defaults, config) : Object.assign({}, this.defaults, config);
 	},
 
@@ -223,7 +226,7 @@ const Module = Class.extend({
 	 * It also registers the notification callback.
 	 * @returns {MMSocket} a socket object
 	 */
-	socket: function () {
+	socket () {
 		if (typeof this._socket === "undefined") {
 			this._socket = new MMSocket(this.name);
 		}
@@ -240,7 +243,7 @@ const Module = Class.extend({
 	 * @param {string} file Filename
 	 * @returns {string} the file path
 	 */
-	file: function (file) {
+	file (file) {
 		return `${this.data.path}/${file}`.replace("//", "/");
 	},
 
@@ -248,7 +251,7 @@ const Module = Class.extend({
 	 * Load all required stylesheets by requesting the MM object to load the files.
 	 * @returns {Promise<void>}
 	 */
-	loadStyles: function () {
+	loadStyles () {
 		return this.loadDependencies("getStyles");
 	},
 
@@ -256,7 +259,7 @@ const Module = Class.extend({
 	 * Load all required scripts by requesting the MM object to load the files.
 	 * @returns {Promise<void>}
 	 */
-	loadScripts: function () {
+	loadScripts () {
 		return this.loadDependencies("getScripts");
 	},
 
@@ -265,7 +268,7 @@ const Module = Class.extend({
 	 * @param {string} funcName Function name to call to get scripts or styles.
 	 * @returns {Promise<void>}
 	 */
-	loadDependencies: async function (funcName) {
+	async loadDependencies (funcName) {
 		let dependencies = this[funcName]();
 
 		const loadNextDependency = async () => {
@@ -286,7 +289,7 @@ const Module = Class.extend({
 	 * Load all translations.
 	 * @returns {Promise<void>}
 	 */
-	loadTranslations: async function () {
+	async loadTranslations () {
 		const translations = this.getTranslations() || {};
 		const language = config.language.toLowerCase();
 
@@ -318,7 +321,7 @@ const Module = Class.extend({
 	 * @param {string} [defaultValue] The default value with variables.
 	 * @returns {string} the translated key
 	 */
-	translate: function (key, defaultValueOrVariables, defaultValue) {
+	translate (key, defaultValueOrVariables, defaultValue) {
 		if (typeof defaultValueOrVariables === "object") {
 			return Translator.translate(this, key, defaultValueOrVariables) || defaultValue || "";
 		}
@@ -327,10 +330,10 @@ const Module = Class.extend({
 
 	/**
 	 * Request an (animated) update of the module.
-	 * @param {number} [speed] The speed of the animation.
+	 * @param {number|object} [updateOptions] The speed of the animation or object with for updateOptions (speed/animates)
 	 */
-	updateDom: function (speed) {
-		MM.updateDom(this, speed);
+	updateDom (updateOptions) {
+		MM.updateDom(this, updateOptions);
 	},
 
 	/**
@@ -338,7 +341,7 @@ const Module = Class.extend({
 	 * @param {string} notification The identifier of the notification.
 	 * @param {*} payload The payload of the notification.
 	 */
-	sendNotification: function (notification, payload) {
+	sendNotification (notification, payload) {
 		MM.sendNotification(notification, payload, this);
 	},
 
@@ -347,7 +350,7 @@ const Module = Class.extend({
 	 * @param {string} notification The identifier of the notification.
 	 * @param {*} payload The payload of the notification.
 	 */
-	sendSocketNotification: function (notification, payload) {
+	sendSocketNotification (notification, payload) {
 		this.socket().sendNotification(notification, payload);
 	},
 
@@ -357,7 +360,7 @@ const Module = Class.extend({
 	 * @param {Function} callback Called when the animation is done.
 	 * @param {object} [options] Optional settings for the hide method.
 	 */
-	hide: function (speed, callback, options = {}) {
+	hide (speed, callback, options = {}) {
 		let usedCallback = callback || function () {};
 		let usedOptions = options;
 
@@ -384,7 +387,7 @@ const Module = Class.extend({
 	 * @param {Function} callback Called when the animation is done.
 	 * @param {object} [options] Optional settings for the show method.
 	 */
-	show: function (speed, callback, options) {
+	show (speed, callback, options) {
 		let usedCallback = callback || function () {};
 		let usedOptions = options;
 
@@ -428,7 +431,7 @@ const Module = Class.extend({
  * @param {object} result the initial object
  * @returns {object} the merged config
  */
-function configMerge(result) {
+function configMerge (result) {
 	const stack = Array.prototype.slice.call(arguments, 1);
 	let item, key;
 
@@ -491,7 +494,7 @@ window.Module = Module;
  * @returns {number} A positive number if a is larger than b, a negative
  * number if a is smaller and 0 if they are the same
  */
-function cmpVersions(a, b) {
+function cmpVersions (a, b) {
 	const regExStrip0 = /(\.0+)+$/;
 	const segmentsA = a.replace(regExStrip0, "").split(".");
 	const segmentsB = b.replace(regExStrip0, "").split(".");

js/node_helper.js

@@ -9,15 +9,15 @@ const Log = require("logger");
 const Class = require("./class");
 
 const NodeHelper = Class.extend({
-	init() {
+	init () {
 		Log.log("Initializing new module helper ...");
 	},
 
-	loaded() {
+	loaded () {
 		Log.log(`Module helper loaded: ${this.name}`);
 	},
 
-	start() {
+	start () {
 		Log.log(`Starting module helper: ${this.name}`);
 	},
 
@@ -26,7 +26,7 @@ const NodeHelper = Class.extend({
 	 * Close any open connections, stop any sub-processes and
 	 * gracefully exit the module.
 	 */
-	stop() {
+	stop () {
 		Log.log(`Stopping module helper: ${this.name}`);
 	},
 
@@ -35,7 +35,7 @@ const NodeHelper = Class.extend({
 	 * @param {string} notification The identifier of the notification.
 	 * @param {*}  payload The payload of the notification.
 	 */
-	socketNotificationReceived(notification, payload) {
+	socketNotificationReceived (notification, payload) {
 		Log.log(`${this.name} received a socket notification: ${notification} - Payload: ${payload}`);
 	},
 
@@ -43,7 +43,7 @@ const NodeHelper = Class.extend({
 	 * Set the module name.
 	 * @param {string} name Module name.
 	 */
-	setName(name) {
+	setName (name) {
 		this.name = name;
 	},
 
@@ -51,7 +51,7 @@ const NodeHelper = Class.extend({
 	 * Set the module path.
 	 * @param {string} path Module path.
 	 */
-	setPath(path) {
+	setPath (path) {
 		this.path = path;
 	},
 
@@ -61,7 +61,7 @@ const NodeHelper = Class.extend({
 	 * argument notification string - The identifier of the notification.
 	 * argument payload mixed - The payload of the notification.
 	 */
-	sendSocketNotification(notification, payload) {
+	sendSocketNotification (notification, payload) {
 		this.io.of(this.name).emit(notification, payload);
 	},
 
@@ -71,7 +71,7 @@ const NodeHelper = Class.extend({
 	 *
 	 * argument app Express app - The Express app object.
 	 */
-	setExpressApp(app) {
+	setExpressApp (app) {
 		this.expressApp = app;
 
 		app.use(`/${this.name}`, express.static(`${this.path}/public`));
@@ -83,7 +83,7 @@ const NodeHelper = Class.extend({
 	 *
 	 * argument io Socket.io - The Socket io object.
 	 */
-	setSocketIO(io) {
+	setSocketIO (io) {
 		this.io = io;
 
 		Log.log(`Connecting socket for: ${this.name}`);

js/server.js

@@ -15,14 +15,14 @@ const socketio = require("socket.io");
 
 const Log = require("logger");
 const Utils = require("./utils");
-const { cors, getConfig, getHtml, getVersion } = require("./server_functions");
+const { cors, getConfig, getHtml, getVersion, getStartup } = require("./server_functions");
 
 /**
  * Server
  * @param {object} config The MM config
  * @class
  */
-function Server(config) {
+function Server (config) {
 	const app = express();
 	const port = process.env.MM_PORT || config.port;
 	const serverSockets = new Set();
@@ -91,6 +91,8 @@ function Server(config) {
 
 			app.get("/config", (req, res) => getConfig(req, res));
 
+			app.get("/startup", (req, res) => getStartup(req, res));
+
 			app.get("/", (req, res) => getHtml(req, res));
 
 			server.on("listening", () => {

js/server_functions.js

@@ -1,17 +1,27 @@
 const fs = require("fs");
 const path = require("path");
 const Log = require("logger");
-const fetch = require("./fetch");
+
+const startUp = new Date();
 
 /**
  * Gets the config.
  * @param {Request} req - the request
  * @param {Response} res - the result
  */
-function getConfig(req, res) {
+function getConfig (req, res) {
 	res.send(config);
 }
 
+/**
+ * Gets the startup time.
+ * @param {Request} req - the request
+ * @param {Response} res - the result
+ */
+function getStartup (req, res) {
+	res.send(startUp);
+}
+
 /**
  * A method that forwards HTTP Get-methods to the internet to avoid CORS-errors.
  *
@@ -21,7 +31,7 @@ function getConfig(req, res) {
  * @param {Request} req - the request
  * @param {Response} res - the result
  */
-async function cors(req, res) {
+async function cors (req, res) {
 	try {
 		const urlRegEx = "url=(.+?)$";
 		let url;
@@ -58,7 +68,7 @@ async function cors(req, res) {
  * @param {string} url - The url containing the headers and values to send.
  * @returns {object} An object specifying name and value of the headers.
  */
-function getHeadersToSend(url) {
+function getHeadersToSend (url) {
 	const headersToSend = { "User-Agent": `Mozilla/5.0 MagicMirror/${global.version}` };
 	const headersToSendMatch = new RegExp("sendheaders=(.+?)(&|$)", "g").exec(url);
 	if (headersToSendMatch) {
@@ -79,7 +89,7 @@ function getHeadersToSend(url) {
  * @param {string} url - The url containing the expected headers from the response.
  * @returns {string[]} headers - The name of the expected headers.
  */
-function geExpectedRecievedHeaders(url) {
+function geExpectedRecievedHeaders (url) {
 	const expectedRecievedHeaders = ["Content-Type"];
 	const expectedRecievedHeadersMatch = new RegExp("expectedheaders=(.+?)(&|$)", "g").exec(url);
 	if (expectedRecievedHeadersMatch) {
@@ -96,7 +106,7 @@ function geExpectedRecievedHeaders(url) {
  * @param {Request} req - the request
  * @param {Response} res - the result
  */
-function getHtml(req, res) {
+function getHtml (req, res) {
 	let html = fs.readFileSync(path.resolve(`${global.root_path}/index.html`), { encoding: "utf8" });
 	html = html.replace("#VERSION#", global.version);
 
@@ -114,8 +124,8 @@ function getHtml(req, res) {
  * @param {Request} req - the request
  * @param {Response} res - the result
  */
-function getVersion(req, res) {
+function getVersion (req, res) {
 	res.send(global.version);
 }
 
-module.exports = { cors, getConfig, getHtml, getVersion };
+module.exports = { cors, getConfig, getHtml, getVersion, getStartup };

js/translator.js

@@ -7,12 +7,13 @@
  * MIT Licensed.
  */
 const Translator = (function () {
+
 	/**
 	 * Load a JSON file via XHR.
 	 * @param {string} file Path of the file we want to load.
 	 * @returns {Promise<object>} the translations in the specified file
 	 */
-	async function loadJSON(file) {
+	async function loadJSON (file) {
 		const xhr = new XMLHttpRequest();
 		return new Promise(function (resolve) {
 			xhr.overrideMimeType("application/json");
@@ -47,7 +48,8 @@ const Translator = (function () {
 		 * @param {object} variables The variables to use within the translation template (optional)
 		 * @returns {string} the translated key
 		 */
-		translate: function (module, key, variables = {}) {
+		translate (module, key, variables = {}) {
+
 			/**
 			 * Combines template and variables like:
 			 * template: "Please wait for {timeToWait} before continuing with {work}."
@@ -57,7 +59,7 @@ const Translator = (function () {
 			 * @param {object} variables Variables for the placeholder
 			 * @returns {string} the template filled with the variables
 			 */
-			function createStringFromTemplate(template, variables) {
+			function createStringFromTemplate (template, variables) {
 				if (Object.prototype.toString.call(template) !== "[object String]") {
 					return template;
 				}
@@ -99,7 +101,7 @@ const Translator = (function () {
 		 * @param {string} file Path of the file we want to load.
 		 * @param {boolean} isFallback Flag to indicate fallback translations.
 		 */
-		async load(module, file, isFallback) {
+		async load (module, file, isFallback) {
 			Log.log(`${module.name} - Load translation${isFallback ? " fallback" : ""}: ${file}`);
 
 			if (this.translationsFallback[module.name]) {
@@ -115,7 +117,7 @@ const Translator = (function () {
 		 * Load the core translations.
 		 * @param {string} lang The language identifier of the core language.
 		 */
-		loadCoreTranslations: async function (lang) {
+		async loadCoreTranslations (lang) {
 			if (lang in translations) {
 				Log.log(`Loading core translation file: ${translations[lang]}`);
 				this.coreTranslations = await loadJSON(translations[lang]);
@@ -130,7 +132,7 @@ const Translator = (function () {
 		 * Load the core translations' fallback.
 		 * The first language defined in translations.js will be used.
 		 */
-		loadCoreTranslationsFallback: async function () {
+		async loadCoreTranslationsFallback () {
 			let first = Object.keys(translations)[0];
 			if (first) {
 				Log.log(`Loading core translation fallback file: ${translations[first]}`);
@@ -138,6 +140,6 @@ const Translator = (function () {
 			}
 		}
 	};
-})();
+}());
 
 window.Translator = Translator;

module-types.ts

@@ -1,16 +1,19 @@
 type ModuleProperties = {
   defaults?: object;
+  [key: string]: any;
   start?(): void;
+  getScripts?(): string[];
+  getStyles?(): string[];
+  getTranslations?(): object;
+  getDom?(): HTMLElement;
   getHeader?(): string;
   getTemplate?(): string;
   getTemplateData?(): object;
   notificationReceived?(notification: string, payload: any, sender: object): void;
+  nunjucksEnvironment?(): void;
   socketNotificationReceived?(notification: string, payload: any): void;
   suspend?(): void;
   resume?(): void;
-  getDom?(): HTMLElement;
-  getStyles?(): string[];
-  [key: string]: any;
 };
 
 export declare const Module: {

modules/default/alert/alert.js

@@ -17,15 +17,15 @@ Module.register("alert", {
 		welcome_message: false // shown at startup
 	},
 
-	getScripts() {
+	getScripts () {
 		return ["notificationFx.js"];
 	},
 
-	getStyles() {
-		return ["font-awesome.css", this.file(`./styles/notificationFx.css`), this.file(`./styles/${this.config.position}.css`)];
+	getStyles () {
+		return ["font-awesome.css", this.file("./styles/notificationFx.css"), this.file(`./styles/${this.config.position}.css`)];
 	},
 
-	getTranslations() {
+	getTranslations () {
 		return {
 			bg: "translations/bg.json",
 			da: "translations/da.json",
@@ -40,11 +40,11 @@ Module.register("alert", {
 		};
 	},
 
-	getTemplate(type) {
+	getTemplate (type) {
 		return `templates/${type}.njk`;
 	},
 
-	async start() {
+	async start () {
 		Log.info(`Starting module: ${this.name}`);
 
 		if (this.config.effect === "slide") {
@@ -57,7 +57,7 @@ Module.register("alert", {
 		}
 	},
 
-	notificationReceived(notification, payload, sender) {
+	notificationReceived (notification, payload, sender) {
 		if (notification === "SHOW_ALERT") {
 			if (payload.type === "notification") {
 				this.showNotification(payload);
@@ -69,7 +69,7 @@ Module.register("alert", {
 		}
 	},
 
-	async showNotification(notification) {
+	async showNotification (notification) {
 		const message = await this.renderMessage(notification.templateName || "notification", notification);
 
 		new NotificationFx({
@@ -80,7 +80,7 @@ Module.register("alert", {
 		}).show();
 	},
 
-	async showAlert(alert, sender) {
+	async showAlert (alert, sender) {
 		// If module already has an open alert close it
 		if (this.alerts[sender.name]) {
 			this.hideAlert(sender, false);
@@ -113,7 +113,7 @@ Module.register("alert", {
 		}
 	},
 
-	hideAlert(sender, close = true) {
+	hideAlert (sender, close = true) {
 		// Dismiss alert and remove from this.alerts
 		if (this.alerts[sender.name]) {
 			this.alerts[sender.name].dismiss(close);
@@ -125,7 +125,7 @@ Module.register("alert", {
 		}
 	},
 
-	renderMessage(type, data) {
+	renderMessage (type, data) {
 		return new Promise((resolve) => {
 			this.nunjucksEnvironment().render(this.getTemplate(type), data, function (err, res) {
 				if (err) {
@@ -137,7 +137,7 @@ Module.register("alert", {
 		});
 	},
 
-	toggleBlur(add = false) {
+	toggleBlur (add = false) {
 		const method = add ? "add" : "remove";
 		const modules = document.querySelectorAll(".module");
 		for (const module of modules) {

modules/default/alert/notificationFx.js

@@ -12,13 +12,14 @@
  * @param {object} window The window object
  */
 (function (window) {
+
 	/**
 	 * Extend one object with another one
 	 * @param {object} a The object to extend
 	 * @param {object} b The object which extends the other, overwrites existing keys
 	 * @returns {object} The merged object
 	 */
-	function extend(a, b) {
+	function extend (a, b) {
 		for (let key in b) {
 			if (b.hasOwnProperty(key)) {
 				a[key] = b[key];
@@ -32,7 +33,7 @@
 	 * @param {object} options The configuration options
 	 * @class
 	 */
-	function NotificationFx(options) {
+	function NotificationFx (options) {
 		this.options = extend({}, this.options);
 		extend(this.options, options);
 		this._init();
@@ -63,10 +64,10 @@
 		ttl: 6000,
 		al_no: "ns-box",
 		// callbacks
-		onClose: function () {
+		onClose () {
 			return false;
 		},
-		onOpen: function () {
+		onOpen () {
 			return false;
 		}
 	};
@@ -78,7 +79,7 @@
 		// create HTML structure
 		this.ntf = document.createElement("div");
 		this.ntf.className = `${this.options.al_no} ns-${this.options.layout} ns-effect-${this.options.effect} ns-type-${this.options.type}`;
-		let strinner = '<div class="ns-box-inner">';
+		let strinner = "<div class=\"ns-box-inner\">";
 		strinner += this.options.message;
 		strinner += "</div>";
 		this.ntf.innerHTML = strinner;
@@ -153,4 +154,4 @@
 	 * Add to global namespace
 	 */
 	window.NotificationFx = NotificationFx;
-})(window);
+}(window));

modules/default/alert/templates/alert.njk

@@ -1,18 +1,20 @@
 {% if imageUrl or imageFA %}
-  {% set imageHeight = imageHeight if imageHeight else "80px" %}
-  {% if imageUrl %}
-    <img src="{{ imageUrl }}" height="{{ imageHeight }}" style="margin-bottom: 10px;"/>
-  {% else %}
-    <span class="bright fas fa-{{ imageFA }}" style='margin-bottom: 10px; font-size: {{ imageHeight }};'/></span>
-  {% endif %}
-  <br/>
+    {% set imageHeight = imageHeight if imageHeight else "80px" %}
+    {% if imageUrl %}
+        <img src="{{ imageUrl }}"
+             height="{{ imageHeight }}"
+             style="margin-bottom: 10px" />
+    {% else %}
+        <span class="bright fas fa-{{ imageFA }}"
+              style="margin-bottom: 10px;
+                     font-size: {{ imageHeight }}"></span>
+    {% endif %}
+    <br />
 {% endif %}
 {% if title %}
-  <span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span>
+    <span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span>
 {% endif %}
 {% if message %}
-  {% if title %}
-    <br/>
-  {% endif %}
-  <span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
+    {% if title %}<br />{% endif %}
+    <span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
 {% endif %}

modules/default/alert/templates/notification.njk

@@ -1,9 +1,7 @@
 {% if title %}
-  <span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span>
+    <span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span>
 {% endif %}
 {% if message %}
-  {% if title %}
-    <br/>
-  {% endif %}
-  <span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
+    {% if title %}<br />{% endif %}
+    <span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
 {% endif %}

modules/default/calendar/calendar.js

@@ -1,4 +1,4 @@
-/* global CalendarUtils, cloneObject */
+/* global CalendarUtils */
 
 /* MagicMirror²
  * Module: Calendar
@@ -28,6 +28,7 @@ Module.register("calendar", {
 		fetchInterval: 60 * 60 * 1000, // Update every hour
 		animationSpeed: 2000,
 		fade: true,
+		fadePoint: 0.25, // Start on 1/4th of the list.
 		urgency: 7,
 		timeFormat: "relative",
 		dateFormat: "MMM Do",
@@ -35,13 +36,12 @@ Module.register("calendar", {
 		fullDayEventDateFormat: "MMM Do",
 		showEnd: false,
 		getRelative: 6,
-		fadePoint: 0.25, // Start on 1/4th of the list.
 		hidePrivate: false,
 		hideOngoing: false,
 		hideTime: false,
+		hideDuplicates: true,
 		showTimeToday: false,
 		colored: false,
-		customEvents: [], // Array of {keyword: "", symbol: "", color: ""} where Keyword is a regexp and symbol/color are to be applied for matched
 		tableClass: "small",
 		calendars: [
 			{
@@ -49,10 +49,11 @@ Module.register("calendar", {
 				url: "https://www.calendarlabs.com/templates/ical/US-Holidays.ics"
 			}
 		],
-		titleReplace: {
-			"De verjaardag van ": "",
-			"'s birthday": ""
-		},
+		customEvents: [
+			// Array of {keyword: "", symbol: "", color: "", eventClass: ""} where Keyword is a regexp and symbol/color/eventClass are to be applied for matched
+			{ keyword: ".*", transform: { search: "De verjaardag van ", replace: "" } },
+			{ keyword: ".*", transform: { search: "'s birthday", replace: "" } }
+		],
 		locationTitleReplace: {
 			"street ": ""
 		},
@@ -67,23 +68,24 @@ Module.register("calendar", {
 		coloredSymbol: false,
 		coloredBackground: false,
 		limitDaysNeverSkip: false,
-		flipDateHeaderTitle: false
+		flipDateHeaderTitle: false,
+		updateOnFetch: true
 	},
 
 	requiresVersion: "2.1.0",
 
 	// Define required scripts.
-	getStyles: function () {
+	getStyles () {
 		return ["calendar.css", "font-awesome.css"];
 	},
 
 	// Define required scripts.
-	getScripts: function () {
+	getScripts () {
 		return ["calendarutils.js", "moment.js"];
 	},
 
 	// Define required translations.
-	getTranslations: function () {
+	getTranslations () {
 		// The translations for the default modules are defined in the core translation files.
 		// Therefore we can just return false. Otherwise we should have returned a dictionary.
 		// If you're trying to build your own module including translations, check out the documentation.
@@ -91,9 +93,7 @@ Module.register("calendar", {
 	},
 
 	// Override start method.
-	start: function () {
-		const ONE_MINUTE = 60 * 1000;
-
+	start () {
 		Log.info(`Starting module: ${this.name}`);
 
 		if (this.config.colored) {
@@ -116,6 +116,9 @@ Module.register("calendar", {
 		// indicate no data available yet
 		this.loaded = false;
 
+		// data holder of calendar url. Avoid fade out/in on updateDom (one for each calendar update)
+		this.calendarDisplayer = {};
+
 		this.config.calendars.forEach((calendar) => {
 			calendar.url = calendar.url.replace("webcal://", "http://");
 
@@ -124,23 +127,25 @@ Module.register("calendar", {
 				maximumNumberOfDays: calendar.maximumNumberOfDays,
 				pastDaysCount: calendar.pastDaysCount,
 				broadcastPastEvents: calendar.broadcastPastEvents,
-				selfSignedCert: calendar.selfSignedCert
+				selfSignedCert: calendar.selfSignedCert,
+				excludedEvents: calendar.excludedEvents,
+				fetchInterval: calendar.fetchInterval
 			};
 
-			if (calendar.symbolClass === "undefined" || calendar.symbolClass === null) {
+			if (typeof calendar.symbolClass === "undefined" || calendar.symbolClass === null) {
 				calendarConfig.symbolClass = "";
 			}
-			if (calendar.titleClass === "undefined" || calendar.titleClass === null) {
+			if (typeof calendar.titleClass === "undefined" || calendar.titleClass === null) {
 				calendarConfig.titleClass = "";
 			}
-			if (calendar.timeClass === "undefined" || calendar.timeClass === null) {
+			if (typeof calendar.timeClass === "undefined" || calendar.timeClass === null) {
 				calendarConfig.timeClass = "";
 			}
 
 			// we check user and password here for backwards compatibility with old configs
 			if (calendar.user && calendar.pass) {
 				Log.warn("Deprecation warning: Please update your calendar authentication configuration.");
-				Log.warn("https://github.com/MichMich/MagicMirror/tree/v2.1.2/modules/default/calendar#calendar-authentication-options");
+				Log.warn("https://docs.magicmirror.builders/modules/calendar.html#configuration-options");
 				calendar.auth = {
 					user: calendar.user,
 					pass: calendar.pass
@@ -152,17 +157,19 @@ Module.register("calendar", {
 			this.addCalendar(calendar.url, calendar.auth, calendarConfig);
 		});
 
-		// Refresh the DOM every minute if needed: When using relative date format for events that start
-		// or end in less than an hour, the date shows minute granularity and we want to keep that accurate.
-		setTimeout(() => {
-			setInterval(() => {
-				this.updateDom(1);
-			}, ONE_MINUTE);
-		}, ONE_MINUTE - (new Date() % ONE_MINUTE));
+		// for backward compatibility titleReplace
+		if (typeof this.config.titleReplace !== "undefined") {
+			Log.warn("Deprecation warning: Please consider upgrading your calendar titleReplace configuration to customEvents.");
+			for (const [titlesearchstr, titlereplacestr] of Object.entries(this.config.titleReplace)) {
+				this.config.customEvents.push({ keyword: ".*", transform: { search: titlesearchstr, replace: titlereplacestr } });
+			}
+		}
+
+		this.selfUpdate();
 	},
 
 	// Override socket notification handler.
-	socketNotificationReceived: function (notification, payload) {
+	socketNotificationReceived (notification, payload) {
 		if (notification === "FETCH_CALENDAR") {
 			this.sendSocketNotification(notification, { url: payload.url, id: this.identifier });
 		}
@@ -180,6 +187,18 @@ Module.register("calendar", {
 				if (this.config.broadcastEvents) {
 					this.broadcastEvents();
 				}
+
+				if (!this.config.updateOnFetch) {
+					if (this.calendarDisplayer[payload.url] === undefined) {
+						// calendar will never displayed, so display it
+						this.updateDom(this.config.animationSpeed);
+						// set this calendar as displayed
+						this.calendarDisplayer[payload.url] = true;
+					} else {
+						Log.debug("[Calendar] DOM not updated waiting self update()");
+					}
+					return;
+				}
 			}
 		} else if (notification === "CALENDAR_ERROR") {
 			let error_message = this.translate(payload.error_type);
@@ -191,7 +210,7 @@ Module.register("calendar", {
 	},
 
 	// Override dom generator.
-	getDom: function () {
+	getDom () {
 		const ONE_SECOND = 1000; // 1,000 milliseconds
 		const ONE_MINUTE = ONE_SECOND * 60;
 		const ONE_HOUR = ONE_MINUTE * 60;
@@ -317,12 +336,17 @@ Module.register("calendar", {
 				}
 			}
 
-			// Color events if custom color is specified
+			var transformedTitle = event.title;
+
+			// Color events if custom color or eventClass are specified, transform title if required
 			if (this.config.customEvents.length > 0) {
 				for (let ev in this.config.customEvents) {
-					if (typeof this.config.customEvents[ev].color !== "undefined" && this.config.customEvents[ev].color !== "") {
-						let needle = new RegExp(this.config.customEvents[ev].keyword, "gi");
-						if (needle.test(event.title)) {
+					let needle = new RegExp(this.config.customEvents[ev].keyword, "gi");
+					if (needle.test(event.title)) {
+						if (typeof this.config.customEvents[ev].transform === "object") {
+							transformedTitle = CalendarUtils.titleTransform(transformedTitle, [this.config.customEvents[ev].transform]);
+						}
+						if (typeof this.config.customEvents[ev].color !== "undefined" && this.config.customEvents[ev].color !== "") {
 							// Respect parameter ColoredSymbolOnly also for custom events
 							if (this.config.coloredText) {
 								eventWrapper.style.cssText = `color:${this.config.customEvents[ev].color}`;
@@ -331,13 +355,14 @@ Module.register("calendar", {
 							if (this.config.displaySymbol && this.config.coloredSymbol) {
 								symbolWrapper.style.cssText = `color:${this.config.customEvents[ev].color}`;
 							}
-							break;
+						}
+						if (typeof this.config.customEvents[ev].eventClass !== "undefined" && this.config.customEvents[ev].eventClass !== "") {
+							eventWrapper.className += ` ${this.config.customEvents[ev].eventClass}`;
 						}
 					}
 				}
 			}
 
-			const transformedTitle = CalendarUtils.titleTransform(event.title, this.config.titleReplace);
 			titleWrapper.innerHTML = CalendarUtils.shorten(transformedTitle, this.config.maxTitleLength, this.config.wrapEvents, this.config.maxTitleLines) + repeatingCountTitle;
 
 			const titleClass = this.titleClassForUrl(event.url);
@@ -527,7 +552,7 @@ Module.register("calendar", {
 	 * @param {string} url The calendar url
 	 * @returns {boolean} True if the calendar config contains the url, False otherwise
 	 */
-	hasCalendarURL: function (url) {
+	hasCalendarURL (url) {
 		for (const calendar of this.config.calendars) {
 			if (calendar.url === url) {
 				return true;
@@ -542,7 +567,7 @@ Module.register("calendar", {
 	 * @param {boolean} limitNumberOfEntries Whether to filter returned events for display.
 	 * @returns {object[]} Array with events.
 	 */
-	createEventList: function (limitNumberOfEntries) {
+	createEventList (limitNumberOfEntries) {
 		const ONE_SECOND = 1000; // 1,000 milliseconds
 		const ONE_MINUTE = ONE_SECOND * 60;
 		const ONE_HOUR = ONE_MINUTE * 60;
@@ -571,13 +596,14 @@ Module.register("calendar", {
 					if (this.config.hideOngoing && event.startDate < now) {
 						continue;
 					}
-					if (this.listContainsEvent(events, event)) {
+					if (this.config.hideDuplicates && this.listContainsEvent(events, event)) {
 						continue;
 					}
 					if (--remainingEntries < 0) {
 						break;
 					}
 				}
+
 				event.url = calendarUrl;
 				event.today = event.startDate >= today && event.startDate < today + ONE_DAY;
 				event.dayBeforeYesterday = event.startDate >= today - ONE_DAY * 2 && event.startDate < today - ONE_DAY;
@@ -591,7 +617,12 @@ Module.register("calendar", {
 				const maxCount = Math.ceil((event.endDate - 1 - moment(event.startDate, "x").endOf("day").format("x")) / ONE_DAY) + 1;
 				if (this.config.sliceMultiDayEvents && maxCount > 1) {
 					const splitEvents = [];
-					let midnight = moment(event.startDate, "x").clone().startOf("day").add(1, "day").format("x");
+					let midnight
+						= moment(event.startDate, "x")
+							.clone()
+							.startOf("day")
+							.add(1, "day")
+							.format("x");
 					let count = 1;
 					while (event.endDate > midnight) {
 						const thisEvent = JSON.parse(JSON.stringify(event)); // clone object
@@ -660,9 +691,9 @@ Module.register("calendar", {
 		return events.slice(0, this.config.maximumEntries);
 	},
 
-	listContainsEvent: function (eventList, event) {
+	listContainsEvent (eventList, event) {
 		for (const evt of eventList) {
-			if (evt.title === event.title && parseInt(evt.startDate) === parseInt(event.startDate)) {
+			if (evt.title === event.title && parseInt(evt.startDate) === parseInt(event.startDate) && parseInt(evt.endDate) === parseInt(event.endDate)) {
 				return true;
 			}
 		}
@@ -675,7 +706,7 @@ Module.register("calendar", {
 	 * @param {object} auth The authentication method and credentials
 	 * @param {object} calendarConfig The config of the specific calendar
 	 */
-	addCalendar: function (url, auth, calendarConfig) {
+	addCalendar (url, auth, calendarConfig) {
 		this.sendSocketNotification("ADD_CALENDAR", {
 			id: this.identifier,
 			url: url,
@@ -698,7 +729,7 @@ Module.register("calendar", {
 	 * @param {object} event Event to look for.
 	 * @returns {string[]} The symbols
 	 */
-	symbolsForEvent: function (event) {
+	symbolsForEvent (event) {
 		let symbols = this.getCalendarPropertyAsArray(event.url, "symbol", this.config.defaultSymbol);
 
 		if (event.recurringEvent === true && this.hasCalendarProperty(event.url, "recurringSymbol")) {
@@ -725,7 +756,7 @@ Module.register("calendar", {
 		return symbols;
 	},
 
-	mergeUnique: function (arr1, arr2) {
+	mergeUnique (arr1, arr2) {
 		return arr1.concat(
 			arr2.filter(function (item) {
 				return arr1.indexOf(item) === -1;
@@ -738,7 +769,7 @@ Module.register("calendar", {
 	 * @param {string} url The calendar url
 	 * @returns {string} The class to be used for the symbols of the calendar
 	 */
-	symbolClassForUrl: function (url) {
+	symbolClassForUrl (url) {
 		return this.getCalendarProperty(url, "symbolClass", "");
 	},
 
@@ -747,7 +778,7 @@ Module.register("calendar", {
 	 * @param {string} url The calendar url
 	 * @returns {string} The class to be used for the title of the calendar
 	 */
-	titleClassForUrl: function (url) {
+	titleClassForUrl (url) {
 		return this.getCalendarProperty(url, "titleClass", "");
 	},
 
@@ -756,7 +787,7 @@ Module.register("calendar", {
 	 * @param {string} url The calendar url
 	 * @returns {string} The class to be used for the time of the calendar
 	 */
-	timeClassForUrl: function (url) {
+	timeClassForUrl (url) {
 		return this.getCalendarProperty(url, "timeClass", "");
 	},
 
@@ -765,7 +796,7 @@ Module.register("calendar", {
 	 * @param {string} url The calendar url
 	 * @returns {string} The name of the calendar
 	 */
-	calendarNameForUrl: function (url) {
+	calendarNameForUrl (url) {
 		return this.getCalendarProperty(url, "name", "");
 	},
 
@@ -775,7 +806,7 @@ Module.register("calendar", {
 	 * @param {boolean} isBg Determines if we fetch the bgColor or not
 	 * @returns {string} The color
 	 */
-	colorForUrl: function (url, isBg) {
+	colorForUrl (url, isBg) {
 		return this.getCalendarProperty(url, isBg ? "bgColor" : "color", "#fff");
 	},
 
@@ -784,7 +815,7 @@ Module.register("calendar", {
 	 * @param {string} url The calendar url
 	 * @returns {string} The title
 	 */
-	countTitleForUrl: function (url) {
+	countTitleForUrl (url) {
 		return this.getCalendarProperty(url, "repeatingCountTitle", this.config.defaultRepeatingCountTitle);
 	},
 
@@ -793,7 +824,7 @@ Module.register("calendar", {
 	 * @param {string} url The calendar url
 	 * @returns {number} The maximum entry count
 	 */
-	maximumEntriesForUrl: function (url) {
+	maximumEntriesForUrl (url) {
 		return this.getCalendarProperty(url, "maximumEntries", this.config.maximumEntries);
 	},
 
@@ -802,7 +833,7 @@ Module.register("calendar", {
 	 * @param {string} url The calendar url
 	 * @returns {number} The maximum past days count
 	 */
-	maximumPastDaysForUrl: function (url) {
+	maximumPastDaysForUrl (url) {
 		return this.getCalendarProperty(url, "pastDaysCount", this.config.pastDaysCount);
 	},
 
@@ -813,7 +844,7 @@ Module.register("calendar", {
 	 * @param {string} defaultValue The value if the property is not found
 	 * @returns {*} The property
 	 */
-	getCalendarProperty: function (url, property, defaultValue) {
+	getCalendarProperty (url, property, defaultValue) {
 		for (const calendar of this.config.calendars) {
 			if (calendar.url === url && calendar.hasOwnProperty(property)) {
 				return calendar[property];
@@ -823,7 +854,7 @@ Module.register("calendar", {
 		return defaultValue;
 	},
 
-	getCalendarPropertyAsArray: function (url, property, defaultValue) {
+	getCalendarPropertyAsArray (url, property, defaultValue) {
 		let p = this.getCalendarProperty(url, property, defaultValue);
 		if (property === "symbol" || property === "recurringSymbol" || property === "fullDaySymbol") {
 			const className = this.getCalendarProperty(url, "symbolClassName", this.config.defaultSymbolClassName);
@@ -834,7 +865,7 @@ Module.register("calendar", {
 		return p;
 	},
 
-	hasCalendarProperty: function (url, property) {
+	hasCalendarProperty (url, property) {
 		return !!this.getCalendarProperty(url, property, undefined);
 	},
 
@@ -842,7 +873,7 @@ Module.register("calendar", {
 	 * Broadcasts the events to all other modules for reuse.
 	 * The all events available in one array, sorted on startdate.
 	 */
-	broadcastEvents: function () {
+	broadcastEvents () {
 		const eventList = this.createEventList(false);
 		for (const event of eventList) {
 			event.symbol = this.symbolsForEvent(event);
@@ -852,5 +883,30 @@ Module.register("calendar", {
 		}
 
 		this.sendNotification("CALENDAR_EVENTS", eventList);
+	},
+
+	/**
+	 * Refresh the DOM every minute if needed: When using relative date format for events that start
+	 * or end in less than an hour, the date shows minute granularity and we want to keep that accurate.
+	 * --
+	 * When updateOnFetch is not set, it will Avoid fade out/in on updateDom when many calendars are used
+	 * and it's allow to refresh The DOM every minute with animation speed too
+	 * (because updateDom is not set in CALENDAR_EVENTS for this case)
+	 */
+	selfUpdate () {
+		const ONE_MINUTE = 60 * 1000;
+		setTimeout(
+			() => {
+				setInterval(() => {
+					Log.debug("[Calendar] self update");
+					if (this.config.updateOnFetch) {
+						this.updateDom(1);
+					} else {
+						this.updateDom(this.config.animationSpeed);
+					}
+				}, ONE_MINUTE);
+			},
+			ONE_MINUTE - (new Date() % ONE_MINUTE)
+		);
 	}
 });

modules/default/calendar/calendarfetcher.js

@@ -6,9 +6,7 @@
  */
 
 const https = require("https");
-const digest = require("digest-fetch");
 const ical = require("node-ical");
-const fetch = require("fetch");
 const Log = require("logger");
 const NodeHelper = require("node_helper");
 const CalendarFetcherUtils = require("./calendarfetcherutils");
@@ -39,7 +37,6 @@ const CalendarFetcher = function (url, reloadInterval, excludedEvents, maximumEn
 		clearTimeout(reloadTimer);
 		reloadTimer = null;
 		const nodeVersion = Number(process.version.match(/^v(\d+\.\d+)/)[1]);
-		let fetcher = null;
 		let httpsAgent = null;
 		let headers = {
 			"User-Agent": `Mozilla/5.0 (Node.js ${nodeVersion}) MagicMirror/${global.version}`
@@ -53,17 +50,12 @@ const CalendarFetcher = function (url, reloadInterval, excludedEvents, maximumEn
 		if (auth) {
 			if (auth.method === "bearer") {
 				headers.Authorization = `Bearer ${auth.pass}`;
-			} else if (auth.method === "digest") {
-				fetcher = new digest(auth.user, auth.pass).fetch(url, { headers: headers, agent: httpsAgent });
 			} else {
 				headers.Authorization = `Basic ${Buffer.from(`${auth.user}:${auth.pass}`).toString("base64")}`;
 			}
 		}
-		if (fetcher === null) {
-			fetcher = fetch(url, { headers: headers, agent: httpsAgent });
-		}
 
-		fetcher
+		fetch(url, { headers: headers, agent: httpsAgent })
 			.then(NodeHelper.checkFetchStatus)
 			.then((response) => response.text())
 			.then((responseData) => {
@@ -115,7 +107,7 @@ const CalendarFetcher = function (url, reloadInterval, excludedEvents, maximumEn
 	 * Broadcast the existing events.
 	 */
 	this.broadcastEvents = function () {
-		Log.info(`Calendar-Fetcher: Broadcasting ${events.length} events.`);
+		Log.info(`Calendar-Fetcher: Broadcasting ${events.length} events from ${url}.`);
 		eventsReceivedCallback(this);
 	};
 

modules/default/calendar/calendarfetcherutils.js

@@ -10,10 +10,12 @@
  */
 const path = require("path");
 const moment = require("moment");
+
 const zoneTable = require(path.join(__dirname, "windowsZones.json"));
 const Log = require("../../../js/logger");
 
 const CalendarFetcherUtils = {
+
 	/**
 	 * Calculate the time correction, either dst/std or full day in cases where
 	 * utc time is day before plus offset
@@ -21,7 +23,7 @@ const CalendarFetcherUtils = {
 	 * @param {Date} date the date on which this event happens
 	 * @returns {number} the necessary adjustment in hours
 	 */
-	calculateTimezoneAdjustment: function (event, date) {
+	calculateTimezoneAdjustment (event, date) {
 		let adjustHours = 0;
 		// if a timezone was specified
 		if (!event.start.tz) {
@@ -122,7 +124,7 @@ const CalendarFetcherUtils = {
 	 * @param {object} config The configuration object
 	 * @returns {string[]} the filtered events
 	 */
-	filterEvents: function (data, config) {
+	filterEvents (data, config) {
 		const newEvents = [];
 
 		// limitFunction doesn't do much limiting, see comment re: the dates
@@ -141,7 +143,12 @@ const CalendarFetcherUtils = {
 			Log.debug("Processing entry...");
 			const now = new Date();
 			const today = moment().startOf("day").toDate();
-			const future = moment().startOf("day").add(config.maximumNumberOfDays, "days").subtract(1, "seconds").toDate(); // Subtract 1 second so that events that start on the middle of the night will not repeat.
+			const future
+				= moment()
+					.startOf("day")
+					.add(config.maximumNumberOfDays, "days")
+					.subtract(1, "seconds") // Subtract 1 second so that events that start on the middle of the night will not repeat.
+					.toDate();
 			let past = today;
 
 			if (config.includePastEvents) {
@@ -247,7 +254,6 @@ const CalendarFetcherUtils = {
 
 				if (typeof event.rrule !== "undefined" && event.rrule !== null && !isFacebookBirthday) {
 					const rule = event.rrule;
-					let addedEvents = 0;
 
 					const pastMoment = moment(past);
 					const futureMoment = moment(future);
@@ -283,8 +289,12 @@ const CalendarFetcherUtils = {
 						futureLocal = futureMoment.toDate(); // future
 					}
 					Log.debug(`Search for recurring events between: ${pastLocal} and ${futureLocal}`);
-					const dates = rule.between(pastLocal, futureLocal, true, limitFunction);
+					let dates = rule.between(pastLocal, futureLocal, true, limitFunction);
 					Log.debug(`Title: ${event.summary}, with dates: ${JSON.stringify(dates)}`);
+					dates = dates.filter((d) => {
+						if (JSON.stringify(d) === "null") return false;
+						else return true;
+					});
 					// The "dates" array contains the set of dates within our desired date range range that are valid
 					// for the recurrence rule. *However*, it's possible for us to have a specific recurrence that
 					// had its date changed from outside the range to inside the range.  For the time being,
@@ -305,14 +315,12 @@ const CalendarFetcherUtils = {
 					// Loop through the set of date entries to see which recurrences should be added to our event list.
 					for (let d in dates) {
 						let date = dates[d];
-						// Remove the time information of each date by using its substring, using the following method:
-						// .toISOString().substring(0,10).
-						// since the date is given as ISOString with YYYY-MM-DDTHH:MM:SS.SSSZ
-						// (see https://momentjs.com/docs/#/displaying/as-iso-string/).
-						const dateKey = date.toISOString().substring(0, 10);
 						let curEvent = event;
 						let showRecurrence = true;
 
+						// set the time information in the date to equal the time information in the event
+						date.setUTCHours(curEvent.start.getUTCHours(), curEvent.start.getUTCMinutes(), curEvent.start.getUTCSeconds(), curEvent.start.getUTCMilliseconds());
+
 						// Get the offset of today where we are processing
 						// This will be the correction, we need to apply.
 						let nowOffset = new Date().getTimezoneOffset();
@@ -399,6 +407,13 @@ const CalendarFetcherUtils = {
 
 						let adjustDays = CalendarFetcherUtils.calculateTimezoneAdjustment(event, date);
 
+						// Remove the time information of each date by using its substring, using the following method:
+						// .toISOString().substring(0,10).
+						// since the date is given as ISOString with YYYY-MM-DDTHH:MM:SS.SSSZ
+						// (see https://momentjs.com/docs/#/displaying/as-iso-string/).
+						// This must be done after `date` is adjusted
+						const dateKey = date.toISOString().substring(0, 10);
+
 						// For each date that we're checking, it's possible that there is a recurrence override for that one day.
 						if (curEvent.recurrences !== undefined && curEvent.recurrences[dateKey] !== undefined) {
 							// We found an override, so for this recurrence, use a potentially different title, start date, and duration.
@@ -432,7 +447,6 @@ const CalendarFetcherUtils = {
 
 						if (showRecurrence === true) {
 							Log.debug(`saving event: ${description}`);
-							addedEvents++;
 							newEvents.push({
 								title: recurrenceTitle,
 								startDate: (adjustDays ? (adjustDays > 0 ? startDate.add(adjustDays, "hours") : startDate.subtract(Math.abs(adjustDays), "hours")) : startDate).format("x"),
@@ -513,7 +527,7 @@ const CalendarFetcherUtils = {
 	 * @param {string} msTZName the timezone name to lookup
 	 * @returns {string|null} the iana name or null of none is found
 	 */
-	getIanaTZFromMS: function (msTZName) {
+	getIanaTZFromMS (msTZName) {
 		// Get hash entry
 		const he = zoneTable[msTZName];
 		// If found return iana name, else null
@@ -525,7 +539,7 @@ const CalendarFetcherUtils = {
 	 * @param {object} event The event object to check.
 	 * @returns {string} The title of the event, or "Event" if no title is found.
 	 */
-	getTitleFromEvent: function (event) {
+	getTitleFromEvent (event) {
 		let title = "Event";
 		if (event.summary) {
 			title = typeof event.summary.val !== "undefined" ? event.summary.val : event.summary;
@@ -541,7 +555,7 @@ const CalendarFetcherUtils = {
 	 * @param {object} event The event object to check.
 	 * @returns {boolean} True if the event is a fullday event, false otherwise
 	 */
-	isFullDayEvent: function (event) {
+	isFullDayEvent (event) {
 		if (event.start.length === 8 || event.start.dateOnly || event.datetype === "date") {
 			return true;
 		}
@@ -564,7 +578,7 @@ const CalendarFetcherUtils = {
 	 * @param {string} filter The time to subtract from the end date to determine if an event should be shown
 	 * @returns {boolean} True if the event should be filtered out, false otherwise
 	 */
-	timeFilterApplies: function (now, endDate, filter) {
+	timeFilterApplies (now, endDate, filter) {
 		if (filter) {
 			const until = filter.split(" "),
 				value = parseInt(until[0]),
@@ -585,7 +599,7 @@ const CalendarFetcherUtils = {
 	 * @param {string} regexFlags flags that should be applied to the regex
 	 * @returns {boolean} True if the title should be filtered out, false otherwise
 	 */
-	titleFilterApplies: function (title, filter, useRegex, regexFlags) {
+	titleFilterApplies (title, filter, useRegex, regexFlags) {
 		if (useRegex) {
 			let regexFilter = filter;
 			// Assume if leading slash, there is also trailing slash

modules/default/calendar/calendarutils.js

@@ -5,12 +5,13 @@
  * MIT Licensed.
  */
 const CalendarUtils = {
+
 	/**
 	 * Capitalize the first letter of a string
 	 * @param {string} string The string to capitalize
 	 * @returns {string} The capitalized string
 	 */
-	capFirst: function (string) {
+	capFirst (string) {
 		return string.charAt(0).toUpperCase() + string.slice(1);
 	},
 
@@ -21,7 +22,7 @@ const CalendarUtils = {
 	 * @param {number} timeFormat Specifies either 12 or 24-hour time format
 	 * @returns {moment.LocaleSpecification} formatted time
 	 */
-	getLocaleSpecification: function (timeFormat) {
+	getLocaleSpecification (timeFormat) {
 		switch (timeFormat) {
 			case 12: {
 				return { longDateFormat: { LT: "h:mm A" } };
@@ -43,7 +44,7 @@ const CalendarUtils = {
 	 * @param {number} maxTitleLines The max number of vertical lines before cutting event title
 	 * @returns {string} The shortened string
 	 */
-	shorten: function (string, maxLength, wrapEvents, maxTitleLines) {
+	shorten (string, maxLength, wrapEvents, maxTitleLines) {
 		if (typeof string !== "string") {
 			return "";
 		}
@@ -90,23 +91,39 @@ const CalendarUtils = {
 	/**
 	 * Transforms the title of an event for usage.
 	 * Replaces parts of the text as defined in config.titleReplace.
-	 * Shortens title based on config.maxTitleLength and config.wrapEvents
 	 * @param {string} title The title to transform.
-	 * @param {object} titleReplace Pairs of strings to be replaced in the title
+	 * @param {object} titleReplace object definition of parts to be replaced in the title
+	 *                 object definition:
+	 *                    search: {string,required} RegEx in format //x or simple string to be searched. For (birthday) year calcluation, the element matching the year must be in a RegEx group
+	 *                    replace: {string,required} Replacement string, may contain match group references (latter is required for year calculation)
+	 *                    yearmatchgroup: {number,optional} match group for year element
 	 * @returns {string} The transformed title.
 	 */
-	titleTransform: function (title, titleReplace) {
+	titleTransform (title, titleReplace) {
 		let transformedTitle = title;
-		for (let needle in titleReplace) {
-			const replacement = titleReplace[needle];
+		for (let tr in titleReplace) {
+			let transform = titleReplace[tr];
+			if (typeof transform === "object") {
+				if (typeof transform.search !== "undefined" && transform.search !== "" && typeof transform.replace !== "undefined") {
+					let regParts = transform.search.match(/^\/(.+)\/([gim]*)$/);
+					let needle = new RegExp(transform.search, "g");
+					if (regParts) {
+						// the parsed pattern is a regexp with flags.
+						needle = new RegExp(regParts[1], regParts[2]);
+					}
 
-			const regParts = needle.match(/^\/(.+)\/([gim]*)$/);
-			if (regParts) {
-				// the parsed pattern is a regexp.
-				needle = new RegExp(regParts[1], regParts[2]);
+					let replacement = transform.replace;
+					if (typeof transform.yearmatchgroup !== "undefined" && transform.yearmatchgroup !== "") {
+						const yearmatch = [...title.matchAll(needle)];
+						if (yearmatch[0].length >= transform.yearmatchgroup + 1 && yearmatch[0][transform.yearmatchgroup] * 1 >= 1900) {
+							let calcage = new Date().getFullYear() - yearmatch[0][transform.yearmatchgroup] * 1;
+							let searchstr = `$${transform.yearmatchgroup}`;
+							replacement = replacement.replace(searchstr, calcage);
+						}
+					}
+					transformedTitle = transformedTitle.replace(needle, replacement);
+				}
 			}
-
-			transformedTitle = transformedTitle.replace(needle, replacement);
 		}
 		return transformedTitle;
 	}

modules/default/calendar/node_helper.js

@@ -10,13 +10,13 @@ const CalendarFetcher = require("./calendarfetcher");
 
 module.exports = NodeHelper.create({
 	// Override start method.
-	start: function () {
+	start () {
 		Log.log(`Starting node helper for: ${this.name}`);
 		this.fetchers = [];
 	},
 
 	// Override socketNotificationReceived method.
-	socketNotificationReceived: function (notification, payload) {
+	socketNotificationReceived (notification, payload) {
 		if (notification === "ADD_CALENDAR") {
 			this.createFetcher(payload.url, payload.fetchInterval, payload.excludedEvents, payload.maximumEntries, payload.maximumNumberOfDays, payload.auth, payload.broadcastPastEvents, payload.selfSignedCert, payload.id);
 		} else if (notification === "FETCH_CALENDAR") {
@@ -43,7 +43,7 @@ module.exports = NodeHelper.create({
 	 * @param {boolean} selfSignedCert If true, the server certificate is not verified against the list of supplied CAs.
 	 * @param {string} identifier ID of the module
 	 */
-	createFetcher: function (url, fetchInterval, excludedEvents, maximumEntries, maximumNumberOfDays, auth, broadcastPastEvents, selfSignedCert, identifier) {
+	createFetcher (url, fetchInterval, excludedEvents, maximumEntries, maximumNumberOfDays, auth, broadcastPastEvents, selfSignedCert, identifier) {
 		try {
 			new URL(url);
 		} catch (error) {
@@ -85,7 +85,7 @@ module.exports = NodeHelper.create({
 	 * @param {object} fetcher the fetcher associated with the calendar
 	 * @param {string} identifier the identifier of the calendar
 	 */
-	broadcastEvents: function (fetcher, identifier) {
+	broadcastEvents (fetcher, identifier) {
 		this.sendSocketNotification("CALENDAR_EVENTS", {
 			id: identifier,
 			url: fetcher.url(),

modules/default/clock/clock.js

@@ -32,20 +32,20 @@ Module.register("clock", {
 		secondsColor: "#888888",
 
 		showSunTimes: false,
-		showMoonTimes: false,
+		showMoonTimes: false, // options: false, 'times' (rise/set), 'percent' (lit percent), 'phase' (current phase), or 'both' (percent & phase)
 		lat: 47.630539,
 		lon: -122.344147
 	},
 	// Define required scripts.
-	getScripts: function () {
+	getScripts () {
 		return ["moment.js", "moment-timezone.js", "suncalc.js"];
 	},
 	// Define styles.
-	getStyles: function () {
+	getStyles () {
 		return ["clock_styles.css"];
 	},
 	// Define start sequence.
-	start: function () {
+	start () {
 		Log.info(`Starting module: ${this.name}`);
 
 		// Schedule update interval.
@@ -94,7 +94,7 @@ Module.register("clock", {
 		moment.locale(config.language);
 	},
 	// Override dom generator.
-	getDom: function () {
+	getDom () {
 		const wrapper = document.createElement("div");
 		wrapper.classList.add("clock-grid");
 
@@ -186,10 +186,10 @@ Module.register("clock", {
 			}
 			const untilNextEvent = moment.duration(moment(nextEvent).diff(now));
 			const untilNextEventString = `${untilNextEvent.hours()}h ${untilNextEvent.minutes()}m`;
-			sunWrapper.innerHTML =
-				`<span class="${isVisible ? "bright" : ""}"><i class="fas fa-sun" aria-hidden="true"></i> ${untilNextEventString}</span>` +
-				`<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ${formatTime(this.config, sunTimes.sunrise)}</span>` +
-				`<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ${formatTime(this.config, sunTimes.sunset)}</span>`;
+			sunWrapper.innerHTML
+				= `<span class="${isVisible ? "bright" : ""}"><i class="fas fa-sun" aria-hidden="true"></i> ${untilNextEventString}</span>`
+				+ `<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ${formatTime(this.config, sunTimes.sunrise)}</span>`
+				+ `<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ${formatTime(this.config, sunTimes.sunset)}</span>`;
 			digitalWrapper.appendChild(sunWrapper);
 		}
 
@@ -208,11 +208,15 @@ Module.register("clock", {
 				moonSet = nextMoonTimes.set;
 			}
 			const isVisible = now.isBetween(moonRise, moonSet) || moonTimes.alwaysUp === true;
+			const showFraction = ["both", "percent"].includes(this.config.showMoonTimes);
+			const showUnicode = ["both", "phase"].includes(this.config.showMoonTimes);
 			const illuminatedFractionString = `${Math.round(moonIllumination.fraction * 100)}%`;
-			moonWrapper.innerHTML =
-				`<span class="${isVisible ? "bright" : ""}"><i class="fas fa-moon" aria-hidden="true"></i> ${illuminatedFractionString}</span>` +
-				`<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ${moonRise ? formatTime(this.config, moonRise) : "..."}</span>` +
-				`<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ${moonSet ? formatTime(this.config, moonSet) : "..."}</span>`;
+			const image = showUnicode ? [..."🌑🌒🌓🌔🌕🌖🌗🌘"][Math.floor(moonIllumination.phase * 8)] : "<i class=\"fas fa-moon\" aria-hidden=\"true\"></i>";
+
+			moonWrapper.innerHTML
+				= `<span class="${isVisible ? "bright" : ""}">${image} ${showFraction ? illuminatedFractionString : ""}</span>`
+				+ `<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ${moonRise ? formatTime(this.config, moonRise) : "..."}</span>`
+				+ `<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ${moonSet ? formatTime(this.config, moonSet) : "..."}</span>`;
 			digitalWrapper.appendChild(moonWrapper);
 		}
 

modules/default/compliments/compliments.js

@@ -28,12 +28,12 @@ Module.register("compliments", {
 	currentWeatherType: "",
 
 	// Define required scripts.
-	getScripts: function () {
+	getScripts () {
 		return ["moment.js"];
 	},
 
 	// Define start sequence.
-	start: async function () {
+	async start () {
 		Log.info(`Starting module: ${this.name}`);
 
 		this.lastComplimentIndex = -1;
@@ -55,7 +55,7 @@ Module.register("compliments", {
 	 * @param {string[]} compliments Array with compliments.
 	 * @returns {number} a random index of given array
 	 */
-	randomIndex: function (compliments) {
+	randomIndex (compliments) {
 		if (compliments.length === 1) {
 			return 0;
 		}
@@ -79,7 +79,7 @@ Module.register("compliments", {
 	 * Retrieve an array of compliments for the time of the day.
 	 * @returns {string[]} array with compliments for the time of the day.
 	 */
-	complimentArray: function () {
+	complimentArray () {
 		const hour = moment().hour();
 		const date = moment().format("YYYY-MM-DD");
 		let compliments = [];
@@ -115,7 +115,7 @@ Module.register("compliments", {
 	 * Retrieve a file from the local filesystem
 	 * @returns {Promise} Resolved when the file is loaded
 	 */
-	loadComplimentFile: async function () {
+	async loadComplimentFile () {
 		const isRemote = this.config.remoteFile.indexOf("http://") === 0 || this.config.remoteFile.indexOf("https://") === 0,
 			url = isRemote ? this.config.remoteFile : this.file(this.config.remoteFile);
 		const response = await fetch(url);
@@ -126,7 +126,7 @@ Module.register("compliments", {
 	 * Retrieve a random compliment.
 	 * @returns {string} a compliment
 	 */
-	getRandomCompliment: function () {
+	getRandomCompliment () {
 		// get the current time of day compliments list
 		const compliments = this.complimentArray();
 		// variable for index to next message to display
@@ -145,7 +145,7 @@ Module.register("compliments", {
 	},
 
 	// Override dom generator.
-	getDom: function () {
+	getDom () {
 		const wrapper = document.createElement("div");
 		wrapper.className = this.config.classes ? this.config.classes : "thin xlarge bright pre-line";
 		// get the compliment text
@@ -173,7 +173,7 @@ Module.register("compliments", {
 	},
 
 	// Override notification handler.
-	notificationReceived: function (notification, payload, sender) {
+	notificationReceived (notification, payload, sender) {
 		if (notification === "CURRENTWEATHER_TYPE") {
 			this.currentWeatherType = payload.type;
 		}

modules/default/helloworld/helloworld.js

@@ -10,11 +10,11 @@ Module.register("helloworld", {
 		text: "Hello World!"
 	},
 
-	getTemplate: function () {
+	getTemplate () {
 		return "helloworld.njk";
 	},
 
-	getTemplateData: function () {
+	getTemplateData () {
 		return this.config;
 	}
 });

modules/default/helloworld/helloworld.njk

@@ -2,4 +2,4 @@
 	Use ` | safe` to allow html tages within the text string.
 	https://mozilla.github.io/nunjucks/templating.html#autoescaping
 -->
-<div>{{text | safe}}</div>
+<div>{{ text | safe }}</div>

modules/default/newsfeed/fullarticle.njk

@@ -1,3 +1,3 @@
 <div>
     <iframe class="newsfeed-fullarticle" src="{{ url }}"></iframe>
-</div>
+</div>

modules/default/newsfeed/newsfeed.js

@@ -42,7 +42,7 @@ Module.register("newsfeed", {
 		dangerouslyDisableAutoEscaping: false
 	},
 
-	getUrlPrefix: function (item) {
+	getUrlPrefix (item) {
 		if (item.useCorsProxy) {
 			return `${location.protocol}//${location.host}/cors?url=`;
 		} else {
@@ -51,17 +51,17 @@ Module.register("newsfeed", {
 	},
 
 	// Define required scripts.
-	getScripts: function () {
+	getScripts () {
 		return ["moment.js"];
 	},
 
 	//Define required styles.
-	getStyles: function () {
+	getStyles () {
 		return ["newsfeed.css"];
 	},
 
 	// Define required translations.
-	getTranslations: function () {
+	getTranslations () {
 		// The translations for the default modules are defined in the core translation files.
 		// Therefor we can just return false. Otherwise we should have returned a dictionary.
 		// If you're trying to build your own module including translations, check out the documentation.
@@ -69,7 +69,7 @@ Module.register("newsfeed", {
 	},
 
 	// Define start sequence.
-	start: function () {
+	start () {
 		Log.info(`Starting module: ${this.name}`);
 
 		// Set locale.
@@ -87,7 +87,7 @@ Module.register("newsfeed", {
 	},
 
 	// Override socket notification handler.
-	socketNotificationReceived: function (notification, payload) {
+	socketNotificationReceived (notification, payload) {
 		if (notification === "NEWS_ITEMS") {
 			this.generateFeed(payload);
 
@@ -107,7 +107,7 @@ Module.register("newsfeed", {
 	},
 
 	//Override fetching of template name
-	getTemplate: function () {
+	getTemplate () {
 		if (this.config.feedUrl) {
 			return "oldconfig.njk";
 		} else if (this.config.showFullArticle) {
@@ -117,7 +117,7 @@ Module.register("newsfeed", {
 	},
 
 	//Override template data and return whats used for the current template
-	getTemplateData: function () {
+	getTemplateData () {
 		// this.config.showFullArticle is a run-time configuration, triggered by optional notifications
 		if (this.config.showFullArticle) {
 			return {
@@ -156,7 +156,7 @@ Module.register("newsfeed", {
 		};
 	},
 
-	getActiveItemURL: function () {
+	getActiveItemURL () {
 		const item = this.newsItems[this.activeItem];
 		if (item) {
 			return typeof item.url === "string" ? this.getUrlPrefix(item) + item.url : this.getUrlPrefix(item) + item.url.href;
@@ -168,7 +168,7 @@ Module.register("newsfeed", {
 	/**
 	 * Registers the feeds to be used by the backend.
 	 */
-	registerFeeds: function () {
+	registerFeeds () {
 		for (let feed of this.config.feeds) {
 			this.sendSocketNotification("ADD_FEED", {
 				feed: feed,
@@ -181,7 +181,7 @@ Module.register("newsfeed", {
 	 * Generate an ordered list of items for this configured module.
 	 * @param {object} feeds An object with feeds returned by the node helper.
 	 */
-	generateFeed: function (feeds) {
+	generateFeed (feeds) {
 		let newsItems = [];
 		for (let feed in feeds) {
 			const feedItems = feeds[feed];
@@ -274,7 +274,7 @@ Module.register("newsfeed", {
 	 * @param {string} feedUrl Url of the feed to check.
 	 * @returns {boolean} True if it is subscribed, false otherwise
 	 */
-	subscribedToFeed: function (feedUrl) {
+	subscribedToFeed (feedUrl) {
 		for (let feed of this.config.feeds) {
 			if (feed.url === feedUrl) {
 				return true;
@@ -288,7 +288,7 @@ Module.register("newsfeed", {
 	 * @param {string} feedUrl Url of the feed
 	 * @returns {string} The title of the feed
 	 */
-	titleForFeed: function (feedUrl) {
+	titleForFeed (feedUrl) {
 		for (let feed of this.config.feeds) {
 			if (feed.url === feedUrl) {
 				return feed.title || "";
@@ -300,7 +300,7 @@ Module.register("newsfeed", {
 	/**
 	 * Schedule visual update.
 	 */
-	scheduleUpdateInterval: function () {
+	scheduleUpdateInterval () {
 		this.updateDom(this.config.animationSpeed);
 
 		// Broadcast NewsFeed if needed
@@ -322,7 +322,7 @@ Module.register("newsfeed", {
 		}, this.config.updateInterval);
 	},
 
-	resetDescrOrFullArticleAndTimer: function () {
+	resetDescrOrFullArticleAndTimer () {
 		this.isShowingDescription = this.config.showDescription;
 		this.config.showFullArticle = false;
 		this.scrollPosition = 0;
@@ -333,7 +333,7 @@ Module.register("newsfeed", {
 		}
 	},
 
-	notificationReceived: function (notification, payload, sender) {
+	notificationReceived (notification, payload, sender) {
 		const before = this.activeItem;
 		if (notification === "MODULE_DOM_CREATED" && this.config.hideLoading) {
 			this.hide();
@@ -394,7 +394,7 @@ Module.register("newsfeed", {
 		}
 	},
 
-	showFullArticle: function () {
+	showFullArticle () {
 		this.isShowingDescription = !this.isShowingDescription;
 		this.config.showFullArticle = !this.isShowingDescription;
 		// make bottom bar align to top to allow scrolling

modules/default/newsfeed/newsfeed.njk

@@ -1,27 +1,31 @@
 {% macro escapeText(text, dangerouslyDisableAutoEscaping=false) %}
-  {% if dangerouslyDisableAutoEscaping %}
-    {{ text | safe}}
-  {% else %}
-    {{ text }}
-  {% endif %}
+    {% if dangerouslyDisableAutoEscaping -%}
+        {{ text | safe }}
+    {%- else -%}
+        {{ text }}
+    {%- endif %}
 {% endmacro %}
-
 {% macro escapeTitle(title, url, dangerouslyDisableAutoEscaping=false, showTitleAsUrl=false) %}
-  {% if dangerouslyDisableAutoEscaping %}
-    {% if showTitleAsUrl %}
-      <a href="{{ url }}" style="text-decoration:none;color:#ffffff" target="_blank">{{ title | safe }}</a>
+    {% if dangerouslyDisableAutoEscaping %}
+        {% if showTitleAsUrl %}
+            <a href="{{ url }}"
+               style="text-decoration:none;
+                      color:#ffffff"
+               target="_blank">{{ title | safe }}</a>
+        {% else %}
+            {{ title | safe }}
+        {% endif %}
     {% else %}
-      {{ title | safe}}
+        {% if showTitleAsUrl %}
+            <a href="{{ url }}"
+               style="text-decoration:none;
+                      color:#ffffff"
+               target="_blank">{{ title }}</a>
+        {% else %}
+            {{ title }}
+        {% endif %}
     {% endif %}
-  {% else %}
-    {% if showTitleAsUrl %}
-      <a href="{{ url }}" style="text-decoration:none;color:#ffffff" target="_blank">{{ title }}</a>
-    {% else %}
-      {{ title }}
-    {% endif %}
-  {% endif %}
 {% endmacro %}
-
 {% if loaded %}
     {% if config.showAsList %}
         <ul class="newsfeed-list">
@@ -30,11 +34,9 @@
                     {% if (config.showSourceTitle and item.sourceTitle) or config.showPublishDate %}
                         <div class="newsfeed-source light small dimmed">
                             {% if item.sourceTitle and config.showSourceTitle %}
-                                {{ item.sourceTitle }}{% if config.showPublishDate %}, {% else %}: {% endif %}
-                            {% endif %}
-                            {% if config.showPublishDate %}
-                                {{ item.publishDate }}:
+                                {{ item.sourceTitle }}{% if config.showPublishDate %}, {% else %}:{% endif %}
                             {% endif %}
+                            {% if config.showPublishDate %}{{ item.publishDate }}:{% endif %}
                         </div>
                     {% endif %}
                     <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">
@@ -43,7 +45,7 @@
                     {% if config.showDescription %}
                         <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
                             {% if config.truncDescription %}
-                                {{ escapeText(item.description | truncate(config.lengthDescription), config.dangerouslyDisableAutoEscaping) }}
+                                {{ escapeText(item.description | truncate(config.lengthDescription) , config.dangerouslyDisableAutoEscaping) }}
                             {% else %}
                                 {{ escapeText(item.description, config.dangerouslyDisableAutoEscaping) }}
                             {% endif %}
@@ -57,11 +59,9 @@
             {% if (config.showSourceTitle and sourceTitle) or config.showPublishDate %}
                 <div class="newsfeed-source light small dimmed">
                     {% if sourceTitle and config.showSourceTitle %}
-                        {{ escapeText(sourceTitle, config.dangerouslyDisableAutoEscaping) }}{% if config.showPublishDate %}, {% else %}: {% endif %}
-                    {% endif %}
-                    {% if config.showPublishDate %}
-                        {{ publishDate }}:
+                        {{ escapeText(sourceTitle, config.dangerouslyDisableAutoEscaping) }}{% if config.showPublishDate %}, {% else %}:{% endif %}
                     {% endif %}
+                    {% if config.showPublishDate %}{{ publishDate }}:{% endif %}
                 </div>
             {% endif %}
             <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">
@@ -70,7 +70,7 @@
             {% if config.showDescription %}
                 <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
                     {% if config.truncDescription %}
-                        {{ escapeText(description | truncate(config.lengthDescription), config.dangerouslyDisableAutoEscaping) }}
+                        {{ escapeText(description | truncate(config.lengthDescription) , config.dangerouslyDisableAutoEscaping) }}
                     {% else %}
                         {{ escapeText(description, config.dangerouslyDisableAutoEscaping) }}
                     {% endif %}
@@ -79,15 +79,11 @@
         </div>
     {% endif %}
 {% elseif empty %}
-    <div class="small dimmed">
-        {{ "NEWSFEED_NO_ITEMS" | translate | safe }}
-    </div>
+    <div class="small dimmed">{{ "NEWSFEED_NO_ITEMS" | translate | safe }}</div>
 {% elseif error %}
     <div class="small dimmed">
         {{ "MODULE_CONFIG_ERROR" | translate({MODULE_NAME: "Newsfeed", ERROR: error}) | safe }}
     </div>
 {% else %}
-    <div class="small dimmed">
-        {{ "LOADING" | translate | safe }}
-    </div>
+    <div class="small dimmed">{{ "LOADING" | translate | safe }}</div>
 {% endif %}

modules/default/newsfeed/newsfeedfetcher.js

@@ -8,7 +8,7 @@
 const stream = require("stream");
 const FeedMe = require("feedme");
 const iconv = require("iconv-lite");
-const fetch = require("fetch");
+const { htmlToText } = require("html-to-text");
 const Log = require("logger");
 const NodeHelper = require("node_helper");
 
@@ -48,12 +48,19 @@ const NewsfeedFetcher = function (url, reloadInterval, encoding, logFeedWarnings
 		parser.on("item", (item) => {
 			const title = item.title;
 			let description = item.description || item.summary || item.content || "";
-			const pubdate = item.pubdate || item.published || item.updated || item["dc:date"];
+			const pubdate = item.pubdate || item.published || item.updated || item["dc:date"] || item["a10:updated"];
 			const url = item.url || item.link || "";
 
 			if (title && pubdate) {
-				const regex = /(<([^>]+)>)/gi;
-				description = description.toString().replace(regex, "");
+				// Convert HTML entities, codes and tag
+				description = htmlToText(description, {
+					wordwrap: false,
+					selectors: [
+						{ selector: "a", options: { ignoreHref: true, noAnchorUrl: true } },
+						{ selector: "br", format: "inlineSurround", options: { prefix: " " } },
+						{ selector: "img", format: "skip" }
+					]
+				});
 
 				items.push({
 					title: title,

modules/default/newsfeed/node_helper.js

@@ -11,13 +11,13 @@ const NewsfeedFetcher = require("./newsfeedfetcher");
 
 module.exports = NodeHelper.create({
 	// Override start method.
-	start: function () {
+	start () {
 		Log.log(`Starting node helper for: ${this.name}`);
 		this.fetchers = [];
 	},
 
 	// Override socketNotificationReceived received.
-	socketNotificationReceived: function (notification, payload) {
+	socketNotificationReceived (notification, payload) {
 		if (notification === "ADD_FEED") {
 			this.createFetcher(payload.feed, payload.config);
 		}
@@ -29,7 +29,7 @@ module.exports = NodeHelper.create({
 	 * @param {object} feed The feed object
 	 * @param {object} config The configuration object
 	 */
-	createFetcher: function (feed, config) {
+	createFetcher (feed, config) {
 		const url = feed.url || "";
 		const encoding = feed.encoding || "UTF-8";
 		const reloadInterval = feed.reloadInterval || config.reloadInterval || 5 * 60 * 1000;
@@ -76,7 +76,7 @@ module.exports = NodeHelper.create({
 	 * Creates an object with all feed items of the different registered feeds,
 	 * and broadcasts these using sendSocketNotification.
 	 */
-	broadcastFeeds: function () {
+	broadcastFeeds () {
 		const feeds = {};
 		for (let f in this.fetchers) {
 			feeds[f] = this.fetchers[f].items();

modules/default/newsfeed/oldconfig.njk

@@ -1,3 +1,3 @@
 <div class="small bright">
     {{ "MODULE_CONFIG_CHANGED" | translate({MODULE_NAME: "Newsfeed"}) | safe }}
-</div>
+</div>

modules/default/updatenotification/git_helper.js

@@ -7,22 +7,22 @@ const Log = require("logger");
 const BASE_DIR = path.normalize(`${__dirname}/../../../`);
 
 class GitHelper {
-	constructor() {
+	constructor () {
 		this.gitRepos = [];
 		this.gitResultList = [];
 	}
 
-	getRefRegex(branch) {
+	getRefRegex (branch) {
 		return new RegExp(`s*([a-z,0-9]+[.][.][a-z,0-9]+)  ${branch}`, "g");
 	}
 
-	async execShell(command) {
+	async execShell (command) {
 		const { stdout = "", stderr = "" } = await exec(command);
 
 		return { stdout, stderr };
 	}
 
-	async isGitRepo(moduleFolder) {
+	async isGitRepo (moduleFolder) {
 		const { stderr } = await this.execShell(`cd ${moduleFolder} && git remote -v`);
 
 		if (stderr) {
@@ -34,7 +34,7 @@ class GitHelper {
 		return true;
 	}
 
-	async add(moduleName) {
+	async add (moduleName) {
 		let moduleFolder = BASE_DIR;
 
 		if (moduleName !== "MagicMirror") {
@@ -59,7 +59,7 @@ class GitHelper {
 		}
 	}
 
-	async getStatusInfo(repo) {
+	async getStatusInfo (repo) {
 		let gitInfo = {
 			module: repo.module,
 			behind: 0, // commits behind
@@ -114,7 +114,7 @@ class GitHelper {
 		return gitInfo;
 	}
 
-	async getRepoInfo(repo) {
+	async getRepoInfo (repo) {
 		const gitInfo = await this.getStatusInfo(repo);
 
 		if (!gitInfo || !gitInfo.current) {
@@ -174,7 +174,7 @@ class GitHelper {
 		}
 	}
 
-	async getRepos() {
+	async getRepos () {
 		this.gitResultList = [];
 
 		for (const repo of this.gitRepos) {
@@ -192,7 +192,7 @@ class GitHelper {
 		return this.gitResultList;
 	}
 
-	async checkUpdates() {
+	async checkUpdates () {
 		var updates = [];
 
 		const allRepos = await this.gitResultList.map((module) => {

modules/default/updatenotification/node_helper.js

@@ -1,6 +1,7 @@
 const NodeHelper = require("node_helper");
 const defaultModules = require("../defaultmodules");
 const GitHelper = require("./git_helper");
+const UpdateHelper = require("./update_helper");
 
 const ONE_MINUTE = 60 * 1000;
 
@@ -11,8 +12,9 @@ module.exports = NodeHelper.create({
 	updateProcessStarted: false,
 
 	gitHelper: new GitHelper(),
+	updateHelper: null,
 
-	async configureModules(modules) {
+	async configureModules (modules) {
 		for (const moduleName of modules) {
 			if (!this.ignoreUpdateChecking(moduleName)) {
 				await this.gitHelper.add(moduleName);
@@ -24,10 +26,12 @@ module.exports = NodeHelper.create({
 		}
 	},
 
-	async socketNotificationReceived(notification, payload) {
+	async socketNotificationReceived (notification, payload) {
 		switch (notification) {
 			case "CONFIG":
 				this.config = payload;
+				this.updateHelper = new UpdateHelper(this.config);
+				await this.updateHelper.check_PM2_Process();
 				break;
 			case "MODULES":
 				// if this is the 1st time thru the update check process
@@ -47,30 +51,43 @@ module.exports = NodeHelper.create({
 		}
 	},
 
-	async performFetch() {
+	async performFetch () {
 		const repos = await this.gitHelper.getRepos();
 
 		for (const repo of repos) {
-			this.sendSocketNotification("STATUS", repo);
+			this.sendSocketNotification("REPO_STATUS", repo);
 		}
 
-		if (this.config.sendUpdatesNotifications) {
-			const updates = await this.gitHelper.checkUpdates();
-			if (updates.length) this.sendSocketNotification("UPDATES", updates);
+		const updates = await this.gitHelper.checkUpdates();
+
+		if (this.config.sendUpdatesNotifications && updates.length) {
+			this.sendSocketNotification("UPDATES", updates);
+		}
+
+		if (updates.length) {
+			const updateResult = await this.updateHelper.parse(updates);
+			for (const update of updateResult) {
+				if (update.inProgress) {
+					this.sendSocketNotification("UPDATE_STATUS", update);
+				}
+			}
 		}
 
 		this.scheduleNextFetch(this.config.updateInterval);
 	},
 
-	scheduleNextFetch(delay) {
+	scheduleNextFetch (delay) {
 		clearTimeout(this.updateTimer);
 
-		this.updateTimer = setTimeout(() => {
-			this.performFetch();
-		}, Math.max(delay, ONE_MINUTE));
+		this.updateTimer = setTimeout(
+			() => {
+				this.performFetch();
+			},
+			Math.max(delay, ONE_MINUTE)
+		);
 	},
 
-	ignoreUpdateChecking(moduleName) {
+	ignoreUpdateChecking (moduleName) {
 		// Should not check for updates for default modules
 		if (defaultModules.includes(moduleName)) {
 			return true;

modules/default/updatenotification/update_helper.js

@@ -0,0 +1,230 @@
+const Exec = require("child_process").exec;
+const Spawn = require("child_process").spawn;
+const commandExists = require("command-exists");
+const Log = require("logger");
+
+/* class Updater
+ * Allow to self updating 3rd party modules from command defined in config
+ *
+ * [constructor] read value in config:
+ * updates: [ // array of modules update commands
+ *		{
+ *			<module name>: <update command>
+ *		},
+ * 	{
+ * 		...
+ * 	}
+ * ],
+ * updateTimeout: 2 * 60 * 1000, // max update duration
+ * updateAutorestart: false // autoRestart MM when update done ?
+ *
+ * [main command]: parse(<Array of modules>):
+ * parse if module update is needed
+ * --> Apply ONLY one update (first of the module list)
+ * --> auto-restart MagicMirror or wait manual restart by user
+ * return array with modules update state information for `updatenotification` module displayer information
+ * [
+ *		{
+ *			name = <module-name>, // name of the module
+ *			updateCommand = <update command>, // update command (if found)
+ *			inProgress = <boolean>, // an update if in progress for this module
+ *			error = <boolean>, // an error if detected when updating
+ *			updated = <boolean>, // updated successfully
+ *			needRestart = <boolean> // manual restart of MagicMirror is required by user
+ *		},
+ *		{
+ *			...
+ * 		}
+ * ]
+ */
+
+class Updater {
+	constructor (config) {
+		this.updates = config.updates;
+		this.timeout = config.updateTimeout;
+		this.autoRestart = config.updateAutorestart;
+		this.moduleList = {};
+		this.updating = false;
+		this.usePM2 = false;
+		this.PM2 = null;
+		this.version = global.version;
+		this.root_path = global.root_path;
+		Log.info("updatenotification: Updater Class Loaded!");
+	}
+
+	// [main command] parse if module update is needed
+	async parse (modules) {
+		var parser = modules.map(async (module) => {
+			if (this.moduleList[module.module] === undefined) {
+				this.moduleList[module.module] = {};
+				this.moduleList[module.module].name = module.module;
+				this.moduleList[module.module].updateCommand = await this.applyCommand(module.module);
+				this.moduleList[module.module].inProgress = false;
+				this.moduleList[module.module].error = null;
+				this.moduleList[module.module].updated = false;
+				this.moduleList[module.module].needRestart = false;
+			}
+			if (!this.moduleList[module.module].inProgress) {
+				if (!this.updating) {
+					if (!this.moduleList[module.module].updateCommand) {
+						this.updating = false;
+					} else {
+						this.updating = true;
+						this.moduleList[module.module].inProgress = true;
+						Object.assign(this.moduleList[module.module], await this.updateProcess(this.moduleList[module.module]));
+					}
+				}
+			}
+		});
+
+		await Promise.all(parser);
+		let updater = Object.values(this.moduleList);
+		Log.debug("updatenotification Update Result:", updater);
+		return updater;
+	}
+
+	// module updater with his proper command
+	// return object as result
+	//{
+	//	error: <boolean>, // if error detected
+	//	updated: <boolean>, // if updated successfully
+	//	needRestart: <boolean> // if magicmirror restart required
+	//};
+	updateProcess (module) {
+		let Result = {
+			error: false,
+			updated: false,
+			needRestart: false
+		};
+		let Command = null;
+		const Path = `${this.root_path}/modules/`;
+		const modulePath = Path + module.name;
+
+		if (module.updateCommand) {
+			Command = module.updateCommand;
+		} else {
+			Log.warn(`updatenotification: Update of ${module.name} is not supported.`);
+			return Result;
+		}
+		Log.info(`updatenotification: Updating ${module.name}...`);
+
+		return new Promise((resolve) => {
+			Exec(Command, { cwd: modulePath, timeout: this.timeout }, (error, stdout, stderr) => {
+				if (error) {
+					Log.error(`updatenotification: exec error: ${error}`);
+					Result.error = true;
+				} else {
+					Log.info(`updatenotification: Update logs of ${module.name}: ${stdout}`);
+					Result.updated = true;
+					if (this.autoRestart) {
+						Log.info("updatenotification: Update done");
+						setTimeout(() => this.restart(), 3000);
+					} else {
+						Log.info("updatenotification: Update done, don't forget to restart MagicMirror!");
+						Result.needRestart = true;
+					}
+				}
+				resolve(Result);
+			});
+		});
+	}
+
+	// restart rules (pm2 or npm start)
+	restart () {
+		if (this.usePM2) this.pm2Restart();
+		else this.npmRestart();
+	}
+
+	// restart MagicMiror with "pm2"
+	pm2Restart () {
+		Log.info("updatenotification: PM2 will restarting MagicMirror...");
+		Exec(`pm2 restart ${this.PM2}`, (err, std, sde) => {
+			if (err) {
+				Log.error("updatenotification:[PM2] restart Error", err);
+			}
+		});
+	}
+
+	// restart MagicMiror with "npm start"
+	npmRestart () {
+		Log.info("updatenotification: Restarting MagicMirror...");
+		const out = process.stdout;
+		const err = process.stderr;
+		const subprocess = Spawn("npm start", { cwd: this.root_path, shell: true, detached: true, stdio: ["ignore", out, err] });
+		subprocess.unref();
+		process.exit();
+	}
+
+	// Check using pm2
+	check_PM2_Process () {
+		Log.info("updatenotification: Checking PM2 using...");
+		return new Promise((resolve) => {
+			commandExists("pm2")
+				.then(async () => {
+					var PM2_List = await this.PM2_GetList();
+					if (!PM2_List) {
+						Log.error("updatenotification: [PM2] Can't get process List!");
+						this.usePM2 = false;
+						resolve(false);
+						return;
+					}
+					PM2_List.forEach((pm) => {
+						if (pm.pm2_env.version === this.version && pm.pm2_env.status === "online" && pm.pm2_env.PWD.includes(this.root_path)) {
+							this.PM2 = pm.name;
+							this.usePM2 = true;
+							Log.info("updatenotification: You are using pm2 with", this.PM2);
+							resolve(true);
+						}
+					});
+					if (!this.PM2) {
+						Log.info("updatenotification: You are not using pm2");
+						this.usePM2 = false;
+						resolve(false);
+					}
+				})
+				.catch(() => {
+					Log.info("updatenotification: You are not using pm2");
+					this.usePM2 = false;
+					resolve(false);
+				});
+		});
+	}
+
+	// Get the list of pm2 process
+	PM2_GetList () {
+		return new Promise((resolve) => {
+			Exec("pm2 jlist", (err, std, sde) => {
+				if (err) {
+					resolve(null);
+					return;
+				}
+				try {
+					let result = JSON.parse(std);
+					resolve(result);
+				} catch (e) {
+					Log.error("updatenotification: [PM2] can't GetList!");
+					Log.debug("updatenotification: [PM2] GetList is not an JSON format", e);
+					resolve(null);
+				}
+			});
+		});
+	}
+
+	// check if module is MagicMirror
+	isMagicMirror (module) {
+		if (module === "MagicMirror") return true;
+		return false;
+	}
+
+	// search update module command
+	applyCommand (module) {
+		if (this.isMagicMirror(module.module)) return null;
+		let command = null;
+		this.updates.forEach((updater) => {
+			if (updater[module]) command = updater[module];
+		});
+		return command;
+	}
+}
+
+module.exports = Updater;

modules/default/updatenotification/updatenotification.js

@@ -9,13 +9,18 @@ Module.register("updatenotification", {
 		updateInterval: 10 * 60 * 1000, // every 10 minutes
 		refreshInterval: 24 * 60 * 60 * 1000, // one day
 		ignoreModules: [],
-		sendUpdatesNotifications: false
+		sendUpdatesNotifications: false,
+		updates: [],
+		updateTimeout: 2 * 60 * 1000, // max update duration
+		updateAutorestart: false // autoRestart MM when update done ?
 	},
 
 	suspended: false,
 	moduleList: {},
+	needRestart: false,
+	updates: {},
 
-	start() {
+	start () {
 		Log.info(`Starting module: ${this.name}`);
 		this.addFilters();
 		setInterval(() => {
@@ -24,16 +29,16 @@ Module.register("updatenotification", {
 		}, this.config.refreshInterval);
 	},
 
-	suspend() {
+	suspend () {
 		this.suspended = true;
 	},
 
-	resume() {
+	resume () {
 		this.suspended = false;
 		this.updateDom(2);
 	},
 
-	notificationReceived(notification) {
+	notificationReceived (notification) {
 		switch (notification) {
 			case "DOM_OBJECTS_CREATED":
 				this.sendSocketNotification("CONFIG", this.config);
@@ -45,30 +50,33 @@ Module.register("updatenotification", {
 		}
 	},
 
-	socketNotificationReceived(notification, payload) {
+	socketNotificationReceived (notification, payload) {
 		switch (notification) {
-			case "STATUS":
+			case "REPO_STATUS":
 				this.updateUI(payload);
 				break;
 			case "UPDATES":
 				this.sendNotification("UPDATES", payload);
 				break;
+			case "UPDATE_STATUS":
+				this.updatesNotifier(payload);
+				break;
 		}
 	},
 
-	getStyles() {
+	getStyles () {
 		return [`${this.name}.css`];
 	},
 
-	getTemplate() {
+	getTemplate () {
 		return `${this.name}.njk`;
 	},
 
-	getTemplateData() {
-		return { moduleList: this.moduleList, suspended: this.suspended };
+	getTemplateData () {
+		return { moduleList: this.moduleList, updatesList: this.updates, suspended: this.suspended, needRestart: this.needRestart };
 	},
 
-	updateUI(payload) {
+	updateUI (payload) {
 		if (payload && payload.behind > 0) {
 			// if we haven't seen info for this module
 			if (this.moduleList[payload.module] === undefined) {
@@ -86,7 +94,7 @@ Module.register("updatenotification", {
 		}
 	},
 
-	addFilters() {
+	addFilters () {
 		this.nunjucksEnvironment().addFilter("diffLink", (text, status) => {
 			if (status.module !== "MagicMirror") {
 				return text;
@@ -96,5 +104,29 @@ Module.register("updatenotification", {
 			const remoteRef = status.tracking.replace(/.*\//, "");
 			return `<a href="https://github.com/MichMich/MagicMirror/compare/${localRef}...${remoteRef}" class="xsmall dimmed difflink" target="_blank">${text}</a>`;
 		});
+	},
+
+	updatesNotifier (payload, done = true) {
+		if (this.updates[payload.name] === undefined) {
+			this.updates[payload.name] = {
+				name: payload.name,
+				done: done
+			};
+
+			if (payload.error) {
+				this.sendSocketNotification("UPDATE_ERROR", payload.name);
+				this.updates[payload.name].done = false;
+			} else {
+				if (payload.updated) {
+					delete this.moduleList[payload.name];
+					this.updates[payload.name].done = true;
+				}
+				if (payload.needRestart) {
+					this.needRestart = true;
+				}
+			}
+
+			this.updateDom(2);
+		}
 	}
 });

modules/default/updatenotification/updatenotification.njk

@@ -1,15 +1,41 @@
 {% if not suspended %}
-  {% for name, status in moduleList %}
-    <div class="small bright">
-      <i class="fas fa-exclamation-circle"></i>
-      <span>
-        {% set mainTextLabel = "UPDATE_NOTIFICATION" if name === "MagicMirror" else "UPDATE_NOTIFICATION_MODULE" %}
-        {{ mainTextLabel | translate({MODULE_NAME: name}) }}
-      </span>
-    </div>
-    <div class="xsmall dimmed">
-      {% set subTextLabel = "UPDATE_INFO_SINGLE" if status.behind === 1 else "UPDATE_INFO_MULTIPLE" %}
-      {{ subTextLabel | translate({COMMIT_COUNT: status.behind, BRANCH_NAME: status.current}) | diffLink(status) | safe }}
-    </div>
-  {% endfor %}
+    {% if needRestart %}
+        <div class="small bright">
+            <i class="fas fa-rotate"></i>
+            <span>
+                {% set restartTextLabel = "UPDATE_NOTIFICATION_NEED-RESTART" %}
+                {{ restartTextLabel | translate() | safe }}
+            </span>
+        </div>
+    {% endif %}
+    {% for name, status in moduleList %}
+        <div class="small bright">
+            <i class="fas fa-exclamation-circle"></i>
+            <span>
+                {% set mainTextLabel = "UPDATE_NOTIFICATION" if name === "MagicMirror" else "UPDATE_NOTIFICATION_MODULE" %}
+                {{ mainTextLabel | translate({MODULE_NAME: name}) }}
+            </span>
+        </div>
+        <div class="xsmall dimmed">
+            {% set subTextLabel = "UPDATE_INFO_SINGLE" if status.behind === 1 else "UPDATE_INFO_MULTIPLE" %}
+            {{ subTextLabel | translate({COMMIT_COUNT: status.behind, BRANCH_NAME: status.current}) | diffLink(status) | safe }}
+        </div>
+    {% endfor %}
+    {% for name, status in updatesList %}
+        <div class="small bright">
+            {% if status.done %}
+                <i class="fas fa-check" style="color: lightgreen;"></i>
+                <span>
+                   {% set updateTextLabel = "UPDATE_NOTIFICATION_DONE" %}
+                   {{ updateTextLabel | translate({MODULE_NAME: name}) | safe }}
+                </span>
+              {% else %}
+                <i class="fas fa-xmark" style="color: red;"></i>
+                <span>
+                    {% set updateTextLabel = "UPDATE_NOTIFICATION_ERROR" %}
+                    {{ updateTextLabel | translate({MODULE_NAME: name}) | safe }}
+                </span>
+            {% endif %}
+        </div>
+    {% endfor %}
 {% endif %}

modules/default/utils.js

@@ -7,7 +7,7 @@
  * @param {Array.<string>} expectedResponseHeaders the expected HTTP headers to receive
  * @returns {Promise} resolved when the fetch is done. The response headers is placed in a headers-property (provided the response does not already contain a headers-property).
  */
-async function performWebRequest(url, type = "json", useCorsProxy = false, requestHeaders = undefined, expectedResponseHeaders = undefined) {
+async function performWebRequest (url, type = "json", useCorsProxy = false, requestHeaders = undefined, expectedResponseHeaders = undefined) {
 	const request = {};
 	let requestUrl;
 	if (useCorsProxy) {
@@ -165,8 +165,7 @@ const formatTime = (config, time) => {
 	return date.format("HH:mm");
 };
 
-if (typeof module !== "undefined")
-	module.exports = {
-		performWebRequest,
-		formatTime
-	};
+if (typeof module !== "undefined") module.exports = {
+	performWebRequest,
+	formatTime
+};

modules/default/weather/current.njk

@@ -7,7 +7,8 @@
                 {% if config.showWindDirection %}
                     <sup>
                         {% if config.showWindDirectionAsArrow %}
-                            <i class="fas fa-long-arrow-alt-down" style="transform:rotate({{ current.windFromDirection }}deg);"></i>
+                            <i class="fas fa-long-arrow-alt-down"
+                               style="transform:rotate({{ current.windFromDirection }}deg)"></i>
                         {% else %}
                             {{ current.cardinalWindDirection() | translate }}
                         {% endif %}
@@ -29,34 +30,28 @@
                 </span>
             {% endif %}
             {% if config.showUVIndex %}
-                    <td class="align-right bright uv-index">
+                <td class="align-right bright uv-index">
                     <div class="wi dimmed wi-hot"></div>
-                        {{ current.uv_index }}
-                    </td>
+                    {{ current.uv_index }}
+                </td>
             {% endif %}
         </div>
     {% endif %}
     <div class="large light">
-        <span class="wi weathericon wi-{{current.weatherType}}"></span>
-        <span class="bright">
-            {{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}
-        </span>
+        <span class="wi weathericon wi-{{ current.weatherType }}"></span>
+        <span class="bright">{{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
     </div>
     <div class="normal light indoor">
         {% if config.showIndoorTemperature and indoor.temperature %}
             <div>
                 <span class="fas fa-home"></span>
-                <span class="bright">
-                    {{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}
-                </span>
+                <span class="bright">{{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
             </div>
         {% endif %}
         {% if config.showIndoorHumidity and indoor.humidity %}
             <div>
                 <span class="fas fa-tint"></span>
-                <span class="bright">
-                    {{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}
-                </span>
+                <span class="bright">{{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}</span>
             </div>
         {% endif %}
     </div>
@@ -65,14 +60,16 @@
             {% if config.showFeelsLike %}
                 <span class="dimmed">
                     {{ "FEELS" | translate({DEGREE: current.feelsLike() | roundValue | unit("temperature") | decimalSymbol }) }}
-                </span><br/>
+                </span>
+                <br />
             {% endif %}
             {% if config.showPrecipitationAmount and current.precipitationAmount %}
                 <span class="dimmed">
                     <span class="precipitationLeadText">{{ "PRECIP_AMOUNT" | translate }}</span> {{ current.precipitationAmount | unit("precip", current.precipitationUnits) }}
-                </span><br/>
+                </span>
+                <br />
             {% endif %}
-            {% if config.showPrecipitationProbability and current.precipitationProbability  %}
+            {% if config.showPrecipitationProbability and current.precipitationProbability %}
                 <span class="dimmed">
                     <span class="precipitationLeadText">{{ "PRECIP_POP" | translate }}</span> {{ current.precipitationProbability }}%
                 </span>
@@ -80,10 +77,7 @@
         </div>
     {% endif %}
 {% else %}
-    <div class="dimmed light small">
-        {{ "LOADING" | translate }}
-    </div>
+    <div class="dimmed light small">{{ "LOADING" | translate }}</div>
 {% endif %}
-
 <!-- Uncomment the line below to see the contents of the `current` object. -->
 <!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{current | dump}}</div> -->

modules/default/weather/forecast.njk

@@ -7,15 +7,18 @@
         {% endif %}
         {% set forecast = forecast.slice(0, numSteps) %}
         {% for f in forecast %}
-            <tr {% if config.colored %}class="colored"{% endif %} {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
+            <tr {% if config.colored %}class="colored"{% endif %}
+                {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
                 {% if (currentStep == 0) and config.ignoreToday == false and config.absoluteDates == false %}
                     <td class="day">{{ "TODAY" | translate }}</td>
                 {% elif (currentStep == 1) and config.ignoreToday == false and config.absoluteDates == false %}
                     <td class="day">{{ "TOMORROW" | translate }}</td>
                 {% else %}
-                    <td class="day">{{ f.date.format('ddd') }}</td>
+                    <td class="day">{{ f.date.format("ddd") }}</td>
                 {% endif %}
-                <td class="bright weather-icon"><span class="wi weathericon wi-{{ f.weatherType }}"></span></td>
+                <td class="bright weather-icon">
+                    <span class="wi weathericon wi-{{ f.weatherType }}"></span>
+                </td>
                 <td class="align-right bright max-temp">
                     {{ f.maxTemperature | roundValue | unit("temperature") | decimalSymbol }}
                 </td>
@@ -29,7 +32,7 @@
                 {% endif %}
                 {% if config.showPrecipitationProbability %}
                     <td class="align-right bright precipitation-prob">
-                        {{ f.precipitationProbability | unit("precip", "%") }}
+                        {{ f.precipitationProbability | unit('precip', '%') }}
                     </td>
                 {% endif %}
                 {% if config.showUVIndex %}
@@ -43,10 +46,7 @@
         {% endfor %}
     </table>
 {% else %}
-    <div class="dimmed light small">
-        {{ "LOADING" | translate }}
-    </div>
+    <div class="dimmed light small">{{ "LOADING" | translate }}</div>
 {% endif %}
-
 <!-- Uncomment the line below to see the contents of the `forecast` object. -->
 <!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{forecast | dump}}</div> -->

modules/default/weather/hourly.njk

@@ -4,9 +4,12 @@
     <table class="{{ config.tableClass }}">
         {% set hours = hourly.slice(0, numSteps) %}
         {% for hour in hours %}
-            <tr {% if config.colored %}class="colored"{% endif %} {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
+            <tr {% if config.colored %}class="colored"{% endif %}
+                {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
                 <td class="day">{{ hour.date | formatTime }}</td>
-                <td class="bright weather-icon"><span class="wi weathericon wi-{{ hour.weatherType }}"></span></td>
+                <td class="bright weather-icon">
+                    <span class="wi weathericon wi-{{ hour.weatherType }}"></span>
+                </td>
                 <td class="align-right bright">
                     {{ hour.temperature | roundValue | unit("temperature") }}
                 </td>
@@ -25,7 +28,7 @@
                 {% endif %}
                 {% if config.showPrecipitationProbability %}
                     <td class="align-right bright precipitation-prob">
-                        {{ hour.precipitationProbability | unit("precip", "%") }}
+                        {{ hour.precipitationProbability | unit('precip', '%') }}
                     </td>
                 {% endif %}
             </tr>
@@ -33,10 +36,7 @@
         {% endfor %}
     </table>
 {% else %}
-    <div class="dimmed light small">
-        {{ "LOADING" | translate }}
-    </div>
+    <div class="dimmed light small">{{ "LOADING" | translate }}</div>
 {% endif %}
-
 <!-- Uncomment the line below to see the contents of the `hourly` object. -->
 <!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{hourly | dump}}</div> -->

modules/default/weather/providers/envcanada.js

@@ -49,7 +49,7 @@ WeatherProvider.register("envcanada", {
 	// Set config values (equates to weather module config values). Also set values pertaining to caching of
 	// Today's temperature forecast (for use in the Forecast functions below)
 	//
-	setConfig: function (config) {
+	setConfig (config) {
 		this.config = config;
 
 		this.todayTempCacheMin = 0;
@@ -61,7 +61,7 @@ WeatherProvider.register("envcanada", {
 	//
 	// Called when the weather provider is started
 	//
-	start: function () {
+	start () {
 		Log.info(`Weather provider: ${this.providerName} started.`);
 		this.setFetchedLocation(this.config.location);
 	},
@@ -69,7 +69,7 @@ WeatherProvider.register("envcanada", {
 	//
 	// Override the fetchCurrentWeather method to query EC and construct a Current weather object
 	//
-	fetchCurrentWeather() {
+	fetchCurrentWeather () {
 		this.fetchData(this.getUrl(), "xml")
 			.then((data) => {
 				if (!data) {
@@ -89,7 +89,7 @@ WeatherProvider.register("envcanada", {
 	//
 	// Override the fetchWeatherForecast method to query EC and construct Forecast weather objects
 	//
-	fetchWeatherForecast() {
+	fetchWeatherForecast () {
 		this.fetchData(this.getUrl(), "xml")
 			.then((data) => {
 				if (!data) {
@@ -109,7 +109,7 @@ WeatherProvider.register("envcanada", {
 	//
 	// Override the fetchWeatherHourly method to query EC and construct Forecast weather objects
 	//
-	fetchWeatherHourly() {
+	fetchWeatherHourly () {
 		this.fetchData(this.getUrl(), "xml")
 			.then((data) => {
 				if (!data) {
@@ -137,7 +137,7 @@ WeatherProvider.register("envcanada", {
 	// URL defaults to the English version simply because there is no language dependency in the data
 	// being accessed. This is only pertinent when using the EC data elements that contain a textual forecast.
 	//
-	getUrl() {
+	getUrl () {
 		return `https://dd.weather.gc.ca/citypage_weather/xml/${this.config.provCode}/${this.config.siteCode}_e.xml`;
 	},
 
@@ -145,7 +145,7 @@ WeatherProvider.register("envcanada", {
 	// Generate a WeatherObject based on current EC weather conditions
 	//
 
-	generateWeatherObjectFromCurrentWeather(ECdoc) {
+	generateWeatherObjectFromCurrentWeather (ECdoc) {
 		const currentWeather = new WeatherObject();
 
 		// There are instances where EC will update weather data and current temperature will not be
@@ -216,7 +216,7 @@ WeatherProvider.register("envcanada", {
 	// Generate an array of WeatherObjects based on EC weather forecast
 	//
 
-	generateWeatherObjectsFromForecast(ECdoc) {
+	generateWeatherObjectsFromForecast (ECdoc) {
 		// Declare an array to hold each day's forecast object
 
 		const days = [];
@@ -360,7 +360,7 @@ WeatherProvider.register("envcanada", {
 	// Generate an array of WeatherObjects based on EC hourly weather forecast
 	//
 
-	generateWeatherObjectsFromHourly(ECdoc) {
+	generateWeatherObjectsFromHourly (ECdoc) {
 		// Declare an array to hold each hour's forecast object
 
 		const hours = [];
@@ -416,7 +416,7 @@ WeatherProvider.register("envcanada", {
 	// the next Forecast element should be considered - i.e. look at Today *and* Tonight vs.Tonight-only
 	//
 
-	setMinMaxTemps(weather, foreGroup, today, fullDay, currentTemp) {
+	setMinMaxTemps (weather, foreGroup, today, fullDay, currentTemp) {
 		const todayTemp = foreGroup[today].querySelector("temperatures temperature").textContent;
 
 		const todayClass = foreGroup[today].querySelector("temperatures temperature").getAttribute("class");
@@ -498,7 +498,7 @@ WeatherProvider.register("envcanada", {
 	// the nightime forecast after a certain point in that specific scenario.
 	//
 
-	setPrecipitation(weather, foreGroup, today) {
+	setPrecipitation (weather, foreGroup, today) {
 		if (foreGroup[today].querySelector("precipitation accumulation")) {
 			weather.precipitationAmount = foreGroup[today].querySelector("precipitation accumulation amount").textContent * 1.0;
 			weather.precipitationUnits = foreGroup[today].querySelector("precipitation accumulation amount").getAttribute("units");
@@ -514,7 +514,7 @@ WeatherProvider.register("envcanada", {
 	//
 	// Convert the icons to a more usable name.
 	//
-	convertWeatherType(weatherType) {
+	convertWeatherType (weatherType) {
 		const weatherTypes = {
 			"00": "day-sunny",
 			"01": "day-sunny",

modules/default/weather/providers/openmeteo.js

@@ -140,11 +140,11 @@ WeatherProvider.register("openmeteo", {
 		"et0_fao_evapotranspiration"
 	],
 
-	fetchedLocation: function () {
+	fetchedLocation () {
 		return this.fetchedLocationName || "";
 	},
 
-	fetchCurrentWeather() {
+	fetchCurrentWeather () {
 		this.fetchData(this.getUrl())
 			.then((data) => this.parseWeatherApiResponse(data))
 			.then((parsedData) => {
@@ -162,7 +162,7 @@ WeatherProvider.register("openmeteo", {
 			.finally(() => this.updateAvailable());
 	},
 
-	fetchWeatherForecast() {
+	fetchWeatherForecast () {
 		this.fetchData(this.getUrl())
 			.then((data) => this.parseWeatherApiResponse(data))
 			.then((parsedData) => {
@@ -180,7 +180,7 @@ WeatherProvider.register("openmeteo", {
 			.finally(() => this.updateAvailable());
 	},
 
-	fetchWeatherHourly() {
+	fetchWeatherHourly () {
 		this.fetchData(this.getUrl())
 			.then((data) => this.parseWeatherApiResponse(data))
 			.then((parsedData) => {
@@ -202,7 +202,7 @@ WeatherProvider.register("openmeteo", {
 	 * Overrides method for setting config to check if endpoint is correct for hourly
 	 * @param {object} config The configuration object
 	 */
-	setConfig(config) {
+	setConfig (config) {
 		this.config = {
 			lang: config.lang ?? "en",
 			...this.defaults,
@@ -226,7 +226,7 @@ WeatherProvider.register("openmeteo", {
 	},
 
 	// Generate valid query params to perform the request
-	getQueryParameters() {
+	getQueryParameters () {
 		let params = {
 			latitude: this.config.lat,
 			longitude: this.config.lon,
@@ -278,25 +278,23 @@ WeatherProvider.register("openmeteo", {
 	},
 
 	// Create a URL from the config and base URL.
-	getUrl() {
+	getUrl () {
 		return `${this.config.apiBase}/forecast?${this.getQueryParameters()}`;
 	},
 
 	// Transpose hourly and daily data matrices
-	transposeDataMatrix(data) {
-		return data.time.map((_, index) =>
-			Object.keys(data).reduce((row, key) => {
-				return {
-					...row,
-					// Parse time values as momentjs instances
-					[key]: ["time", "sunrise", "sunset"].includes(key) ? moment.unix(data[key][index]) : data[key][index]
-				};
-			}, {})
-		);
+	transposeDataMatrix (data) {
+		return data.time.map((_, index) => Object.keys(data).reduce((row, key) => {
+			return {
+				...row,
+				// Parse time values as momentjs instances
+				[key]: ["time", "sunrise", "sunset"].includes(key) ? moment.unix(data[key][index]) : data[key][index]
+			};
+		}, {}));
 	},
 
 	// Sanitize and validate API response
-	parseWeatherApiResponse(data) {
+	parseWeatherApiResponse (data) {
 		const validByType = {
 			current: data.current_weather && data.current_weather.time,
 			hourly: data.hourly && data.hourly.time && Array.isArray(data.hourly.time) && data.hourly.time.length > 0,
@@ -334,7 +332,7 @@ WeatherProvider.register("openmeteo", {
 	},
 
 	// Reverse geocoding from latitude and longitude provided
-	fetchLocation() {
+	fetchLocation () {
 		this.fetchData(`${GEOCODE_BASE}?latitude=${this.config.lat}&longitude=${this.config.lon}&localityLanguage=${this.config.lang}`)
 			.then((data) => {
 				if (!data || !data.city) {
@@ -349,7 +347,8 @@ WeatherProvider.register("openmeteo", {
 	},
 
 	// Implement WeatherDay generator.
-	generateWeatherDayFromCurrentWeather(weather) {
+	generateWeatherDayFromCurrentWeather (weather) {
+
 		/**
 		 * Since some units comes from API response "splitted" into daily, hourly and current_weather
 		 * every time you request it, you have to ensure to get the data from the right place every time.
@@ -394,10 +393,10 @@ WeatherProvider.register("openmeteo", {
 	},
 
 	// Implement WeatherForecast generator.
-	generateWeatherObjectsFromForecast(weathers) {
+	generateWeatherObjectsFromForecast (weathers) {
 		const days = [];
 
-		weathers.daily.forEach((weather, i) => {
+		weathers.daily.forEach((weather) => {
 			const currentWeather = new WeatherObject();
 
 			currentWeather.date = weather.time;
@@ -422,7 +421,7 @@ WeatherProvider.register("openmeteo", {
 	},
 
 	// Implement WeatherHourly generator.
-	generateWeatherObjectsFromHourly(weathers) {
+	generateWeatherObjectsFromHourly (weathers) {
 		const hours = [];
 		const now = moment();
 
@@ -457,7 +456,7 @@ WeatherProvider.register("openmeteo", {
 	},
 
 	// Map icons from Dark Sky to our icons.
-	convertWeatherType(weathercode, isDayTime) {
+	convertWeatherType (weathercode, isDayTime) {
 		const weatherConditions = {
 			0: "clear",
 			1: "mainly-clear",
@@ -542,7 +541,7 @@ WeatherProvider.register("openmeteo", {
 	},
 
 	// Define required scripts.
-	getScripts: function () {
+	getScripts () {
 		return ["moment.js"];
 	}
 });

modules/default/weather/providers/openweathermap.js

@@ -27,7 +27,7 @@ WeatherProvider.register("openweathermap", {
 	},
 
 	// Overwrite the fetchCurrentWeather method.
-	fetchCurrentWeather() {
+	fetchCurrentWeather () {
 		this.fetchData(this.getUrl())
 			.then((data) => {
 				let currentWeather;
@@ -46,7 +46,7 @@ WeatherProvider.register("openweathermap", {
 	},
 
 	// Overwrite the fetchWeatherForecast method.
-	fetchWeatherForecast() {
+	fetchWeatherForecast () {
 		this.fetchData(this.getUrl())
 			.then((data) => {
 				let forecast;
@@ -68,7 +68,7 @@ WeatherProvider.register("openweathermap", {
 	},
 
 	// Overwrite the fetchWeatherHourly method.
-	fetchWeatherHourly() {
+	fetchWeatherHourly () {
 		this.fetchData(this.getUrl())
 			.then((data) => {
 				if (!data) {
@@ -92,7 +92,7 @@ WeatherProvider.register("openweathermap", {
 	 * Overrides method for setting config to check if endpoint is correct for hourly
 	 * @param {object} config The configuration object
 	 */
-	setConfig(config) {
+	setConfig (config) {
 		this.config = config;
 		if (!this.config.weatherEndpoint) {
 			switch (this.config.type) {
@@ -116,14 +116,14 @@ WeatherProvider.register("openweathermap", {
 	/*
 	 * Gets the complete url for the request
 	 */
-	getUrl() {
+	getUrl () {
 		return this.config.apiBase + this.config.apiVersion + this.config.weatherEndpoint + this.getParams();
 	},
 
 	/*
 	 * Generate a WeatherObject based on currentWeatherInformation
 	 */
-	generateWeatherObjectFromCurrentWeather(currentWeatherData) {
+	generateWeatherObjectFromCurrentWeather (currentWeatherData) {
 		const currentWeather = new WeatherObject();
 
 		currentWeather.date = moment.unix(currentWeatherData.dt);
@@ -142,7 +142,7 @@ WeatherProvider.register("openweathermap", {
 	/*
 	 * Generate WeatherObjects based on forecast information
 	 */
-	generateWeatherObjectsFromForecast(forecasts) {
+	generateWeatherObjectsFromForecast (forecasts) {
 		if (this.config.weatherEndpoint === "/forecast") {
 			return this.generateForecastHourly(forecasts);
 		} else if (this.config.weatherEndpoint === "/forecast/daily") {
@@ -155,7 +155,7 @@ WeatherProvider.register("openweathermap", {
 	/*
 	 * Generate WeatherObjects based on One Call forecast information
 	 */
-	generateWeatherObjectsFromOnecall(data) {
+	generateWeatherObjectsFromOnecall (data) {
 		if (this.config.weatherEndpoint === "/onecall") {
 			return this.fetchOnecall(data);
 		}
@@ -167,7 +167,7 @@ WeatherProvider.register("openweathermap", {
 	 * Generate forecast information for 3-hourly forecast (available for free
 	 * subscription).
 	 */
-	generateForecastHourly(forecasts) {
+	generateForecastHourly (forecasts) {
 		// initial variable declaration
 		const days = [];
 		// variables for temperature range and rain
@@ -241,7 +241,7 @@ WeatherProvider.register("openweathermap", {
 	 * Generate forecast information for daily forecast (available for paid
 	 * subscription or old apiKey).
 	 */
-	generateForecastDaily(forecasts) {
+	generateForecastDaily (forecasts) {
 		// initial variable declaration
 		const days = [];
 
@@ -281,7 +281,7 @@ WeatherProvider.register("openweathermap", {
 	 * Factors in timezone offsets.
 	 * Minutely forecasts are excluded for the moment, see getParams().
 	 */
-	fetchOnecall(data) {
+	fetchOnecall (data) {
 		let precip = false;
 
 		// get current weather, if requested
@@ -295,6 +295,7 @@ WeatherProvider.register("openweathermap", {
 			current.temperature = data.current.temp;
 			current.weatherType = this.convertWeatherType(data.current.weather[0].icon);
 			current.humidity = data.current.humidity;
+			current.uv_index = data.current.uvi;
 			if (data.current.hasOwnProperty("rain") && !isNaN(data.current["rain"]["1h"])) {
 				current.rain = data.current["rain"]["1h"];
 				precip = true;
@@ -323,6 +324,7 @@ WeatherProvider.register("openweathermap", {
 				weather.windFromDirection = hour.wind_deg;
 				weather.weatherType = this.convertWeatherType(hour.weather[0].icon);
 				weather.precipitationProbability = hour.pop ? hour.pop * 100 : undefined;
+				weather.uv_index = hour.uvi;
 				precip = false;
 				if (hour.hasOwnProperty("rain") && !isNaN(hour.rain["1h"])) {
 					weather.rain = hour.rain["1h"];
@@ -355,6 +357,7 @@ WeatherProvider.register("openweathermap", {
 				weather.windFromDirection = day.wind_deg;
 				weather.weatherType = this.convertWeatherType(day.weather[0].icon);
 				weather.precipitationProbability = day.pop ? day.pop * 100 : undefined;
+				weather.uv_index = day.uvi;
 				precip = false;
 				if (!isNaN(day.rain)) {
 					weather.rain = day.rain;
@@ -379,7 +382,7 @@ WeatherProvider.register("openweathermap", {
 	/*
 	 * Convert the OpenWeatherMap icons to a more usable name.
 	 */
-	convertWeatherType(weatherType) {
+	convertWeatherType (weatherType) {
 		const weatherTypes = {
 			"01d": "day-sunny",
 			"02d": "day-cloudy",
@@ -409,7 +412,7 @@ WeatherProvider.register("openweathermap", {
 	 *
 	 * return String - URL params.
 	 */
-	getParams() {
+	getParams () {
 		let params = "?";
 		if (this.config.weatherEndpoint === "/onecall") {
 			params += `lat=${this.config.lat}`;

modules/default/weather/providers/overrideWrapper.js

@@ -0,0 +1,112 @@
+/* global Class, WeatherObject */
+
+/*
+ * Wrapper class to enable overrides of currentOverrideWeatherObject.
+ *
+ * Sits between the weather.js module and the provider implementations to allow us to
+ * combine the incoming data from the CURRENT_WEATHER_OVERRIDE notification with the
+ * existing data received from the current api provider. If no notifications have
+ * been received then the api provider's data is used.
+ *
+ * The intent is to allow partial WeatherObjects from local sensors to augment or
+ * replace the WeatherObjects from the api providers.
+ *
+ * This class shares the signature of WeatherProvider, and passes any methods not
+ * concerning the current weather directly to the api provider implementation that
+ * is currently in use.
+ */
+const OverrideWrapper = Class.extend({
+	baseProvider: null,
+	providerName: "localWrapper",
+	notificationWeatherObject: null,
+	currentOverrideWeatherObject: null,
+
+	init (baseProvider) {
+		this.baseProvider = baseProvider;
+
+		// Binding the scope of current weather functions so any fetchData calls with
+		// setCurrentWeather nested in them call this classes implementation instead
+		// of the provider's default
+		this.baseProvider.setCurrentWeather = this.setCurrentWeather.bind(this);
+		this.baseProvider.currentWeather = this.currentWeather.bind(this);
+	},
+
+	/* Unchanged Api Provider Methods */
+
+	setConfig (config) {
+		this.baseProvider.setConfig(config);
+	},
+	start () {
+		this.baseProvider.start();
+	},
+	fetchCurrentWeather () {
+		this.baseProvider.fetchCurrentWeather();
+	},
+	fetchWeatherForecast () {
+		this.baseProvider.fetchWeatherForecast();
+	},
+	fetchWeatherHourly () {
+		this.baseProvider.fetchEatherHourly();
+	},
+	weatherForecast () {
+		this.baseProvider.weatherForecast();
+	},
+	weatherHourly () {
+		this.baseProvider.weatherHourly();
+	},
+	fetchedLocation () {
+		this.baseProvider.fetchedLocation();
+	},
+	setWeatherForecast (weatherForecastArray) {
+		this.baseProvider.setWeatherForecast(weatherForecastArray);
+	},
+	setWeatherHourly (weatherHourlyArray) {
+		this.baseProvider.setWeatherHourly(weatherHourlyArray);
+	},
+	setFetchedLocation (name) {
+		this.baseProvider.setFetchedLocation(name);
+	},
+	updateAvailable () {
+		this.baseProvider.updateAvailable();
+	},
+	async fetchData (url, type = "json", requestHeaders = undefined, expectedResponseHeaders = undefined) {
+		this.baseProvider.fetchData(url, type, requestHeaders, expectedResponseHeaders);
+	},
+
+	/* Override Methods */
+
+	/**
+	 * Override to return this scope's
+	 * @returns {WeatherObject} The current weather object. May or may not contain overridden data.
+	 */
+	currentWeather () {
+		return this.currentOverrideWeatherObject;
+	},
+
+	/**
+	 * Override to combine the overrideWeatherObejct provided in the
+	 * notificationReceived method with the currentOverrideWeatherObject provided by the
+	 * api provider fetchData implementation.
+	 * @param {WeatherObject} currentWeatherObject - the api provider weather object
+	 */
+	setCurrentWeather (currentWeatherObject) {
+		this.currentOverrideWeatherObject = Object.assign(currentWeatherObject, this.notificationWeatherObject);
+	},
+
+	/**
+	 * Updates the overrideWeatherObject, calls setCurrentWeather to combine it with
+	 * the existing current weather object provided by the base provider, and signals
+	 * that an update is ready.
+	 * @param {WeatherObject} payload - the weather object received from the CURRENT_WEATHER_OVERRIDE
+	 *                                  notification. Represents information to augment the
+	 *                                  existing currentOverrideWeatherObject with.
+	 */
+	notificationReceived (payload) {
+		this.notificationWeatherObject = payload;
+
+		// setCurrentWeather combines the newly received notification weather with
+		// the existing weather object we return for current weather
+		this.setCurrentWeather(this.currentOverrideWeatherObject);
+		this.updateAvailable();
+	}
+});

modules/default/weather/providers/pirateweather.js

@@ -25,7 +25,7 @@ WeatherProvider.register("pirateweather", {
 		lon: 0
 	},
 
-	fetchCurrentWeather() {
+	fetchCurrentWeather () {
 		this.fetchData(this.getUrl())
 			.then((data) => {
 				if (!data || !data.currently || typeof data.currently.temperature === "undefined") {
@@ -42,7 +42,7 @@ WeatherProvider.register("pirateweather", {
 			.finally(() => this.updateAvailable());
 	},
 
-	fetchWeatherForecast() {
+	fetchWeatherForecast () {
 		this.fetchData(this.getUrl())
 			.then((data) => {
 				if (!data || !data.daily || !data.daily.data.length) {
@@ -60,12 +60,12 @@ WeatherProvider.register("pirateweather", {
 	},
 
 	// Create a URL from the config and base URL.
-	getUrl() {
+	getUrl () {
 		return `${this.config.apiBase}${this.config.weatherEndpoint}/${this.config.apiKey}/${this.config.lat},${this.config.lon}?units=si&lang=${this.config.lang}`;
 	},
 
 	// Implement WeatherDay generator.
-	generateWeatherDayFromCurrentWeather(currentWeatherData) {
+	generateWeatherDayFromCurrentWeather (currentWeatherData) {
 		const currentWeather = new WeatherObject();
 
 		currentWeather.date = moment();
@@ -80,7 +80,7 @@ WeatherProvider.register("pirateweather", {
 		return currentWeather;
 	},
 
-	generateWeatherObjectsFromForecast(forecasts) {
+	generateWeatherObjectsFromForecast (forecasts) {
 		const days = [];
 
 		for (const forecast of forecasts) {
@@ -114,7 +114,7 @@ WeatherProvider.register("pirateweather", {
 	},
 
 	// Map icons from Pirate Weather to our icons.
-	convertWeatherType(weatherType) {
+	convertWeatherType (weatherType) {
 		const weatherTypes = {
 			"clear-day": "day-sunny",
 			"clear-night": "night-clear",

modules/default/weather/providers/smhi.js

@@ -24,7 +24,7 @@ WeatherProvider.register("smhi", {
 	/**
 	 * Implements method in interface for fetching current weather.
 	 */
-	fetchCurrentWeather() {
+	fetchCurrentWeather () {
 		this.fetchData(this.getURL())
 			.then((data) => {
 				const closest = this.getClosestToCurrentTime(data.timeSeries);
@@ -40,7 +40,7 @@ WeatherProvider.register("smhi", {
 	/**
 	 * Implements method in interface for fetching a multi-day forecast.
 	 */
-	fetchWeatherForecast() {
+	fetchWeatherForecast () {
 		this.fetchData(this.getURL())
 			.then((data) => {
 				const coordinates = this.resolveCoordinates(data);
@@ -55,7 +55,7 @@ WeatherProvider.register("smhi", {
 	/**
 	 * Implements method in interface for fetching hourly forecasts.
 	 */
-	fetchWeatherHourly() {
+	fetchWeatherHourly () {
 		this.fetchData(this.getURL())
 			.then((data) => {
 				const coordinates = this.resolveCoordinates(data);
@@ -71,7 +71,7 @@ WeatherProvider.register("smhi", {
 	 * Overrides method for setting config with checks for the precipitationValue being unset or invalid
 	 * @param {object} config The configuration object
 	 */
-	setConfig(config) {
+	setConfig (config) {
 		this.config = config;
 		if (!config.precipitationValue || ["pmin", "pmean", "pmedian", "pmax"].indexOf(config.precipitationValue) === -1) {
 			Log.log(`invalid or not set: ${config.precipitationValue}`);
@@ -84,7 +84,7 @@ WeatherProvider.register("smhi", {
 	 * @param {object[]} times Array of time objects
 	 * @returns {object} The weatherdata closest to the current time
 	 */
-	getClosestToCurrentTime(times) {
+	getClosestToCurrentTime (times) {
 		let now = moment();
 		let minDiff = undefined;
 		for (const time of times) {
@@ -100,7 +100,7 @@ WeatherProvider.register("smhi", {
 	 * Get the forecast url for the configured coordinates
 	 * @returns {string} the url for the specified coordinates
 	 */
-	getURL() {
+	getURL () {
 		const formatter = new Intl.NumberFormat("en-US", {
 			minimumFractionDigits: 6,
 			maximumFractionDigits: 6
@@ -115,7 +115,7 @@ WeatherProvider.register("smhi", {
 	 * @param {object} weatherData Weatherdata to use for the calculation
 	 * @returns {number} The apparent temperature
 	 */
-	calculateApparentTemperature(weatherData) {
+	calculateApparentTemperature (weatherData) {
 		const Ta = this.paramValue(weatherData, "t");
 		const rh = this.paramValue(weatherData, "r");
 		const ws = this.paramValue(weatherData, "ws");
@@ -132,7 +132,7 @@ WeatherProvider.register("smhi", {
 	 * @param {object} coordinates Coordinates of the locations of the weather
 	 * @returns {WeatherObject} The converted weatherdata at the specified location
 	 */
-	convertWeatherDataToObject(weatherData, coordinates) {
+	convertWeatherDataToObject (weatherData, coordinates) {
 		let currentWeather = new WeatherObject();
 
 		currentWeather.date = moment(weatherData.validTime);
@@ -178,7 +178,7 @@ WeatherProvider.register("smhi", {
 	 * @param {string} groupBy The interval to use for grouping the data (day, hour)
 	 * @returns {WeatherObject[]} Array of weatherobjects
 	 */
-	convertWeatherDataGroupedBy(allWeatherData, coordinates, groupBy = "day") {
+	convertWeatherDataGroupedBy (allWeatherData, coordinates, groupBy = "day") {
 		let currentWeather;
 		let result = [];
 
@@ -227,7 +227,7 @@ WeatherProvider.register("smhi", {
 	 * @param {object} data Response data from the weather service
 	 * @returns {{lon, lat}} the lat/long coordinates of the data
 	 */
-	resolveCoordinates(data) {
+	resolveCoordinates (data) {
 		return { lat: data.geometry.coordinates[0][1], lon: data.geometry.coordinates[0][0] };
 	},
 
@@ -237,7 +237,7 @@ WeatherProvider.register("smhi", {
 	 * @param {object[]} data Response data from the weather service
 	 * @returns {object[]} Given data with filled gaps
 	 */
-	fillInGaps(data) {
+	fillInGaps (data) {
 		let result = [];
 		for (let i = 1; i < data.length; i++) {
 			let to = moment(data[i].validTime);
@@ -259,7 +259,7 @@ WeatherProvider.register("smhi", {
 	 * @param {string} name The name of the property
 	 * @returns {*} The value of the property in the weatherdata
 	 */
-	paramValue(currentWeatherData, name) {
+	paramValue (currentWeatherData, name) {
 		return currentWeatherData.parameters.filter((p) => p.name === name).flatMap((p) => p.values)[0];
 	},
 
@@ -271,7 +271,7 @@ WeatherProvider.register("smhi", {
 	 * @param {boolean} isDayTime True if the icon should be for daytime, false for nighttime
 	 * @returns {string} The icon name for the MagicMirror
 	 */
-	convertWeatherType(input, isDayTime) {
+	convertWeatherType (input, isDayTime) {
 		switch (input) {
 			case 1:
 				return isDayTime ? "day-sunny" : "night-clear"; // Clear sky

modules/default/weather/providers/ukmetoffice.js

@@ -22,7 +22,7 @@ WeatherProvider.register("ukmetoffice", {
 	},
 
 	// Overwrite the fetchCurrentWeather method.
-	fetchCurrentWeather() {
+	fetchCurrentWeather () {
 		this.fetchData(this.getUrl("3hourly"))
 			.then((data) => {
 				if (!data || !data.SiteRep || !data.SiteRep.DV || !data.SiteRep.DV.Location || !data.SiteRep.DV.Location.Period || data.SiteRep.DV.Location.Period.length === 0) {
@@ -43,7 +43,7 @@ WeatherProvider.register("ukmetoffice", {
 	},
 
 	// Overwrite the fetchCurrentWeather method.
-	fetchWeatherForecast() {
+	fetchWeatherForecast () {
 		this.fetchData(this.getUrl("daily"))
 			.then((data) => {
 				if (!data || !data.SiteRep || !data.SiteRep.DV || !data.SiteRep.DV.Location || !data.SiteRep.DV.Location.Period || data.SiteRep.DV.Location.Period.length === 0) {
@@ -67,14 +67,14 @@ WeatherProvider.register("ukmetoffice", {
 	/*
 	 * Gets the complete url for the request
 	 */
-	getUrl(forecastType) {
+	getUrl (forecastType) {
 		return this.config.apiBase + this.config.locationID + this.getParams(forecastType);
 	},
 
 	/*
 	 * Generate a WeatherObject based on currentWeatherInformation
 	 */
-	generateWeatherObjectFromCurrentWeather(currentWeatherData) {
+	generateWeatherObjectFromCurrentWeather (currentWeatherData) {
 		const currentWeather = new WeatherObject();
 		const location = currentWeatherData.SiteRep.DV.Location;
 
@@ -119,7 +119,7 @@ WeatherProvider.register("ukmetoffice", {
 	/*
 	 * Generate WeatherObjects based on forecast information
 	 */
-	generateWeatherObjectsFromForecast(forecasts) {
+	generateWeatherObjectsFromForecast (forecasts) {
 		const days = [];
 
 		// loop round the (5) periods getting the data
@@ -150,7 +150,7 @@ WeatherProvider.register("ukmetoffice", {
 	/*
 	 * Convert the Met Office icons to a more usable name.
 	 */
-	convertWeatherType(weatherType) {
+	convertWeatherType (weatherType) {
 		const weatherTypes = {
 			0: "night-clear",
 			1: "day-sunny",
@@ -192,7 +192,7 @@ WeatherProvider.register("ukmetoffice", {
 	 * @param {string} forecastType daily or 3hourly forecast
 	 * @returns {string} url
 	 */
-	getParams(forecastType) {
+	getParams (forecastType) {
 		let params = "?";
 		params += `res=${forecastType}`;
 		params += `&key=${this.config.apiKey}`;

modules/default/weather/providers/ukmetofficedatahub.js

@@ -53,7 +53,7 @@ WeatherProvider.register("ukmetofficedatahub", {
 	},
 
 	// Build URL with query strings according to DataHub API (https://metoffice.apiconnect.ibmcloud.com/metoffice/production/api)
-	getUrl(forecastType) {
+	getUrl (forecastType) {
 		let queryStrings = "?";
 		queryStrings += `latitude=${this.config.lat}`;
 		queryStrings += `&longitude=${this.config.lon}`;
@@ -66,7 +66,7 @@ WeatherProvider.register("ukmetofficedatahub", {
 	// Build the list of headers for the request
 	// For DataHub requests, the API key/secret are sent in the headers rather than as query strings.
 	// Headers defined according to Data Hub API (https://metoffice.apiconnect.ibmcloud.com/metoffice/production/api)
-	getHeaders() {
+	getHeaders () {
 		return {
 			accept: "application/json",
 			"x-ibm-client-id": this.config.apiKey,
@@ -75,7 +75,7 @@ WeatherProvider.register("ukmetofficedatahub", {
 	},
 
 	// Fetch data using supplied URL and request headers
-	async fetchWeather(url, headers) {
+	async fetchWeather (url, headers) {
 		const response = await fetch(url, { headers: headers });
 
 		// Return JSON data
@@ -83,7 +83,7 @@ WeatherProvider.register("ukmetofficedatahub", {
 	},
 
 	// Fetch hourly forecast data (to use for current weather)
-	fetchCurrentWeather() {
+	fetchCurrentWeather () {
 		this.fetchWeather(this.getUrl("hourly"), this.getHeaders())
 			.then((data) => {
 				// Check data is usable
@@ -111,7 +111,7 @@ WeatherProvider.register("ukmetofficedatahub", {
 	},
 
 	// Create a WeatherObject using current weather data (data for the current hour)
-	generateWeatherObjectFromCurrentWeather(currentWeatherData) {
+	generateWeatherObjectFromCurrentWeather (currentWeatherData) {
 		const currentWeather = new WeatherObject();
 
 		// Extract the actual forecasts
@@ -152,7 +152,7 @@ WeatherProvider.register("ukmetofficedatahub", {
 	},
 
 	// Fetch daily forecast data
-	fetchWeatherForecast() {
+	fetchWeatherForecast () {
 		this.fetchWeather(this.getUrl("daily"), this.getHeaders())
 			.then((data) => {
 				// Check data is usable
@@ -180,7 +180,7 @@ WeatherProvider.register("ukmetofficedatahub", {
 	},
 
 	// Create a WeatherObject for each day using daily forecast data
-	generateWeatherObjectsFromForecast(forecasts) {
+	generateWeatherObjectsFromForecast (forecasts) {
 		const dailyForecasts = [];
 
 		// Extract the actual forecasts
@@ -225,14 +225,14 @@ WeatherProvider.register("ukmetofficedatahub", {
 	},
 
 	// Set the fetched location name.
-	setFetchedLocation: function (name) {
+	setFetchedLocation (name) {
 		this.fetchedLocationName = name;
 	},
 
 	// Match the Met Office "significant weather code" to a weathericons.css icon
 	// Use: https://metoffice.apiconnect.ibmcloud.com/metoffice/production/node/264
 	// and: https://erikflowers.github.io/weather-icons/
-	convertWeatherType(weatherType) {
+	convertWeatherType (weatherType) {
 		const weatherTypes = {
 			0: "night-clear",
 			1: "day-sunny",

modules/default/weather/providers/weatherbit.js

@@ -23,11 +23,11 @@ WeatherProvider.register("weatherbit", {
 		lon: 0
 	},
 
-	fetchedLocation: function () {
+	fetchedLocation () {
 		return this.fetchedLocationName || "";
 	},
 
-	fetchCurrentWeather() {
+	fetchCurrentWeather () {
 		this.fetchData(this.getUrl())
 			.then((data) => {
 				if (!data || !data.data[0] || typeof data.data[0].temp === "undefined") {
@@ -44,7 +44,7 @@ WeatherProvider.register("weatherbit", {
 			.finally(() => this.updateAvailable());
 	},
 
-	fetchWeatherForecast() {
+	fetchWeatherForecast () {
 		this.fetchData(this.getUrl())
 			.then((data) => {
 				if (!data || !data.data) {
@@ -67,7 +67,7 @@ WeatherProvider.register("weatherbit", {
 	 * Overrides method for setting config to check if endpoint is correct for hourly
 	 * @param {object} config The configuration object
 	 */
-	setConfig(config) {
+	setConfig (config) {
 		this.config = config;
 		if (!this.config.weatherEndpoint) {
 			switch (this.config.type) {
@@ -88,12 +88,12 @@ WeatherProvider.register("weatherbit", {
 	},
 
 	// Create a URL from the config and base URL.
-	getUrl() {
+	getUrl () {
 		return `${this.config.apiBase}${this.config.weatherEndpoint}?lat=${this.config.lat}&lon=${this.config.lon}&units=M&key=${this.config.apiKey}`;
 	},
 
 	// Implement WeatherDay generator.
-	generateWeatherDayFromCurrentWeather(currentWeatherData) {
+	generateWeatherDayFromCurrentWeather (currentWeatherData) {
 		//Calculate TZ Offset and invert to convert Sunrise/Sunset times to Local
 		const d = new Date();
 		let tzOffset = d.getTimezoneOffset();
@@ -115,7 +115,7 @@ WeatherProvider.register("weatherbit", {
 		return currentWeather;
 	},
 
-	generateWeatherObjectsFromForecast(forecasts) {
+	generateWeatherObjectsFromForecast (forecasts) {
 		const days = [];
 
 		for (const forecast of forecasts) {
@@ -135,7 +135,7 @@ WeatherProvider.register("weatherbit", {
 	},
 
 	// Map icons from Dark Sky to our icons.
-	convertWeatherType(weatherType) {
+	convertWeatherType (weatherType) {
 		const weatherTypes = {
 			t01d: "day-thunderstorm",
 			t01n: "night-alt-thunderstorm",

modules/default/weather/providers/weatherflow.js

@@ -23,7 +23,7 @@ WeatherProvider.register("weatherflow", {
 		stationid: ""
 	},
 
-	fetchCurrentWeather() {
+	fetchCurrentWeather () {
 		this.fetchData(this.getUrl())
 			.then((data) => {
 				const currentWeather = new WeatherObject();
@@ -44,7 +44,7 @@ WeatherProvider.register("weatherflow", {
 			.finally(() => this.updateAvailable());
 	},
 
-	fetchWeatherForecast() {
+	fetchWeatherForecast () {
 		this.fetchData(this.getUrl())
 			.then((data) => {
 				const days = [];
@@ -71,7 +71,7 @@ WeatherProvider.register("weatherflow", {
 	},
 
 	// Create a URL from the config and base URL.
-	getUrl() {
+	getUrl () {
 		return `${this.config.apiBase}better_forecast?station_id=${this.config.stationid}&units_temp=c&units_wind=kph&units_pressure=mb&units_precip=mm&units_distance=km&token=${this.config.token}`;
 	}
 });

modules/default/weather/providers/weathergov.js

@@ -37,24 +37,24 @@ WeatherProvider.register("weathergov", {
 	stationObsURL: "tbd",
 
 	// Called to set the config, this config is the same as the weather module's config.
-	setConfig: function (config) {
+	setConfig (config) {
 		this.config = config;
 		this.config.apiBase = "https://api.weather.gov";
 		this.fetchWxGovURLs(this.config);
 	},
 
 	// Called when the weather provider is about to start.
-	start: function () {
+	start () {
 		Log.info(`Weather provider: ${this.providerName} started.`);
 	},
 
 	// This returns the name of the fetched location or an empty string.
-	fetchedLocation: function () {
+	fetchedLocation () {
 		return this.fetchedLocationName || "";
 	},
 
 	// Overwrite the fetchCurrentWeather method.
-	fetchCurrentWeather() {
+	fetchCurrentWeather () {
 		if (!this.configURLs) {
 			Log.info("fetchCurrentWeather: fetch wx waiting on config URLs");
 			return;
@@ -75,7 +75,7 @@ WeatherProvider.register("weathergov", {
 	},
 
 	// Overwrite the fetchWeatherForecast method.
-	fetchWeatherForecast() {
+	fetchWeatherForecast () {
 		if (!this.configURLs) {
 			Log.info("fetchWeatherForecast: fetch wx waiting on config URLs");
 			return;
@@ -96,7 +96,7 @@ WeatherProvider.register("weathergov", {
 	},
 
 	// Overwrite the fetchWeatherHourly method.
-	fetchWeatherHourly() {
+	fetchWeatherHourly () {
 		if (!this.configURLs) {
 			Log.info("fetchWeatherHourly: fetch wx waiting on config URLs");
 			return;
@@ -122,7 +122,7 @@ WeatherProvider.register("weathergov", {
 	/*
 	 * Get specific URLs
 	 */
-	fetchWxGovURLs(config) {
+	fetchWxGovURLs (config) {
 		this.fetchData(`${config.apiBase}/points/${config.lat},${config.lon}`)
 			.then((data) => {
 				if (!data || !data.properties) {
@@ -162,12 +162,13 @@ WeatherProvider.register("weathergov", {
 				}
 			});
 	},
+
 	/*
 	 * Generate a WeatherObject based on hourlyWeatherInformation
 	 * Weather.gov API uses specific units; API does not include choice of units
 	 * ... object needs data in units based on config!
 	 */
-	generateWeatherObjectsFromHourly(forecasts) {
+	generateWeatherObjectsFromHourly (forecasts) {
 		const days = [];
 
 		// variable for date
@@ -182,6 +183,12 @@ WeatherProvider.register("weathergov", {
 			weather.windSpeed = WeatherUtils.convertWindToMs(weather.windSpeed);
 			weather.windFromDirection = forecast.windDirection;
 			weather.temperature = forecast.temperature;
+			//assign probability of precipitation
+			if (forecast.probabilityOfPrecipitation.value === null) {
+				weather.precipitationProbability = 0;
+			} else {
+				weather.precipitationProbability = forecast.probabilityOfPrecipitation.value;
+			}
 			// use the forecast isDayTime attribute to help build the weatherType label
 			weather.weatherType = this.convertWeatherType(forecast.shortForecast, forecast.isDaytime);
 
@@ -200,7 +207,7 @@ WeatherProvider.register("weathergov", {
 	 * Weather.gov API uses specific units; API does not include choice of units
 	 * ... object needs data in units based on config!
 	 */
-	generateWeatherObjectFromCurrentWeather(currentWeatherData) {
+	generateWeatherObjectFromCurrentWeather (currentWeatherData) {
 		const currentWeather = new WeatherObject();
 
 		currentWeather.date = moment(currentWeatherData.timestamp);
@@ -230,16 +237,14 @@ WeatherProvider.register("weathergov", {
 	/*
 	 * Generate WeatherObjects based on forecast information
 	 */
-	generateWeatherObjectsFromForecast(forecasts) {
+	generateWeatherObjectsFromForecast (forecasts) {
 		return this.fetchForecastDaily(forecasts);
 	},
 
 	/*
 	 * fetch forecast information for daily forecast.
 	 */
-	fetchForecastDaily(forecasts) {
-		const precipitationProbabilityRegEx = "Chance of precipitation is ([0-9]+?)%";
-
+	fetchForecastDaily (forecasts) {
 		// initial variable declaration
 		const days = [];
 		// variables for temperature range and rain
@@ -262,8 +267,12 @@ WeatherProvider.register("weathergov", {
 
 				minTemp = [];
 				maxTemp = [];
-				const precipitation = new RegExp(precipitationProbabilityRegEx, "g").exec(forecast.detailedForecast);
-				if (precipitation) weather.precipitationProbability = precipitation[1];
+				//assign probability of precipitation
+				if (forecast.probabilityOfPrecipitation.value === null) {
+					weather.precipitationProbability = 0;
+				} else {
+					weather.precipitationProbability = forecast.probabilityOfPrecipitation.value;
+				}
 
 				// set new date
 				date = moment(forecast.startTime).format("YYYY-MM-DD");
@@ -298,7 +307,7 @@ WeatherProvider.register("weathergov", {
 	/*
 	 * Convert the icons to a more usable name.
 	 */
-	convertWeatherType(weatherType, isDaytime) {
+	convertWeatherType (weatherType, isDaytime) {
 		//https://w1.weather.gov/xml/current_obs/weather.php
 		// There are way too many types to create, so lets just look for certain strings
 

modules/default/weather/providers/yr.js

@@ -18,11 +18,13 @@ WeatherProvider.register("yr", {
 	defaults: {
 		useCorsProxy: true,
 		apiBase: "https://api.met.no/weatherapi",
+		forecastApiVersion: "2.0",
+		sunriseApiVersion: "3.0",
 		altitude: 0,
 		currentForecastHours: 1 //1, 6 or 12
 	},
 
-	start() {
+	start () {
 		if (typeof Storage === "undefined") {
 			//local storage unavailable
 			Log.error("The Yr weather provider requires local storage.");
@@ -31,7 +33,7 @@ WeatherProvider.register("yr", {
 		Log.info(`Weather provider: ${this.providerName} started.`);
 	},
 
-	fetchCurrentWeather() {
+	fetchCurrentWeather () {
 		this.getCurrentWeather()
 			.then((currentWeather) => {
 				this.setCurrentWeather(currentWeather);
@@ -43,9 +45,8 @@ WeatherProvider.register("yr", {
 			});
 	},
 
-	async getCurrentWeather() {
-		const getRequests = [this.getWeatherData(), this.getStellarData()];
-		const [weatherData, stellarData] = await Promise.all(getRequests);
+	async getCurrentWeather () {
+		const [weatherData, stellarData] = await Promise.all([this.getWeatherData(), this.getStellarData()]);
 		if (!stellarData) {
 			Log.warn("No stellar data available.");
 		}
@@ -72,7 +73,7 @@ WeatherProvider.register("yr", {
 		return this.getWeatherDataFrom(forecast, stellarData, weatherData.properties.meta.units);
 	},
 
-	getWeatherData() {
+	getWeatherData () {
 		return new Promise((resolve, reject) => {
 			// If a user has several Yr-modules, for instance one current and one forecast, the API calls must be synchronized across classes.
 			// This is to avoid multiple similar calls to the API.
@@ -98,7 +99,7 @@ WeatherProvider.register("yr", {
 		});
 	},
 
-	getWeatherDataFromYrOrCache(resolve, reject) {
+	getWeatherDataFromYrOrCache (resolve, reject) {
 		localStorage.setItem("yrIsFetchingWeatherData", "true");
 
 		let weatherData = this.getWeatherDataFromCache();
@@ -130,16 +131,16 @@ WeatherProvider.register("yr", {
 		}
 	},
 
-	weatherDataIsValid(weatherData) {
+	weatherDataIsValid (weatherData) {
 		return (
-			weatherData &&
-			weatherData.timeout &&
-			0 < moment(weatherData.timeout).diff(moment()) &&
-			(!weatherData.geometry || !weatherData.geometry.coordinates || !weatherData.geometry.coordinates.length < 2 || (weatherData.geometry.coordinates[0] === this.config.lat && weatherData.geometry.coordinates[1] === this.config.lon))
+			weatherData
+			&& weatherData.timeout
+			&& 0 < moment(weatherData.timeout).diff(moment())
+			&& (!weatherData.geometry || !weatherData.geometry.coordinates || !weatherData.geometry.coordinates.length < 2 || (weatherData.geometry.coordinates[0] === this.config.lat && weatherData.geometry.coordinates[1] === this.config.lon))
 		);
 	},
 
-	getWeatherDataFromCache() {
+	getWeatherDataFromCache () {
 		const weatherData = localStorage.getItem("weatherData");
 		if (weatherData) {
 			return JSON.parse(weatherData);
@@ -148,7 +149,7 @@ WeatherProvider.register("yr", {
 		}
 	},
 
-	getWeatherDataFromYr(currentDataFetchedAt) {
+	getWeatherDataFromYr (currentDataFetchedAt) {
 		const requestHeaders = [{ name: "Accept", value: "application/json" }];
 		if (currentDataFetchedAt) {
 			requestHeaders.push({ name: "If-Modified-Since", value: currentDataFetchedAt });
@@ -170,7 +171,7 @@ WeatherProvider.register("yr", {
 			});
 	},
 
-	getForecastUrl() {
+	getConfigOptions () {
 		if (!this.config.lat) {
 			Log.error("Latitude not provided.");
 			throw new Error("Latitude not provided.");
@@ -183,6 +184,11 @@ WeatherProvider.register("yr", {
 		let lat = this.config.lat.toString();
 		let lon = this.config.lon.toString();
 		const altitude = this.config.altitude ?? 0;
+		return { lat, lon, altitude };
+	},
+
+	getForecastUrl () {
+		let { lat, lon, altitude } = this.getConfigOptions();
 
 		if (lat.includes(".") && lat.split(".")[1].length > 4) {
 			Log.warn("Latitude is too specific for weather data. Do not use more than four decimals. Trimming to maximum length.");
@@ -195,19 +201,14 @@ WeatherProvider.register("yr", {
 			lon = `${lonParts[0]}.${lonParts[1].substring(0, 4)}`;
 		}
 
-		return `${this.config.apiBase}/locationforecast/2.0/complete?&altitude=${altitude}&lat=${lat}&lon=${lon}`;
+		return `${this.config.apiBase}/locationforecast/${this.config.forecastApiVersion}/complete?&altitude=${altitude}&lat=${lat}&lon=${lon}`;
 	},
 
-	cacheWeatherData(weatherData) {
+	cacheWeatherData (weatherData) {
 		localStorage.setItem("weatherData", JSON.stringify(weatherData));
 	},
 
-	getAuthenticationString() {
-		if (!this.config.authenticationEmail) throw new Error("Authentication email not provided.");
-		return `${this.config.applicaitionName} ${this.config.authenticationEmail}`;
-	},
-
-	getStellarData() {
+	getStellarData () {
 		// If a user has several Yr-modules, for instance one current and one forecast, the API calls must be synchronized across classes.
 		// This is to avoid multiple similar calls to the API.
 		return new Promise((resolve, reject) => {
@@ -233,7 +234,7 @@ WeatherProvider.register("yr", {
 		});
 	},
 
-	getStellarDataFromYrOrCache(resolve, reject) {
+	getStellarDataFromYrOrCache (resolve, reject) {
 		localStorage.setItem("yrIsFetchingStellarData", "true");
 
 		let stellarData = this.getStellarDataFromCache();
@@ -291,7 +292,7 @@ WeatherProvider.register("yr", {
 		}
 	},
 
-	getStellarDataFromCache() {
+	getStellarDataFromCache () {
 		const stellarData = localStorage.getItem("stellarData");
 		if (stellarData) {
 			return JSON.parse(stellarData);
@@ -300,9 +301,9 @@ WeatherProvider.register("yr", {
 		}
 	},
 
-	getStellarDataFromYr(date, days = 1) {
+	getStellarDataFromYr (date, days = 1) {
 		const requestHeaders = [{ name: "Accept", value: "application/json" }];
-		return this.fetchData(this.getStellarDatatUrl(date, days), "json", requestHeaders)
+		return this.fetchData(this.getStellarDataUrl(date, days), "json", requestHeaders)
 			.then((data) => {
 				Log.debug("Got stellar data from yr.");
 				return data;
@@ -313,19 +314,8 @@ WeatherProvider.register("yr", {
 			});
 	},
 
-	getStellarDatatUrl(date, days) {
-		if (!this.config.lat) {
-			Log.error("Latitude not provided.");
-			throw new Error("Latitude not provided.");
-		}
-		if (!this.config.lon) {
-			Log.error("Longitude not provided.");
-			throw new Error("Longitude not provided.");
-		}
-
-		let lat = this.config.lat.toString();
-		let lon = this.config.lon.toString();
-		const altitude = this.config.altitude ?? 0;
+	getStellarDataUrl (date, days) {
+		let { lat, lon, altitude } = this.getConfigOptions();
 
 		if (lat.includes(".") && lat.split(".")[1].length > 4) {
 			Log.warn("Latitude is too specific for stellar data. Do not use more than four decimals. Trimming to maximum length.");
@@ -352,18 +342,15 @@ WeatherProvider.register("yr", {
 		if (hours.length < 2) {
 			hours = `0${hours}`;
 		}
-
-		return `${this.config.apiBase}/sunrise/2.0/.json?date=${date}&days=${days}&height=${altitude}&lat=${lat}&lon=${lon}&offset=${utcOffsetPrefix}${hours}%3A${minutes}`;
+		return `${this.config.apiBase}/sunrise/${this.config.sunriseApiVersion}/sun?lat=${lat}&lon=${lon}&date=${date}&offset=${utcOffsetPrefix}${hours}%3A${minutes}`;
 	},
 
-	cacheStellarData(data) {
+	cacheStellarData (data) {
 		localStorage.setItem("stellarData", JSON.stringify(data));
 	},
 
-	getWeatherDataFrom(forecast, stellarData, units) {
+	getWeatherDataFrom (forecast, stellarData, units) {
 		const weather = new WeatherObject();
-		const stellarTimesToday = stellarData?.today ? this.getStellarTimesFrom(stellarData.today, moment().format("YYYY-MM-DD")) : undefined;
-		const stellarTimesTomorrow = stellarData?.tomorrow ? this.getStellarTimesFrom(stellarData.tomorrow, moment().add(1, "days").format("YYYY-MM-DD")) : undefined;
 
 		weather.date = moment(forecast.time);
 		weather.windSpeed = forecast.data.instant.details.wind_speed;
@@ -377,15 +364,13 @@ WeatherProvider.register("yr", {
 		weather.precipitationProbability = forecast.precipitationProbability;
 		weather.precipitationUnits = units.precipitation_amount;
 
-		if (stellarTimesToday) {
-			weather.sunset = moment(stellarTimesToday.sunset.time);
-			weather.sunrise = weather.sunset < moment() && stellarTimesTomorrow ? moment(stellarTimesTomorrow.sunrise.time) : moment(stellarTimesToday.sunrise.time);
-		}
+		weather.sunrise = stellarData?.today?.properties?.sunrise?.time;
+		weather.sunset = stellarData?.today?.properties?.sunset?.time;
 
 		return weather;
 	},
 
-	convertWeatherType(weatherType, weatherTime) {
+	convertWeatherType (weatherType, weatherTime) {
 		const weatherHour = moment(weatherTime).format("HH");
 
 		const weatherTypes = {
@@ -477,16 +462,7 @@ WeatherProvider.register("yr", {
 		return weatherTypes.hasOwnProperty(weatherType) ? weatherTypes[weatherType] : null;
 	},
 
-	getStellarTimesFrom(stellarData, date) {
-		for (const time of stellarData.location.time) {
-			if (time.date === date) {
-				return time;
-			}
-		}
-		return undefined;
-	},
-
-	getForecastForXHoursFrom(weather) {
+	getForecastForXHoursFrom (weather) {
 		if (this.config.currentForecastHours === 1) {
 			if (weather.next_1_hours) {
 				return weather.next_1_hours;
@@ -514,7 +490,7 @@ WeatherProvider.register("yr", {
 		}
 	},
 
-	fetchWeatherHourly() {
+	fetchWeatherHourly () {
 		this.getWeatherForecast("hourly")
 			.then((forecast) => {
 				this.setWeatherHourly(forecast);
@@ -526,9 +502,8 @@ WeatherProvider.register("yr", {
 			});
 	},
 
-	async getWeatherForecast(type) {
-		const getRequests = [this.getWeatherData(), this.getStellarData()];
-		const [weatherData, stellarData] = await Promise.all(getRequests);
+	async getWeatherForecast (type) {
+		const [weatherData, stellarData] = await Promise.all([this.getWeatherData(), this.getStellarData()]);
 		if (!weatherData.properties.timeseries || !weatherData.properties.timeseries[0]) {
 			Log.error("No weather data available.");
 			return;
@@ -553,7 +528,7 @@ WeatherProvider.register("yr", {
 		return series;
 	},
 
-	getHourlyForecastFrom(weatherData) {
+	getHourlyForecastFrom (weatherData) {
 		const series = [];
 
 		for (const forecast of weatherData.properties.timeseries) {
@@ -568,7 +543,7 @@ WeatherProvider.register("yr", {
 		return series;
 	},
 
-	getDailyForecastFrom(weatherData) {
+	getDailyForecastFrom (weatherData) {
 		const series = [];
 
 		const days = weatherData.properties.timeseries.reduce(function (days, forecast) {
@@ -578,7 +553,7 @@ WeatherProvider.register("yr", {
 			return days;
 		}, Object.create(null));
 
-		Object.keys(days).forEach(function (time, index) {
+		Object.keys(days).forEach(function (time) {
 			let minTemperature = undefined;
 			let maxTemperature = undefined;
 
@@ -618,7 +593,7 @@ WeatherProvider.register("yr", {
 		return series;
 	},
 
-	fetchWeatherForecast() {
+	fetchWeatherForecast () {
 		this.getWeatherForecast("daily")
 			.then((forecast) => {
 				this.setWeatherForecast(forecast);

modules/default/weather/weather.js

@@ -23,6 +23,7 @@ Module.register("weather", {
 		showHumidity: false,
 		showIndoorHumidity: false,
 		showIndoorTemperature: false,
+		allowOverrideNotification: false,
 		showPeriod: true,
 		showPeriodUpper: false,
 		showPrecipitationAmount: false,
@@ -55,17 +56,17 @@ Module.register("weather", {
 	firstEvent: null,
 
 	// Define required scripts.
-	getStyles: function () {
+	getStyles () {
 		return ["font-awesome.css", "weather-icons.css", "weather.css"];
 	},
 
 	// Return the scripts that are necessary for the weather module.
-	getScripts: function () {
-		return ["moment.js", this.file("../utils.js"), "weatherutils.js", "weatherprovider.js", "weatherobject.js", "suncalc.js", this.file(`providers/${this.config.weatherProvider.toLowerCase()}.js`)];
+	getScripts () {
+		return ["moment.js", "weatherutils.js", "weatherobject.js", this.file("providers/overrideWrapper.js"), "weatherprovider.js", "suncalc.js", this.file(`providers/${this.config.weatherProvider.toLowerCase()}.js`)];
 	},
 
 	// Override getHeader method.
-	getHeader: function () {
+	getHeader () {
 		if (this.config.appendLocationNameToHeader && this.weatherProvider) {
 			if (this.data.header) return `${this.data.header} ${this.weatherProvider.fetchedLocation()}`;
 			else return this.weatherProvider.fetchedLocation();
@@ -75,7 +76,7 @@ Module.register("weather", {
 	},
 
 	// Start the weather module.
-	start: function () {
+	start () {
 		moment.locale(this.config.lang);
 
 		if (this.config.useKmh) {
@@ -100,7 +101,7 @@ Module.register("weather", {
 	},
 
 	// Override notification handler.
-	notificationReceived: function (notification, payload, sender) {
+	notificationReceived (notification, payload, sender) {
 		if (notification === "CALENDAR_EVENTS") {
 			const senderClasses = sender.data.classes.toLowerCase().split(" ");
 			if (senderClasses.indexOf(this.config.calendarClass.toLowerCase()) !== -1) {
@@ -119,11 +120,13 @@ Module.register("weather", {
 		} else if (notification === "INDOOR_HUMIDITY") {
 			this.indoorHumidity = this.roundValue(payload);
 			this.updateDom(300);
+		} else if (notification === "CURRENT_WEATHER_OVERRIDE" && this.config.allowOverrideNotification) {
+			this.weatherProvider.notificationReceived(payload);
 		}
 	},
 
 	// Select the template depending on the display type.
-	getTemplate: function () {
+	getTemplate () {
 		switch (this.config.type.toLowerCase()) {
 			case "current":
 				return "current.njk";
@@ -139,7 +142,7 @@ Module.register("weather", {
 	},
 
 	// Add all the data to the template.
-	getTemplateData: function () {
+	getTemplateData () {
 		const currentData = this.weatherProvider.currentWeather();
 		const forecastData = this.weatherProvider.weatherForecast();
 
@@ -159,7 +162,7 @@ Module.register("weather", {
 	},
 
 	// What to do when the weather provider has new information available?
-	updateAvailable: function () {
+	updateAvailable () {
 		Log.log("New weather information available.");
 		this.updateDom(0);
 		this.scheduleUpdate();
@@ -178,7 +181,7 @@ Module.register("weather", {
 		this.sendNotification("WEATHER_UPDATED", notificationPayload);
 	},
 
-	scheduleUpdate: function (delay = null) {
+	scheduleUpdate (delay = null) {
 		let nextLoad = this.config.updateInterval;
 		if (delay !== null && delay >= 0) {
 			nextLoad = delay;
@@ -202,13 +205,13 @@ Module.register("weather", {
 		}, nextLoad);
 	},
 
-	roundValue: function (temperature) {
+	roundValue (temperature) {
 		const decimals = this.config.roundTemp ? 0 : 1;
 		const roundValue = parseFloat(temperature).toFixed(decimals);
 		return roundValue === "-0" ? 0 : roundValue;
 	},
 
-	addFilters() {
+	addFilters () {
 		this.nunjucksEnvironment().addFilter(
 			"formatTime",
 			function (date) {

modules/default/weather/weatherobject.js

@@ -16,10 +16,11 @@
  * @external Moment
  */
 class WeatherObject {
+
 	/**
 	 * Constructor for a WeatherObject
 	 */
-	constructor() {
+	constructor () {
 		this.date = null;
 		this.windSpeed = null;
 		this.windFromDirection = null;
@@ -36,7 +37,7 @@ class WeatherObject {
 		this.feelsLikeTemp = null;
 	}
 
-	cardinalWindDirection() {
+	cardinalWindDirection () {
 		if (this.windFromDirection > 11.25 && this.windFromDirection <= 33.75) {
 			return "NNE";
 		} else if (this.windFromDirection > 33.75 && this.windFromDirection <= 56.25) {
@@ -79,11 +80,11 @@ class WeatherObject {
 	 * action for. Useful only in tests, defaults to the current time.
 	 * @returns {string} "sunset" or "sunrise"
 	 */
-	nextSunAction(date = moment()) {
+	nextSunAction (date = moment()) {
 		return date.isBetween(this.sunrise, this.sunset) ? "sunset" : "sunrise";
 	}
 
-	feelsLike() {
+	feelsLike () {
 		if (this.feelsLikeTemp) {
 			return this.feelsLikeTemp;
 		}
@@ -94,7 +95,7 @@ class WeatherObject {
 	 * Checks if the weatherObject is at dayTime.
 	 * @returns {boolean} true if it is at dayTime
 	 */
-	isDayTime() {
+	isDayTime () {
 		const now = !this.date ? moment() : this.date;
 		return now.isBetween(this.sunrise, this.sunset, undefined, "[]");
 	}
@@ -106,7 +107,7 @@ class WeatherObject {
 	 * @param {number} lat latitude
 	 * @param {number} lon longitude
 	 */
-	updateSunTime(lat, lon) {
+	updateSunTime (lat, lon) {
 		const now = !this.date ? new Date() : this.date.toDate();
 		const times = SunCalc.getTimes(now, lat, lon);
 		this.sunrise = moment(times.sunrise);
@@ -120,7 +121,7 @@ class WeatherObject {
 	 * Especially 'moment' object is not immutable, so original 'date', 'sunrise', 'sunset' could be corrupted or changed by other modules.
 	 * @returns {object} plained object clone of original weatherObject
 	 */
-	simpleClone() {
+	simpleClone () {
 		const toFlat = ["date", "sunrise", "sunset"];
 		let clone = { ...this };
 		for (const prop of toFlat) {

modules/default/weather/weatherprovider.js

@@ -1,4 +1,4 @@
-/* global Class, performWebRequest */
+/* global Class, performWebRequest, OverrideWrapper */
 
 /* MagicMirror²
  * Module: Weather
@@ -30,84 +30,84 @@ const WeatherProvider = Class.extend({
 	// All the following methods can be overwritten, although most are good as they are.
 
 	// Called when a weather provider is initialized.
-	init: function (config) {
+	init (config) {
 		this.config = config;
 		Log.info(`Weather provider: ${this.providerName} initialized.`);
 	},
 
 	// Called to set the config, this config is the same as the weather module's config.
-	setConfig: function (config) {
+	setConfig (config) {
 		this.config = config;
 		Log.info(`Weather provider: ${this.providerName} config set.`, this.config);
 	},
 
 	// Called when the weather provider is about to start.
-	start: function () {
+	start () {
 		Log.info(`Weather provider: ${this.providerName} started.`);
 	},
 
 	// This method should start the API request to fetch the current weather.
 	// This method should definitely be overwritten in the provider.
-	fetchCurrentWeather: function () {
+	fetchCurrentWeather () {
 		Log.warn(`Weather provider: ${this.providerName} does not subclass the fetchCurrentWeather method.`);
 	},
 
 	// This method should start the API request to fetch the weather forecast.
 	// This method should definitely be overwritten in the provider.
-	fetchWeatherForecast: function () {
+	fetchWeatherForecast () {
 		Log.warn(`Weather provider: ${this.providerName} does not subclass the fetchWeatherForecast method.`);
 	},
 
 	// This method should start the API request to fetch the weather hourly.
 	// This method should definitely be overwritten in the provider.
-	fetchWeatherHourly: function () {
+	fetchWeatherHourly () {
 		Log.warn(`Weather provider: ${this.providerName} does not subclass the fetchWeatherHourly method.`);
 	},
 
 	// This returns a WeatherDay object for the current weather.
-	currentWeather: function () {
+	currentWeather () {
 		return this.currentWeatherObject;
 	},
 
 	// This returns an array of WeatherDay objects for the weather forecast.
-	weatherForecast: function () {
+	weatherForecast () {
 		return this.weatherForecastArray;
 	},
 
 	// This returns an object containing WeatherDay object(s) depending on the type of call.
-	weatherHourly: function () {
+	weatherHourly () {
 		return this.weatherHourlyArray;
 	},
 
 	// This returns the name of the fetched location or an empty string.
-	fetchedLocation: function () {
+	fetchedLocation () {
 		return this.fetchedLocationName || "";
 	},
 
 	// Set the currentWeather and notify the delegate that new information is available.
-	setCurrentWeather: function (currentWeatherObject) {
+	setCurrentWeather (currentWeatherObject) {
 		// We should check here if we are passing a WeatherDay
 		this.currentWeatherObject = currentWeatherObject;
 	},
 
 	// Set the weatherForecastArray and notify the delegate that new information is available.
-	setWeatherForecast: function (weatherForecastArray) {
+	setWeatherForecast (weatherForecastArray) {
 		// We should check here if we are passing a WeatherDay
 		this.weatherForecastArray = weatherForecastArray;
 	},
 
 	// Set the weatherHourlyArray and notify the delegate that new information is available.
-	setWeatherHourly: function (weatherHourlyArray) {
+	setWeatherHourly (weatherHourlyArray) {
 		this.weatherHourlyArray = weatherHourlyArray;
 	},
 
 	// Set the fetched location name.
-	setFetchedLocation: function (name) {
+	setFetchedLocation (name) {
 		this.fetchedLocationName = name;
 	},
 
 	// Notify the delegate that new weather is available.
-	updateAvailable: function () {
+	updateAvailable () {
 		this.delegate.updateAvailable(this);
 	},
 
@@ -119,7 +119,7 @@ const WeatherProvider = Class.extend({
 	 * @param {Array.<string>} expectedResponseHeaders the expected HTTP headers to recieve
 	 * @returns {Promise} resolved when the fetch is done
 	 */
-	fetchData: async function (url, type = "json", requestHeaders = undefined, expectedResponseHeaders = undefined) {
+	async fetchData (url, type = "json", requestHeaders = undefined, expectedResponseHeaders = undefined) {
 		const mockData = this.config.mockData;
 		if (mockData) {
 			const data = mockData.substring(1, mockData.length - 1);
@@ -164,5 +164,9 @@ WeatherProvider.initialize = function (providerIdentifier, delegate) {
 		provider.providerName = pi;
 	}
 
+	if (config.allowOverrideNotification) {
+		return new OverrideWrapper(provider);
+	}
+
 	return provider;
 };

modules/default/weather/weatherutils.js

@@ -5,12 +5,13 @@
  * MIT Licensed.
  */
 const WeatherUtils = {
+
 	/**
 	 * Convert wind (from m/s) to beaufort scale
 	 * @param {number} speedInMS the windspeed you want to convert
 	 * @returns {number} the speed in beaufort
 	 */
-	beaufortWindSpeed(speedInMS) {
+	beaufortWindSpeed (speedInMS) {
 		const windInKmh = this.convertWind(speedInMS, "kmh");
 		const speeds = [1, 5, 11, 19, 28, 38, 49, 61, 74, 88, 102, 117, 1000];
 		for (const [index, speed] of speeds.entries()) {
@@ -29,7 +30,7 @@ const WeatherUtils = {
 	 * @param {string} outputUnit - The unit system (imperial/metric) the return value should have.
 	 * @returns {string} - A string with tha value and a unit postfix.
 	 */
-	convertPrecipitationUnit(value, valueUnit, outputUnit) {
+	convertPrecipitationUnit (value, valueUnit, outputUnit) {
 		if (valueUnit === "%") return `${value.toFixed(0)} ${valueUnit}`;
 
 		let convertedValue = value;
@@ -52,7 +53,7 @@ const WeatherUtils = {
 	 * @param {string} unit can be 'imperial' or 'metric'
 	 * @returns {number} the converted temperature
 	 */
-	convertTemp(tempInC, unit) {
+	convertTemp (tempInC, unit) {
 		return unit === "imperial" ? tempInC * 1.8 + 32 : tempInC;
 	},
 
@@ -63,7 +64,7 @@ const WeatherUtils = {
 	 * or 'metric' (mps)
 	 * @returns {number} the converted windspeed
 	 */
-	convertWind(windInMS, unit) {
+	convertWind (windInMS, unit) {
 		switch (unit) {
 			case "beaufort":
 				return this.beaufortWindSpeed(windInMS);
@@ -82,7 +83,7 @@ const WeatherUtils = {
 	/*
 	 * Convert the wind direction cardinal to value
 	 */
-	convertWindDirection(windDirection) {
+	convertWindDirection (windDirection) {
 		const windCardinals = {
 			N: 0,
 			NNE: 22,
@@ -105,15 +106,15 @@ const WeatherUtils = {
 		return windCardinals.hasOwnProperty(windDirection) ? windCardinals[windDirection] : null;
 	},
 
-	convertWindToMetric(mph) {
+	convertWindToMetric (mph) {
 		return mph / 2.2369362920544;
 	},
 
-	convertWindToMs(kmh) {
+	convertWindToMs (kmh) {
 		return kmh * 0.27777777777778;
 	},
 
-	calculateFeelsLike(temperature, windSpeed, humidity) {
+	calculateFeelsLike (temperature, windSpeed, humidity) {
 		const windInMph = this.convertWind(windSpeed, "imperial");
 		const tempInF = this.convertTemp(temperature, "imperial");
 		let feelsLike = tempInF;
@@ -121,16 +122,16 @@ const WeatherUtils = {
 		if (windInMph > 3 && tempInF < 50) {
 			feelsLike = Math.round(35.74 + 0.6215 * tempInF - 35.75 * Math.pow(windInMph, 0.16) + 0.4275 * tempInF * Math.pow(windInMph, 0.16));
 		} else if (tempInF > 80 && humidity > 40) {
-			feelsLike =
-				-42.379 +
-				2.04901523 * tempInF +
-				10.14333127 * humidity -
-				0.22475541 * tempInF * humidity -
-				6.83783 * Math.pow(10, -3) * tempInF * tempInF -
-				5.481717 * Math.pow(10, -2) * humidity * humidity +
-				1.22874 * Math.pow(10, -3) * tempInF * tempInF * humidity +
-				8.5282 * Math.pow(10, -4) * tempInF * humidity * humidity -
-				1.99 * Math.pow(10, -6) * tempInF * tempInF * humidity * humidity;
+			feelsLike
+				= -42.379
+				+ 2.04901523 * tempInF
+				+ 10.14333127 * humidity
+				- 0.22475541 * tempInF * humidity
+				- 6.83783 * Math.pow(10, -3) * tempInF * tempInF
+				- 5.481717 * Math.pow(10, -2) * humidity * humidity
+				+ 1.22874 * Math.pow(10, -3) * tempInF * tempInF * humidity
+				+ 8.5282 * Math.pow(10, -4) * tempInF * humidity * humidity
+				- 1.99 * Math.pow(10, -6) * tempInF * tempInF * humidity * humidity;
 		}
 
 		return ((feelsLike - 32) * 5) / 9;

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "magicmirror",
-	"version": "2.24.0",
+	"version": "2.26.0",
 	"description": "The open source modular smart mirror platform.",
 	"main": "js/electron.js",
 	"scripts": {
@@ -18,14 +18,14 @@
 		"test:e2e": "NODE_ENV=test jest --selectProjects e2e -i --forceExit",
 		"test:unit": "NODE_ENV=test jest --selectProjects unit",
 		"test:prettier": "prettier . --check",
-		"test:js": "eslint 'js/**/*.js' 'modules/default/**/*.js' 'clientonly/*.js' 'serveronly/*.js' 'translations/*.js' 'vendor/*.js' 'tests/**/*.js' 'config/*' --config .eslintrc.json",
+		"test:js": "eslint 'js/**/*.js' 'modules/default/**/*.js' 'clientonly/*.js' 'serveronly/*.js' 'translations/*.js' 'vendor/*.js' 'tests/**/*.js' 'config/*'",
 		"test:css": "stylelint 'css/main.css' 'fonts/*.css' 'modules/default/**/*.css' 'vendor/*.css' --config .stylelintrc.json",
 		"test:calendar": "node ./modules/default/calendar/debug.js",
 		"config:check": "node js/check_config.js",
 		"lint:prettier": "prettier . --write",
-		"lint:js": "eslint 'js/**/*.js' 'modules/default/**/*.js' 'clientonly/*.js' 'serveronly/*.js' 'translations/*.js' 'vendor/*.js' 'tests/**/*.js' 'config/*' --config .eslintrc.json --fix",
+		"lint:js": "eslint 'js/**/*.js' 'modules/default/**/*.js' 'clientonly/*.js' 'serveronly/*.js' 'translations/*.js' 'vendor/*.js' 'tests/**/*.js' 'config/*' --fix",
 		"lint:css": "stylelint 'css/main.css' 'fonts/*.css' 'modules/default/**/*.css' 'vendor/*.css' --config .stylelintrc.json --fix",
-		"lint:staged": "pretty-quick --staged",
+		"lint:staged": "lint-staged",
 		"prepare": "[ -f node_modules/.bin/husky ] && husky install || echo no husky installed."
 	},
 	"repository": {
@@ -49,52 +49,54 @@
 	},
 	"homepage": "https://magicmirror.builders",
 	"devDependencies": {
-		"eslint-config-prettier": "^8.8.0",
-		"eslint-plugin-import": "^2.27.5",
-		"eslint-plugin-jest": "^27.2.2",
-		"eslint-plugin-jsdoc": "^46.4.2",
-		"eslint-plugin-prettier": "^4.2.1",
+		"@stylistic/eslint-plugin": "^1.5.1",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-jest": "^27.6.0",
+		"eslint-plugin-jsdoc": "^46.9.1",
 		"express-basic-auth": "^1.2.1",
 		"husky": "^8.0.3",
-		"jest": "^29.5.0",
-		"jsdom": "^22.1.0",
+		"jest": "^29.7.0",
+		"jsdom": "^23.0.1",
+		"lint-staged": "^15.2.0",
 		"lodash": "^4.17.21",
-		"playwright": "^1.35.1",
-		"prettier": "^2.8.8",
-		"pretty-quick": "^3.1.3",
-		"sinon": "^15.2.0",
-		"stylelint": "^15.9.0",
-		"stylelint-config-standard": "^33.0.0",
-		"stylelint-prettier": "^3.0.0",
+		"playwright": "^1.40.1",
+		"prettier": "^3.1.1",
+		"sinon": "^17.0.1",
+		"stylelint": "^16.1.0",
+		"stylelint-config-standard": "^36.0.0",
+		"stylelint-prettier": "^5.0.0",
 		"suncalc": "^1.9.0"
 	},
 	"optionalDependencies": {
-		"electron": "^25.2.0"
+		"electron": "^27.2.0"
 	},
 	"dependencies": {
 		"colors": "^1.4.0",
-		"console-stamp": "^3.1.1",
-		"digest-fetch": "^2.0.3",
+		"command-exists": "^1.2.9",
+		"console-stamp": "^3.1.2",
 		"envsub": "^4.1.0",
-		"eslint": "^8.43.0",
+		"eslint": "^8.56.0",
 		"express": "^4.18.2",
 		"express-ipfilter": "^1.3.1",
 		"feedme": "^2.0.2",
-		"helmet": "^7.0.0",
+		"helmet": "^7.1.0",
+		"html-to-text": "^9.0.5",
 		"iconv-lite": "^0.6.3",
-		"luxon": "^1.28.1",
 		"module-alias": "^2.2.3",
-		"moment": "^2.29.4",
-		"node-fetch": "^2.6.12",
-		"node-ical": "^0.16.1",
-		"socket.io": "^4.7.1"
+		"moment": "^2.30.1",
+		"node-ical": "^0.17.1",
+		"socket.io": "^4.7.2"
+	},
+	"lint-staged": {
+		"*": "prettier --write",
+		"*.js": "eslint",
+		"*.css": "stylelint"
 	},
 	"_moduleAliases": {
 		"node_helper": "js/node_helper.js",
-		"logger": "js/logger.js",
-		"fetch": "js/fetch.js"
+		"logger": "js/logger.js"
 	},
 	"engines": {
-		"node": ">=16"
+		"node": ">=18"
 	}
 }

tests/configs/empty_ipWhiteList.js

@@ -4,7 +4,8 @@
  * MIT Licensed.
  */
 let config = require(`${process.cwd()}/tests/configs/default.js`).configFactory({
-	ipWhitelist: []
+	ipWhitelist: [],
+	port: 8282
 });
 
 /*************** DO NOT EDIT THE LINE BELOW ***************/

tests/configs/modules/calendar/bad_rrule.js

@@ -0,0 +1,27 @@
+/* MagicMirror² Test ics with out of date event causing bad return from rrule.between
+ *
+ * By Sam Detweiler
+ * MIT Licensed.
+ */
+let config = {
+	timeFormat: 12,
+	logLevel: ["INFO", "LOG", "WARN", "ERROR", "DEBUG"],
+	modules: [
+		{
+			module: "calendar",
+			position: "bottom_bar",
+			config: {
+				calendars: [
+					{
+						url: "http://localhost:8080/tests/mocks/bad_rrule.ics"
+					}
+				]
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/calendar/custom.js

@@ -11,7 +11,7 @@ let config = {
 			module: "calendar",
 			position: "bottom_bar",
 			config: {
-				customEvents: [{ keyword: "CustomEvent", symbol: "dice" }],
+				customEvents: [{ keyword: "CustomEvent", symbol: "dice", eventClass: "undo" }],
 				calendars: [
 					{
 						maximumEntries: 5,

tests/configs/modules/calendar/exdate.js

@@ -0,0 +1,36 @@
+/* MagicMirror² Test calendar exdate
+ *
+ * By jkriegshauser
+ * MIT Licensed.
+ *
+ * NOTE: calendar_test_exdate.ics has exdate entries for the next 20 years, but without some
+ * way to set a debug date for tests, this test may become flaky on specific days (i.e. could
+ * not test easily on leap-years, the BYDAY specified in exdate, etc.) or when the 20 years
+ * elapses if this project is still in active development ;)
+ * See issue #3250
+ */
+let config = {
+	timeFormat: 12,
+
+	modules: [
+		{
+			module: "calendar",
+			position: "bottom_bar",
+			config: {
+				maximumEntries: 100,
+				calendars: [
+					{
+						maximumEntries: 100,
+						maximumNumberOfDays: 364,
+						url: "http://localhost:8080/tests/mocks/calendar_test_exdate.ics"
+					}
+				]
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/calendar/show-duplicates-in-calendar.js

@@ -0,0 +1,36 @@
+/* MagicMirror² Test config for multiple calendar events having the same name and start date/time
+ *
+ * By Paranoid93 https://github.com/Paranoid93/
+ * MIT Licensed.
+ */
+let config = {
+	timeFormat: 12,
+
+	modules: [
+		{
+			module: "calendar",
+			position: "bottom_bar",
+			config: {
+				maximumEntries: 30,
+				hideDuplicates: false,
+				calendars: [
+					{
+						maximumEntries: 15,
+						maximumNumberOfDays: 10000,
+						url: "http://localhost:8080/tests/mocks/calendar_test.ics" // contains 11 events
+					},
+					{
+						maximumEntries: 15,
+						maximumNumberOfDays: 10000,
+						url: "http://localhost:8080/tests/mocks/calendar_test_clone.ics" // clone of upper calendar
+					}
+				]
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/clock/clock_showSunMoon.js

@@ -0,0 +1,24 @@
+/* MagicMirror² Test config for default clock module
+ *
+ * By Johan Hammar
+ * MIT Licensed.
+ */
+let config = {
+	timeFormat: 12,
+
+	modules: [
+		{
+			module: "clock",
+			position: "middle_center",
+			config: {
+				showSunTimes: true,
+				showMoonTimes: true
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/compliments/compliments_animateCSS.js

@@ -0,0 +1,28 @@
+/* MagicMirror² Test config sample for AnimateCSS integration with compliments module
+ *
+ * By bugsounet https://github.com/bugsounet
+ * 09/2023
+ * MIT Licensed.
+ */
+let config = {
+	modules: [
+		{
+			module: "compliments",
+			position: "lower_third",
+			animateIn: "flipInX",
+			animateOut: "flipOutX",
+			config: {
+				compliments: {
+					anytime: ["AnimateCSS Testing..."]
+				},
+				updateInterval: 2000,
+				fadeSpeed: 1000
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/compliments/compliments_animateCSS_fallbackToDefault.js

@@ -0,0 +1,29 @@
+/* MagicMirror² Test config sample for AnimateCSS integration with compliments module
+ * --> if animation name is not an AnimateCSS animation
+ * --> must fallback to default (no animation)
+ * By bugsounet https://github.com/bugsounet
+ * 09/2023
+ * MIT Licensed.
+ */
+let config = {
+	modules: [
+		{
+			module: "compliments",
+			position: "lower_third",
+			animateIn: "foo",
+			animateOut: "bar",
+			config: {
+				compliments: {
+					anytime: ["AnimateCSS Testing..."]
+				},
+				updateInterval: 2000,
+				fadeSpeed: 1000
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/compliments/compliments_animateCSS_invertedAnimationName.js

@@ -0,0 +1,28 @@
+/* MagicMirror² Test config sample for AnimateCSS integration with compliments module
+ * --> inversed name animation : in for out and vice versa (must return no animation)
+ * By bugsounet https://github.com/bugsounet
+ * 09/2023
+ * MIT Licensed.
+ */
+let config = {
+	modules: [
+		{
+			module: "compliments",
+			position: "lower_third",
+			animateIn: "flipOutX",
+			animateOut: "flipInX",
+			config: {
+				compliments: {
+					anytime: ["AnimateCSS Testing..."]
+				},
+				updateInterval: 2000,
+				fadeSpeed: 1000
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/noIpWhiteList.js

@@ -4,7 +4,8 @@
  * MIT Licensed.
  */
 let config = require(`${process.cwd()}/tests/configs/default.js`).configFactory({
-	ipWhitelist: ["x.x.x.x"]
+	ipWhitelist: ["x.x.x.x"],
+	port: 8181
 });
 
 /*************** DO NOT EDIT THE LINE BELOW ***************/

tests/e2e/animateCSS_spec.js

@@ -0,0 +1,80 @@
+/* AnimateCSS integration Test with compliments module
+ *
+ * By bugsounet https://github.com/bugsounet
+ * and helped by khassel
+ * 09/2023
+ * MIT Licensed.
+ */
+const helpers = require("./helpers/global-setup");
+
+describe("AnimateCSS integration Test", () => {
+	// define config file for testing
+	let testConfigFile = "tests/configs/modules/compliments/compliments_animateCSS.js";
+	// define config file to fallback to default: wrong animation name (must return no animation)
+	let testConfigFileFallbackToDefault = "tests/configs/modules/compliments/compliments_animateCSS_fallbackToDefault.js";
+	// define config file with an inversed name animation : in for out and vice versa (must return no animation)
+	let testConfigFileInvertedAnimationName = "tests/configs/modules/compliments/compliments_animateCSS_invertedAnimationName.js";
+	// define config file with no animation defined
+	let testConfigByDefault = "tests/configs/modules/compliments/compliments_anytime.js";
+
+	/**
+	 * move similar tests in function doTest
+	 * @param {string} [animationIn] animation in name of AnimateCSS to test.
+	 * @param {string} [animationOut] animation out name of AnimateCSS to test.
+	 * @returns {boolean} result
+	 */
+	const doTest = async (animationIn, animationOut) => {
+		await helpers.getDocument();
+		let elem = await helpers.waitForElement(".compliments");
+		expect(elem).not.toBeNull();
+		let styles = window.getComputedStyle(elem);
+
+		if (animationIn && animationIn !== "") {
+			expect(styles._values["animation-name"]).toBe(animationIn);
+		} else {
+			expect(styles._values["animation-name"]).toBeUndefined();
+		}
+
+		if (animationOut && animationOut !== "") {
+			elem = await helpers.waitForElement(`.compliments.animate__animated.animate__${animationOut}`);
+			expect(elem).not.toBeNull();
+			styles = window.getComputedStyle(elem);
+			expect(styles._values["animation-name"]).toBe(animationOut);
+		} else {
+			expect(styles._values["animation-name"]).toBeUndefined();
+		}
+		return true;
+	};
+
+	afterEach(async () => {
+		await helpers.stopApplication();
+	});
+
+	describe("animateIn and animateOut Test", () => {
+		it("with flipInX and flipOutX animation", async () => {
+			await helpers.startApplication(testConfigFile);
+			await expect(doTest("flipInX", "flipOutX")).resolves.toBe(true);
+		});
+	});
+
+	describe("use animateOut name for animateIn (vice versa) Test", () => {
+		it("without animation", async () => {
+			await helpers.startApplication(testConfigFileInvertedAnimationName);
+			await expect(doTest()).resolves.toBe(true);
+		});
+	});
+
+	describe("false Animation name test", () => {
+		it("without animation", async () => {
+			await helpers.startApplication(testConfigFileFallbackToDefault);
+			await expect(doTest()).resolves.toBe(true);
+		});
+	});
+
+	describe("no Animation defined test", () => {
+		it("without animation", async () => {
+			await helpers.startApplication(testConfigByDefault);
+			await expect(doTest()).resolves.toBe(true);
+		});
+	});
+});

tests/e2e/env_spec.js

@@ -10,18 +10,18 @@ describe("App environment", () => {
 	});
 
 	it("get request from http://localhost:8080 should return 200", async () => {
-		const res = await helpers.fetch("http://localhost:8080");
+		const res = await fetch("http://localhost:8080");
 		expect(res.status).toBe(200);
 	});
 
 	it("get request from http://localhost:8080/nothing should return 404", async () => {
-		const res = await helpers.fetch("http://localhost:8080/nothing");
+		const res = await fetch("http://localhost:8080/nothing");
 		expect(res.status).toBe(404);
 	});
 
 	it("should show the title MagicMirror²", async () => {
 		const elem = await helpers.waitForElement("title");
-		expect(elem).not.toBe(null);
+		expect(elem).not.toBeNull();
 		expect(elem.textContent).toBe("MagicMirror²");
 	});
 });

tests/e2e/fonts_spec.js

@@ -20,9 +20,9 @@ describe("All font files from roboto.css should be downloadable", () => {
 		await helpers.stopApplication();
 	});
 
-	test.each(fontFiles)("should return 200 HTTP code for file '%s'", async (fontFile) => {
+	it.each(fontFiles)("should return 200 HTTP code for file '%s'", async (fontFile) => {
 		const fontUrl = `http://localhost:8080/fonts/${fontFile}`;
-		const res = await helpers.fetch(fontUrl);
+		const res = await fetch(fontUrl);
 		expect(res.status).toBe(200);
 	});
 });

tests/e2e/helpers/basic-auth.js

@@ -1,6 +1,7 @@
 const path = require("path");
 const auth = require("express-basic-auth");
 const express = require("express");
+
 const app = express();
 
 const basicAuth = auth({

tests/e2e/helpers/global-setup.js

@@ -1,5 +1,4 @@
 const jsdom = require("jsdom");
-const corefetch = require("fetch");
 
 exports.startApplication = async (configFilename, exec) => {
 	jest.resetModules();
@@ -31,7 +30,13 @@ exports.getDocument = () => {
 		const url = `http://${config.address || "localhost"}:${config.port || "8080"}`;
 		jsdom.JSDOM.fromURL(url, { resources: "usable", runScripts: "dangerously" }).then((dom) => {
 			dom.window.name = "jsdom";
-			dom.window.fetch = corefetch;
+			global.window = dom.window;
+			// Following fixes `navigator is not defined` errors in e2e tests, found here
+			// https://www.appsloveworld.com/reactjs/100/37/mocha-react-navigator-is-not-defined
+			global.navigator = {
+				useragent: "node.js"
+			};
+			dom.window.fetch = fetch;
 			dom.window.onload = () => {
 				global.document = dom.window.document;
 				resolve();
@@ -80,16 +85,9 @@ exports.waitForAllElements = (selector) => {
 	});
 };
 
-exports.fetch = (url) => {
-	return new Promise((resolve) => {
-		corefetch(url).then((res) => {
-			resolve(res);
-		});
-	});
-};
-
 exports.testMatch = async (element, regex) => {
 	const elem = await this.waitForElement(element);
-	expect(elem).not.toBe(null);
+	expect(elem).not.toBeNull();
 	expect(elem.textContent).toMatch(regex);
+	return true;
 };

tests/e2e/helpers/mock-console.js

@@ -4,13 +4,13 @@
  */
 const mockError = (err) => {
 	if (
-		err.includes("ECONNREFUSED") ||
-		err.includes("ECONNRESET") ||
-		err.includes("socket hang up") ||
-		err.includes("exports is not defined") ||
-		err.includes("write EPIPE") ||
-		err.includes("AggregateError") ||
-		err.includes("ERR_SOCKET_CONNECTION_TIMEOUT")
+		err.includes("ECONNREFUSED")
+		|| err.includes("ECONNRESET")
+		|| err.includes("socket hang up")
+		|| err.includes("exports is not defined")
+		|| err.includes("write EPIPE")
+		|| err.includes("AggregateError")
+		|| err.includes("ERR_SOCKET_CONNECTION_TIMEOUT")
 	) {
 		jest.fn();
 	} else {

tests/e2e/helpers/weather-functions.js

@@ -3,17 +3,17 @@ const helpers = require("./global-setup");
 
 exports.getText = async (element, result) => {
 	const elem = await helpers.waitForElement(element);
-	expect(elem).not.toBe(null);
+	expect(elem).not.toBeNull();
 	expect(
 		elem.textContent
 			.trim()
 			.replace(/(\r\n|\n|\r)/gm, "")
 			.replace(/[ ]+/g, " ")
 	).toBe(result);
+	return true;
 };
 
 exports.startApp = async (configFileName, additionalMockData) => {
-	injectMockData(configFileName, additionalMockData);
-	await helpers.startApplication("");
+	await helpers.startApplication(injectMockData(configFileName, additionalMockData));
 	await helpers.getDocument();
 };

tests/e2e/ipWhitelist_spec.js

@@ -10,7 +10,7 @@ describe("ipWhitelist directive configuration", () => {
 		});
 
 		it("should return 403", async () => {
-			const res = await helpers.fetch("http://localhost:8080");
+			const res = await fetch("http://localhost:8181");
 			expect(res.status).toBe(403);
 		});
 	});
@@ -24,7 +24,7 @@ describe("ipWhitelist directive configuration", () => {
 		});
 
 		it("should return 200", async () => {
-			const res = await helpers.fetch("http://localhost:8080");
+			const res = await fetch("http://localhost:8282");
 			expect(res.status).toBe(200);
 		});
 	});

tests/e2e/modules/alert_spec.js

@@ -11,7 +11,7 @@ describe("Alert module", () => {
 
 	it("should show the welcome message", async () => {
 		const elem = await helpers.waitForElement(".ns-box .ns-box-inner .light.bright.small");
-		expect(elem).not.toBe(null);
+		expect(elem).not.toBeNull();
 		expect(elem.textContent).toContain("Welcome, start was successful!");
 	});
 });

tests/e2e/modules/calendar_spec.js

@@ -2,25 +2,29 @@ const helpers = require("../helpers/global-setup");
 const serverBasicAuth = require("../helpers/basic-auth");
 
 describe("Calendar module", () => {
+
 	/**
 	 * @param {string} element css selector
 	 * @param {string} result expected number
 	 * @param {string} not reverse result
+	 * @returns {boolean} result
 	 */
 	const testElementLength = async (element, result, not) => {
 		const elem = await helpers.waitForAllElements(element);
-		expect(elem).not.toBe(null);
+		expect(elem).not.toBeNull();
 		if (not === "not") {
-			expect(elem.length).not.toBe(result);
+			expect(elem).not.toHaveLength(result);
 		} else {
-			expect(elem.length).toBe(result);
+			expect(elem).toHaveLength(result);
 		}
+		return true;
 	};
 
 	const testTextContain = async (element, text) => {
 		const elem = await helpers.waitForElement(element, "undefinedLoading");
-		expect(elem).not.toBe(null);
+		expect(elem).not.toBeNull();
 		expect(elem.textContent).toContain(text);
+		return true;
 	};
 
 	afterAll(async () => {
@@ -34,11 +38,11 @@ describe("Calendar module", () => {
 		});
 
 		it("should show the default maximumEntries of 10", async () => {
-			await testElementLength(".calendar .event", 10);
+			await expect(testElementLength(".calendar .event", 10)).resolves.toBe(true);
 		});
 
 		it("should show the default calendar symbol in each event", async () => {
-			await testElementLength(".calendar .event .fa-calendar-alt", 0, "not");
+			await expect(testElementLength(".calendar .event .fa-calendar-alt", 0, "not")).resolves.toBe(true);
 		});
 	});
 
@@ -49,23 +53,27 @@ describe("Calendar module", () => {
 		});
 
 		it("should show the custom maximumEntries of 5", async () => {
-			await testElementLength(".calendar .event", 5);
+			await expect(testElementLength(".calendar .event", 5)).resolves.toBe(true);
 		});
 
 		it("should show the custom calendar symbol in four events", async () => {
-			await testElementLength(".calendar .event .fa-birthday-cake", 4);
+			await expect(testElementLength(".calendar .event .fa-birthday-cake", 4)).resolves.toBe(true);
 		});
 
 		it("should show a customEvent calendar symbol in one event", async () => {
-			await testElementLength(".calendar .event .fa-dice", 1);
+			await expect(testElementLength(".calendar .event .fa-dice", 1)).resolves.toBe(true);
+		});
+
+		it("should show a customEvent calendar eventClass in one event", async () => {
+			await expect(testElementLength(".calendar .event.undo", 1)).resolves.toBe(true);
 		});
 
 		it("should show two custom icons for repeating events", async () => {
-			await testElementLength(".calendar .event .fa-undo", 2);
+			await expect(testElementLength(".calendar .event .fa-undo", 2)).resolves.toBe(true);
 		});
 
 		it("should show two custom icons for day events", async () => {
-			await testElementLength(".calendar .event .fa-calendar-day", 2);
+			await expect(testElementLength(".calendar .event .fa-calendar-day", 2)).resolves.toBe(true);
 		});
 	});
 
@@ -76,7 +84,18 @@ describe("Calendar module", () => {
 		});
 
 		it("should show the recurring birthday event 6 times", async () => {
-			await testElementLength(".calendar .event", 6);
+			await expect(testElementLength(".calendar .event", 6)).resolves.toBe(true);
+		});
+	});
+
+	describe("Events from multiple calendars", () => {
+		beforeAll(async () => {
+			await helpers.startApplication("tests/configs/modules/calendar/show-duplicates-in-calendar.js");
+			await helpers.getDocument();
+		});
+
+		it("should show multiple events with the same title and start time from different calendars", async () => {
+			await expect(testElementLength(".calendar .event", 22)).resolves.toBe(true);
 		});
 	});
 
@@ -92,7 +111,7 @@ describe("Calendar module", () => {
 			});
 
 			it(`should contain text "Mar 25th" in timezone UTC ${-i}`, async () => {
-				await testTextContain(".calendar", "Mar 25th");
+				await expect(testTextContain(".calendar", "Mar 25th")).resolves.toBe(true);
 			});
 		});
 	}
@@ -109,7 +128,7 @@ describe("Calendar module", () => {
 		});
 
 		it("should return TestEvents", async () => {
-			await testElementLength(".calendar .event", 0, "not");
+			await expect(testElementLength(".calendar .event", 0, "not")).resolves.toBe(true);
 		});
 	});
 
@@ -120,7 +139,7 @@ describe("Calendar module", () => {
 		});
 
 		it("should return TestEvents", async () => {
-			await testElementLength(".calendar .event", 0, "not");
+			await expect(testElementLength(".calendar .event", 0, "not")).resolves.toBe(true);
 		});
 	});
 
@@ -131,7 +150,7 @@ describe("Calendar module", () => {
 		});
 
 		it("should return TestEvents", async () => {
-			await testElementLength(".calendar .event", 0, "not");
+			await expect(testElementLength(".calendar .event", 0, "not")).resolves.toBe(true);
 		});
 	});
 
@@ -142,7 +161,7 @@ describe("Calendar module", () => {
 		});
 
 		it("should return TestEvents", async () => {
-			await testElementLength(".calendar .event", 0, "not");
+			await expect(testElementLength(".calendar .event", 0, "not")).resolves.toBe(true);
 		});
 	});
 
@@ -158,7 +177,7 @@ describe("Calendar module", () => {
 		});
 
 		it("should show Unauthorized error", async () => {
-			await testTextContain(".calendar", "Error in the calendar module. Authorization failed");
+			await expect(testTextContain(".calendar", "Error in the calendar module. Authorization failed")).resolves.toBe(true);
 		});
 	});
 });