Merge pull request #45 from KL13NT/auto-update

feat(#40): auto update

.gitignore

@@ -87,3 +87,4 @@ typings/
 
 # Electron-Forge
 out/
+dist/

README.md

@@ -34,6 +34,7 @@ This project is *minimal*. Features include:
 - Select and delete multiple entries
 - Select and copy multiple text entries
 - Complete keyboard navigation
+- Seamlessly download updates in the background and apply then when wanted
 
 ## Getting Started
 

package.json

@@ -10,6 +10,7 @@
     "dev:forge": "electron-forge start",
     "dev:render": "webpack --config ./webpack.renderer.config.js --watch --mode development",
     "package": "npm-run-all -s build && electron-forge package",
+    "prepackage": "npm-run-all -s lint pretty test build",
     "build": "webpack --config ./webpack.renderer.config.js --mode production",
     "make": "electron-forge make",
     "premake": "npm-run-all -s lint pretty test build",

src/about.html

@@ -24,22 +24,23 @@ <h2>Tutorial</h2>
 			Left Click an entry to copy it back.
 		</li>
 		<li>
-			Right Click an entry to remove it from the log.
+			Hover over an entry to view actions for that entry
 		</li>
 		<li>
-			Click `Clear clipboard only` to clear your system's clipboard only,
+			Click `Clear clipboard only` or `CTRL + Delete` to clear your system's clipboard only,
 			leaving the log as is.
 		</li>
 		<li>
-			Click `Clear log` to clear the log. You'll be prompted to clear your
+			Click `Clear log` or `CTRL + SHIFT + Delete` to clear the log. You'll be prompted to clear your
 			system's clipboard as well.
 		</li>
 		<li>
-			Click the `pin` icon next to each entry to pin/unpin it to/from the top of the log.
+			Hold `SHIFT` and Left Click multiple entries to select them then click
+			`Copy Selection` or `CTRL + C` to bulk copy your selections. Works with text only.
 		</li>
 		<li>
 			Hold `SHIFT` and Left Click multiple entries to select them then click
-			`Copy Selection` to bulk copy your selections. Works with text only.
+			`Delete Selection` or `Delete` to bulk copy your selections. Works with text only.
 		</li>
 	</ul>
 </body>

src/index.css

@@ -1,9 +1,13 @@
+html {
+  background: #f1f1f1;
+}
+
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
     Arial, sans-serif;
   margin: auto;
   max-width: 38rem;
-  padding: 2rem;
+  padding: 4rem 2rem;
 }
 
 * {
@@ -64,7 +68,7 @@ body {
 #container > ul > li > div.entry-actions {
   display: none;
   position: absolute;
-  background: #fff;
+  background: #f1f1f1;
   border: solid 1px rgba(0, 0, 0, 0.5);
   border-radius: 10px;
   width: 160px;
@@ -114,3 +118,39 @@ body {
 button {
   margin-right: 6px;
 }
+
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 60px;
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 30px;
+  margin: 0;
+}
+
+.navbar button,
+.navbar span {
+  background: transparent;
+  border: none;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.navbar button {
+  cursor: pointer;
+}
+
+.navbar button.update {
+  margin-right: 20px;
+  padding: 0;
+}
+
+.navbar button.update > img {
+  height: 30px;
+  width: 30px;
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+}

src/index.js

@@ -1,3 +1,5 @@
+/** @import * from "./shared/typedefs.js" */
+
 const isDev = require("electron-is-dev");
 const path = require("path");
 const {
@@ -10,6 +12,7 @@ const {
   ipcMain,
   nativeImage,
   Menu,
+  autoUpdater,
 } = require("electron");
 const { nanoid } = require("nanoid");
 const { pathToFileURL } = require("url");
@@ -19,6 +22,10 @@ const {
   CLIPBOARD_EVENT,
   CLIPBOARD_CLEAR,
   CLIPBOARD_BULK_COPY,
+  OPEN_ABOUT_PAGE,
+  AUTO_UPDATE_URL,
+  UPDATE_APPLY,
+  UPDATE_AVAILABLE,
 } = require("./shared/constants");
 
 app.setLoginItemSettings({
@@ -27,12 +34,6 @@ app.setLoginItemSettings({
 
 if (require("electron-squirrel-startup")) app.quit();
 
-/**
- * defining tray globally to avoid GC bug
- * https://www.electronjs.org/docs/faq#my-apps-windowtray-disappeared-after-a-few-minutes
- * @type {Tray} */
-let tray = null;
-
 /** @type {Electron.BrowserWindowConstructorOptions} */
 const DEFAULT_WINDOW_OPTIONS = {
   enableLargerThanScreen: false,
@@ -56,10 +57,17 @@ const DEFAULT_PAGE_OPTIONS = {
   titleBarStyle: "hidden",
 };
 
+/**
+ * defining tray globally to avoid GC bug
+ * https://www.electronjs.org/docs/faq#my-apps-windowtray-disappeared-after-a-few-minutes
+ * @type {Tray} */
+let tray = null;
 /** @type {BrowserWindow} */
 let mainWindow = null;
 /** @type {BrowserWindow} */
 let aboutWindow = null;
+/** @type {UpdateInfo} */
+const updateInfo = null;
 
 const minimize = () => {
   mainWindow.hide();
@@ -203,9 +211,30 @@ const preventNavigation = (e) => {
   e.preventDefault();
 };
 
+const openAboutPage = () => {
+  aboutWindow.show();
+};
+
+const applyUpdate = () => {
+  const { releaseNotes } = updateInfo;
+  const dialogOpts = {
+    type: "info",
+    buttons: ["Restart", "Later"],
+    title: "Application Update",
+    message: releaseNotes,
+    detail:
+      "A new version has been downloaded. Restart the application to apply the updates.",
+  };
+
+  const response = dialog.showMessageBoxSync(dialogOpts);
+  if (response === 0) autoUpdater.quitAndInstall();
+};
+
 ipcMain.handle(CLIPBOARD_CLEAR, clear);
 ipcMain.on(CLIPBOARD_EVENT, handleIPCCopy);
 ipcMain.on(CLIPBOARD_BULK_COPY, handleIPCBulk);
+ipcMain.on(OPEN_ABOUT_PAGE, openAboutPage);
+ipcMain.on(UPDATE_APPLY, applyUpdate);
 
 /**
  * @param {Object} config
@@ -224,6 +253,26 @@ const createPage = ({ title, options, url }) => {
   return window;
 };
 
+const feed = `${AUTO_UPDATE_URL}/update/${
+  process.platform
+}/${app.getVersion()}`;
+
+autoUpdater.setFeedURL(feed);
+
+if (!isDev) {
+  const updateInterval = setInterval(() => {
+    autoUpdater.checkForUpdates();
+  }, 5 * 60 * 1000 /* Every 5 minutes */);
+
+  autoUpdater.on("update-available", () => {
+    clearInterval(updateInterval);
+  });
+
+  autoUpdater.on("update-downloaded", () => {
+    mainWindow.webContents.send(UPDATE_AVAILABLE);
+  });
+}
+
 const createWindow = () => {
   try {
     mainWindow = createPage({
@@ -232,6 +281,7 @@ const createWindow = () => {
       url: path.resolve(__dirname, "./index.html"),
     });
 
+    mainWindow.removeMenu();
     mainWindow.maximize();
     mainWindow.on("close", handleExit);
     mainWindow.on("minimize", handleMinimize);
@@ -253,27 +303,21 @@ const createWindow = () => {
 
     tray.setContextMenu(trayMenu);
 
-    const mainMenu = Menu.buildFromTemplate([
-      {
-        label: "About",
-        click: () => {
-          aboutWindow = createPage({
-            title: "About",
-            url: path.resolve(__dirname, "./about.html"),
-            options: {
-              ...DEFAULT_PAGE_OPTIONS,
-              parent: mainWindow,
-            },
-          });
-
-          aboutWindow.removeMenu();
-          aboutWindow.webContents.on("will-navigate", preventNavigation);
-          aboutWindow.webContents.on("new-window", aboutLinkHandler);
-        },
+    aboutWindow = createPage({
+      title: "About",
+      url: path.resolve(__dirname, "./about.html"),
+      options: {
+        ...DEFAULT_PAGE_OPTIONS,
+        parent: mainWindow,
       },
-    ]);
+    });
+
+    aboutWindow.hide();
+    aboutWindow.removeMenu();
+    aboutWindow.webContents.on("will-navigate", preventNavigation);
 
-    app.applicationMenu = mainMenu;
+    aboutWindow.on("close", (e) => e.preventDefault() || aboutWindow.hide());
+    aboutWindow.webContents.on("new-window", aboutLinkHandler);
 
     pingClipboardChanges();
   } catch (error) {