diff --git a/MMM-Remote-Control.js b/MMM-Remote-Control.js index 1ef8c7e..3eccbe9 100644 --- a/MMM-Remote-Control.js +++ b/MMM-Remote-Control.js @@ -21,6 +21,7 @@ Module.register('MMM-Remote-Control', { showQRCode: true, qrCodeSize: 150, qrCodePosition: 'above', // "below", "above", or "replace" + hostname: '', // Hostname to show instead of the IP address (e.g. "mirror.local") }, // Define start sequence. @@ -83,6 +84,10 @@ Module.register('MMM-Remote-Control', { break case 'IP_ADDRESSES': + // A different address changes the URL, so the QR code has to be generated again + if (payload.join(',') !== this.addresses.join(',')) { + this.qrCodeDataUrl = null + } this.addresses = payload if (this.data.position) { this.updateDom() @@ -301,16 +306,14 @@ Module.register('MMM-Remote-Control', { getDom() { const wrapper = document.createElement('div') let portToShow - if (this.addresses.length === 0) { - this.addresses = ['ip-of-your-mirror'] - } + const host = this.config.hostname || this.addresses[0] switch (this.port) { case '': case '8080': portToShow = ':8080'; break case '80': portToShow = ''; break default: portToShow = `:${this.port}`; break } - const url = `http://${this.addresses[0]}${portToShow}/remote.html` + const url = `http://${host ?? 'ip-of-your-mirror'}${portToShow}/remote.html` // Show QR code if enabled if (this.config.showQRCode) { @@ -327,8 +330,8 @@ Module.register('MMM-Remote-Control', { } } - // Request QR code generation if not already done - if (!this.qrCodeDataUrl) { + // Request QR code generation if not already done (not for the placeholder before the address is known) + if (host && !this.qrCodeDataUrl) { this.sendSocketNotification('GENERATE_QR_CODE', { url, size: this.config.qrCodeSize, diff --git a/README.md b/README.md index 3654299..0fe585a 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,8 @@ Add the module to the `modules` array in your `config.js`. Set a `position` to d // showNotificationMenu: false, // Disable the Notification menu // showQRCode: true, // Display a QR code for mobile access (default: true) // qrCodeSize: 150, // QR code size in pixels (default: 150) - // qrCodePosition: "above" // "below", "above" (default), or "replace" + // qrCodePosition: "above", // "below", "above" (default), or "replace" + // hostname: "mirror.local", // Hostname to show instead of the IP address in the URL and QR code (default: "" = IP address) } }, ``` diff --git a/config.schema.json b/config.schema.json index 8af4c4e..9ae477a 100644 --- a/config.schema.json +++ b/config.schema.json @@ -34,6 +34,10 @@ "enum": ["below", "above", "replace"], "description": "Place the QR code below or above the URL, or show it instead" }, + "hostname": { + "type": "string", + "description": "Hostname to show instead of the IP address in the URL and QR code (e.g. mirror.local), empty to show the IP address" + }, "secureEndpoints": { "type": "boolean", "description": "Require an API key for protected endpoints when enabled" diff --git a/tests/dom/MMM-Remote-Control.test.js b/tests/dom/MMM-Remote-Control.test.js index 2f9175f..bc79984 100644 --- a/tests/dom/MMM-Remote-Control.test.js +++ b/tests/dom/MMM-Remote-Control.test.js @@ -106,4 +106,36 @@ describe('MMM-Remote-Control.js module', () => { }, payload) }) }) + + const getDom = (config, addresses) => { + const notifications = [] + const wrapper = Module.getDom.call({ + config: { showQRCode: true, qrCodeSize: 150, qrCodePosition: 'above', hostname: '', ...config }, + addresses, + port: '', + qrCodeDataUrl: null, + sendSocketNotification: (notification, payload) => { + notifications.push({ notification, payload }) + }, + }) + return { wrapper, notifications } + } + + test('getDom shows the IP address when no hostname is configured', () => { + const { wrapper, notifications } = getDom({}, ['192.168.0.7']) + assert.match(wrapper.textContent, /http:\/\/192\.168\.0\.7:8080\/remote\.html/) + assert.equal(notifications[0].payload.url, 'http://192.168.0.7:8080/remote.html') + }) + + test('getDom shows the configured hostname instead of the IP address', () => { + const { wrapper, notifications } = getDom({ hostname: 'mirror.local' }, ['192.168.0.7']) + assert.match(wrapper.textContent, /http:\/\/mirror\.local:8080\/remote\.html/) + assert.equal(notifications[0].payload.url, 'http://mirror.local:8080/remote.html') + }) + + test('getDom does not request a QR code for the placeholder address', () => { + const { wrapper, notifications } = getDom({}, []) + assert.match(wrapper.textContent, /ip-of-your-mirror/) + assert.equal(notifications.length, 0) + }) })