fix spinner, ffmpegdownscale/convert not using correct file name
This commit is contained in:
parent
3ed7b0b5c7
commit
02734f1d9d
5 changed files with 157 additions and 173 deletions
|
|
@ -49,7 +49,7 @@ export const checkSharexAuth: Middleware = (req, res, next) => {
|
|||
export const createEmbedData: Middleware = async (req, res, next) => {
|
||||
const files = req.files as Express.Multer.File[];
|
||||
for (const file in files) {
|
||||
const nameAndExtension = extension(files[file].originalname);
|
||||
const nameAndExtension = extension(files[file].filename);
|
||||
const isMedia = videoExtensions.includes(nameAndExtension[1]) || imageExtensions.includes(nameAndExtension[1]);
|
||||
|
||||
const oembed: oembedObj = {
|
||||
|
|
@ -66,7 +66,7 @@ export const createEmbedData: Middleware = async (req, res, next) => {
|
|||
if (isMedia) {
|
||||
let ffProbeData;
|
||||
try { ffProbeData = await ffProbe(
|
||||
`uploads/${files[file].originalname}`,
|
||||
`uploads/${files[file].filename}`,
|
||||
nameAndExtension[0],
|
||||
nameAndExtension[1],
|
||||
); } catch (error) {
|
||||
|
|
@ -97,19 +97,19 @@ export const convertTo720p: Middleware = (req, res, next) => {
|
|||
const files = req.files as Express.Multer.File[];
|
||||
console.log("convert to 720p running");
|
||||
for (const file in files) {
|
||||
const nameAndExtension = extension(files[file].originalname);
|
||||
const nameAndExtension = extension(files[file].filename);
|
||||
|
||||
//Skip if not a video
|
||||
if (
|
||||
!videoExtensions.includes(nameAndExtension[1]) &&
|
||||
nameAndExtension[1] !== ".gif"
|
||||
) {
|
||||
console.log(`${files[file].originalname} is not a video file`);
|
||||
console.log(`${files[file].filename} is not a video file`);
|
||||
console.log(nameAndExtension[1]);
|
||||
continue;
|
||||
}
|
||||
|
||||
console.log(`Creating 720p for ${files[file].originalname}`);
|
||||
console.log(`Creating 720p for ${files[file].filename}`);
|
||||
|
||||
ffmpegDownscale(
|
||||
`uploads/${nameAndExtension[0]}${nameAndExtension[1]}`,
|
||||
|
|
|
|||
|
|
@ -1,147 +1,141 @@
|
|||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
left: 0;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
left: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
padding-inline-start: 0px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
padding-inline-start: 0px;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
margin-left: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
margin-left: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
/* Positioning and Sizing */
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
margin: 50px auto;
|
||||
/* Centering the spinner */
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
margin: 50px auto;
|
||||
|
||||
/* Text Styling */
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
padding-top: 80px;
|
||||
/* Adjust as needed for text position */
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
padding-top: 80px;
|
||||
|
||||
/* Adding a background to the spinner for better visibility */
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Keyframes for the spinner animation */
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Spinner Animation */
|
||||
.spinner::before {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 40px;
|
||||
/* Spinner Size */
|
||||
height: 40px;
|
||||
margin-top: -20px;
|
||||
/* Half of height */
|
||||
margin-left: -20px;
|
||||
/* Half of width */
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
border-top-color: #007bff;
|
||||
/* Spinner Color */
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
#search {
|
||||
padding: 6px 12px;
|
||||
background: rgb(31, 32, 35);
|
||||
border: 1px solid rgb(60, 63, 68);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: rgb(247, 248, 248);
|
||||
appearance: none;
|
||||
transition: border 0.15s ease 0s;
|
||||
:focus{
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border-color: rgb(100, 153, 255);
|
||||
}
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Keyframes for the spinner animation */
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Spinner Animation */
|
||||
.spinner::before {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 40px;
|
||||
/* Spinner Size */
|
||||
height: 40px;
|
||||
margin-top: -20px;
|
||||
/* Half of height */
|
||||
margin-left: -20px;
|
||||
/* Half of width */
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
border-top-color: #007bff;
|
||||
/* Spinner Color */
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
#search {
|
||||
padding: 6px 12px;
|
||||
background: rgb(31, 32, 35);
|
||||
border: 1px solid rgb(60, 63, 68);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: rgb(247, 248, 248);
|
||||
appearance: none;
|
||||
transition: border 0.15s ease 0s;
|
||||
:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border-color: rgb(100, 153, 255);
|
||||
}
|
||||
}
|
||||
|
||||
.nav a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
border-bottom: 1px solid #DB7676;
|
||||
border-bottom: 1px solid #db7676;
|
||||
}
|
||||
|
||||
.nav button {
|
||||
height: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.nav button:hover {
|
||||
border-bottom: 1px solid #DB7676;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #db7676;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.user {
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.username {
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
color: #73AD21;
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
color: #73ad21;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.logout {
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-log-out'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-log-out'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.adduser {
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user-plus'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='8.5' cy='7' r='4'%3E%3C/circle%3E%3Cline x1='20' y1='8' x2='20' y2='14'%3E%3C/line%3E%3Cline x1='23' y1='11' x2='17' y2='11'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user-plus'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='8.5' cy='7' r='4'%3E%3C/circle%3E%3Cline x1='20' y1='8' x2='20' y2='14'%3E%3C/line%3E%3Cline x1='23' y1='11' x2='17' y2='11'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
#dropArea {
|
||||
|
|
@ -157,24 +151,24 @@
|
|||
}
|
||||
|
||||
.dragregion {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.nonmedia {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.nonmedia p {
|
||||
color: #444;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
color: #444;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
@ -192,13 +186,13 @@ label {
|
|||
transform: translateY(0%) translateX(70%);
|
||||
z-index: 1;
|
||||
border-radius: 25px;
|
||||
border: 2px solid #73AD21;
|
||||
border: 2px solid #73ad21;
|
||||
padding: 5px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.video .overlay a {
|
||||
color: #73AD21;
|
||||
color: #73ad21;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
|
|
@ -206,33 +200,33 @@ label {
|
|||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.modal img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.modal video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/* eslint-disable no-undef */
|
||||
/* eslint-env browser: true */
|
||||
|
||||
let files;
|
||||
let newMediaList;
|
||||
|
||||
function copyURI(evt) {
|
||||
evt.preventDefault();
|
||||
|
|
@ -221,6 +221,10 @@ searchInput.addEventListener("input", () => {
|
|||
});
|
||||
});
|
||||
|
||||
function p(num) {
|
||||
return `${(num * 100).toFixed(2)}%`;
|
||||
}
|
||||
|
||||
function checkFileAvailability(filePath) {
|
||||
const checkFile = () => {
|
||||
console.log(`Checking if ${filePath} is processed...`);
|
||||
|
|
@ -238,14 +242,14 @@ function checkFileAvailability(filePath) {
|
|||
}
|
||||
})
|
||||
.then((jsonData) => {
|
||||
// Handle your JSON data here
|
||||
console.log(jsonData);
|
||||
document.getElementById(`spinner-${filePath}`).innerText = `Optimizing Video for Sharing: ${p(jsonData.progress)} done`;
|
||||
})
|
||||
.catch((error) => console.error("Error:", error));
|
||||
};
|
||||
|
||||
checkFile();
|
||||
const interval = setInterval(checkFile, 5000);
|
||||
const interval = setInterval(checkFile, 1000);
|
||||
}
|
||||
|
||||
function createVideoElement(filePath) {
|
||||
|
|
@ -259,20 +263,9 @@ function createVideoElement(filePath) {
|
|||
document.getElementById(`spinner-${filePath}`).style.display = "none";
|
||||
}
|
||||
|
||||
async function updateMediaList() {
|
||||
try {
|
||||
const response = await fetch("/media-list");
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
|
||||
const data = await response.text();
|
||||
|
||||
document.getElementById("embedder-list").innerHTML = data;
|
||||
htmx.process(document.body);
|
||||
} catch (error) {
|
||||
console.error("There was a problem with the fetch operation:", error);
|
||||
}
|
||||
function updateMediaList() {
|
||||
htmx.ajax("GET", "/media-list", {target: "#embedder-list", swap: "innerHTML"});
|
||||
htmx.process(document.body);
|
||||
}
|
||||
|
||||
function refreshMediaList(files) {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<script src="https://unpkg.com/htmx.org@1.9.8"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -72,16 +71,8 @@
|
|||
<script src="/js/index.js"></script>
|
||||
<script>
|
||||
document.body.addEventListener('htmx:afterSettle', function(event) {
|
||||
var swappedElement = event.target;
|
||||
|
||||
if (swappedElement.id === 'embedder-list' || swappedElement.closest('#embedder-list')) {
|
||||
console.log('htmx:afterSwap', swappedElement.id);
|
||||
files = JSON.parse('<%- JSON.stringify(files) %>');
|
||||
refreshMediaList(files);
|
||||
console.log(files);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -7,6 +7,12 @@ const videoExtensions = ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm'
|
|||
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.tiff', '.webp'];
|
||||
%>
|
||||
|
||||
<script>
|
||||
newMediaList = JSON.parse('<%- JSON.stringify(files) %>');
|
||||
console.log("executed")
|
||||
refreshMediaList(newMediaList);
|
||||
</script>
|
||||
|
||||
<!-- _fileList.ejs -->
|
||||
<% files.forEach(function(file) { %>
|
||||
<li id="<%= file.path %>" class="show">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue