feat: add hostname option to show a hostname instead of the IP address

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,

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

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"

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)
+  })
 })