173 lines
9.9 KiB
Text
173 lines
9.9 KiB
Text
<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"
|
|
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 and may work on some Samsung/LG/Sony devices. Please set your device access in the Home app to "Everyone" or "Anyone on the same network".
|
|
<!-- {{$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" @click="disconnectAirPlayCast(device)"
|
|
v-if="activeCasts.some(item => { return item.host == device.host && item.name == device.name && item.port == device.port})">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" version="1.1">
|
|
<g id="surface1">
|
|
<path style="stroke:none;fill-rule:evenodd;fill:#fff;fill-opacity:1;" d="M 10 0 C 15.523438 0 20 4.476562 20 10 C 20 15.523438 15.523438 20 10 20 C 4.476562 20 0 15.523438 0 10 C 0 4.476562 4.476562 0 10 0 Z M 12.136719 5.988281 C 12.421875 5.703125 12.597656 5.472656 12.953125 5.828125 L 14.089844 6.988281 C 14.464844 7.355469 14.445312 7.570312 14.089844 7.914062 L 11.933594 10.0625 L 14.011719 12.136719 C 14.296875 12.421875 14.527344 12.597656 14.171875 12.953125 L 13.011719 14.089844 C 12.644531 14.464844 12.429688 14.445312 12.089844 14.089844 L 10 12 L 7.914062 14.082031 C 7.574219 14.433594 7.359375 14.453125 6.992188 14.082031 L 5.828125 12.945312 C 5.472656 12.59375 5.703125 12.417969 5.992188 12.128906 L 8.066406 10.0625 L 5.917969 7.917969 C 5.566406 7.574219 5.546875 7.359375 5.917969 6.992188 L 7.054688 5.828125 C 7.40625 5.472656 7.582031 5.703125 7.871094 5.992188 L 10 8.128906 Z M 12.136719 5.988281 "/>
|
|
</g>
|
|
</svg>
|
|
</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"
|
|
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) {
|
|
if (!this.activeCasts.some(item => { return item.host == device.host && item.name == device.name && item.port == device.port})) {
|
|
this.activeCasts.push(device);
|
|
ipcRenderer.send("performAirplayPCM", device.host, device.port, null, "", "", "", "", device.txt, device.airplay2, false)}
|
|
},
|
|
disconnectAirPlayCast(device) {
|
|
app.confirm("Do you want to disconnect this device?",(res) => {
|
|
if (res){
|
|
ipcRenderer.send('disconnectAirplay', device.host +":"+ device.port+"ap");
|
|
console.log('disconnectAirplay', device.host +":"+ device.port+"ap")
|
|
let idx = this.activeCasts.findIndex(((a) => {return a.host == device.host && a.port == device.port}))
|
|
console.log(idx)
|
|
if (idx != -1) {
|
|
delete this.activeCasts[idx]
|
|
delete this.$root.activeCasts[idx]
|
|
this.activeCasts = this.activeCasts.filter(a => {return !(a.host == device.host && a.port == device.port)})
|
|
console.log(this.activeCasts)
|
|
if (this.activeCasts.length == 0){
|
|
this.stopCasting()
|
|
}
|
|
}}
|
|
})
|
|
},
|
|
stopCasting() {
|
|
CiderAudio.stopAudio();
|
|
ipcRenderer.send('disconnectAirplay', '');
|
|
ipcRenderer.send('stopGCast', '');
|
|
this.activeCasts = [];
|
|
// vm.$forceUpdate();
|
|
},
|
|
}
|
|
});
|
|
</script>
|