完善音频输出功能

package.json

@@ -51,7 +51,7 @@
     "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-formatter-friendly --fix src"
   },
   "browserslist": [
-    "Electron 8.1.1"
+    "Electron 8.0.1"
   ],
   "engines": {
     "node": ">= 12"

src/renderer/components/core/Icons.vue

@@ -69,5 +69,8 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
     g#icon-down
       // 0 0 451.847 451.847
       path(fill='currentColor' d='M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z')
+    g#icon-refresh
+      // 0 0 512 512
+      path(fill='currentColor' d='M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z')
 </template>
 

src/renderer/components/core/Player.vue

@@ -583,7 +583,7 @@ export default {
       const devices = await navigator.mediaDevices.enumerateDevices()
       let device = devices.find(device => device.deviceId === mediaDeviceId)
       if (!device) return this.setMediaDeviceId('default')
-      console.log(device)
+      // console.log(device)
       this.audio.setSinkId(device.deviceId).catch((err) => {
         console.log(err)
         this.setMediaDeviceId('default')

src/renderer/components/material/Btn.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  button(:class="[$style.btn, min ? $style.min : '']" :disabled="disabled" @click="$emit('click', $event)")
+  button(:class="[$style.btn, min ? $style.min : null]" :disabled="disabled" @click="$emit('click', $event)")
     slot
 </template>
 

src/renderer/components/material/Selection.vue

@@ -1,7 +1,11 @@
 <template lang="pug">
   div(:class="[$style.select, show ? $style.active : '']")
-    div(:class="$style.label" ref="dom_btn" @click="handleShow") {{label}}
+    div(:class="$style.label" ref="dom_btn" @click="handleShow")
-    ul.scroll(:class="$style.list")
+      span {{label}}
+      div(:class="$style.icon")
+        svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve')
+          use(xlink:href='#icon-down')
+    ul.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
       li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
 </template>
 
@@ -28,6 +32,9 @@ export default {
   data() {
     return {
       show: false,
+      listStyles: {
+        transform: 'scaleY(0) translateY(0)',
+      },
     }
   },
   mounted() {
@@ -48,19 +55,31 @@ export default {
   methods: {
     handleHide(e) {
       // if (e && e.target.parentNode != this.$refs.dom_list && this.show) return this.show = false
-      if (e && e.target == this.$refs.dom_btn) return
+      if (e && (e.target == this.$refs.dom_btn || this.$refs.dom_btn.contains(e.target))) return
+      this.listStyles.transform = 'scaleY(0) translateY(0)'
       setTimeout(() => {
         this.show = false
       }, 50)
     },
     handleClick(item) {
-      console.log(this.value)
+      // console.log(this.value)
       if (item === this.value) return
       this.$emit('input', this.itemKey ? item[this.itemKey] : item)
       this.$emit('change', item)
     },
     handleShow() {
-      this.show = !this.show
+      this.show = true
+      this.listStyles.transform = `scaleY(1) translateY(${this.handleGetOffset()}px)`
+    },
+    handleGetOffset() {
+      const listHeight = this.$refs.dom_list.clientHeight
+      const dom_select = this.$refs.dom_list.offsetParent
+      const dom_container = dom_select.offsetParent
+      const containerHeight = dom_container.clientHeight
+      if (containerHeight < listHeight) return 0
+      const offsetHeight = (dom_container.scrollTop + containerHeight) - (dom_select.offsetTop + listHeight)
+      if (offsetHeight > 0) return 0
+      return offsetHeight - 5
     },
   },
 }
@@ -73,6 +92,7 @@ export default {
 @selection-height: 28px;
 
 .select {
+  display: inline-block;
   font-size: 12px;
   position: relative;
   width: 300px;
@@ -82,9 +102,13 @@ export default {
       background-color: @color-btn-background;
     }
     .list {
-      transform: scaleY(1);
       opacity: 1;
     }
+    .icon {
+      svg{
+        transform: rotate(180deg);
+      }
+    }
   }
 }
 
@@ -98,7 +122,22 @@ export default {
   color: @color-btn;
   border-radius: @form-radius;
   cursor: pointer;
-  .mixin-ellipsis-1;
+  display: flex;
+
+  span {
+    flex: auto;
+    .mixin-ellipsis-1;
+  }
+  .icon {
+    flex: none;
+    margin-left: 7px;
+    line-height: 0;
+    svg {
+      width: 1em;
+      transition: transform .2s ease;
+      transform: rotate(0);
+    }
+  }
 
   &:hover {
     background-color: @color-theme_2-hover;
@@ -115,7 +154,7 @@ export default {
   width: 100%;
   background-color: @color-theme_2-background_2;
   opacity: 0;
-  transform: scaleY(0);
+  transform: scaleY(0) translateY(0);
   transform-origin: 0 @selection-height / 2 0;
   transition: .25s ease;
   transition-property: transform, opacity;

src/renderer/lang/cns/view/setting.json

@@ -28,6 +28,8 @@
   "play_task_bar": "任务栏播放进度条",
   "play_mediaDevice_title": "选择声音输出的媒体设备",
   "play_mediaDevice": "音频输出",
+  "play_mediaDevice_refresh_btn_title": "刷新音频设备列表",
+  "play_mediaDevice_refresh_btn": "刷新",
 
   "list": "列表设置",
   "list_source_title": "是否显示歌曲源",

src/renderer/lang/cnt/view/setting.json

@@ -27,6 +27,8 @@
   "play_task_bar": "任務欄播放進度條",
   "play_mediaDevice_title": "選擇聲音輸出的媒體設備",
   "play_mediaDevice": "音頻輸出",
+  "play_mediaDevice_refresh_btn_title": "刷新音頻設備列表",
+  "play_mediaDevice_refresh_btn": "刷新",
   "list": "列表設置",
   "list_source_title": "是否顯示歌曲源",
   "list_source": "是否顯示歌曲源（僅對我的音樂分類有效）",

src/renderer/lang/en/view/setting.json

@@ -28,6 +28,8 @@
   "play_task_bar": "Taskbar playback progress bar",
   "play_mediaDevice_title": "Select the media device for sound output",
   "play_mediaDevice": "Audio output",
+  "play_mediaDevice_refresh_btn_title": "Refresh audio device list",
+  "play_mediaDevice_refresh_btn": "refresh",
 
   "list": "List settings",
   "list_source_title": "Whether to show song sources",
@@ -40,7 +42,7 @@
   "download_path": "Save path",
   "download_path_label": "current save path: ",
   "download_path_open_label": "click to open the current path",
-  "download_path_change_btn": "Change",
+  "download_path_change_btn": "change",
   "download_name_title": "Naming when downloading songs",
   "download_name": "File naming",
   "download_embed_pic_title": "Whether to embed the cover in the audio file",

src/renderer/main.js

@@ -16,9 +16,9 @@ import '../common/error'
 
 sync(store, router)
 
-if (!process.env.IS_WEB) {
+// if (!process.env.IS_WEB) {
 
-}
+// }
 
 Vue.config.productionTip = false
 

src/renderer/views/Setting.vue

@@ -52,7 +52,11 @@ div.scroll(:class="$style.setting")
     dd(:title="$t('view.setting.play_mediaDevice_title')")
       h3 {{$t('view.setting.play_mediaDevice')}}
       div
-        material-selection(:list="mediaDevices" @change="handleMediaDeviceChange" v-model="current_setting.player.mediaDeviceId" item-key="deviceId" item-name="label")
+        material-selection(:list="mediaDevices" :class="$style.gapLeft" @change="handleMediaDeviceChange" v-model="current_setting.player.mediaDeviceId" item-key="deviceId" item-name="label")
+        material-btn(min :title="$t('view.setting.play_mediaDevice_refresh_btn_title')" :class="[$style.btnMediaDeviceRefresh, $style.gapLeft]" @click="getMediaDevice")
+          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
+            use(xlink:href='#icon-refresh')
+          span {{$t('view.setting.play_mediaDevice_refresh_btn')}}
 
     dt {{$t('view.setting.list')}}
     dd(:title="$t('view.setting.list_source_title')")
@@ -703,6 +707,17 @@ export default {
     })
   }
 }
+.btn-media-device-refresh {
+  height: 28px;
+  line-height: 28px;
+  padding: 0px 15px;
+  vertical-align: top;
+  svg {
+    width: 1em;
+    vertical-align: middle;
+    margin-right: 5px;
+  }
+}
 
 .save-path {
   font-size: 12px;