add output device switching

src/utils/Player.js

@@ -156,11 +156,11 @@ export default class {
     Howler.masterGain.disconnect();
     const mediaStreamNode = Howler.ctx.createMediaStreamDestination();
     Howler.masterGain.connect(mediaStreamNode);
-    let audio = '';
-    if (document.querySelector('audio') !== null) {
-      audio = document.querySelector('audio');
+    let audio = "";
+    if (document.querySelector("audio") !== null) {
+      audio = document.querySelector("audio");
     } else {
-      audio = document.createElement('audio');
+      audio = document.createElement("audio");
       document.body.append(audio);
     }
     audio.autoplay = true;

src/views/playlist.vue

@@ -345,10 +345,19 @@ export default {
       );
     },
     filteredTracks() {
-      return this.tracks.filter(song =>
-          song.name.toLowerCase().includes(this.playlistKeyword.toLowerCase()) ||
-          song.al.name.toLowerCase().includes(this.playlistKeyword.toLowerCase()) ||
-          song.ar.find(artist => artist.name.toLowerCase().includes(this.playlistKeyword.toLowerCase()))
+      return this.tracks.filter(
+        (song) =>
+          song.name
+            .toLowerCase()
+            .includes(this.playlistKeyword.toLowerCase()) ||
+          song.al.name
+            .toLowerCase()
+            .includes(this.playlistKeyword.toLowerCase()) ||
+          song.ar.find((artist) =>
+            artist.name
+              .toLowerCase()
+              .includes(this.playlistKeyword.toLowerCase())
+          )
       );
     },
   },
@@ -397,7 +406,11 @@ export default {
           this.lastLoadedTrackIndex = data.playlist.tracks.length - 1;
           if (this.playlist.trackCount > this.tracks.length) {
             window.addEventListener("scroll", this.handleScroll, true);
-            window.addEventListener("input", this.handleSearch, this.playlistKeyword);
+            window.addEventListener(
+              "input",
+              this.handleSearch,
+              this.playlistKeyword
+            );
           }
           return data;
         })

src/views/settings.vue

@@ -80,7 +80,12 @@
         </div>
         <div class="right">
           <select v-model="outputDevice">
-            <option v-for="device in allOutputDevices" :key="device.deviceId" :value="device.deviceId" :selected="device.deviceId == outputDevice">
+            <option
+              v-for="device in allOutputDevices"
+              :key="device.deviceId"
+              :value="device.deviceId"
+              :selected="device.deviceId == outputDevice"
+            >
               {{ device.label }}
             </option>
           </select>
@@ -286,12 +291,19 @@ export default {
     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
+        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;
+        if (deviceId === this.settings.outputDevice || deviceId === undefined)
+          return;
         this.$store.commit("changeOutputDevice", deviceId);
         document.querySelector("audio").setSinkId(deviceId); // Change output device
       },
@@ -383,9 +395,14 @@ export default {
   },
   methods: {
     getAllOutputDevices() {
-      return navigator.mediaDevices.enumerateDevices().then(
-        devices => this.allOutputDevices = devices.filter(device => device.kind == "audiooutput")
-      );
+      return navigator.mediaDevices
+        .enumerateDevices()
+        .then(
+          (devices) =>
+            (this.allOutputDevices = devices.filter(
+              (device) => device.kind == "audiooutput"
+            ))
+        );
     },
     logout() {
       doLogout();