It works, main page can open both media types

2025-07-17 20:33:48 +02:00 · 2022-01-04 20:33:43 +01:00
parent efc71a9eef
commit 9732c040a9
6 changed files with 137 additions and 63 deletions
--- a/index.js
+++ b/index.js
@ -8,7 +8,7 @@ const {
 } = require("electron");
 const url = require("url");
 const path = require("path");
-
+const FileType = require("file-type");
 let win;
 const isMac = process.platform === "darwin";

@ -24,8 +24,16 @@ const template = [
          dialog
            .showOpenDialog({ properties: ["openFile", "multiSelections"] })
            .then(function (data) {
-              console.log(data);
-              win.webContents.send("FileData", data);
+              if (data.canceled == false) {
+                console.log(data);
+                FileType.fromFile(data.filePaths[0]).then((type) => {
+                  console.log(type["mime"].split("/")[0]);
+                  data.type = type["mime"].split("/")[0];
+                  win.webContents.send("FileData", data);
+                });
+              }
+              // console.log(await FileType.fromFile(data));
+              //  win.webContents.send("FileData", data);
            });
        },
      },
@ -52,7 +60,10 @@ const template = [
        click: async () => {
          win.loadURL(
            url.format({
-              pathname: path.join(__dirname, "dist/ui_templates/videoPlayer.html"),
+              pathname: path.join(
+                __dirname,
+                "dist/ui_templates/videoPlayer.html"
+              ),
              protocol: "file:",
              slashes: true,
            })
@ -101,7 +112,7 @@ function createWindow() {

  win.loadURL(
    url.format({
-      pathname: path.join(__dirname, "dist/ui_templates/videoPlayer.html"),
+      pathname: path.join(__dirname, "dist/ui_templates/index.html"),
      protocol: "file:",
      slashes: true,
    })
@ -120,8 +131,13 @@ app.on("ready", function () {
      dialog
        .showOpenDialog({ properties: ["openFile", "multiSelections"] })
        .then(function (data) {
-          console.log(data);
-          win.webContents.send("FileData", data);
+          console.log(data.filePaths);
+          // console.log(await FileType.fromFile(data));
+          FileType.fromFile(data.filePaths[0]).then((type) => {
+            console.log(type["mime"].split("/")[0]);
+            data.type = type["mime"].split("/")[0];
+            win.webContents.send("FileData", data);
+          });
        });
    } else if (arg == "resize") {
      // A really ugly hack to force the window to update, so the canvas shows up
--- a/package.json
+++ b/package.json
@ -51,16 +51,17 @@
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@themesberg/flowbite": "^1.2.0",
    "electron": "^16.0.5",
+    "file-type": "^16.5.3",
    "marzipano": "^0.10.2"
  },
  "devDependencies": {
-    "minify": "^8.0.3",
-    "tailwindcss": "^3.0.8",
    "@electron-forge/cli": "^6.0.0-beta.61",
    "@electron-forge/maker-deb": "^6.0.0-beta.61",
    "@electron-forge/maker-rpm": "^6.0.0-beta.61",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.61",
    "@electron-forge/maker-zip": "^6.0.0-beta.61",
-    "electron": "^16.0.5"
+    "electron": "^16.0.5",
+    "minify": "^8.0.3",
+    "tailwindcss": "^3.0.8"
  }
 }
--- a/src/main.js
+++ b/src/main.js
@ -8,7 +8,11 @@ ipcRenderer.on("FileData", function (event, data) {
    document.getElementById("loadingBig").style.display = "block";
    document.getElementById("state").innerHTML =
      "Loading file. If this stays empty try another file.";
-    loadImageFromSource(data.filePaths[0]);
+    if (data.type == "image") {
+      loadImageFromSource(data.filePaths[0]);
+    } else if (data.type == "video") {
+      loadVideoFromSource(data.filePaths[0]);
+    }
  }
 });

@ -16,7 +20,7 @@ function openFile() {
  ipcRenderer.sendSync("synchronous-message", "openFile");
 }

-var viewer = new Marzipano.Viewer(document.getElementById("pano"));
+var viewer = new Marzipano.Viewer(document.getElementById("pano2"));
 function newPano(path) {
  var sourceIm = Marzipano.ImageUrlSource.fromString(path);
  // Create scene.
@ -28,9 +32,10 @@ function newPano(path) {
  });
  scene.switchTo();
  setTimeout(function () {
-    scene.switchTo()
-    }, 20);
-    ipcRenderer.sendSync("synchronous-message", "resize");
+    scene.switchTo();
+  }, 20);
+  ipcRenderer.sendSync("synchronous-message", "resize");
+  document.getElementById("video-controls").style.display = "none";
 }

 var geometry = new Marzipano.EquirectGeometry([{ width: 4000 }]);
@ -41,3 +46,19 @@ var limiter = Marzipano.RectilinearView.limit.traditional(
  (120 * Math.PI) / 180
 );
 var view = new Marzipano.RectilinearView({ yaw: Math.PI }, limiter);
+
+function loadVideoFromSource(path) {
+  setTimeout(function () {
+    multiResVideo.setResolutionIndex(1, path, loadingDone);
+  }, 20);
+}
+
+function loadingDone(state) {
+  if (!state) {
+      document.getElementById("loadingBig").style.display = "none";
+      ipcRenderer.sendSync("synchronous-message", "resize");
+      document.getElementById("pano").style.display = "block";
+      document.getElementById("pano2").style.display = "none";
+      document.getElementById("video-controls").style.display = "block";
+  }
+}
--- a/src/ui_templates/index.html
+++ b/src/ui_templates/index.html
@ -2,27 +2,39 @@
 <html class="dark">

 <head>
-    <meta charset="UTF-8">
    <title>360 Viewer</title>
-    <script src="../../node_modules/marzipano/dist/marzipano.js"></script>
-        <script src="../../node_modules/marzipano/demos/video/VideoAsset.js"></script>
-    
+    <meta name="viewport"
+        content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
+    <link rel="stylesheet" href="../../dist/videoPlayer.css">
    <link href="../output.css" rel="stylesheet">
    <link href="../../node_modules/@fortawesome/fontawesome-free/css/all.css" rel="stylesheet">
    <script src="../../node_modules/@themesberg/flowbite/dist/flowbite.bundle.js"></script>
+
 </head>

 <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"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
+        <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">
+            <path fill-rule="evenodd"
+                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                clip-rule="evenodd"></path>
+        </svg>
        <div class="ml-3 text-sm font-medium text-red-700 dark:text-red-800">
-          The provided image was invalid and could not be loaded.
+            The provided image was invalid and could not be loaded.
        </div>
-        <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300" data-collapse-toggle="alert-1" aria-label="Close" onclick="document.getElementById('alert-1').style.display = 'none'">
-          <span class="sr-only">Close</span>
-          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        <button type="button"
+            class="ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300"
+            data-collapse-toggle="alert-1" aria-label="Close"
+            onclick="document.getElementById('alert-1').style.display = 'none'">
+            <span class="sr-only">Close</span>
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd"
+                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                    clip-rule="evenodd"></path>
+            </svg>
        </button>
-      </div>
+    </div>

    <center>
        <h1 id="state" style="display: none;"></h1>
@ -49,19 +61,67 @@
    <div id="pano">

    </div>
+    <div id="pano2">
+
+    </div>
+
+    <div class="video-controls" id="video-controls" style="display: none;">
+        <div class="control-btn play" id="play-pause">
+            <i class="fas fa-play play-icon"></i>
+            <i class="fas fa-pause pause-icon"></i>
+        </div>
+        <div class="control-btn sound" id="mute">
+            <i class="fas fa-volume-up sound-on"></i>
+            <i class="fas fa-volume-mute sound-off"></i>
+        </div>
+        <div class="time">
+            <h5 class="initial-time" id="current-time-indicator"></h5>
+            <div class="progress-wrapper" id="progress-background">
+                <div class="progress-bar">
+                    <span class="progress-fill" id="progress-fill"></span>
+                </div>
+            </div>
+            <h5 class="end-time" id="duration-indicator"></h5>
+        </div>
+    </div>
+
 </body>
+<script src="../../node_modules/marzipano/dist/marzipano.js"></script>
+
+<script src="../../node_modules/marzipano/demos/video-multi-res/VideoAsset.js"></script>
+<script src="../../node_modules/marzipano/demos/video-multi-res/EventEmitter.js"></script>
+<script src="../../node_modules/marzipano/demos/video-multi-res/EventEmitterProxy.js"></script>
+<script src="../../node_modules/marzipano/demos/video-multi-res/NullVideoElementWrapper.js"></script>
+<script src="../../node_modules/marzipano/demos/video-multi-res/loadVideoInSync.js"></script>
+<script src="../../dist/videoPlayHandler.js"></script>
+<script src="../../node_modules/marzipano/demos/video-multi-res/interface.js"></script>
+

 <script>
+    const FileType = require("file-type");
    document.getElementById("pano").style.display = "none";
+    document.getElementById("pano2").style.display = "none";
+
    document.addEventListener('drop', (event) => {
+
        event.preventDefault();
        event.stopPropagation();
+
        document.getElementById("fakeDropzone").style.display = "none";
        document.getElementById("loadingBig").style.display = "block";
        document.getElementById("state").innerHTML = "Loading file. If this stays empty try another file."
-
        const superFile = event.dataTransfer.files[0].path;
-        loadImageFromSource(superFile)
+        FileType.fromFile(superFile).then((type) => {
+            type = type["mime"].split("/")[0];
+            if (type == "image") {
+                loadImageFromSource(superFile)
+            } else if (type == "video") {
+                loadVideoFromSource(superFile)
+            }
+
+        });
+
+
    });

    document.addEventListener('dragover', (e) => {
@ -81,18 +141,18 @@
        testImage(path,
            function (e, suc) {
                if (suc == "success") {
-                    document.getElementById("pano").style.display = "block";
-                    setTimeout(function() {
+                    document.getElementById("pano2").style.display = "block";
+                    setTimeout(function () {
                        newPano(path)
                    }, 50);
-                    
+
                }
                else {
                    document.getElementById("state").innerHTML = "Load failed."
                    document.getElementById('alert-1').style.display = 'block';
                    document.getElementById("fakeDropzone").style.display = "block";
                    document.getElementById("loadingBig").style.display = "none";
-                    document.getElementById("pano").style.display = "none";
+                    document.getElementById("pano2").style.display = "none";
                }
            });
    }
@ -126,36 +186,5 @@

 </script>
 <script src="../main.js"></script>
-<style>
-    * {
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        -webkit-user-drag: none;
-        -webkit-touch-callout: none;
-        -ms-content-zooming: none;
-    }
-
-    html,
-    body {
-        width: 100%;
-        height: 100%;
-        padding: 0;
-        margin: 0;
-        overflow: hidden;
-    }
-
-    #pano {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-</style>

 </html>
--- a/src/ui_templates/videoPlayer.html
+++ b/src/ui_templates/videoPlayer.html
@ -99,7 +99,6 @@
            setTimeout(function () {
                multiResVideo.setResolutionIndex(1, path, loadingDone);
            }, 20)
-
        }

        function loadingDone(state) {
--- a/src/videoPlayer.css
+++ b/src/videoPlayer.css
@ -8,6 +8,14 @@
    height: 100%;
  }
  
+
+  #pano2 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
  /* General layout */
  
  .video-controls {