优化播放控制稳定性&歌词界面支持窗口控制&windows,linux下支持任务栏小图标

package.json

@@ -1,6 +1,6 @@
 {
   "name": "player",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "author": "sunzongzheng <[email protected]>",
   "description": "An electron-vue project",
   "license": "CC0-1.0",

src/main/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { app, BrowserWindow } from 'electron'
+import { app, Menu, Tray, BrowserWindow } from 'electron'
 import ipcEvent from './ipcEvent'
 /**
  * Set `__static` path to static files in production
@@ -15,11 +15,40 @@ const winURL = process.env.NODE_ENV === 'development'
   ? `http://localhost:9080`
   : `file://${__dirname}/index.html`
 
+function initialTray (mainWindow) {
+  var trayIconPath = __static + '/images/logo_32.png'
+  let appTray = new Tray(trayIconPath)
+
+  function toggleVisiable () {
+    var isVisible = mainWindow.isVisible()
+    if (isVisible) {
+      mainWindow.hide()
+    } else {
+      mainWindow.show()
+    }
+  }
+
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: '退出',
+      click () {
+        app.quit()
+      }
+    }
+  ])
+  appTray.setContextMenu(contextMenu)
+  appTray.on('click', function handleClicked () {
+    toggleVisiable()
+  })
+}
+
 function createWindow () {
   mainWindow = new BrowserWindow({
     height: 650,
     useContentSize: true,
-    // resizable: false,
+    minimizable: true,
+    fullscreenable: true,
+    maximizable: false,
     width: 980,
     frame: false
   })
@@ -28,6 +57,9 @@ function createWindow () {
   mainWindow.on('closed', () => {
     mainWindow = null
   })
+  if (process.platform !== 'darwin') {
+    initialTray(mainWindow)
+  }
 }
 
 app.on('ready', createWindow)

src/main/ipcEvent/viewCtrol.js

@@ -2,11 +2,7 @@ export default {
   on (win, op) {
     switch (op) {
       case 'close':
-        if (process.platform === 'darwin') {
-          win.hide()
-        } else {
-          win.minimize()
-        }
+        win.hide()
         break
       case 'minimize':
         win.minimize()

src/renderer/store/modules/c_playlist.js

@@ -3,13 +3,17 @@ import Vue from 'vue'
 export default {
   namespaced: true,
   state: {
+    show: false,
     playlist: [],
     cycle: 'list' // list: 列表循环; random: 随机; single: 单曲
   },
   mutations: {
     update (state, val) {
       state.playlist = val
     },
+    toggle (state) {
+      state.show = !state.show
+    },
     cycleChange (state) {
       let arr = ['list', 'single', 'random']
       arr.every((item, index) => {
@@ -38,7 +42,12 @@ export default {
             index = (index + state.playlist.length - 1) % state.playlist.length
             break
           case 'random':
+            const copy = index // 副本
             index = parseInt(Math.random() * (state.playlist.length - 1), 10) + 1
+            if (index === copy) { // 如果随机以后和原本一样，再随机一次
+              index = parseInt(Math.random() * (state.playlist.length - 1), 10) + 1
+            }
+            break
         }
         Vue.store.dispatch('api/play', state.playlist[index])
       }

src/renderer/store/modules/windowStatus.js

@@ -3,7 +3,7 @@ import { ipcRenderer } from 'electron'
 export default {
   namespaced: true,
   state: {
-    status: 'show' // 默认开启状态
+    status: 'show' // 默认显示状态  close:隐藏; minimize:最小化; fullscreen: 全屏; leaveFullscreen: 离开全屏
   },
   mutations: {
     update (state, val) {

src/renderer/view/home/components/player/components/current_playlist/index.vue → src/renderer/view/home/components/current_playlist/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="{[s.app]:true,[s.active]:show,[s.lyricShow]:lyricShow}">
+    <div :class="{[s.app]:true,[s.active]:show,[s.lyricShow]:lyricShow}" v-clickoutside="closeModal">
         <div :class="{[s.item]:true,[s.active]:play.info.id===item.id}" v-for="item in playlist" @click="doPlay(item)">
             <div :class="s.album_wrap">
                 <img :class="s.album" :src="item.album.coverSmall"/>
@@ -12,17 +12,13 @@
     </div>
 </template>
 <script>
+  import Clickoutside from 'element-ui/src/utils/clickoutside'
   import { mapState, mapActions } from 'vuex'
 
   export default {
-    props: {
-      show: {
-        type: Boolean,
-        required: true
-      }
-    },
+    directives: {Clickoutside},
     computed: {
-      ...mapState('c_playlist', ['playlist']),
+      ...mapState('c_playlist', ['playlist', 'show']),
       ...mapState('api', ['play']),
       ...mapState('lyrics', {
         lyricShow: 'show'
@@ -31,28 +27,37 @@
     methods: {
       ...mapActions('api', {
         doPlay: 'play'
-      })
+      }),
+      closeModal (e) {
+        if (this.show) {
+          this.$store.commit('c_playlist/toggle')
+        }
+      }
     }
   }
 </script>
 <style lang="scss" module="s">
     .app {
         $width: 300px;
         position: fixed;
-        right: -$width;
+        right: 0;
         top: 0;
         width: 300px;
         height: calc(100% - 60px);
+        transform: translate3d(100%, 0, 0);
+        will-change: transform;
         transition: all .5s;
         background-color: white;
         box-shadow: -3px 0 14px #ececec;
         overflow-y: auto;
         overflow-x: hidden;
+        z-index: 6;
         &.lyricShow {
             box-shadow: none;
         }
         &.active {
-            right: 0;
+            transform: translate3d(0, 0, 0);
+            will-change: transform;
             transition: all .5s;
         }
     }

src/renderer/view/home/components/lyrics/index.vue

@@ -2,6 +2,15 @@
     <div :class="{[s.app]:true,[s.active]:show}">
         <div :class="s.wrap"></div>
         <div :class="s.cover" :style="style"></div>
+        <div :class="s.control">
+            <div :class="s.inner" v-if="status!=='fullscreen'">
+                <Icon type="bottom" :class="s.close" @click.native="close"></Icon>
+                <Icon type="fullscreen" :class="s.fullscreen" @click.native="op('fullscreen')"></Icon>
+                <Icon type="narrow" :class="s.narrow" @click.native="op('minimize')"></Icon>
+            </div>
+            <!-- 全屏状态只有离开全屏 !-->
+            <Icon type="fullscreenexit" :class="s.fullscreen" @click.native="op('leaveFullscreen')" v-else></Icon>
+        </div>
         <ul :class="s.main" ref="main" @wheel="scrollBarWheel" v-if="play.lyric.length">
             <li v-for="(item,index) in play.lyric" :class="{[s.item]:true,[s.active]:activeIndex === index}">
                 {{item[1]}}
@@ -26,6 +35,7 @@
     computed: {
       ...mapState('lyrics', ['show']),
       ...mapState('api', ['play']),
+      ...mapState('windowStatus', ['status']),
       style () {
         if (this.play.info) {
           return {
@@ -94,6 +104,9 @@
         this.timer = window.setTimeout(() => {
           this.userScrolling = false
         }, 2000)
+      },
+      op (val) {
+        this.$store.commit('windowStatus/update', val)
       }
     }
   }
@@ -102,7 +115,8 @@
     .app {
         position: fixed;
         z-index: 5;
-        transform: translateY(100%);
+        transform: translate3d(0, 100%, 0);
+        will-change: transform;
         top: 0;
         left: 0;
         width: 100%;
@@ -111,7 +125,8 @@
         transition: all .4s;
         &.active {
             transition: all .4s;
-            transform: translateY(0);
+            transform: translate3d(0, 0, 0);
+            will-change: transform;
         }
         .wrap,
         .cover,
@@ -154,5 +169,26 @@
                 display: none;
             }
         }
+        .control {
+            position: absolute;
+            left: 16px;
+            top: 12px;
+            background-color: transparent;
+            z-index: 7;
+            width: 200px;
+            height: 50px;
+            -webkit-app-region: no-drag;
+            .inner {
+                display: flex;
+            }
+            svg {
+                font-size: 24px;
+                margin-right: 8px;
+                color: #B7B7B7;
+                &:hover {
+                    color: #f2f2f2;
+                }
+            }
+        }
     }
 </style>

src/renderer/view/home/components/player/components/playInfo/index.js

@@ -4,7 +4,6 @@ import moment from 'moment'
 export default {
   data () {
     return {
-      timer: null,
       duration: {
         cur: 0,
         total: 0
@@ -23,25 +22,12 @@ export default {
   },
   watch: {
     'play.pause' (val) {
-      window.clearInterval(this.timer)
       this.$nextTick(() => {
         const audio = this.$refs.audio
         if (val) {
           audio.pause()
         } else {
           audio.play()
-          this.timer = window.setInterval(() => {
-            this.duration = {
-              cur: audio.currentTime,
-              total: audio.duration
-            }
-            if (audio.ended) {
-              this.$store.dispatch('c_playlist/next')
-            }
-            this.$store.commit('api/updatePlay', {
-              time: Math.floor(audio.currentTime * 1000)
-            })
-          }, 500)
         }
       })
     },
@@ -89,6 +75,21 @@ export default {
       this.$store.commit('lyrics/update', {
         show: !this.show
       })
+    },
+    timeupdate () {
+      const audio = this.$refs.audio
+      this.duration = {
+        cur: audio.currentTime,
+        total: audio.duration || 0
+      }
+      this.$store.commit('api/updatePlay', {
+        time: Math.floor(audio.currentTime * 1000)
+      })
+    },
+    toggleList () {
+      if (this.playlist.length) {
+        this.$store.commit('c_playlist/toggle')
+      }
     }
   }
 }

src/renderer/view/home/components/player/components/playInfo/index.vue

@@ -34,8 +34,13 @@
         <Icon type="download" :class="s.icon" :disabled="true"></Icon>
         <!-- 打开列表 !-->
         <Icon type="musiclist" :class="s.icon" style="margin-top: 2px;" :disabled="!playlist.length"
-              @click.native="playlist.length?$emit('showPlaylist'):''"></Icon>
-        <audio :src="play.url" ref="audio"></audio>
+              @click.native="toggleList"></Icon>
+        <audio :src="play.url"
+               ref="audio"
+               preload="true"
+               @timeupdate="timeupdate"
+               @ended="$store.dispatch('c_playlist/next')"
+        ></audio>
     </div>
 </template>
 <script src="./index.js"></script>

src/renderer/view/home/components/player/index.js

@@ -1,28 +1,8 @@
-import { mapState } from 'vuex'
-import playList from './components/current_playlist/index.vue'
-import Clickoutside from 'element-ui/src/utils/clickoutside'
-import Popover from 'element-ui/packages/popover'
 import playControl from './components/playControl/index.vue'
 import playInfo from './components/playInfo/index.vue'
+import Popover from 'element-ui/packages/popover'
 
 export default {
-  components: {playList, playControl, playInfo},
-  directives: {Clickoutside, Popover},
-  data () {
-    return {
-      modal: false,
-      lyrics_visible: false
-    }
-  },
-  computed: {
-    ...mapState('api', ['play']),
-    ...mapState('playlist', ['playlist'])
-  },
-  methods: {
-    closeModal () {
-      if (this.modal) {
-        this.modal = false
-      }
-    }
-  }
+  components: {playControl, playInfo},
+  directive: {Popover}
 }

src/renderer/view/home/components/player/index.vue

@@ -1,8 +1,7 @@
 <template>
     <div :class="s.main">
         <play-control></play-control>
-        <play-info @showPlaylist="modal = true"></play-info>
-        <play-list :show.sync="modal" v-clickoutside="closeModal"></play-list>
+        <play-info></play-info>
     </div>
 </template>
 <script src="./index.js"></script>