Merge branch 'central' of https://github.com/TheGreyDiamond/open360viewer into central

README.MD

@@ -3,19 +3,21 @@ open360viewer is an opensource 360° media viewer. It is based on electron and m
 
 ## Getting started
 Currently the viewer can only be used if you have nodeJs installed. Complete packaging is planned.
-1. Install dependencies using `npm install`
+1. Download the repository
-2. Build and minify all assets using `npm run buildCss` and `npm run minify`
+2. Install dependencies using `npm install`
-3. Just run it using `npm start`
+3. Build and minify all assets using `npm run buildCss` and `npm run minify`
+4. Just run it using `npm start`
 
 If you are developing you might want to use `npm run startDev` as it also builds all assets at each launch.
 ## Features
 - viewing equirectangular 360° images
 - viewing equirectangular 360° videos
+- adds possibilty to support Windows's Open with feature (open via Argument)
 ### WiP
 ### Planned features
 - being able to flip through all images in a folder
 - show meta data
-- adds possibilty to support Windows's Open with feature
+
 ## Screenshots
 
 ![App when no file is loaded](https://github.com/TheGreyDiamond/open360viewer/blob/central/screenshots/noImageLoaded.png?raw=true)

index.js

@@ -9,6 +9,10 @@ const {
 const url = require("url");
 const path = require("path");
 const FileType = require("file-type");
+const glob = require("glob");
+const fs = require("fs");
+
+
 let win;
 const isMac = process.platform === "darwin";
 
@@ -96,6 +100,9 @@ function createWindow() {
 app.on("ready", function () {
   createWindow();
 
+
+  console.log(process.argv)
+
   ipcMain.on("synchronous-message", (event, arg) => {
     console.log(arg);
     if (arg == "openFile") {
@@ -104,16 +111,50 @@ app.on("ready", function () {
         .then(function (data) {
           FileType.fromFile(data.filePaths[0]).then((type) => {
             data.type = type["mime"].split("/")[0];
+            console.info(data)
             win.webContents.send("FileData", data);
           });
         });
+      event.returnValue = "";
     } else if (arg == "resize") {
       // A really ugly hack to force the window to update, so the canvas shows up
       win.setSize(win.getSize()[0] + 1, win.getSize()[1]);
       setTimeout(function () {
         win.setSize(win.getSize()[0] + 1, win.getSize()[1]);
       }, 200);
+      event.returnValue = "";
+    } else if (arg.includes("indexFolder")) {
+      const fold = arg.split(";")[1];
+      folder = fs.readdirSync(fold);
+      let result = [];
+      for (const file in folder) {
+        const myFile = folder[file];
+        if (fs.statSync(fold + "/" + myFile).isFile()) {
+          result.push(myFile)
+        }
+      }
+      event.returnValue = result;
+    } else if (arg == "finishedLoading") {
+      const tryOpenFile = process.argv[1];
+
+      if (tryOpenFile != undefined) {
+        console.log("Opening file: ", process.argv[1])
+        if (fs.existsSync(tryOpenFile)) {
+          data = {
+            canceled: false,
+            filePaths: [process.argv[1]]
+          };
+          FileType.fromFile(data.filePaths[0]).then((type) => {
+            data.type = type["mime"].split("/")[0];
+            console.log(data)
+            win.webContents.send("FileData", data);
+          });
+        } else {
+          console.log("Argument file does not exist")
+        }
+      }
+
     }
-    event.returnValue = "";
+
   });
 });

package.json

@@ -10,43 +10,14 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "electron .",
+    "start": "electron ",
     "startDev": "npm run buildCss && npm run minify &&  electron .",
     "minify": "node tooling/minifyAll/minifyAllSrcs.js",
     "buildCss": "npx tailwindcss -i ./src/main.css -o ./dist/output.css",
-    "buildCssWatch": "npx tailwindcss -i ./src/main.css -o ./dist/output.css --watch",
+    "buildCssWatch": "npx tailwindcss -i ./src/main.css -o ./dist/output.css --watch"
-    "package": "electron-forge package",
-    "make": "electron-forge make"
   },
   "author": "TheGreydiamond",
   "license": "GPL-3.0",
-  "config": {
-    "forge": {
-      "packagerConfig": {},
-      "makers": [
-        {
-          "name": "@electron-forge/maker-squirrel",
-          "config": {
-            "name": "open360viewer"
-          }
-        },
-        {
-          "name": "@electron-forge/maker-zip",
-          "platforms": [
-            "darwin"
-          ]
-        },
-        {
-          "name": "@electron-forge/maker-deb",
-          "config": {}
-        },
-        {
-          "name": "@electron-forge/maker-rpm",
-          "config": {}
-        }
-      ]
-    }
-  },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.2.0",
     "file-type": "^16.5.3",

src/main.js

@@ -1,5 +1,7 @@
 const { ipcRenderer, ipcMain } = require("electron");
 
+let currentIndex = -1;
+
 ipcRenderer.on("FileData", function (event, data) {
   console.log(data);
   if (data.canceled == false) {
@@ -14,9 +16,28 @@ ipcRenderer.on("FileData", function (event, data) {
     } else if (data.type == "video") {
       loadVideoFromSource(data.filePaths[0]);
     }
+    makeFileIndex(data.filePaths[0]);
   }
+  
 });
 
+function getPathWithoutExtension(path) {
+  return path.substring(0, path.lastIndexOf("/")) || path.substring(0, path.lastIndexOf("\\"));
+}
+
+function makeFileIndex(fullPath) {
+  fileName = fullPath.substring(fullPath.lastIndexOf("/")) || fullPath.substring(0, fullPath.lastIndexOf("\\"));
+  path = getPathWithoutExtension(fullPath);
+  const result = ipcRenderer.sendSync("synchronous-message", "indexFolder;" + path);
+  const finalResult = [];
+  for(elm in result) {
+    const curr = result[elm];
+    finalResult.push(path + curr)
+  }
+  currentIndex = fin
+  console.log(finalResult)
+}
+
 function openFile() {
   ipcRenderer.sendSync("synchronous-message", "openFile");
 }

src/ui_templates/index.html

@@ -8,7 +8,7 @@
     <link href="../output.css" rel="stylesheet">
 </head>
 
-<body class="dark:bg-gray-800">
+<body class="dark:bg-gray-800" >
     <div id="alert-1" class="flex p-4 mb-4 bg-red-100 rounded-lg dark:bg-red-200" role="alert" style="display: none;">
         <svg class="flex-shrink-0 w-5 h-5 text-red-700 dark:text-red-800" fill="currentColor" viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg">
@@ -105,6 +105,10 @@
 </script>
 <script src="../../dist/dropHandler.js"></script>
 <script>
+    window.onload = function handleDoneLoad(){
+        console.log("Window load finish")
+        ipcRenderer.sendSync("synchronous-message", "finishedLoading");
+    }
 
     function loadImageFromSource(path) {
         testImage(path,