orchard/src/renderer/views/components/castmenu.ejs

<script type="text/x-template" id="castmenu">
<div class="spatialproperties-panel castmenu modal-fullscreen" @click.self="close()" @contextmenu.self="close()">
    <div class="modal-window">
        <div class="modal-header">
            <div class="modal-title">{{$root.getLz('action.cast.todevices')}}</div>
            <button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
        </div>
    <div class="modal-content" style="overflow-y: overlay; padding: 3%">
        <div class="md-labeltext">{{$root.getLz('action.cast.chromecast')}}</div>
        <div class="md-option-container" style="margin-top: 12px;margin-bottom: 12px;overflow-y: scroll;">
            <template v-if="!scanning">
                <template v-for="(device) in devices.cast">
                    <div class="md-option-line" style="cursor: pointer" @click="setCast(device)">
                        <div class="md-option-segment">
                            {{ device.name }}
                            <br>
                            <small>{{ device.host }}</small>
                        </div>
                        <div class="md-option-segment_auto" style="display: flex;justify-content: center;align-items: center" v-if="activeCasts.includes(device)">
                            Connected
                        </div>
                        <div class="md-option-segment_auto" v-else style="display: flex;justify-content: center;align-items: center">
                            <svg width="20" height="20" viewBox="0 0 34 34" fill="#fff" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="castPlayIndicator"><path d="M28.228,18.327l-16.023,8.983c-0.99,0.555 -2.205,-0.17 -2.205,-1.318l0,-17.984c0,-1.146 1.215,-1.873 2.205,-1.317l16.023,8.982c1.029,0.577 1.029,2.077 0,2.654Z" style="fill-rule:nonzero"></path></svg>
                        </div>
                    </div>
                </template>
            </template>
            <template v-else>
                <div class="md-option-line" style="cursor: pointer">
                    <div class="md-option-segment">
                        {{$root.getLz('action.cast.scanning')}}
                    </div>
                </div>
            </template>
        </div>
        <div class="md-labeltext" >{{$root.getLz('action.cast.airplay')}}</div>
        <div class="md-option-container" style="margin-top: 12px;margin-bottom: 12px;overflow-y: scroll;">
            <div class="md-option-line">
                <div class="md-option-segment">
                    {{'EXPERIMENTAL!!! Supports Homepods / Apple TVs / Shairport for now, AirPlay on Samsung/LG/Sony devices will be added later'}}
                    <!-- {{$root.getLz('action.cast.airplay.underdevelopment')}} -->
                    <template v-if="true" v-for="(device) in devices.airplay">
                        <div class="md-option-line" style="cursor: pointer" @click="setAirPlayCast(device)">
                            <div class="md-option-segment">
                                {{ device.name }}
                                <br>
                                <small>{{ device.host }}</small>
                            </div>
                            <div class="md-option-segment_auto" style="display: flex;justify-content: center;align-items: center" v-if="activeCasts.includes(device)">
                                Connected
                            </div>
                            <div class="md-option-segment_auto" v-else style="display: flex;justify-content: center;align-items: center">
                                <svg width="20" height="20" viewBox="0 0 34 34" fill="#fff" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="castPlayIndicator"><path d="M28.228,18.327l-16.023,8.983c-0.99,0.555 -2.205,-0.17 -2.205,-1.318l0,-17.984c0,-1.146 1.215,-1.873 2.205,-1.317l16.023,8.982c1.029,0.577 1.029,2.077 0,2.654Z" style="fill-rule:nonzero"></path></svg>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
    <div class="md-footer">
        <div class="row">
            <div class="col" v-if="activeCasts.length != 0">
                <button style="width:100%" @click="stopCasting()" class="md-btn md-btn-block md-btn-primary">{{$root.getLz('action.cast.stop')}}</button>
            </div>
            <div class="col">
                <button style="width:100%" class="md-btn md-btn-block" @click="scan()">{{$root.getLz('action.cast.scan')}}</button>
            </div>
        </div>
    </div>
</div>
</div>
</script>
<script>
    Vue.component('castmenu', {
        template: '#castmenu',
        data: function () {
            return {
                devices: {
                    cast: [],
                    airplay: []
                },
                scanning: false,
                activeCasts: this.$root.activeCasts,

            }
        },
        mounted() {
            this.scan();
        },
        watch:{
            activeCasts: function (newVal, oldVal) {
                this.$root.activeCasts = this.activeCasts;
            }},
        methods: {
            close() {
                this.$root.modals.castMenu = false
            },
            scan() {
                let self = this;
                this.scanning = true;
                ipcRenderer.send('getChromeCastDevices', '');
                ipcRenderer.send("getAirplayDevice","")
                setTimeout(() => {
                  self.devices.cast = ipcRenderer.sendSync("getKnownCastDevices");
                  self.devices.airplay = ipcRenderer.sendSync("getKnownAirplayDevices");
                  self.scanning = false;
                }, 2000);
                console.log(this.devices);
                // vm.$forceUpdate();
            },
            setCast(device) {
                CiderAudio.sendAudio();
                this.activeCasts.push(device);
                ipcRenderer.send('performGCCast', device, "Cider", "Playing ...", "Test build", '');
            },
            setAirPlayCast(device) {
                this.activeCasts.push(device);
                ipcRenderer.send("performAirplayPCM",device.host,device.port,null,"","","","",device.txt)
            },
            stopCasting() {
                CiderAudio.stopAudio();
                ipcRenderer.send('disconnectAirplay', '');
                ipcRenderer.send('stopGCast', '');
                this.activeCasts = [];
                // vm.$forceUpdate();
            },
        }
    });
</script>