Merge branch 'dev'

src/views/playlist.vue

@@ -545,28 +545,6 @@ export default {
   }
 }
 
-@media (max-width: 600px) {
-  .playlist-info {
-    width: calc(100vw - 2 * var(--main-content-padding-x));
-    display: block;
-
-    .cover {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .info {
-      margin-top: 24px;
-      margin-left: 0;
-
-      .title {
-        font-size: 48px;
-      }
-    }
-  }
-}
-
 .special-playlist {
   margin-top: 192px;
   margin-bottom: 128px;

src/views/settings.vue

@@ -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" });