feat: 播放器音量功能

Author: sl1673495

public/index.html

@@ -6,7 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_777085_hhq2p3r7g3u.css">
+  <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_777085_lg5nuqbwl.css">
   <title>vue-netease-muisc</title>
 </head>
 

src/App.vue

@@ -2,14 +2,16 @@
   <div id="app">
     <Layout />
     <MiniPlayer />
+    <Playlist />
   </div>
 </template>
 
 <script>
 import Layout from "@/layout"
 import MiniPlayer from "@/components/mini-player"
+import Playlist from "@/components/playlist"
 export default {
-  components: { Layout, MiniPlayer }
+  components: { Layout, MiniPlayer, Playlist }
 }
 </script>
 

src/base/icon.vue

@@ -1,19 +1,32 @@
 <template>
   <i
-    class="iconfont"
-    :class="`icon-${type}`"
+    class="iconfont icon-component"
+    :class="getIconCls()"
     :style="{fontSize: `${size}px`}"
   />
 </template>
 
 <script type="text/ecmascript-6">
 export default {
-  props: ["size", "type"]
+  props: ["size", "type", "color"],
+  methods: {
+    getIconCls() {
+      let cls = `icon-${this.type}`
+      if (this.color) {
+        cls += ` icon-color-${this.color}`
+      }
+      return cls
+    }
+  }
 }
 </script>
 
-<style lang="scss" scoped>
-.iconfont {
+<style lang="scss">
+.icon-component {
   color: #fff;
 }
+
+.icon-color-theme {
+  color: $theme-color;
+}
 </style>

src/base/progress-bar.vue

@@ -12,11 +12,11 @@
       <div
         class="progress-btn-wrapper"
         ref="progressBtn"
-        @touchstart.prevent="progressTouchStart"
-        @touchmove.prevent="progressTouchMove"
-        @touchend="progressTouchEnd"
       >
-        <div class="progress-btn"></div>
+        <div
+          class="progress-btn"
+          :class="{show: alwaysShowBtn}"
+        ></div>
       </div>
     </div>
   </div>
@@ -25,52 +25,39 @@
 <script type="text/ecmascript-6">
 import { prefixStyle } from "@/utils/dom"
 
-const progressBtnWidth = 16
 const transform = prefixStyle("transform")
 
 export default {
   props: {
     percent: {
       type: Number,
       default: 0
+    },
+    alwaysShowBtn: {
+      type: Boolean,
+      default: false
     }
   },
   created() {
     this.touch = {}
   },
+  mounted() {
+    if (this.percent > 0) {
+      this.setProgressOffset(this.percent)
+    }
+  },
   methods: {
-    progressTouchStart(e) {
-      this.touch.initiated = true
-      this.touch.startX = e.touches[0].pageX
-      this.touch.left = this.$refs.progress.clientWidth
-    },
-    progressTouchMove(e) {
-      if (!this.touch.initiated) {
-        return
-      }
-      const deltaX = e.touches[0].pageX - this.touch.startX
-      const offsetWidth = Math.min(
-        this.$refs.progressBar.clientWidth - progressBtnWidth,
-        Math.max(0, this.touch.left + deltaX)
-      )
-      this._offset(offsetWidth)
-      this.$emit("percentChanging", this._getPercent())
-    },
-    progressTouchEnd() {
-      this.touch.initiated = false
-      this._triggerPercent()
-    },
     progressClick(e) {
       const rect = this.$refs.progressBar.getBoundingClientRect()
-      const offsetWidth = e.pageX - rect.left
+      const offsetWidth = Math.max(0, Math.min(e.pageX - rect.left, this.$refs.progressBar.clientWidth))
       this._offset(offsetWidth)
       // 这里当我们点击 progressBtn 的时候，e.offsetX 获取不对
       // this._offset(e.offsetX)
       this._triggerPercent()
     },
     setProgressOffset(percent) {
       if (percent >= 0 && !this.touch.initiated) {
-        const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth
+        const barWidth = this.$refs.progressBar.clientWidth
         const offsetWidth = percent * barWidth
         this._offset(offsetWidth)
       }
@@ -85,7 +72,7 @@ export default {
       ] = `translate3d(${offsetWidth}px,0,0)`
     },
     _getPercent() {
-      const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth
+      const barWidth = this.$refs.progressBar.clientWidth
       return this.$refs.progress.clientWidth / barWidth
     }
   },
@@ -104,7 +91,7 @@ export default {
 
   .bar-inner {
     position: relative;
-    top: 13px;
+    top: 14px;
     height: 2px;
     background: rgba(0, 0, 0, 0.3);
 
@@ -116,7 +103,7 @@ export default {
 
     .progress-btn-wrapper {
       position: absolute;
-      left: -8px;
+      left: -15px;
       top: -13px;
       width: 30px;
       height: 30px;
@@ -125,12 +112,16 @@ export default {
         display: none;
         position: relative;
         top: 8px;
-        left: 7px;
+        left: 9px;
         box-sizing: border-box;
         width: 12px;
         height: 12px;
         border-radius: 50%;
         background: $theme-color;
+
+        &.show {
+          display: block;
+        }
       }
     }
   }

src/base/volume.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="volume">
+    <Icon
+      :size="20"
+      class="icon"
+      :type="getIconType()"
+      @click.native="toggleSilence"
+    />
+    <div class="progress-wrap">
+      <ProgressBar
+        alwaysShowBtn
+        :percent="volumePercent"
+        @percentChange="onProgressChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import ProgressBar from '@/base/progress-bar'
+export default {
+  data() {
+    return {
+      volumePercent: 1
+    }
+  },
+  methods: {
+    onProgressChange(percent) {
+      if (percent < 0.05) {
+        percent = 0
+      }
+      this.volumePercent = percent
+      this.$emit('volumeChange', percent)
+    },
+    getIconType() {
+      return this.isSilence ? 'silence' : 'horn'
+    },
+    toggleSilence() {
+      this.isSilence = !this.isSilence
+    }
+  },
+  computed: {
+    isSilence: {
+      get() {
+        return this.volumePercent === 0
+      },
+      set(newSilence) {
+        const target = newSilence ? 0 : this.lastVolume
+        if (newSilence) {
+          this.lastVolume = this.volumePercent
+        }
+        this.volumePercent = target
+        this.onProgressChange(target)
+      }
+    }
+  },
+  components: {
+    ProgressBar
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.volume {
+  display: flex;
+  align-items: center;
+  width: 150px;
+  padding: 0 16px;
+
+  .icon {
+    color: $font-color;
+    cursor: pointer;
+    margin-right: 8px;
+  }
+  .progress-wrap {
+    flex: 1;
+  }
+}
+</style>