完善音频输出功能
lyswhut
parent
4f238f4f62
commit
0bbb760e61
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template lang="pug">
|
||||
div(:class="[$style.select, show ? $style.active : '']")
|
||||
div(:class="$style.label" ref="dom_btn" @click="handleShow") {{label}}
|
||||
ul.scroll(:class="$style.list")
|
||||
div(:class="$style.label" ref="dom_btn" @click="handleShow")
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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": "是否显示歌曲源",
|
||||
|
|
|
|||
|
|
@ -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": "是否顯示歌曲源（僅對我的音樂分類有效）",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ import '../common/error'
|
|||
|
||||
sync(store, router)
|
||||
|
||||
if (!process.env.IS_WEB) {
|
||||
// if (!process.env.IS_WEB) {
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue