add output device switching

This commit is contained in:
Vidocq 2021-02-24 03:07:34 +08:00
parent bcc1b1e72e
commit 8a30558ac1
7 changed files with 95 additions and 41 deletions

View file

@ -74,6 +74,18 @@
</select>
</div>
</div>
<div class="item">
<div class="left">
<div class="title"> {{ $t("settings.deviceSelector") }} </div>
</div>
<div class="right">
<select v-model="outputDevice">
<option v-for="device in allOutputDevices" :key="device.deviceId" :value="device.deviceId" :selected="device.deviceId == outputDevice">
{{ device.label }}
</option>
</select>
</div>
</div>
<div class="item">
<div class="left">
<div class="title">
@ -227,6 +239,7 @@ export default {
size: "0KB",
length: 0,
},
allOutputDevices: [],
};
},
computed: {
@ -270,6 +283,19 @@ export default {
this.clearCache("tracks");
},
},
outputDevice: {
get() {
if (this.allOutputDevices.length == 0) this.getAllOutputDevices(); // Ensure devices loaded before get
const isValidDevice = this.allOutputDevices.find(device => device.deviceId === this.settings.outputDevice);
if (this.settings.outputDevice === undefined || isValidDevice === undefined) return "default"; // Default deviceId
return this.settings.outputDevice;
},
set(deviceId) {
if (deviceId === this.settings.outputDevice || deviceId === undefined) return;
this.$store.commit("changeOutputDevice", deviceId);
document.querySelector("audio").setSinkId(deviceId); // Change output device
},
},
showGithubIcon: {
get() {
if (this.settings.showGithubIcon === undefined) return true;
@ -356,6 +382,11 @@ export default {
},
},
methods: {
getAllOutputDevices() {
return navigator.mediaDevices.enumerateDevices().then(
devices => this.allOutputDevices = devices.filter(device => device.kind == "audiooutput")
);
},
logout() {
doLogout();
this.$router.push({ name: "home" });