grey/open360viewer
1
0
Fork 0
mirror of https://github.com/TheGreyDiamond/open360viewer.git synced 2025-12-18 02:30:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup after adding the video view feature

Browse Source
This commit is contained in:
TheGreyDiamond
2022-01-04 20:37:10 +01:00
parent 9732c040a9
commit f3225142c5
4 changed files with 190 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
index.js
View File

@@ -25,9 +25,7 @@ const template = [
.showOpenDialog({ properties: ["openFile", "multiSelections"] }) .showOpenDialog({ properties: ["openFile", "multiSelections"] })
.then(function (data) { .then(function (data) {
if (data.canceled == false) { if (data.canceled == false) {
console.log(data);
FileType.fromFile(data.filePaths[0]).then((type) => { FileType.fromFile(data.filePaths[0]).then((type) => {
console.log(type["mime"].split("/")[0]);
data.type = type["mime"].split("/")[0]; data.type = type["mime"].split("/")[0];
win.webContents.send("FileData", data); win.webContents.send("FileData", data);
}); });
@@ -43,33 +41,6 @@ const template = [
{ {
role: "help", role: "help",
submenu: [ submenu: [
{
label: "Switch to image mode",
click: async () => {
win.loadURL(
url.format({
pathname: path.join(__dirname, "dist/ui_templates/index.html"),
protocol: "file:",
slashes: true,
})
);
},
},
{
label: "Switch to video mode",
click: async () => {
win.loadURL(
url.format({
pathname: path.join(
__dirname,
"dist/ui_templates/videoPlayer.html"
),
protocol: "file:",
slashes: true,
})
);
},
},
{ role: "toggleDevTools" }, { role: "toggleDevTools" },
{ {
label: "About", label: "About",
@@ -131,10 +102,7 @@ app.on("ready", function () {
dialog dialog
.showOpenDialog({ properties: ["openFile", "multiSelections"] }) .showOpenDialog({ properties: ["openFile", "multiSelections"] })
.then(function (data) { .then(function (data) {
console.log(data.filePaths);
// console.log(await FileType.fromFile(data));
FileType.fromFile(data.filePaths[0]).then((type) => { FileType.fromFile(data.filePaths[0]).then((type) => {
console.log(type["mime"].split("/")[0]);
data.type = type["mime"].split("/")[0]; data.type = type["mime"].split("/")[0];
win.webContents.send("FileData", data); win.webContents.send("FileData", data);
}); });

2
src/ui_templates/index.html
View File

@@ -103,10 +103,8 @@
document.getElementById("pano2").style.display = "none"; document.getElementById("pano2").style.display = "none";
document.addEventListener('drop', (event) => { document.addEventListener('drop', (event) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
document.getElementById("fakeDropzone").style.display = "none"; document.getElementById("fakeDropzone").style.display = "none";
document.getElementById("loadingBig").style.display = "block"; document.getElementById("loadingBig").style.display = "block";
document.getElementById("state").innerHTML = "Loading file. If this stays empty try another file." document.getElementById("state").innerHTML = "Loading file. If this stays empty try another file."

131
src/ui_templates/videoPlayer.html
View File

@@ -1,131 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>360 Viewer - Video mode</title>
<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="pano"></div>
<center>
<h1 id="state" style="display: none;"></h1>
<div id="fakeDropzone"
class="border-4 rounded-lg border-dashed border-gray-700 dark:border-white dark:text-white w-96 mt-12">
<i class="far fa-folder-open text-2xl mt-6"></i><br>
<a class="text-lg">Drag & Drop a file here</a><br>
<des class="text-gray-700">or</des><br>
<button onclick="ipcRenderer.sendSync('synchronous-message', 'openFile');" type="button"
class="z-40 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Browse
Files</button>
</div>
<div id="loadingBig" style="display: none;">
<svg class="animate-spin h-5 w-5 h-24 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" id="loadingSpinner">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</div>
</center>
<div class="video-controls" id="video-controls">
<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>
<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>
document.getElementById("pano").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;
loadVideoFromSource(superFile)
});
document.addEventListener('dragover', (e) => {
e.preventDefault();
e.stopPropagation();
});
document.addEventListener('dragenter', (event) => {
console.log('File is in the Drop Space');
});
document.addEventListener('dragleave', (event) => {
console.log('File has left the Drop Space');
});
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";
}
}
</script>
<script>
// multiResVideo.setResolutionIndex(1, "\\\\nasspi\\homes\\Datein\\360\\SAM_100_0023.mp4");
const { ipcRenderer } = require("electron");
ipcRenderer.on("FileData", function (event, data) {
console.log(data);
if (data.canceled == false) {
document.getElementById("fakeDropzone").style.display = "none";
document.getElementById("loadingBig").style.display = "none";
loadVideoFromSource(data.filePaths[0])
// multiResVideo.setResolutionIndex(1, );
}
});
</script>
</body>
</html>

343
src/videoPlayer.css
View File

@@ -1,155 +1,192 @@
#pano {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#pano2 {
#pano { position: absolute;
position: absolute; top: 0;
top: 0; left: 0;
left: 0; width: 100%;
width: 100%; height: 100%;
height: 100%; }
} /* General layout */
#pano2 { .video-controls {
position: absolute; position: absolute;
top: 0; bottom: 0;
left: 0; width: 100%;
width: 100%; color: #fff;
height: 100%; overflow: hidden;
} }
/* General layout */
.control-btn,
.video-controls { .time {
position: absolute; height: 100%;
bottom: 0; position: absolute;
width: 100%; box-size: border-box;
color: #fff; }
overflow: hidden;
} .video-controls {
height: 40px;
}
.control-btn, .time { .play,
height: 100%; .sound,
position: absolute; .options {
box-size: border-box; width: 40px;
} }
.video-controls { .play {
height: 40px; left: 0;
} }
.play, .sound, .options { .sound {
width: 40px; left: 40px;
} }
.options {
.play { left: 0; } right: 0;
.sound { left: 40px; } }
.options { right: 0; } .resolution {
.resolution { right: 40px; } right: 40px;
}
.time {
position: absolute; .time {
left: 80px; position: absolute;
right: 140px; left: 80px;
} right: 140px;
}
/* Control button style (play, mute, options, resolution) */
/* Control button style (play, mute, options, resolution) */
.control-btn {
background-color: rgb(103,115,131); .control-btn {
background-color: rgba(103,115,131,0.8); background-color: rgb(103, 115, 131);
cursor: pointer; background-color: rgba(103, 115, 131, 0.8);
transition: .3s all ease-in-out; cursor: pointer;
} transition: 0.3s all ease-in-out;
}
.control-btn:hover{
background-color: rgb(78,88,104); .control-btn:hover {
background-color: rgba(78,88,104,0.8); background-color: rgb(78, 88, 104);
} background-color: rgba(78, 88, 104, 0.8);
}
/* Play, mute, options */
/* Play, mute, options */
.play img, .sound img, .options img {
height: 66%; .play img,
width: 66%; .sound img,
margin-top: 17%; .options img {
margin-left: 17%; height: 66%;
} width: 66%;
margin-top: 17%;
/* Progress bar */ margin-left: 17%;
}
.initial-time, .progress-wrapper, .end-time {
position: absolute; /* Progress bar */
}
.initial-time,
.initial-time, .end-time{ .progress-wrapper,
width: 50px; .end-time {
} position: absolute;
}
.initial-time {
left: 14px; .initial-time,
} .end-time {
width: 50px;
.end-time { }
right: 14px;
} .initial-time {
left: 14px;
.progress-wrapper { }
left: 78px;
right: 78px; .end-time {
} right: 14px;
}
.initial-time, .end-time {
text-align: center; .progress-wrapper {
top: 12px; left: 78px;
} right: 78px;
}
.progress-wrapper {
padding: 15px 0; .initial-time,
cursor: pointer; .end-time {
} text-align: center;
top: 12px;
.progress-bar { }
height: 10px;
background-color: rgb(103,115,131); .progress-wrapper {
background-color: rgba(103,115,131,0.8); padding: 15px 0;
border-radius: 20px; cursor: pointer;
} }
.progress-wrapper .progress-fill { .progress-bar {
display: block; height: 10px;
height: 100%; background-color: rgb(103, 115, 131);
width: 0; background-color: rgba(103, 115, 131, 0.8);
background-color: #eee; border-radius: 20px;
border-radius: 20px; }
}
.progress-wrapper .progress-fill {
.initial-time, display: block;
.end-time { height: 100%;
font-size: 14px; width: 0;
} background-color: #eee;
border-radius: 20px;
.time { }
background-color: rgb(58,68,84);
background-color: rgba(58,68,84,0.8); .initial-time,
} .end-time {
font-size: 14px;
/* Show state */ }
.play-icon { display: block; font-size: x-large; padding: 8px; } .time {
.pause-icon { display: none; font-size: x-large; padding: 8px; } background-color: rgb(58, 68, 84);
.video-playing .play-icon { display: none; } background-color: rgba(58, 68, 84, 0.8);
.video-playing .pause-icon { display: block; } }
.sound-on { display: block; font-size: x-large; padding: 8px; } /* Show state */
.sound-off { display: none; font-size: x-large; padding: 8px; }
.video-muted .sound-on { display: none; } .play-icon {
.video-muted .sound-off { display: block; } display: block;
font-size: x-large;
.resolution-changing-indicator, padding: 8px;
.resolution-modal-changing-indicator { }
display: none; .pause-icon {
} display: none;
font-size: x-large;
.video-resolution-changing .resolution-changing-indicator, padding: 8px;
.video-resolution-changing .resolution-modal-changing-indicator { }
display: block; .video-playing .play-icon {
} display: none;
}
.video-playing .pause-icon {
display: block;
}
.sound-on {
display: block;
font-size: x-large;
padding: 8px;
}
.sound-off {
display: none;
font-size: x-large;
padding: 8px;
}
.video-muted .sound-on {
display: none;
}
.video-muted .sound-off {
display: block;
}
.resolution-changing-indicator,
.resolution-modal-changing-indicator {
display: none;
}
.video-resolution-changing .resolution-changing-indicator,
.video-resolution-changing .resolution-modal-changing-indicator {
display: block;
}