完成迷你模式

src/index.html

@@ -120,14 +120,14 @@
 
   <div class="contrl-bar">
 
-    <div class="play-box">
-      <span class="item prev s-icon-prev" :click="nextSong(-1)"></span>
+    <div class="play-box" :click="handleCtrl">
+      <span class="item prev s-icon-prev" data-key="prev"></span>
       <span 
         class="item play"
-        :class="{'s-icon-play': !isPlaying, 's-icon-pause': isPlaying}" 
-        :click="play(null)">
+        data-key="prev"
+        :class="{'s-icon-play': !isPlaying, 's-icon-pause': isPlaying}">
       </span>
-      <span class="item next s-icon-next" :click="nextSong(1)"></span>
+      <span class="item next s-icon-next" data-key="prev"></span>
     </div>
 
     <div class="stat-box">

src/js/app.js

@@ -50,15 +50,8 @@ let appInit = ipcRenderer.sendSync('get-init')
 Anot.ss('app-init', appInit)
 
 const LRC_WIN = createDesktopLrcWindow(MAIN_SCREEN)
-// const MINI_WIN = createMiniWindow(MAIN_SCREEN, WIN)
+const MINI_WIN = createMiniWindow(MAIN_SCREEN, WIN)
 
-// WIN.hide()
-// MINI_WIN.show()
-
-// MINI_WIN.opener = WIN
-// MINI_WIN.openDevTools()
-
-// window.MINI_WIN = MINI_WIN
 Anot({
   $id: 'app',
   state: {
@@ -186,6 +179,32 @@ Anot({
     remote.app.on('browser-window-blur', _ => {
       this.winFocus = false
     })
+
+    /**
+     * 响应mini窗口的事件
+     */
+    WIN.on('mini-ctrl', ev => {
+      switch (ev) {
+        case 'prev':
+          this.nextSong(-1)
+          break
+        case 'play':
+          this.play()
+          break
+        case 'next':
+          this.nextSong(1)
+          break
+        case 'desktoplrc':
+          this.toggleDesktopLrc()
+          break
+        default:
+          if (ev.name === 'play-mode') {
+            this.playMode = ev.value
+            SONIST.mode = PLAY_MODE[ev.value]
+            Anot.ls('play-mode', ev.value)
+          }
+      }
+    })
   },
   methods: {
     quit(force) {
@@ -203,8 +222,14 @@ Anot({
       WIN.minimize()
     },
     change2mini() {
+      this.optBoxShow = false
       WIN.hide()
       MINI_WIN.show()
+      let song = this.curr.$model
+      if (!this.isPlaying) {
+        delete song.id
+      }
+      MINI_WIN.emit('mini-init', song)
     },
 
     activeModule(mod) {
@@ -286,6 +311,27 @@ Anot({
       }
     },
 
+    /**
+     * 播放按钮的事件
+     */
+    handleCtrl(ev) {
+      let key = ev.target.dataset.key
+
+      switch (key) {
+        case 'prev':
+          this.nextSong(-1)
+          break
+        case 'play':
+          this.play()
+          break
+        case 'next':
+          this.nextSong(1)
+          break
+        default:
+          break
+      }
+    },
+
     nextSong(step) {
       let _p = null
       if (step > 0) {
@@ -304,13 +350,10 @@ Anot({
       })
     },
 
-    pause() {
-      this.isPlaying = false
-    },
-
     updateCurr(obj) {
       let old = this.curr.$model
       this.curr = Object.assign(old, obj)
+      MINI_WIN.emit('mini-init', this.curr.$model)
     },
 
     play(song) {

src/js/mini-win.js

@@ -8,36 +8,58 @@
 
 import '/lib/anot.next.js'
 
-const { remote } = require('electron')
+const { remote, ipcRenderer } = require('electron')
 
 const WIN = remote.getCurrentWindow()
-const MAIN_WIN = WIN.getParentWindow()
 
-window.WIN = WIN
+ipcRenderer.on('post-main', (ev, val) => {
+  window.__MAIN__ = val
+})
+
 Anot({
   $id: 'mini',
   state: {
     isPlaying: false,
     curr: {
       id: '',
-      title: '假装不合适',
+      title: '',
       artist: '',
       album: '',
       time: 0,
       duration: 0,
-      cover: '/images/album.png'
+      cover: ''
     },
     pinned: true,
     playMode: Anot.ls('play-mode') >>> 0
   },
   mounted() {
-    WIN.on('ktv-lrc', lrc => {
-      this.lrc = lrc
+    WIN.on('mini-init', song => {
+      this.curr = song
+      if (song.id) {
+        this.isPlaying = true
+      }
+      this.playMode = Anot.ls('play-mode') >>> 0
     })
   },
   methods: {
-    play() {},
-    nextSong() {},
+    handleCtrl(ev) {
+      let key = ev.target.dataset.key
+
+      switch (key) {
+        case 'prev':
+          remote.app.__MAIN__.emit('mini-ctrl', 'prev')
+          break
+        case 'play':
+          this.isPlaying = !this.isPlaying
+          remote.app.__MAIN__.emit('mini-ctrl', 'play')
+          break
+        case 'next':
+          remote.app.__MAIN__.emit('mini-ctrl', 'next')
+          break
+        default:
+          break
+      }
+    },
 
     handleTool(ev) {
       let key = ev.target.dataset.key
@@ -48,7 +70,7 @@ Anot({
           break
         case 'quit':
           WIN.hide()
-          MAIN_WIN.show()
+          remote.app.__MAIN__.show()
           break
         default:
           break
@@ -58,7 +80,7 @@ Anot({
       let key = ev.target.dataset.key
       switch (key) {
         case 'lrc':
-          MAIN_WIN.emit('toggle-desktoplrc')
+          remote.app.__MAIN__.emit('mini-ctrl', 'desktoplrc')
           break
         case 'mode':
           let mod = this.playMode
@@ -67,7 +89,10 @@ Anot({
             mod = 0
           }
           this.playMode = mod
-          MAIN_WIN.emit('play-mode', mod)
+          remote.app.__MAIN__.emit('mini-ctrl', {
+            name: 'play-mode',
+            value: mod
+          })
       }
     }
   }

src/main.js

@@ -63,6 +63,7 @@ app.once('ready', () => {
       let win = createMainWindow(path.resolve(ROOT, './images/app.png'))
       createTray(win)
       createMenu(win)
+      app.__MAIN__ = win
       // mac专属事件,点击dock栏图标,可激活窗口
       app.on('activate', _ => {
         if (win) {

src/mini-win.html

@@ -11,23 +11,23 @@
 </head>
 <body class="do-fn-noselect" anot="mini">
   <div class="app">
-    <span class="cover">
-      <img :attr-src="curr.cover" />
+    <span class="cover do-fn-drag">
+      <img :attr-src="curr.cover || '/images/album.png'" />
     </span>
     <div class="ctrl">
-      <h3 class="title" :text="curr.title"></h3>
-      <div class="btns">
-        <span class="s-icon-prev" :click="nextSong(-1)"></span>
+      <h3 class="title do-fn-ell do-fn-drag" :text="curr.title ? '正在播放: ' + curr.title : '已经停止播放...'"></h3>
+      <div class="btns" :click="handleCtrl">
+        <span class="s-icon-prev" data-key="prev"></span>
         <span 
           class="play"
-          :class="{'s-icon-play': !isPlaying, 's-icon-pause': isPlaying}" 
-          :click="play(null)">
+          data-key="play"
+          :class="{'s-icon-play': !isPlaying, 's-icon-pause': isPlaying}" >
         </span>
-        <span class="s-icon-next" :click="nextSong(1)"></span>
+        <span class="s-icon-next" data-key="next"></span>
         
       </div>
     </div>
-    <div class="tools" :click="handleTool">
+    <div class="tools do-fn-nodrag" :click="handleTool">
       <span data-key="pin" class="do-icon-pin" :class="{active: pinned}"></span>
       <span data-key="quit" class="do-icon-maximized"></span>
     </div>