qrcode

package.json

@@ -39,6 +39,7 @@
     "lastfmapi": "^0.1.1",
     "mpris-service": "^2.1.2",
     "music-metadata": "^7.11.4",
+    "qrcode": "^1.5.0",
     "qrcode-terminal": "^0.12.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/main/base/win.ts

@@ -8,6 +8,7 @@ import * as yt from "youtube-search-without-api-key";
 import * as fs from "fs";
 import { Stream } from "stream";
 import * as qrcode from "qrcode-terminal";
+import * as qrcode2 from "qrcode";
 import * as os from "os";
 import {wsapi} from "./wsapi";
 
@@ -400,6 +401,35 @@ export class Win {
             this.win.setFullScreen(flag)
         })
 
+        function getIp() {
+            let ip = false;
+            let alias = 0;
+            let ifaces = os.networkInterfaces();
+            for (var dev in ifaces) {
+                ifaces[dev].forEach(details => {
+                    if (details.family === 'IPv4') {
+                        if (!/(loopback|vmware|internal|hamachi|vboxnet|virtualbox)/gi.test(dev + (alias ? ':' + alias : ''))) {
+                            if (details.address.substring(0, 8) === '192.168.' ||
+                                details.address.substring(0, 7) === '172.16.' ||
+                                details.address.substring(0, 3) === '10.'
+                            ) {
+                                ip = details.address;
+                                ++alias;
+                            }
+                        }
+                    }
+                });
+            }
+            return ip;
+        }
+
+        //QR Code
+        electron.ipcMain.handle('setRemoteQR', async (event , _) => {
+           let url = await qrcode2.toDataURL(`http://${getIp()}:${this.remotePort}`)
+           console.log(url)
+           return url;              
+        })
+
         /* *********************************************************************************************
          * Window Events
          * **********************************************************************************************/

src/renderer/index.js

@@ -231,6 +231,7 @@ const app = new Vue({
             loadingState: 0, // 0 loading, 1 loaded, 2 error
             id: ""
         },
+        webremoteqr: "",
         mxmtoken: "",
         mkIsReady: false,
         playerReady: false,
@@ -291,7 +292,8 @@ const app = new Vue({
         musicBaseUrl: "https://api.music.apple.com/",
         modals: {
             addToPlaylist: false,
-            spatialProperties: false
+            spatialProperties: false,
+            qrcode: false
         },
         socialBadges: {
             badgeMap: {},
@@ -3288,11 +3290,15 @@ const app = new Vue({
         },
         isElementOverflowing(selector) {
             try{
-            let element = document.querySelector(selector);
+                let element = document.querySelector(selector);
-            var overflowX = element.offsetWidth < element.scrollWidth,
+                var overflowX = element.offsetWidth < element.scrollWidth,
-              overflowY = element.offsetHeight < element.scrollHeight;
+                overflowY = element.offsetHeight < element.scrollHeight;
           
             return (overflowX || overflowY); } catch (e) { return false}
+        },
+        async showWebRemoteQR(){
+           this.webremoteqr = await ipcRenderer.invoke('setRemoteQR','')
+           this.modals.qrcode = true;
         }
 
     }

src/renderer/style.less

@@ -5160,4 +5160,12 @@ body.no-gpu {
   }
 }
 
+.qrimg {
+  width: -webkit-fill-available;
+  max-block-size: -webkit-fill-available;
+  object-fit: contain;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
 @import url("less/compact.less");

src/renderer/views/components/qrcode-modal.ejs

@@ -0,0 +1,34 @@
+<script type="text/x-template" id="qrcode-modal">
+    <div class="modal-fullscreen spatialproperties-panel">
+        <div class="modal-window" >
+            <div class="modal-header">
+                <div class="modal-title">Web Remote QR</div>
+                <button class="close-btn" @click="close()"></button>
+            </div>
+            <div class="modal-content">
+                <img class="qrimg" :src="src"/> 
+            </div>    
+        </div>
+    </div>
+</script>
+
+<script>
+    Vue.component('qrcode-modal', {
+        template: '#qrcode-modal',
+        data: function () {
+            return {
+                app: this.$root,
+              
+            }
+        },
+        props: ["src"],
+        mounted() {
+         
+        },
+        methods: {
+            close() {
+                app.resetState()
+            },
+        }
+    });
+</script>

src/renderer/views/main.ejs

@@ -231,6 +231,13 @@
                     <transition name="wpfade">
                         <div class="usermenu-container" v-if="chrome.menuOpened">
                             <div class="usermenu-body">
+                                <button class="usermenu-item" @click="showWebRemoteQR()">
+                                    <div class="row nopadding">
+                                        <div class="col nopadding">
+                                            Show Web Remote QR
+                                        </div>
+                                    </div>
+                                </button>
                                 <button class="usermenu-item" @click="toggleHideUserInfo()">
                                     <div class="row nopadding">
                                         <div class="col nopadding">
@@ -601,6 +608,9 @@
     <transition name="modal">
         <spatial-properties v-if="modals.spatialProperties"></spatial-properties>
     </transition>
+    <transition name="modal">
+        <qrcode-modal v-if="modals.qrcode" :src="webremoteqr"></qrcode-modal>
+    </transition>
     <div id="apple-music-video-container">
         <div id="apple-music-video-player-controls">
             <div id="player-exit" title="Close" @click="exitMV()">
@@ -704,7 +714,10 @@
 <%- include('components/sidebar-playlist')
 %>
 <!-- Spatial Properties -->
-<%- include('components/spatial-properties')
+<%- include('components/spatial-properties') 
+%>
+<!-- QRCode Modal -->
+<%- include('components/qrcode-modal') 
 %>
 <!-- Add to playlist -->
 <%- include('components/add-to-playlist')