Remove legacy update notification (wulkano#295)

This also cleans up some code and moves the notification dispatch to the main process for simplicity.
bcampardou · Nov 8, 2017 · fff6c23 · fff6c23
1 parent bccbfaa
commit fff6c23
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 83 deletions.
diff --git a/app/src/main/auto-updater.js b/app/src/main/auto-updater.js
@@ -1,4 +1,4 @@
-import {app, autoUpdater, ipcMain} from 'electron';
+import {app, autoUpdater, Notification} from 'electron';
 import isDev from 'electron-is-dev';
 import ms from 'ms';
 import {log} from '../common/logger';
@@ -15,15 +15,15 @@ function createInterval() {
 
 let manualCheckTimeout;
 
-function init(window) {
+function init() {
   if (isDev) {
     return;
   }
 
   autoUpdater.setFeedURL(FEED_URL);
 
   setTimeout(() => {
-    log('checking');
+    log('Checking for update…');
     autoUpdater.checkForUpdates();
   }, ms('5s')); // At this point the app is fully started and ready for everything
 
@@ -33,16 +33,22 @@ function init(window) {
     clearTimeout(manualCheckTimeout);
     clearInterval(intervalId);
     intervalId = undefined;
-    log('update available, starting download');
+    log('Update available, starting download…');
   });
 
   autoUpdater.on('update-downloaded', () => {
-    log('update downloaded, will notify the user');
-    window.webContents.send('update-downloaded');
-  });
+    log('Update downloaded, will notify the user');
+
+    const notification = new Notification({
+      title: 'An update is available 🎉',
+      body: 'Click here to install it 😊'
+    });
+
+    notification.on('click', () => {
+      autoUpdater.quitAndInstall();
+    });
 
-  ipcMain.on('install-update', () => {
-    autoUpdater.quitAndInstall();
+    notification.show();
   });
 
   autoUpdater.on('error', err => {

diff --git a/app/src/renderer/css/components/_window-header.css b/app/src/renderer/css/components/_window-header.css
@@ -95,15 +95,6 @@
   height: 3.6rem;
   position: relative;
   text-align: center;
-
-  &.has-update-notification {
-    height: 5.6rem;
-    background-color: $green;
-  }
-
-  &.has-update-notification .window__title {
-    color: #fff;
-  }
 }
 
 .title-bar__controls {

diff --git a/app/src/renderer/css/main.css b/app/src/renderer/css/main.css
@@ -311,30 +311,3 @@ section.progress {
   color: $color-primary;
   font-size: 1.2rem;
 }
-
-.update-notification {
-  @extend .webkit-drag;
-  display: flex;
-  width: 100%;
-  height: 2.75rem;
-  flex-direction: column;
-  color: #fff !important;
-  background-color: $green;
-
-  & span {
-    font-size: 1.2rem;
-  }
-
-  & ul {
-    display: flex;
-    margin-left: auto;
-    position: absolute;
-    right: 0.5rem;
-
-    & li svg {
-      width: 2.4rem;
-      height: 2.4rem;
-      padding: 0.25em;
-    }
-  }
-}
diff --git a/app/src/renderer/js/main.js b/app/src/renderer/js/main.js
@@ -1,4 +1,4 @@
-import {ipcRenderer, remote, shell} from 'electron';
+import {ipcRenderer, remote} from 'electron';
 
 import {init as initErrorReporter, report as reportError} from '../../common/reporter';
 import {log} from '../../common/logger';
@@ -28,27 +28,22 @@ document.addEventListener('DOMContentLoaded', () => {
   const inputWidth = document.querySelector('#aspect-ratio-width');
   const inputHeight = document.querySelector('#aspect-ratio-height');
   const linkBtn = document.querySelector('.link-btn');
-  const openReleaseNotesBtn = document.querySelector('.open-release-notes');
   const options = document.querySelector('.controls-options');
   const progressBar = document.querySelector('#progress-bar');
   const progressBarLabel = document.querySelector('.progress-bar-label');
   const progressBarSection = document.querySelector('section.progress');
   const recordBtn = document.querySelector('.record');
-  const restartAndInstallUpdateBtn = document.querySelector('.restart-and-install-update');
   const toggleAudioRecordBtn = document.querySelector('.js-toggle-audio-record');
   const swapBtn = document.querySelector('.swap-btn');
-  const titleBar = document.querySelector('.title-bar');
   const trafficLightsWrapper = document.querySelector('.title-bar__controls');
   const trayTriangle = document.querySelector('.tray-arrow');
-  const updateNotification = document.querySelector('.update-notification');
   const windowHeader = document.querySelector('.window-header');
 
   const [micOnIcon, micOffIcon] = toggleAudioRecordBtn.children;
 
   // Initial variables
   let lastValidInputWidth = 512;
   let lastValidInputHeight = 512;
-  let hasUpdateNotification = false;
   const dimensions = {
     height: 512,
     width: 512,
@@ -382,9 +377,8 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   function setTrayTriangleVisible(visible = true) {
-    const color = hasUpdateNotification ? '#28CA42' : 'white';
     trayTriangle.style.borderBottomWidth = visible ? '1rem' : '0';
-    trayTriangle.style.borderBottomColor = visible ? color : 'white';
+    trayTriangle.style.borderBottomColor = 'white';
 
     const bodyClasses = document.body.classList;
     if (visible) {
@@ -410,27 +404,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
   ipcRenderer.on('stop-recording', stopRecording);
 
-  ipcRenderer.on('update-downloaded', () => {
-    const title = 'An update is available 🎉';
-    const body = 'Click here to install it 😊';
-
-    hasUpdateNotification = true;
-    titleBar.classList.add('has-update-notification');
-    updateNotification.classList.remove('hidden');
-
-    // If the traffic lights are invisible, the triangle should be visible
-    // if they are visible, the tray triangle should be invisible
-    setTrayTriangleVisible(isVisible(trafficLightsWrapper)); // To update the color
-
-    setMainWindowSize();
-
-    openReleaseNotesBtn.onclick = () => shell.openExternal('https://github.com/wulkano/kap/releases/latest');
-    restartAndInstallUpdateBtn.onclick = () => ipcRenderer.send('install-update');
-
-    const notification = new Notification(title, {body});
-    notification.onclick = () => ipcRenderer.send('install-update');
-  });
-
   ipcRenderer.on('log', (event, msgs) => console.log(...msgs));
 
   function showExportWindow() {

diff --git a/app/src/renderer/views/_mixins.pug b/app/src/renderer/views/_mixins.pug
@@ -31,14 +31,6 @@ mixin window-header
         +icon('traffic-light-minimize').minimize-window
         +icon('traffic-light-disabled').maximize-window
       span.window__title.txt= a.title
-      if a.updates
-        .update-notification.hidden
-          span An update is available!
-          ul
-            li
-              +icon('info').open-release-notes
-            li
-              +icon('refresh').restart-and-install-update
     block
 
 
@@ -75,7 +67,7 @@ mixin range
         .c-range-label=a.lowLabel
         .c-range-label.is-middle.js-middle-label=a.middleLabel
         .c-range-label=a.highLabel
-        
+
 //- **
     name: range
     description: Creates a custom select element wrapper so we don't have to call the icons each time