grey/open360viewer
1
0
Fork 0
mirror of https://github.com/TheGreyDiamond/open360viewer.git synced 2025-07-17 20:33:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fixed playbar + better minify

Browse Source
This commit is contained in:
TheGreyDiamond
2022-01-05 14:51:20 +01:00
parent 506f5acdb3
commit 8c4a54494d
7 changed files with 91 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -12,7 +12,7 @@
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .", "start": "electron .",
"startDev": "npm run buildCss && npm run minify && electron .", "startDev": "npm run buildCss && npm run minify && electron .",
"minify": "minify src/main.js > dist/main.js && minify src/ui_templates/index.html > dist/ui_templates/index.html && minify src/videoPlayer.css > dist/videoPlayer.css && minify src/videoPlayHandler.js > dist/videoPlayHandler.js && minify src/ui_templates/videoPlayer.html > dist/ui_templates/videoPlayer.html && minify src/ui_templates/about.html > dist/ui_templates/about.html", "minify": "node tooling/minifyAll/minifyAllSrcs.js",
"buildCss": "npx tailwindcss -i ./src/main.css -o ./dist/output.css", "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", "package": "electron-forge package",

BIN
screenshots/videoLoaded.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 793 KiB

30
src/dropHandler.js Normal file
View File

@ -0,0 +1,30 @@
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;
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) => {
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");
});

43
src/ui_templates/index.html
View File

@ -5,11 +5,7 @@
<title>360 Viewer</title> <title>360 Viewer</title>
<meta name="viewport" <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" /> 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="../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> </head>
<body class="dark:bg-gray-800"> <body class="dark:bg-gray-800">
@ -85,7 +81,11 @@
</div> </div>
</div> </div>
</body> </body>
<link rel="stylesheet" href="../../dist/videoPlayer.css">
<link href="../../node_modules/@fortawesome/fontawesome-free/css/all.css" rel="stylesheet">
<script src="../../node_modules/@themesberg/flowbite/dist/flowbite.bundle.js"></script>
<script src="../../node_modules/marzipano/dist/marzipano.js"></script> <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/VideoAsset.js"></script>
@ -102,38 +102,9 @@
document.getElementById("pano").style.display = "none"; document.getElementById("pano").style.display = "none";
document.getElementById("pano2").style.display = "none"; document.getElementById("pano2").style.display = "none";
document.addEventListener('drop', (event) => { </script>
event.preventDefault(); <script src="../../dist/dropHandler.js"></script>
event.stopPropagation(); <script>
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;
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) => {
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 loadImageFromSource(path) { function loadImageFromSource(path) {
testImage(path, testImage(path,

2
src/videoPlayer.css
View File

@ -55,7 +55,7 @@
.time { .time {
position: absolute; position: absolute;
left: 80px; left: 80px;
right: 140px; right: 0px;
} }
/* Control button style (play, mute, options, resolution) */ /* Control button style (play, mute, options, resolution) */

36
tooling/minifyAll/minifyAllSrcs.js Normal file
View File

@ -0,0 +1,36 @@
import {minify} from 'minify';
import tryToCatch from 'try-to-catch';
import fs from 'fs';
import glob from 'glob';
const options = {
};
var getDirectories = function (src, callback) {
glob('src/**/*', callback);
};
getDirectories('test', function (err, res) {
if (err) {
console.log('Error', err);
} else {
for(const file in res){
// console.log(minify(res[file], options));
const myFile = res[file];
const dst = myFile.replace("src", "dist");
console.log(myFile, " -> ", dst);
if(!fs.lstatSync(myFile).isDirectory() ){
let data = minify(myFile, options).then(function(data) {
fs.writeFileSync(dst, data);
})
//
}
//
}
}
});

16
tooling/minifyAll/package.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "minifyall",
"version": "1.0.0",
"description": "",
"type": "module",
"exports": "./minifyAllSrcs.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "TheGreydiamond",
"license": "GPL-3.0",
"node": "^12.20.0 || ^14.13.1 || >=16.0.0",
"dependencies": {
"glob": "^7.2.0"
}
}