qrcode
This commit is contained in:
vapormusic
parent
0cd8293472
commit
e1f9b966da
6 changed files with 97 additions and 5 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
* **********************************************************************************************/
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
var overflowX = element.offsetWidth < element.scrollWidth,
|
||||
overflowY = element.offsetHeight < element.scrollHeight;
|
||||
let element = document.querySelector(selector);
|
||||
var overflowX = element.offsetWidth < element.scrollWidth,
|
||||
overflowY = element.offsetHeight < element.scrollHeight;
|
||||
|
||||
return (overflowX || overflowY); } catch (e) { return false}
|
||||
},
|
||||
async showWebRemoteQR(){
|
||||
this.webremoteqr = await ipcRenderer.invoke('setRemoteQR','')
|
||||
this.modals.qrcode = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
34
src/renderer/views/components/qrcode-modal.ejs
Normal file
34
src/renderer/views/components/qrcode-modal.ejs
Normal file
|
|
@ -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>
|
||||
|
|
@ -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')
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue