Merge pull request #162 from catdad/#158-check-for-update

adding a "check for update" option to the menu

lib/menu.js

@@ -20,6 +20,12 @@ module.exports = (events, experiments = {}) => {
           events.emit('ipcevent', { name: 'about' });
         }
       },
+      {
+        label: 'Check for Updates',
+        click: () => {
+          events.emit('ipcevent', { name: 'check-for-update' });
+        }
+      },
       { role: 'reload' },
       { role: 'quit' }
     ]

package.json

@@ -35,8 +35,10 @@
     "fs-extra": "^7.0.1",
     "fs-watch-file": "^1.0.0",
     "lodash": "^4.17.11",
+    "node-fetch": "^2.4.1",
     "p-throttle": "^3.1.0",
     "pretty-bytes": "^5.2.0",
+    "semver": "^6.0.0",
     "sharp": "^0.22.1",
     "trash": "^5.2.0"
   },
@@ -55,7 +57,6 @@
     "eslint": "^5.16.0",
     "form-data": "^2.3.3",
     "mocha": "^6.1.4",
-    "node-fetch": "^2.4.1",
     "rootrequire": "^1.0.0",
     "spectron": "^5.0.0",
     "tar": "^4.4.8",

renderer/main/main.js

@@ -72,6 +72,7 @@ module.exports = function (elem) {
   render('controls', elem);
   render('image', elem);
   render('about', elem);
+  render('updater', elem);
   render('dropzone', elem);
   render('toast', elem);
   render('modal', elem);

renderer/updater/updater.css

@@ -0,0 +1,48 @@
+.modal .updater {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  min-height: 100%;
+}
+
+.modal .updater .credit {
+  font-size: 1.6rem;
+  margin: 10px auto;
+}
+
+.modal .updater a {
+  color: #ffda00;
+  text-decoration: none;
+  opacity: 0.9;
+}
+.modal .updater a:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+
+.modal .updater .head,
+.modal .updater .foot {
+  flex: 0;
+}
+
+.modal .updater .body {
+  flex: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-bottom: 30px;
+}
+
+.modal .updater .icon {
+  font-size: 7rem;
+  padding-bottom: 30px;
+  color: currentColor;
+}
+
+.modal .updater .body a {
+  margin: 10px 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+}

renderer/updater/updater.js

@@ -0,0 +1,76 @@
+const fs = require('fs');
+const path = require('path');
+const semver = require('semver');
+const fetch = require('node-fetch');
+
+const name = 'updater';
+const style = fs.readFileSync(path.resolve(__dirname, `${name}.css`), 'utf8');
+const log = require('../../lib/log.js')(name);
+
+const pkg = require('../../package.json');
+const dom = require('../tools/dom.js');
+const appName = pkg.productName || pkg.name;
+const appVersion = pkg.version;
+
+const get = async (url) => {
+  const res = await fetch(url, {
+    headers: { 'user-agent': `Raw-Viewer-v${appVersion}` }
+  });
+
+  if (!res.ok) {
+    throw new Error(`unexpected response: ${res.status} ${res.statusText}`);
+  }
+
+  return await res.json();
+};
+
+module.exports = ({ events }) => {
+  const elem = dom.div(name);
+  const head = dom.div('head');
+  const foot = dom.div('foot');
+
+  const title = dom.h1(`${appName} v${pkg.version}`);
+  head.appendChild(title);
+
+  [
+    dom.link(appName, 'https://github.com/catdad/raw-viewer'),
+    dom.text(' is made with 💛 by '),
+    dom.link('catdad', 'https://github.com/catdad')
+  ].forEach(el => foot.appendChild(el));
+
+  events.on('check-for-update', async () => {
+    dom.empty(elem);
+    elem.appendChild(head);
+
+    const body = dom.div('body');
+
+    try {
+      const latest = await get('https://api.github.com/repos/catdad/raw-viewer/releases/latest');
+
+      const icon = dom.div('icon');
+      body.appendChild(icon);
+
+      if (semver.gt(latest.tag_name, appVersion)) {
+        icon.appendChild(dom.text('🎁'));
+        body.appendChild(dom.p(`There is an update to Raw Viewer ${latest.tag_name}`));
+        body.appendChild(dom.link('Download', latest.html_url));
+      } else {
+        icon.appendChild(dom.text('🚀'));
+        body.appendChild(dom.p('You are already using the latest version of Raw Viewer.'));
+      }
+    } catch (e) {
+      log.error(e);
+      body.appendChild(dom.p('Something went wrong when checking for an update.'));
+      body.appendChild(dom.p('Please check again later.'));
+    }
+
+    body.appendChild(dom.link('Visit the website', 'https://github.com/catdad/raw-viewer'));
+
+    elem.appendChild(body);
+    elem.appendChild(foot);
+
+    events.emit('modal', { content: elem });
+  });
+
+  return { style };
+};