Merge branch 'md' into dev

src/renderer/components/core/Player.vue

@@ -153,6 +153,9 @@ export default {
     'setting.player.togglePlayMethod'(n) {
       this.audio.loop = n === 'singleLoop'
     },
+    'setting.player.mediaDeviceName'(n) {
+      this.setMediaDevice()
+    },
     list(n, o) {
       if (n === o) {
         let index = this.listId == 'download'
@@ -192,8 +195,10 @@ export default {
     ]),
     ...mapMutations(['setVolume']),
     ...mapMutations('list', ['updateMusicInfo']),
+    ...mapMutations(['setMediaDeviceId']),
     init() {
       this.audio = document.createElement('audio')
+      this.setMediaDevice()
       this.volume = this.audio.volume = this.setting.player.volume
       this.audio.controls = false
       this.audio.autoplay = true
@@ -572,6 +577,18 @@ export default {
       this.mediaBuffer.timeout = null
       this.mediaBuffer.playTime = 0
     },
+    async setMediaDevice() {
+      let mediaDeviceName = this.setting.player.mediaDeviceName
+      if (!mediaDeviceName) return
+      const devices = await navigator.mediaDevices.enumerateDevices()
+      let device = devices.find(device => device.label === mediaDeviceName)
+      if (!device) return this.setMediaDeviceId('default')
+      console.log(device)
+      this.audio.setSinkId(device.deviceId).catch((err) => {
+        console.log(err)
+        this.setMediaDeviceId('default')
+      })
+    },
     handleSetTransition() {
       this.isActiveTransition = true
       // console.log('active transition')

src/renderer/components/material/Btn.vue

@@ -24,7 +24,7 @@ export default {
 .btn {
   display: inline-block;
   border: none;
-  border-radius: 3px;
+  border-radius: @form-radius;
   cursor: pointer;
   padding: 8px 15px;
   color: @color-btn;

src/renderer/components/material/FlowBtn.vue

@@ -78,7 +78,7 @@ export default {
   button {
     background-color: transparent;
     border: none;
-    border-radius: 3px;
+    border-radius: @form-radius;
     margin-right: 5px;
     cursor: pointer;
     padding: 4px 7px;

src/renderer/components/material/Input.vue

@@ -49,7 +49,7 @@ export default {
 .input {
   display: inline-block;
   border: none;
-  border-radius: 3px;
+  border-radius: @form-radius;
   padding: 7px 8px;
   color: @color-btn;
   outline: none;

src/renderer/components/material/ListButtons.vue

@@ -91,7 +91,7 @@ export default {
   button {
     background-color: transparent;
     border: none;
-    border-radius: 3px;
+    border-radius: @form-radius;
     margin-right: 5px;
     cursor: pointer;
     padding: 4px 7px;

src/renderer/components/material/SearchInput.vue

@@ -133,7 +133,7 @@ export default {
 @import '../../assets/styles/layout.less';
 
 .search {
-  border-radius: 3px;
+  border-radius: @form-radius;
   transition: box-shadow .4s ease, background-color @transition-theme;
   display: flex;
   flex-flow: column nowrap;

src/renderer/components/material/Selection.vue

@@ -0,0 +1,183 @@
+<template lang="pug">
+  div(:class="[$style.select, show ? $style.active : '']")
+    div(:class="$style.label" ref="dom_btn" @click="handleShow") {{label}}
+    ul(:class="$style.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>
+
+<script>
+// import { isChildren } from '../../utils'
+export default {
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    value: {
+      type: [String, Number],
+    },
+    itemName: {
+      type: String,
+    },
+    itemKey: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      show: false,
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.handleHide)
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleHide)
+  },
+  computed: {
+    label() {
+      if (!this.value) return ''
+      if (!this.itemName) return this.value
+      const item = this.list.find(l => l[this.itemKey] == this.value)
+      if (!item) return ''
+      return item[this.itemName]
+    },
+  },
+  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
+      setTimeout(() => {
+        this.show = false
+      }, 50)
+    },
+    handleClick(item) {
+      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
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+@selection-height: 28px;
+
+.select {
+  font-size: 12px;
+  position: relative;
+  width: 300px;
+
+  &.active {
+    .label {
+      background-color: @color-btn-background;
+    }
+    .list {
+      transform: scaleY(1);
+      opacity: 1;
+    }
+  }
+}
+
+.label {
+  background-color: @color-btn-background;
+  padding: 0 10px;
+  transition: background-color @transition-theme;
+  height: @selection-height;
+  line-height: 27px;
+  box-sizing: border-box;
+  color: @color-btn;
+  border-radius: @form-radius;
+  cursor: pointer;
+  .mixin-ellipsis-1;
+
+  &:hover {
+    background-color: @color-theme_2-hover;
+  }
+  &:active {
+    background-color: @color-theme_2-active;
+  }
+}
+
+.list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: @color-theme_2-background_2;
+  opacity: 0;
+  transform: scaleY(0);
+  transform-origin: 0 @selection-height / 2 0;
+  transition: .25s ease;
+  transition-property: transform, opacity;
+  z-index: 10;
+  border-radius: @form-radius;
+  overflow: hidden;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
+
+  li {
+    cursor: pointer;
+    padding: 0 10px;
+    line-height: @selection-height;
+    // color: @color-btn;
+    outline: none;
+    transition: background-color @transition-theme;
+    background-color: @color-btn-background;
+    box-sizing: border-box;
+    .mixin-ellipsis-1;
+
+    &:hover {
+      background-color: @color-theme_2-hover;
+    }
+    &:active {
+      background-color: @color-theme_2-active;
+    }
+    &.active {
+      color: @color-btn;
+    }
+  }
+}
+
+
+each(@themes, {
+  :global(#container.@{value}) {
+    .label {
+      color: ~'@{color-@{value}-btn}';
+      background-color: ~'@{color-@{value}-btn-background}';
+      &:hover {
+        background-color: ~'@{color-@{value}-theme_2-hover}';
+      }
+      &:active {
+        background-color: ~'@{color-@{value}-theme_2-active}';
+      }
+    }
+
+    .list {
+      background-color: ~'@{color-@{value}-theme_2-background_2}';
+      li {
+        // color: ~'@{color-@{value}-btn}';
+        background-color: ~'@{color-@{value}-btn-background}';
+        &:hover {
+          background-color: ~'@{color-@{value}-theme_2-hover}';
+        }
+        &:active {
+          background-color: ~'@{color-@{value}-theme_2-active}';
+        }
+        &.active {
+          color: ~'@{color-@{value}-btn}';
+        }
+      }
+    }
+  }
+})
+
+</style>