[connect] Initial Implementation

src/main/base/app.ts

@@ -167,6 +167,9 @@ export class AppEvents {
                 utils.getWindow().webContents.send('LastfmAuthenticated', authKey);
                 this.plugin.callPlugin('lastfm', 'authenticate', authKey);
             }
+        } else if (arg.includes("callback/discord?oauth=")){ // Discord OAuth [Connect]
+            utils.setStoreValue('connectUser', JSON.parse(arg.split("callback/discord?oauth=")[1]));
+            utils.getWindow().webContents.executeJavaScript("$root.appRoute('connect-linked')")
         }
         // Play
         else if (arg.includes('/play/')) { //Steer away from protocol:// specific conditionals

src/main/base/browserwindow.ts

@@ -413,7 +413,7 @@ export class BrowserWindow {
                 console.error('Req not defined')
                 return
             }
-            if (req.url.includes("api") || req.url.includes("audio.wav") || (req.headers.host.includes("localhost") && (this.devMode || req.headers["user-agent"].includes("Electron")))) {
+            if (req.url.includes("api") || req.url.includes("audio.wav") || (req.headers.host.includes("localhost") && (this.devMode || req.headers["user-agent"].includes("Electron")) || req.url.includes("/connect"))) {
                 next();
             } else {
                 res.redirect("https://discord.gg/applemusic");
@@ -526,6 +526,10 @@ export class BrowserWindow {
                 console.log(ex);
             }
         });
+        
+        app.get("/connect/get-user", (req, res) => {
+            res.send(utils.getStoreValue('connectUser')); // [Connect] Session redirect for webview
+        });
         //app.use(express.static())
 
         app.listen(this.clientPort, () => {
@@ -1088,12 +1092,13 @@ export class BrowserWindow {
         });
 
         //QR Code
-        ipcMain.handle('showQR', async (_event, _) => {
+        ipcMain.handle('showQR', async (_event, _) => { //macOS
             let url = `http://${BrowserWindow.getIP()}:${this.remotePort}`;
-            shell.openExternal(`https://cider.sh/remote/pair?url=${Buffer.from(encodeURI(url)).toString('base64')}`).catch(console.error);
+            BrowserWindow.win.webContents.send('send-remote-pair-url', (`https://cider.sh/remote/pair?url=${Buffer.from(encodeURI(url)).toString('base64')}`).toString());
+
         });
 
-        ipcMain.on('get-remote-pair-url', (_event, _) => {
+        ipcMain.on('get-remote-pair-url', (_event, _) => { // Linux and Windows
             let url = `http://${BrowserWindow.getIP()}:${this.remotePort}`;
             //if (app.isPackaged) {
             BrowserWindow.win.webContents.send('send-remote-pair-url', (`https://cider.sh/remote/pair?url=${Buffer.from(encodeURI(url)).toString('base64')}`).toString());
@@ -1102,7 +1107,7 @@ export class BrowserWindow {
             //}
 
         });
-        if (process.platform === "darwin") {
+        if (process.platform === "darwin") { //macOS
             app.setUserActivity('com.CiderCollective.remote.pair', {
                 ip: `${BrowserWindow.getIP()}`
             }, `http://${BrowserWindow.getIP()}:${this.remotePort}`);

src/renderer/views/pages/connect-linked.ejs

@@ -0,0 +1,18 @@
+<template v-if="page == 'connect-linked'">
+    <div style="display:flex;width:100%;height:100%">
+        <webview id="foo" :src="https://connect.cidercollective.dev/linked.html" nodeintegration="true" style="display:inline-flex; width:100%;"></webview>
+    </div>
+</template>
+<script>
+    Vue.component('connect-linked', {
+        template: '#connect-linked',
+        mounted() {
+            document.querySelector("#foo").addEventListener("dom-ready", ()=>{
+
+            })
+        },
+        methods: {
+
+        }
+    });
+</script>

src/renderer/views/pages/settings.ejs

@@ -976,6 +976,18 @@
                     </div>
                 </div>
             </b-tab>
+            <b-tab :title="$root.getLz('settings.header.lyrics')">
+                <div class="md-option-container">
+                    <!-- Lyric Settings -->
+                    <div class="md-option-header">
+                        <span>{{$root.getLz('settings.header.connect')}}</span>
+                    </div>
+                    <div class="settings-option-body">
+                        <webview url="https://connect.cidercollective.dev/callback/app"></webview>
+                        </div>
+                    </div>
+                </div>
+            </b-tab>
         </b-tabs>
     </div>
 </script>