AutoUpdate functionality

.gitignore

@@ -25,3 +25,4 @@ pnpm-debug.log*
 
 #Electron-builder output
 /dist_electron
+/build

package.json

@@ -1,18 +1,20 @@
 {
   "name": "webmessage",
+  "author": "sgtaziz",
+  "description": "A client for communicating with the WebMessage tweak on iOS. Send and receive messages from the comfort of your computer.",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "electron:build": "vue-cli-service electron:build",
-    "electron:serve": "vue-cli-service electron:serve",
+    "serve": "vue-cli-service electron:serve",
+    "build": "trash build/*;yarn generate-icons;vue-cli-service electron:build",
+    "publish": "yarn build -mwl -p always",
+    "generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps"
   },
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/sgtaziz/WebMessage.git"
+    "type": "git",
+    "url": "https://github.com/sgtaziz/WebMessage.git"
   },
   "main": "background.js",
   "dependencies": {
@@ -22,6 +24,7 @@
     "core-js": "^3.6.5",
     "electron-context-menu": "^2.3.1",
     "electron-store": "^6.0.1",
+    "electron-updater": "^4.3.5",
     "feather-icons": "^4.28.0",
     "moment": "^2.29.1",
     "simplebar": "^5.3.0",
@@ -39,8 +42,11 @@
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "electron": "^9.0.0",
+    "electron-icon-builder": "^2.0.1",
+    "electron-log": "^4.3.1",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.2",
+    "trash-cli": "^4.0.0",
     "vue-cli-plugin-electron-builder": "~2.0.0-rc.5",
     "vue-devtools": "^5.1.4",
     "vue-template-compiler": "^2.6.11"

src/App.vue

@@ -18,7 +18,10 @@
           <feather type="settings" stroke="rgba(152,152,152,0.5)" size="20" @click="$refs.settingsModal.openModal()"></feather>
         </div>
         <div class="menuBtn">
-          <feather type="edit" stroke="rgba(152,152,152,0.5)" size="20" @click="composeMessage"></feather>
+          <feather type="edit" stroke="rgba(36,132,255,0.65)" size="20" @click="composeMessage"></feather>
+        </div>
+        <div class="menuBtn" v-if="updateAvailable">
+          <feather type="download" stroke="rgba(152,255,152,0.65)" size="20" @click="restart"></feather>
         </div>
       </div>
       <div class="searchContainer">
@@ -60,7 +63,8 @@ export default {
       limit: 25,
       offset: 0,
       loading: false,
-      notifSound: new Audio(process.env.BASE_URL+'receivedText.mp3')
+      notifSound: new Audio(process.env.BASE_URL+'receivedText.mp3'),
+      updateAvailable: false
     }
   },
   methods: {
@@ -77,6 +81,9 @@ export default {
       const window = this.getWindow()
       !window.minimizedState ? window.unmaximize() : window.maximize()
     },
+    restart () {
+      ipcRenderer.send('restart_app')
+    },
     requestChats (clear) {
       if (this.$socket && this.$socket.readyState == 1) {
         if (this.loading) return
@@ -115,6 +122,19 @@ export default {
         this.requestChats()
       }
     })
+
+    ipcRenderer.send('loaded')
+
+    ipcRenderer.on('update_available', () => {
+      ipcRenderer.removeAllListeners('update_available')
+      console.log('Update detected. Downloading...')
+    })
+
+    ipcRenderer.on('update_downloaded', () => {
+      ipcRenderer.removeAllListeners('update_downloaded')
+      console.log('Update downloaded. Waiting on user to restart.')
+      this.updateAvailable = true
+    })
   },
   socket: {
     fetchChats (data) {
@@ -146,7 +166,14 @@ export default {
         }
 
         this.notifSound.play()
-        new remote.Notification(notification).show()
+        let notif = new remote.Notification(notification)
+        notif.on('click', (event, arg) => {
+          if (chatData && chatData.id) {
+            this.$router.push('/message/'+chatData.id)
+          }
+        })
+        notif.show()
+
       } else if (!remote.Notification.isSupported()) {
         console.log('Notifications are not supported on this system.')
       }
@@ -185,7 +212,7 @@ export default {
     cursor: pointer;
 
     &:hover {
-      stroke: lighten(rgba(152,152,152,0.5), 20%);
+      filter: brightness(80%);
     }
   }
 }

src/background.js

@@ -1,10 +1,13 @@
 'use strict'
 
-import { app, protocol, BrowserWindow } from 'electron'
+import { app, protocol, BrowserWindow, ipcMain } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 const path = require('path')
 const contextMenu = require('electron-context-menu');
+const { autoUpdater } = require('electron-updater');
+autoUpdater.logger = require("electron-log")
+autoUpdater.logger.transports.file.level = "info"
 
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([
@@ -30,9 +33,10 @@ async function createWindow() {
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
       // nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
       nodeIntegration: true,
-      preload: path.join(__dirname, '../src/preload.js'),
+      preload: path.join(__dirname, 'preload.js'),
       enableRemoteModule: true
-    }
+    },
+    icon: path.join(__static, 'icon.png')
   })
 
   win.minimizedState = true;
@@ -46,6 +50,15 @@ async function createWindow() {
     // Load the index.html when not in development
     win.loadURL('app://./index.html')
   }
+
+
+  autoUpdater.on('update-available', () => {
+    win.webContents.send('update_available')
+  })
+
+  autoUpdater.on('update-downloaded', () => {
+    win.webContents.send('update_downloaded')
+  })
 }
 
 // Quit when all windows are closed.
@@ -99,3 +112,18 @@ if (isDevelopment) {
 }
 
 app.commandLine.appendSwitch('ignore-certificate-errors', 'true')
+
+ipcMain.on('loaded', (event) => {
+  console.log('Running auto updater...')
+  autoUpdater.checkForUpdatesAndNotify()
+})
+
+ipcMain.on('app_version', (event) => {
+  event.sender.send('app_version', { version: app.getVersion() })
+})
+
+ipcMain.on('restart_app', () => {
+  setImmediate(() => {
+    autoUpdater.quitAndInstall()
+  })
+})

src/components/Message.vue

@@ -15,33 +15,35 @@
     </div>
     <template v-else-if="$route.params.id != 'new' || this.receiver != ''">
       <simplebar class="messages" ref="messages" data-simplebar-auto-hide="false">
-        <template v-for="(msg, i) in sortedMessages" :id="msg.id">
+        <div v-for="(msg, i) in sortedMessages" :id="msg.id" :key="msg.id">
           <div class="timegroup" v-html="dateGroup(i-1, i)"></div>
 
           <div :ref="'msg'+msg.id" :class="(msg.sender == 1 ? 'send ' : 'receive ') + msg.type" class="messageGroup">
             <div v-if="msg.group && msg.sender != 1" class="senderName" v-html="$options.filters.twemoji(msg.author)"></div>
-            <template v-for="(text, i) in msg.texts">
-              <div v-if="msg.attachments && msg.attachments.length > 0" v-for="(attachment, index) in msg.attachments" :key="`${i}-${index}`" class="attachment">
+            <template v-if="msg.attachments && msg.attachments.length > 0">
+              <div v-for="(attachment, index) in msg.attachments" :key="`${i}-${index}`" class="attachment">
                 <img v-if="isImage(attachment[1])"
                 :src="`${$store.getters.httpURI}/attachments?path=${encodeURIComponent(attachment[0])}&type=${attachment[1]}&auth=${$store.state.password}`"
                 @load="scrollToBottom" />
 
                 <video v-else-if="isVideo(attachment[1])" controls width="100%" @loadeddata="scrollToBottom">
                   <source :src="`${$store.getters.httpURI}/attachments?path=${encodeURIComponent(attachment[0])}&type=${attachment[1]}&auth=${$store.state.password}`"
-                    :type="attachment[1].includes('quicktime') ? 'video/mp4' : attachment[1]">
+                    :type="attachment[1].includes('quicktime') ? 'video/mp4' : attachment[1]" />
                     This video type is not supported.
                 </video>
               </div>
+            </template>
+            <template v-for="(text, i) in msg.texts">
               <div
-              class="message"
-              :key="i"
-              :class="(msg.texts.length-1 == i ? 'last ' : '') + (isEmojis(text.text) ? 'jumbo' : '')"
-              v-if="$options.filters.twemoji(text.text) != ''">
+                class="message"
+                :key="i"
+                :class="(msg.texts.length-1 == i ? 'last ' : '') + (isEmojis(text.text) ? 'jumbo' : '')"
+                v-if="$options.filters.twemoji(text.text) != ''">
                 <span style="white-space: pre-wrap;" v-html="$options.filters.twemoji(text.text)"></span>
               </div>
             </template>
           </div>
-        </template>
+        </div>
       </simplebar>
 
       <div class="textboxContainer">

src/components/Settings.vue

@@ -16,6 +16,10 @@
         </label>
         <a class="btn" v-on:click="saveModal">Save</a>
         <a v-on:click="closeModal" class="btn destructive">Cancel</a>
+
+        <div class="version">
+          v{{version}}
+        </div>
       </div>
     </div>
   </transition>
@@ -30,7 +34,8 @@ export default {
       password: '',
       ip: '',
       port: null,
-      ssl: false
+      ssl: false,
+      version: ''
     }
   },
   methods: {
@@ -70,12 +75,23 @@ export default {
   },
   mounted () {
     this.loadValues()
+
+    ipcRenderer.send('app_version')
+    ipcRenderer.on('app_version', (event, arg) => {
+      ipcRenderer.removeAllListeners('app_version')
+      this.version = arg.version
+    })
   }
 }
 </script>
 
 
 <style lang="scss" scoped>
+.version {
+  font-size: 12px;
+  margin-bottom: -18px;
+  color: gray;
+}
 .modal {
   overflow: hidden;
   position: fixed;

vue.config.js

@@ -1,5 +1,21 @@
 module.exports = {
   configureWebpack: {
     target: "electron-renderer"
+  },
+  pluginOptions: {
+    electronBuilder: {
+      appId: "com.sgtaziz.WebMessage",
+      productName: "WebMessage",
+      outputDir: 'build',
+      preload: 'src/preload.js',
+      builderOptions: {
+        appId: "com.sgtaziz.WebMessage",
+        productName: "WebMessage",
+        publish: ['github'],
+        snap: {
+          publish: ['github']
+        }
+      }
+    }
   }
 }