mirror of
https://github.com/TheGreyDiamond/open360viewer.git
synced 2025-07-17 20:33:48 +02:00
Cleanup after adding the video view feature
This commit is contained in:
TheGreyDiamond
32
index.js
32
index.js
@ -25,9 +25,7 @@ const template = [
|
||||
.showOpenDialog({ properties: ["openFile", "multiSelections"] })
|
||||
.then(function (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);
|
||||
});
|
||||
@ -43,33 +41,6 @@ const template = [
|
||||
{
|
||||
role: "help",
|
||||
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" },
|
||||
{
|
||||
label: "About",
|
||||
@ -131,10 +102,7 @@ app.on("ready", function () {
|
||||
dialog
|
||||
.showOpenDialog({ properties: ["openFile", "multiSelections"] })
|
||||
.then(function (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);
|
||||
});
|
||||
|
||||
@ -103,10 +103,8 @@
|
||||
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."
|
||||
|
||||
@ -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>
|
||||
@ -1,155 +1,192 @@
|
||||
#pano {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
#pano {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#pano2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* General layout */
|
||||
|
||||
#pano2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* General layout */
|
||||
|
||||
.video-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.control-btn, .time {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
box-size: border-box;
|
||||
}
|
||||
|
||||
.video-controls {
|
||||
height: 40px;
|
||||
}
|
||||
.play, .sound, .options {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.play { left: 0; }
|
||||
.sound { left: 40px; }
|
||||
.options { right: 0; }
|
||||
.resolution { right: 40px; }
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
right: 140px;
|
||||
}
|
||||
|
||||
/* Control button style (play, mute, options, resolution) */
|
||||
|
||||
.control-btn {
|
||||
background-color: rgb(103,115,131);
|
||||
background-color: rgba(103,115,131,0.8);
|
||||
cursor: pointer;
|
||||
transition: .3s all ease-in-out;
|
||||
}
|
||||
|
||||
.control-btn:hover{
|
||||
background-color: rgb(78,88,104);
|
||||
background-color: rgba(78,88,104,0.8);
|
||||
}
|
||||
|
||||
/* Play, mute, options */
|
||||
|
||||
.play img, .sound img, .options img {
|
||||
height: 66%;
|
||||
width: 66%;
|
||||
margin-top: 17%;
|
||||
margin-left: 17%;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
|
||||
.initial-time, .progress-wrapper, .end-time {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.initial-time, .end-time{
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.initial-time {
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
.end-time {
|
||||
right: 14px;
|
||||
}
|
||||
|
||||
.progress-wrapper {
|
||||
left: 78px;
|
||||
right: 78px;
|
||||
}
|
||||
|
||||
.initial-time, .end-time {
|
||||
text-align: center;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.progress-wrapper {
|
||||
padding: 15px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 10px;
|
||||
background-color: rgb(103,115,131);
|
||||
background-color: rgba(103,115,131,0.8);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress-fill {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background-color: #eee;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.initial-time,
|
||||
.end-time {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.time {
|
||||
background-color: rgb(58,68,84);
|
||||
background-color: rgba(58,68,84,0.8);
|
||||
}
|
||||
|
||||
/* Show state */
|
||||
|
||||
.play-icon { display: block; font-size: x-large; padding: 8px; }
|
||||
.pause-icon { display: none; font-size: x-large; padding: 8px; }
|
||||
.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;
|
||||
}
|
||||
.video-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.control-btn,
|
||||
.time {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
box-size: border-box;
|
||||
}
|
||||
|
||||
.video-controls {
|
||||
height: 40px;
|
||||
}
|
||||
.play,
|
||||
.sound,
|
||||
.options {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.play {
|
||||
left: 0;
|
||||
}
|
||||
.sound {
|
||||
left: 40px;
|
||||
}
|
||||
.options {
|
||||
right: 0;
|
||||
}
|
||||
.resolution {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
right: 140px;
|
||||
}
|
||||
|
||||
/* Control button style (play, mute, options, resolution) */
|
||||
|
||||
.control-btn {
|
||||
background-color: rgb(103, 115, 131);
|
||||
background-color: rgba(103, 115, 131, 0.8);
|
||||
cursor: pointer;
|
||||
transition: 0.3s all ease-in-out;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background-color: rgb(78, 88, 104);
|
||||
background-color: rgba(78, 88, 104, 0.8);
|
||||
}
|
||||
|
||||
/* Play, mute, options */
|
||||
|
||||
.play img,
|
||||
.sound img,
|
||||
.options img {
|
||||
height: 66%;
|
||||
width: 66%;
|
||||
margin-top: 17%;
|
||||
margin-left: 17%;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
|
||||
.initial-time,
|
||||
.progress-wrapper,
|
||||
.end-time {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.initial-time,
|
||||
.end-time {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.initial-time {
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
.end-time {
|
||||
right: 14px;
|
||||
}
|
||||
|
||||
.progress-wrapper {
|
||||
left: 78px;
|
||||
right: 78px;
|
||||
}
|
||||
|
||||
.initial-time,
|
||||
.end-time {
|
||||
text-align: center;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.progress-wrapper {
|
||||
padding: 15px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 10px;
|
||||
background-color: rgb(103, 115, 131);
|
||||
background-color: rgba(103, 115, 131, 0.8);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress-fill {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background-color: #eee;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.initial-time,
|
||||
.end-time {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.time {
|
||||
background-color: rgb(58, 68, 84);
|
||||
background-color: rgba(58, 68, 84, 0.8);
|
||||
}
|
||||
|
||||
/* Show state */
|
||||
|
||||
.play-icon {
|
||||
display: block;
|
||||
font-size: x-large;
|
||||
padding: 8px;
|
||||
}
|
||||
.pause-icon {
|
||||
display: none;
|
||||
font-size: x-large;
|
||||
padding: 8px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user