grey/open360viewer
1
0
Fork 0
mirror of https://github.com/TheGreyDiamond/open360viewer.git synced 2026-03-31 19:30:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

It works, main page can open both media types

Browse Source
This commit is contained in:
TheGreyDiamond
2022-01-04 20:33:43 +01:00
parent efc71a9eef
commit 9732c040a9
6 changed files with 137 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/main.js
View File

@@ -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";
}
}

123
src/ui_templates/index.html
View File

@@ -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>

1
src/ui_templates/videoPlayer.html
View File

@@ -99,7 +99,6 @@
setTimeout(function () {
multiResVideo.setResolutionIndex(1, path, loadingDone);
}, 20)
}
function loadingDone(state) {

8
src/videoPlayer.css
View File

@@ -8,6 +8,14 @@
height: 100%;
}
#pano2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* General layout */
.video-controls {