Merge branch 'main' of https://github.com/GameGodS3/DropPoint into main

Author: GameGodS3

package-lock.json

@@ -1,9 +1,9 @@
 {
   "name": "droppoint",
   "productName": "DropPoint",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Drag-and-drop assist",
-  "main": "index.js",
+  "main": "./src/App.js",
   "scripts": {
     "start": "electron .",
     "build": "electron-builder",

package.json

@@ -17,6 +17,7 @@ function clearDrag() {
   }
   dragicons[0].removeAttribute("style");
 }
+
 (function () {
   holder.ondragover = (e) => {
     e.preventDefault;
@@ -59,13 +60,13 @@ function clearDrag() {
       }
       // If the filetype does not belong to the available JavaScript filetypes
       if (filetype === "") {
-        document.querySelector("#drag img").src = "./media/png/file.png";
+        document.querySelector("#drag img").src = "./media/file.png";
         filetype = "application";
       } else if (filetype != "application") {
         document.querySelector("#drag img").src =
-          "./media/png/" + filetype + ".png";
+          "./media/" + filetype + ".png";
       } else {
-        document.querySelector("#drag img").src = "./media/png/file.png";
+        document.querySelector("#drag img").src = "./media/file.png";
       }
       filepath = f.path.toString();
       let filedict = {
@@ -82,22 +83,22 @@ function clearDrag() {
     // Animations for multiple file input
     dragicons = document.getElementsByClassName("files");
     if (filelist.length == 2) {
-      dragicons[0].src = "./media/png/file.png";
+      dragicons[0].src = "./media/file.png";
       let newimg = document.createElement("img");
-      newimg.src = "./media/png/file.png";
+      newimg.src = "./media/file.png";
       newimg.className = "files";
       fileicons.appendChild(newimg);
       dragicons[0].style = "animation: tilt 0.5s forwards";
       newimg.style = "filter: drop-shadow(3px 3px 5px #0a0a0942);";
     } else if (filelist.length > 2) {
-      dragicons[0].src = "./media/png/file.png";
+      dragicons[0].src = "./media/file.png";
       // ProtoImg and NewImg are required in case user drags in more than 2 files initially itself
       let protoimg = document.createElement("img");
-      protoimg.src = "./media/png/file.png";
+      protoimg.src = "./media/file.png";
       protoimg.className = "files";
       fileicons.appendChild(protoimg);
       let newimg = document.createElement("img");
-      newimg.src = "./media/png/file.png";
+      newimg.src = "./media/file.png";
       newimg.className = "files";
       fileicons.appendChild(newimg);
       dragicons[0].style = "animation: tiltmore 0.5s forwards";
@@ -112,7 +113,7 @@ function clearDrag() {
 // Drag out request to electron
 document.getElementById("drag").ondragstart = (event) => {
   event.preventDefault();
-  window.electron.startDrag(filelist);
+  window.electron.dragOutListener(filelist);
   dragin.style.display = "flex";
   dragout.style.display = "none";
   clearDrag();

renderer.js

@@ -0,0 +1,40 @@
+const { app, BrowserWindow, nativeImage } = require("electron");
+const path = require("path");
+const { autoUpdater } = require("electron-updater");
+const { createMainWindow } = require("./Window");
+const { setShortcut } = require("./Shortcut");
+const { droppointDefaultIcon } = require("./Icons");
+const { setTray } = require("./Tray");
+
+app
+  .on("ready", () => {
+    // Splash screen to run in background and keep app alive
+    let splashScreen = new BrowserWindow({
+      width: 400,
+      height: 200,
+      frame: false,
+      titleBarStyle: "hidden",
+      transparent: true,
+      icon: nativeImage.createFromPath(droppointDefaultIcon),
+    });
+    splashScreen.loadFile(path.join(__dirname, "../static/media/splash.jpeg"));
+    splashScreen.removeMenu();
+    setTimeout(() => {
+      splashScreen.hide();
+    }, 3000);
+
+    if (createMainWindow()) {
+      setTray();
+      setShortcut();
+    }
+  })
+  .on("activate", () => {
+    autoUpdater.checkForUpdatesAndNotify();
+    if (BrowserWindow.getAllWindows.length === 0) {
+      createMainWindow();
+    }
+  })
+  .on("will-quit", () => {
+    globalShortcut.unregisterAll();
+  });
+module.exports = { whenReady: app.whenReady };

src/App.js

@@ -0,0 +1,28 @@
+const path = require("path");
+
+let convertToNative = (imageName) => {
+  let icon = path.join(__dirname, "../static/media/", imageName);
+  return icon;
+};
+
+let droppointDefaultIcon = convertToNative("droppoint.ico");
+let droppointMacIcon = convertToNative("droppoint.icns");
+let audio = convertToNative("audio.png");
+let file = convertToNative("file.png");
+let folder = convertToNative("folder.png");
+let image = convertToNative("image.png");
+let multifile = convertToNative("multifile.png");
+let text = convertToNative("text.png");
+let video = convertToNative("video.png");
+
+module.exports = {
+  droppointDefaultIcon: droppointDefaultIcon,
+  droppointMacIcon: droppointMacIcon,
+  audio: audio,
+  file: file,
+  folder: folder,
+  image: image,
+  multifile: multifile,
+  text: text,
+  video: video,
+};

src/Icons.js

@@ -0,0 +1,76 @@
+const { ipcMain, nativeImage } = require("electron");
+global.share = { ipcMain };
+
+const {
+  audio,
+  file,
+  folder,
+  image,
+  multifile,
+  text,
+  video,
+} = require("./Icons");
+
+/**
+ * Assigns file icons according to type. If multiple files, use multifile icon.
+ * @param {Array} fileList The collection of files currently dragged into the window
+ * @return {String} Name of icon according to filetype
+ */
+let getFileTypeIcons = (fileList) => {
+  let fileType;
+  if (fileList.length <= 1) {
+    fileType = fileList[0]["fileType"];
+    if (fileType != "application") {
+      fileType = eval(fileType); //eval is used for using the string value in fileType as a variable
+    } else {
+      fileType = file;
+    }
+  } else {
+    fileType = multifile;
+  }
+  return fileType;
+};
+
+/**
+ * Returns list of file paths of all the files in filelist.
+ * Necessary for startDrag API of electron
+ *
+ * @param {Array} fileList - List of files
+ * @return {Array} List of paths of files in fileList
+ */
+let getFilePathList = (fileList) => {
+  let filePathList = [];
+  fileList.forEach((element) => {
+    filePathList.push(element["filePath"]);
+  });
+  return filePathList;
+};
+
+/**
+ * Activates Drag-and-Drop API of electron. Handles drag icon attributes.
+ * Minimises instance after operation
+ *
+ * @param {Array} fileList - List of files
+ */
+let dragHandler = ipcMain.on("ondragstart", (event, fileList) => {
+  let fileType = getFileTypeIcons(fileList);
+  let filePathList = getFilePathList(fileList);
+  let flag = false;
+  event.sender.startDrag({
+    files: filePathList,
+    icon: nativeImage.createFromPath(fileType).resize({ width: 64 }),
+  });
+  DROPPOINT_MAIN.close();
+});
+
+/**
+ * For minimising instance on clicking the button
+ */
+let minimiseHandler = ipcMain.on("minimise", () => {
+  DROPPOINT_MAIN.close();
+});
+
+module.exports = {
+  dragHandler: dragHandler,
+  minimiseHandler: minimiseHandler,
+};

src/RequestHandlers.js

@@ -0,0 +1,24 @@
+const { globalShortcut, BrowserWindow } = require("electron");
+const { createMainWindow } = require("./Window");
+
+/**
+ * Sets Shift + Caps Lock as Shortcut. Change to convenience
+ */
+const setShortcut = () => {
+  let visible = true;
+  const ret = globalShortcut.register("Shift+Capslock", () => {
+    if (DROPPOINT_MAIN) {
+      DROPPOINT_MAIN.close();
+    } else {
+      createMainWindow();
+    }
+  });
+
+  if (!ret) {
+    console.log("KeyboardShorcutError");
+  }
+};
+
+module.exports = {
+  setShortcut: setShortcut,
+};

src/Shortcut.js

@@ -0,0 +1,54 @@
+const { Tray, Menu, nativeImage, app } = require("electron");
+const { droppointDefaultIcon } = require("./Icons");
+const { createMainWindow } = require("./Window");
+
+let trayIcon = nativeImage
+  .createFromPath(droppointDefaultIcon)
+  .resize({ width: 16 });
+
+let tray;
+
+/**
+ * Sets system tray
+ */
+const setTray = () => {
+  tray = new Tray(trayIcon);
+  tray.setContextMenu(
+    Menu.buildFromTemplate([
+      {
+        label: "New Instance",
+        click: function () {
+          if (!DROPPOINT_MAIN) {
+            createMainWindow();
+          } else {
+            tray.displayBalloon({
+              title: "DropPoint",
+              content: "Instance already exists!",
+              icon: nativeImage
+                .createFromPath(droppointDefaultIcon)
+                .resize({ width: 64 }),
+            });
+          }
+        },
+      },
+      {
+        label: "Quit",
+        click: function () {
+          app.quit();
+        },
+      },
+    ])
+  );
+  tray.setToolTip("DropPoint");
+  tray.on("double-click", () => {
+    if (!DROPPOINT_MAIN) {
+      createMainWindow();
+    } else {
+      DROPPOINT_MAIN.close();
+    }
+  });
+};
+
+module.exports = {
+  setTray: setTray,
+};

src/Tray.js

@@ -0,0 +1,71 @@
+global.DROPPOINT_MAIN = null;
+
+const { BrowserWindow, screen, nativeImage } = require("electron");
+const path = require("path");
+
+const { droppointDefaultIcon } = require("./Icons");
+require("./RequestHandlers"); // For Drag and Drop and Minimise handling
+
+let defaultWindowConfig = {
+  width: 200,
+  height: 200,
+  x: 0, // For creating a session at the top middle of the screen
+  y: 0,
+  frame: false,
+  titleBarStyle: "hidden",
+  transparent: true,
+  resizable: false,
+  alwaysOnTop: true,
+  webPreferences: {
+    nodeIntegration: true,
+    preload: path.join(__dirname, "preload.js"),
+  },
+
+  icon: nativeImage.createFromPath(droppointDefaultIcon),
+};
+
+function devConfig() {
+  defaultWindowConfig.frame = true;
+  defaultWindowConfig.titleBarStyle = "default";
+  defaultWindowConfig.resizable = true;
+  defaultWindowConfig.width = null;
+  defaultWindowConfig.height = null;
+}
+
+/**
+ * Creates a global instance of DropPoint when called.
+ * Only one instance of DropPoint at a time will be stable.
+ * Multiple instances may cause errors
+ *
+ * @param {Boolean} debug - pass "true" to get Debug settings
+ * @returns {Boolean} true if successful
+ */
+function createMainWindow(debug = false) {
+  let width = screen.getPrimaryDisplay().bounds.width;
+  defaultWindowConfig.x = width / 2 - 100;
+
+  if (debug) {
+    devConfig();
+    DROPPOINT_MAIN = new BrowserWindow(defaultWindowConfig);
+    DROPPOINT_MAIN.webContents.openDevTools();
+  } else {
+    DROPPOINT_MAIN = new BrowserWindow(defaultWindowConfig);
+  }
+
+  DROPPOINT_MAIN.loadFile(path.join(__dirname, "../static/index.html"));
+  DROPPOINT_MAIN.setVisibleOnAllWorkspaces(true);
+  DROPPOINT_MAIN.shadow = true;
+  DROPPOINT_MAIN.removeMenu();
+
+  DROPPOINT_MAIN.on("closed", () => {
+    DROPPOINT_MAIN = null;
+  });
+  if (DROPPOINT_MAIN) {
+    return true;
+  }
+  return false;
+}
+
+module.exports = {
+  createMainWindow: createMainWindow,
+};