优化更新弹窗功能，新增非安装版弹窗提醒

Author: lyswhut

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lx-music-desktop",
-  "version": "0.2.4",
+  "version": "0.2.3",
   "description": "一个免费的音乐下载助手",
   "main": "./dist/electron/main.js",
   "productName": "lx-music-desktop",

publish/changeLog.md

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

src/main/utils/autoUpdate.js

@@ -61,23 +61,30 @@ module.exports = win => {
   autoUpdater.on('checking-for-update', () => {
     sendStatusToWindow('Checking for update...')
   })
-  autoUpdater.on('update-available', (ev, info) => {
+  autoUpdater.on('update-available', info => {
     sendStatusToWindow('Update available.')
-    // win.webContents.send('update-available')
+    win.webContents.send('update-available', info)
   })
-  autoUpdater.on('update-not-available', (ev, info) => {
+  autoUpdater.on('update-not-available', info => {
     sendStatusToWindow('Update not available.')
+    setTimeout(() => { // 延迟发送事件，过早发送可能渲染进程还启动完成
+      win.webContents.send('update-not-available')
+    }, 5000)
   })
-  autoUpdater.on('error', (ev, err) => {
+  autoUpdater.on('error', () => {
     sendStatusToWindow('Error in auto-updater.')
-    // win.webContents.send('update-error')
+    setTimeout(() => { // 延迟发送事件，过早发送可能渲染进程还启动完成
+      win.webContents.send('update-error')
+    }, 6000)
   })
-  autoUpdater.on('download-progress', (ev, progressObj) => {
+  autoUpdater.on('download-progress', progressObj => {
     sendStatusToWindow('Download progress...')
   })
-  autoUpdater.on('update-downloaded', (ev, info) => {
+  autoUpdater.on('update-downloaded', info => {
     sendStatusToWindow('Update downloaded.')
-    win.webContents.send('update-downloaded')
+    setTimeout(() => { // 延迟发送事件，过早发送可能渲染进程还启动完成
+      win.webContents.send('update-downloaded')
+    }, 2000)
   })
   mainOn('quit-update', () => {
     setTimeout(() => {

src/renderer/App.vue

@@ -81,7 +81,7 @@ export default {
   },
   methods: {
     ...mapActions(['getVersionInfo']),
-    ...mapMutations(['setNewVersion', 'setVersionVisible']),
+    ...mapMutations(['setNewVersion', 'setVersionModalVisible']),
     ...mapMutations('list', ['initDefaultList']),
     ...mapMutations('download', ['updateDownloadList']),
     ...mapMutations(['setSetting']),
@@ -90,12 +90,25 @@ export default {
         body.addEventListener('mouseenter', this.dieableIgnoreMouseEvents)
         body.addEventListener('mouseleave', this.enableIgnoreMouseEvents)
       }
+      rendererOn('update-available', (e, info) => {
+        // this.showUpdateModal(true)
+        this.setNewVersion({
+          version: info.version,
+        })
+      })
+      rendererOn('update-error', () => {
+        this.setVersionModalVisible({ isError: true })
+        this.$nextTick(() => {
+          this.showUpdateModal()
+        })
+      })
       rendererOn('update-downloaded', () => {
-        this.getVersionInfo().then(body => {
-          this.setNewVersion(body)
-          this.$nextTick(() => {
-            this.setVersionVisible({ isShow: true })
-          })
+        this.showUpdateModal()
+      })
+      rendererOn('update-not-available', () => {
+        if (this.setting.ignoreVersion) this.setSetting(Object.assign({}, this.setting, { ignoreVersion: null }))
+        this.setNewVersion({
+          version: this.version.version,
         })
       })
 
@@ -140,6 +153,20 @@ export default {
         this.updateDownloadList(downloadList)
       }
     },
+    showUpdateModal() {
+      (this.version.newVersion && this.version.newVersion.history ? Promise.resolve(this.version.newVersion) : this.getVersionInfo().then(body => {
+        this.setNewVersion(body)
+        if (body.version !== this.setting.ignoreVersion) this.setSetting(Object.assign({}, this.setting, { ignoreVersion: null }))
+        return body
+      })).then(body => {
+        if (body.version === this.version.version) return
+        if (this.version.isError && body.version === this.setting.ignoreVersion) return
+
+        this.$nextTick(() => {
+          this.setVersionModalVisible({ isShow: true })
+        })
+      })
+    },
   },
   beforeDestroy() {
     if (this.isProd) {

src/renderer/components/core/Icons.vue

@@ -48,5 +48,12 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
       path(fill='currentColor' d='M112.525,95.091L26.75,45.901C11.982,37.427,0,44.369,0,61.404v98.062c0,17.025,11.982,23.969,26.75,15.492l85.781-49.177C127.294,117.305,127.294,103.565,112.525,95.091z')
       // 205.857 205.857
       //- 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(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')
+
+
 </template>
 

src/renderer/components/core/Player.vue

@@ -212,9 +212,9 @@ export default {
         if (!this.targetSong.interval && this.listId != 'download') this.updateMusicInfo({ index: this.playIndex, data: { interval: formatPlayTime2(this.maxPlayTime) } })
         this.status = '音乐加载中...'
       })
-      // this.audio.addEventListener('loadstart', () => {
-      //   this.status = '开始加载音乐信息...'
-      // })
+      this.audio.addEventListener('loadstart', () => {
+        this.status = '音乐加载中...'
+      })
       this.audio.addEventListener('canplay', () => {
         console.log('加载完成开始播放')
         // if (this.musicInfo.lrc) this.lyric.lrc.play(this.audio.currentTime * 1000)

src/renderer/components/material/VersionModal.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 material-modal(:show="version.showModal" @close="handleClose")
   main(:class="$style.main" v-if="version.newVersion")
-    h2 🚀程序更新🚀
+    h2 {{ version.isError ? '🌟发现新版本🌟' : '🚀程序更新🚀'}}
 
     div.scroll(:class="$style.info")
       div(:class="$style.current")
@@ -15,7 +15,20 @@ material-modal(:show="version.showModal" @close="handleClose")
           h4 v{{ver.version}}
           p(v-html="ver.desc")
 
-    div(:class="$style.footer")
+    div(:class="$style.footer" v-if="version.isError")
+      div(:class="$style.desc")
+        p 发现有新版本啦，但是自动更新功能出问题了
+        p
+          | 如果你所用的软件是
+          strong 安装版
+          | ，可以到QQ群：830125506 反馈哦
+        p
+          | 你现在可以选择继续使用当前版本或
+          strong 去发布页下载新版本
+      div(:class="$style.btns")
+        material-btn(:class="$style.btn" @click.onec="handleIgnoreClick") 忽略该版本
+        material-btn(:class="$style.btn" @click.onec="handleOpenPageClick") 去下载新版本
+    div(:class="$style.footer" v-else)
       div(:class="$style.desc")
         p 新版本已下载完毕，
         p
@@ -24,18 +37,18 @@ material-modal(:show="version.showModal" @close="handleClose")
           | 或稍后
           strong 关闭程序时
           | 自动更新~
-      material-btn(:class="$style.btn" @click.onec="handleClick") 立即重启更新
+      material-btn(:class="$style.btn" @click.onec="handleRestartClick") 立即重启更新
 
 </template>
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import { rendererSend } from '../../../common/icp'
-import { checkVersion } from '../../utils'
+import { checkVersion, openUrl } from '../../utils'
 
 export default {
   computed: {
-    ...mapGetters(['version']),
+    ...mapGetters(['version', 'setting']),
     history() {
       if (!this.version.newVersion) return []
       let arr = []
@@ -48,11 +61,21 @@ export default {
     },
   },
   methods: {
-    ...mapMutations(['setVersionVisible']),
+    ...mapMutations(['setVersionModalVisible', 'setSetting']),
     handleClose() {
-      this.setVersionVisible(false)
+      this.setVersionModalVisible({
+        isShow: false,
+      })
     },
-    handleClick(event) {
+    handleIgnoreClick(event) {
+      this.handleClose()
+      // event.target.disabled = true
+      this.setSetting(Object.assign({}, this.setting, { ignoreVersion: this.version.newVersion.version }))
+    },
+    handleOpenPageClick() {
+      openUrl('https://github.com/lyswhut/lx-music-desktop')
+    },
+    handleRestartClick(event) {
       this.handleClose()
       event.target.disabled = true
       rendererSend('quit-update')
@@ -68,7 +91,7 @@ export default {
 .main {
   position: relative;
   padding: 15px;
-  max-width: 500px;
+  max-width: 450px;
   min-width: 300px;
   display: flex;
   flex-flow: column nowrap;
@@ -156,6 +179,11 @@ export default {
   display: block;
   width: 100%;
 }
+.btns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 0 10px;
+}
 
 each(@themes, {
   :global(#container.@{value}) {

src/renderer/store/mutations.js

@@ -19,7 +19,8 @@ export default {
     // val.desc = val.desc.replace(/\n/g, '<br>')
     state.version.newVersion = val
   },
-  setVersionVisible(state, { isShow }) {
-    state.version.showModal = isShow
+  setVersionModalVisible(state, { isShow, isError }) {
+    if (isShow !== undefined) state.version.showModal = isShow
+    if (isError !== undefined) state.version.isError = isError
   },
 }

src/renderer/utils/index.js

@@ -161,7 +161,7 @@ export const isChildren = (parent, children) => {
  * @param {*} setting
  */
 export const updateSetting = setting => {
-  const defaultVersion = '1.0.3'
+  const defaultVersion = '1.0.4'
   const defaultSetting = {
     version: defaultVersion,
     player: {
@@ -185,6 +185,7 @@ export const updateSetting = setting => {
     sourceId: 'kw',
     apiSource: 'messoer',
     randomAnimate: true,
+    ignoreVersion: null,
   }
   const overwriteSetting = {
     version: defaultVersion,

src/renderer/views/Setting.vue

@@ -67,14 +67,21 @@ div.scroll(:class="$style.setting")
       div
         material-btn(:class="[$style.btn, $style.gapLeft]" min @click="handleImportAllData") 导入
         material-btn(:class="[$style.btn, $style.gapLeft]" min @click="handleExportAllData") 导出
+    dt 软件更新
+    dd
+      p.small
+        | 最新版本：{{version.newVersion ? version.newVersion.version : '未知'}}
+      p.small 当前版本：{{version.version}}
+      p.small(v-if="version.newVersion")
+        span(v-if="isLatestVer") 软件已是最新，尽情地体验吧~🥂
+        material-btn(v-else-if="setting.ignoreVersion" :class="[$style.btn, $style.gapLeft]" min @click="showUpdateModal") 打开更新窗口
+        span(v-else) 发现新版本并在努力下载中，请稍等...⏳
+      p.small(v-else) 检查更新中...
     dt 关于洛雪音乐
     dd
       p.small
         | 本软件完全免费，代码已开源，开源地址：
         span.hover(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop')") https://github.com/lyswhut/lx-music-desktop
-      p
-        small 当前版本：
-        | {{version.version}}
       p.small
         |  本软件仅用于学习交流使用，禁止将本软件用于
         strong 非法用途
@@ -111,6 +118,9 @@ export default {
   computed: {
     ...mapGetters(['setting', 'themes', 'version']),
     ...mapGetters('list', ['defaultList']),
+    isLatestVer() {
+      return this.version.newVersion && this.version.version === this.version.newVersion.version
+    },
   },
   data() {
     return {
@@ -202,7 +212,7 @@ export default {
     this.init()
   },
   methods: {
-    ...mapMutations(['setSetting']),
+    ...mapMutations(['setSetting', 'setVersionModalVisible']),
     ...mapMutations('list', ['setDefaultList']),
     init() {
       this.current_setting = JSON.parse(JSON.stringify(this.setting))
@@ -356,6 +366,9 @@ export default {
         window.globalObj.apiSource = id
       })
     },
+    showUpdateModal() {
+      this.setVersionModalVisible({ isShow: true })
+    },
   },
 }
 </script>