uptest

package.json

@@ -39,7 +39,7 @@
     "@sentry/electron": "^3.0.7",
     "@sentry/integrations": "^6.19.6",
     "adm-zip": "0.4.10",
-    "airtunes2": "git+https://github.com/vapormusic/node_airtunes2.git",
+    "airtunes2": "git+https://github.com/vapormusic/node_airtunes2.git#hap",
     "castv2-client": "^1.2.0",
     "chokidar": "^3.5.3",
     "discord-rpc": "^4.0.1",

src/main/base/browserwindow.ts

@@ -95,6 +95,7 @@ export class BrowserWindow {
                 "components/fullscreen",
                 "components/miniplayer",
                 "components/castmenu",
+                "components/airplay-modal",
                 "components/artist-chip",
                 "components/hello-world",
                 "components/inline-collection-list",

src/main/plugins/raop.ts

@@ -178,6 +178,12 @@ export default class RAOP {
                         this._win.webContents.setAudioMuted(true);
                         this._win.webContents.executeJavaScript(`CiderAudio.sendAudio()`).catch((err: any) => console.error(err));
                     }
+                    if (status == "need_password"){
+                        this._win.webContents.executeJavaScript(`app.setAirPlayCodeUI()`)
+                    }
+                    if (status == "pair_success"){
+                        this._win.webContents.executeJavaScript(`app.sendAirPlaySuccess()`)
+                    }
                     if (status == 'stopped') {
                         this.airtunes.stopAll(() => {
                             console.log('end');
@@ -210,6 +216,12 @@ export default class RAOP {
 
         });
 
+        electron.ipcMain.on('setAirPlayPasscode', (event, passcode) => {
+            if (this.device){
+                this.device.setPasscode(passcode)
+            }
+        })
+
         electron.ipcMain.on('writeWAV', (event, leftbuffer, rightbuffer) => {
             if (this.airtunes != null) {
                 if (this.worker == null) {

src/renderer/less/helpers.less

@@ -70,10 +70,11 @@
 
 .spatialproperties-panel {
   .modal-window {
+    &:not(.airplay-modal){
     height    : 700px;
     max-height: 700px;
     width     : 800px;
-    max-width : 800px;
+    max-width : 800px;}
     overflow  : hidden;
 
     .info-header {

src/renderer/main/vueapp.js

@@ -207,6 +207,7 @@ const app = new Vue({
             showPlaylist: false,
             castMenu: false,
             moreInfo: false,
+            airplayPW: false,
         },
         socialBadges: {
             badgeMap: {},
@@ -3836,6 +3837,12 @@ const app = new Vue({
 
             // tracks are found in relationship.data
         },
+        setAirPlayCodeUI() {
+            this.modals.airplayPW = true
+        },
+        sendAirPlaySuccess(){
+            notyf.success('Device paired successfully!');
+        },
         windowFocus(val) {
             if (val) {
                 document.querySelectorAll(".animated-artwork-video").forEach(el => {

src/renderer/views/app/panels.ejs

@@ -28,6 +28,9 @@
 <transition name="modal">
     <castmenu v-if="modals.castMenu"></castmenu>
 </transition>
+<transition name="modal">
+    <airplay-modal v-if="modals.airplayPW"></airplay-modal>
+</transition>
 <transition name="modal">
     <plugin-menu v-if="modals.pluginMenu"></plugin-menu>
 </transition>

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

@@ -0,0 +1,42 @@
+<script type="text/x-template" id="airplay-modal">
+<div class="spatialproperties-panel castmenu modal-fullscreen airplay-modal" @click.self="close()" @contextmenu.self="close()">
+    <div class="modal-window airplay-modal">
+        <div class="modal-header">
+            <div class="modal-title">{{'Enter password'}}</div>
+            <button class="close-btn" @click="close()"></button>
+        </div>
+    <div class="modal-content" style="overflow-y: overlay; padding: 3%">
+        <input type="text" v-model="passcode"/>
+    </div>
+    <div class="md-footer">
+        <div class="row">
+            <div class="col" >
+                <button style="width:100%" @click="enterPassword()" class="md-btn md-btn-block md-btn-primary">{{'OK'}}</button>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+</script>
+<script>
+    Vue.component('airplay-modal', {
+        template: '#airplay-modal',
+        data: function () {
+            return {
+                passcode: '',
+            }
+        },
+        mounted() {
+        },
+        methods: {
+            close() {
+                this.$root.modals.airplayPW = false
+            },
+            enterPassword() {
+                console.log('Entered passCode: ', this.passcode)
+                ipcRenderer.send("setAirPlayPasscode",this.passcode)
+                this.close()
+            }
+        }
+    });
+</script>