新增音量调整

publish/changeLog.md

@@ -1,6 +1,7 @@
 ### 新增
 
 - 新增**MAC**及**Linux**版本（需要的可自行下载）
+- 新增音量调整
 - 新增任务栏播放进度条控制选项（现在可在设置界面关闭在任务栏显示的播放进度）
 - 新增更新出错时的弹窗提示
 - 从该版本起，非安装版也会有更新弹窗提醒了，但仍然需要手动下载新版本更新，版本信息可到设置页面查看

src/renderer/components/core/Icons.vue

@@ -50,9 +50,9 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
       //- path(fill='currentColor' d='M174.522,0h-26.848c-9.885,0-17.897,8.013-17.897,17.899v62.533L37.513,2.522c-3.483-2.406-7.807-2.005-11.072-2.005c-13.061,0-13.004,11.7-13.004,14.666v175.983c0,2.507-0.057,14.666,13.004,14.666c3.265,0,7.589,0.401,11.072-2.005l92.265-77.91v62.016c0,9.885,8.012,17.898,17.897,17.898h26.848c9.885,0,17.898-8.013,17.898-17.898V17.899C192.421,8.013,184.408,0,174.522,0z')
     g#icon-sound
       // 0 0 291.063 291.064
-      path(d='M26.512,204.255h18.292l106.48,67.761c12.354,7.855,22.369,2.361,22.369-12.282v-69.397c16.933-8.854,28.501-26.559,28.501-46.983c0-20.425-11.568-38.129-28.501-46.986V31.645c0-14.639-10.18-20.401-22.731-12.873L44.804,82.443H26.512C11.866,82.443,0,94.311,0,108.955v68.789C0,192.387,11.866,204.255,26.512,204.255z')
+      path(fill='currentColor' d='M26.512,204.255h18.292l106.48,67.761c12.354,7.855,22.369,2.361,22.369-12.282v-69.397c16.933-8.854,28.501-26.559,28.501-46.983c0-20.425-11.568-38.129-28.501-46.986V31.645c0-14.639-10.18-20.401-22.731-12.873L44.804,82.443H26.512C11.866,82.443,0,94.311,0,108.955v68.789C0,192.387,11.866,204.255,26.512,204.255z')
-      path(d='M219.791,152.899c-0.818,11.185-4.039,21.758-9.569,31.426c-3.635,6.354-1.43,14.452,4.919,18.087c2.082,1.187,4.34,1.751,6.576,1.751c4.599,0,9.062-2.393,11.517-6.675c7.508-13.138,11.889-27.491,12.986-42.663c1.714-23.397-4.836-46.781-18.455-65.845c-4.256-5.96-12.536-7.332-18.491-3.081c-5.959,4.259-7.337,12.531-3.08,18.491C216.218,118.425,221.055,135.653,219.791,152.899z')
+      path(fill='currentColor' d='M219.791,152.899c-0.818,11.185-4.039,21.758-9.569,31.426c-3.635,6.354-1.43,14.452,4.919,18.087c2.082,1.187,4.34,1.751,6.576,1.751c4.599,0,9.062-2.393,11.517-6.675c7.508-13.138,11.889-27.491,12.986-42.663c1.714-23.397-4.836-46.781-18.455-65.845c-4.256-5.96-12.536-7.332-18.491-3.081c-5.959,4.259-7.337,12.531-3.08,18.491C216.218,118.425,221.055,135.653,219.791,152.899z')
-      path(d='M290.7,158c3.34-45.736-16.508-89.592-53.097-117.318c-5.841-4.433-14.146-3.27-18.568,2.556c-4.428,5.838-3.283,14.151,2.558,18.568c29.401,22.281,45.355,57.521,42.668,94.252c-2.02,27.636-14.375,53.159-34.787,71.867c-5.396,4.95-5.758,13.339-0.808,18.729c2.609,2.854,6.188,4.298,9.771,4.298c3.194,0,6.41-1.154,8.953-3.484C272.805,224.175,288.184,192.408,290.7,158z')
+      path(fill='currentColor' d='M290.7,158c3.34-45.736-16.508-89.592-53.097-117.318c-5.841-4.433-14.146-3.27-18.568,2.556c-4.428,5.838-3.283,14.151,2.558,18.568c29.401,22.281,45.355,57.521,42.668,94.252c-2.02,27.636-14.375,53.159-34.787,71.867c-5.396,4.95-5.758,13.339-0.808,18.729c2.609,2.854,6.188,4.298,9.771,4.298c3.194,0,6.41-1.154,8.953-3.484C272.805,224.175,288.184,192.408,290.7,158z')
 
 
 </template>

src/renderer/components/core/Player.vue

@@ -8,6 +8,13 @@ div(:class="$style.player")
     div(:class="$style.column1")
       div(:class="$style.container")
         div(:class="$style.title") {{title}}
+        div(:class="$style.volumeContent")
+          div(:class="$style.volume" @click.stop='handleChangeVolume' :title="`当前音量：${volumeStr}%`")
+            div(:class="$style.volumeBar" :style="{ width: volumeStr + '%' }")
+
+        //- div(:class="$style.playBtn" @click='handleNext' title="音量")
+          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 291.063 291.064' space='preserve')
+            use(xlink:href='#icon-sound')
         div(:class="$style.playBtn" @click='handleNext' title="下一首")
           svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
             use(xlink:href='#icon-nextMusic')
@@ -50,6 +57,7 @@ export default {
     return {
       show: true,
       audio: null,
+      volume: 0,
       nowPlayTime: 0,
       maxPlayTime: 0,
       isPlay: false,
@@ -98,6 +106,9 @@ export default {
     isAPITemp() {
       return this.setting.apiSource == 'temp'
     },
+    volumeStr() {
+      return parseInt(this.volume * 100)
+    },
   },
   mounted() {
     this.setProgessWidth()
@@ -139,6 +150,9 @@ export default {
       if (n.toFixed(2) === o.toFixed(2)) return
       this.sendProgressEvent(n, 'normal')
     },
+    volume(n) {
+      this.handleSaveVolume(n)
+    },
   },
   methods: {
     ...mapActions('player', ['getUrl', 'getPic', 'getLrc']),
@@ -147,9 +161,11 @@ export default {
       'fixPlayIndex',
       'resetChangePlay',
     ]),
+    ...mapMutations(['setVolume']),
     ...mapMutations('list', ['updateMusicInfo']),
     init() {
-      this.audio = document.createElement('audio')
+      window.a = this.audio = document.createElement('audio')
+      this.volume = this.audio.volume = this.setting.player.volume
       this.audio.controls = false
       this.audio.autoplay = true
       this.audio.loop = this.setting.player.togglePlayMethod === 'singleLoop'
@@ -438,6 +454,17 @@ export default {
     clearAppTitle() {
       setTitle()
     },
+    handleChangeVolume(e) {
+      let val = e.offsetX / 70
+      if (val < 0) val = 0
+      if (val > 1) val = 1
+      if (val > 0.97) val = 1
+      this.volume = val
+      if (this.audio) this.audio.volume = this.volume
+    },
+    handleSaveVolume(volume) {
+      this.setVolume(volume)
+    },
   },
 }
 </script>
@@ -509,6 +536,39 @@ export default {
   .mixin-ellipsis-1;
 }
 
+.volume-content {
+  width: 100px;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+}
+
+.volume {
+  cursor: pointer;
+  width: 100%;
+  height: 0.25em;
+  border-radius: 10px;
+  // overflow: hidden;
+  transition: @transition-theme;
+  transition-property: background-color;
+  background-color: @color-player-progress;
+  // background-color: #f5f5f5;
+  position: relative;
+  border-radius: @radius-progress-border;
+}
+
+.volume-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 100%;
+  border-radius: @radius-progress-border;
+  transition-duration: 0.2s;
+  background-color: @color-player-progress-bar2;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
 .play-btn {
   + .play-btn {
     margin-left: 10px;

src/renderer/components/material/InputRange.vue

@@ -0,0 +1,80 @@
+<template lang="pug">
+  input(type="range" :class="[$style.range, min ? $style.min : '']" :disabled="disabled" v-model="val" input="handleInput" @change="handleChange")
+</template>
+
+<script>
+export default {
+  props: {
+    min: {
+      type: Boolean,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      val: 0,
+    }
+  },
+  mounted() {
+    this.val = this.value
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('input', this.val)
+      this.$emit('change', e)
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+.range {
+  display: inline-block;
+  border-radius: .25em;
+  cursor: pointer;
+  color: @color-btn;
+  outline: none;
+  background: transparent;
+  // background-color: @color-btn-background;
+  &[disabled] {
+    opacity: .4;
+  }
+
+  &:hover {
+    background-color: @color-theme_2-hover;
+  }
+  &:active {
+    background-color: @color-theme_2-active;
+  }
+}
+
+.min {
+
+}
+
+// each(@themes, {
+//   :global(#container.@{value}) {
+//     .btn {
+//       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}';
+//       }
+//     }
+//   }
+// })
+
+</style>

src/renderer/store/mutations.js

@@ -23,4 +23,7 @@ export default {
     if (isShow !== undefined) state.version.showModal = isShow
     if (isError !== undefined) state.version.isError = isError
   },
+  setVolume(state, val) {
+    state.setting.player.volume = val
+  },
 }

src/renderer/utils/index.js

@@ -168,6 +168,7 @@ export const updateSetting = setting => {
       togglePlayMethod: 'listLoop',
       highQuality: false,
       isShowTaskProgess: true,
+      volume: 1,
     },
     list: {
       isShowAlbumName: true,