finally fix race conditions for file progress
uses sse to deliver updates
This commit is contained in:
parent
19613e1bb3
commit
6be6d3b15f
9 changed files with 492 additions and 483 deletions
|
|
@ -18,7 +18,7 @@ import indexRouter from "./routes/index";
|
|||
import adduserRouter from "./routes/adduser";
|
||||
import settingsRouter from "./routes/settings";
|
||||
|
||||
import {db, expire, createDatabase, updateDatabase, MediaRow} from "./lib/db";
|
||||
import { db, expire, createDatabase, updateDatabase, MediaRow } from "./lib/db";
|
||||
|
||||
const app = express();
|
||||
const server = http.createServer(app);
|
||||
|
|
@ -74,7 +74,7 @@ db.get("SELECT * FROM sqlite_master WHERE name ='users' and type='table'", async
|
|||
else checkVersion();
|
||||
});
|
||||
|
||||
function checkVersion () {
|
||||
function checkVersion() {
|
||||
db.get("PRAGMA user_version", (err: Error, row: any) => {
|
||||
if (row && row.user_version) {
|
||||
const version = row.user_version;
|
||||
|
|
@ -128,7 +128,7 @@ app.use("/", settingsRouter);
|
|||
|
||||
app.use("/uploads", express.static("uploads"));
|
||||
|
||||
async function prune () {
|
||||
async function prune() {
|
||||
db.all("SELECT * FROM media", (err: Error, rows: []) => {
|
||||
console.log("Uploaded files: " + rows.length);
|
||||
console.log(rows);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import process from "process";
|
|||
import { extension, videoExtensions, imageExtensions, oembedObj } from "./lib";
|
||||
import { insertToDB } from "./db";
|
||||
import { ffmpegDownscale, ffProbe } from "./ffmpeg";
|
||||
import { MediaProcessor } from "../services/MediaProcesser";
|
||||
|
||||
export const checkAuth: Middleware = (req, res, next) => {
|
||||
if (!req.user) {
|
||||
|
|
@ -17,7 +18,7 @@ export const checkAuth: Middleware = (req, res, next) => {
|
|||
/**Checks shareX auth key */
|
||||
export const checkSharexAuth: Middleware = (req, res, next) => {
|
||||
const auth =
|
||||
process.env.EBAPI_KEY || process.env.EBPASS || "pleaseSetAPI_KEY";
|
||||
process.env.EBAPI_KEY || process.env.EBPASS || "pleaseSetAPI_KEY";
|
||||
let key = null;
|
||||
|
||||
if (req.headers["key"]) {
|
||||
|
|
@ -57,8 +58,8 @@ export const createEmbedData: Middleware = async (req, res, next) => {
|
|||
for (const file in files) {
|
||||
const [filename, fileExtension] = extension(files[file].filename);
|
||||
const isMedia =
|
||||
videoExtensions.includes(fileExtension) ||
|
||||
imageExtensions.includes(fileExtension);
|
||||
videoExtensions.includes(fileExtension) ||
|
||||
imageExtensions.includes(fileExtension);
|
||||
|
||||
const oembed: oembedObj = {
|
||||
type: "video",
|
||||
|
|
@ -166,3 +167,25 @@ export const handleUpload: Middleware = async (req, res, next) => {
|
|||
res.status(500).send("Error processing files.");
|
||||
}
|
||||
};
|
||||
|
||||
export const processUploadedMedia: Middleware = async (req, res, next) => {
|
||||
try {
|
||||
const files = req.files as Express.Multer.File[];
|
||||
|
||||
for (const file of files) {
|
||||
const [filename, fileExtension] = extension(file.filename);
|
||||
|
||||
if (videoExtensions.includes(fileExtension)) {
|
||||
MediaProcessor.processVideo(
|
||||
file.path,
|
||||
filename,
|
||||
fileExtension
|
||||
).catch(err => console.error("Error processing video:", err));
|
||||
}
|
||||
}
|
||||
|
||||
next();
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
115
app/lib/ws.ts
115
app/lib/ws.ts
|
|
@ -1,115 +0,0 @@
|
|||
import { EventEmitter } from "events";
|
||||
|
||||
import WebSocket from "ws";
|
||||
|
||||
const eventEmitter = new EventEmitter();
|
||||
|
||||
const wsPort = normalizePort(process.env.EBWSPORT || "3001");
|
||||
|
||||
const clients: WebSocket[] = [];
|
||||
|
||||
/**
|
||||
* Normalizes a port number to ensure it is a valid integer.
|
||||
*
|
||||
* @param {string} val - The port number as a string.
|
||||
* @returns {number} The normalized port number.
|
||||
*/
|
||||
function normalizePort(val: string) {
|
||||
const port = parseInt(val, 10);
|
||||
|
||||
if (isNaN(port)) {
|
||||
return parseInt(val);
|
||||
}
|
||||
|
||||
if (port >= 0) {
|
||||
return port;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* The WebSocket server instance.
|
||||
*/
|
||||
const wss = new WebSocket.Server({port: wsPort});
|
||||
|
||||
wss.on("connection", (ws) => {
|
||||
clients.push(ws);
|
||||
|
||||
ws.on("message", handleMessage);
|
||||
|
||||
ws.on("close", handleMessage);
|
||||
|
||||
ws.on("error", handleMessage);
|
||||
|
||||
ws.on("close", () => {
|
||||
const index = clients.indexOf(ws);
|
||||
if (index !== -1) {
|
||||
clients.splice(index, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Handles incoming messages from clients.
|
||||
*
|
||||
* @param {string} message - The incoming message.
|
||||
*/
|
||||
function handleMessage(message: string) {
|
||||
try {
|
||||
const data = JSON.parse(message);
|
||||
|
||||
switch (data.type) {
|
||||
case "message":
|
||||
eventEmitter.emit("message", data.message);
|
||||
break;
|
||||
case "close":
|
||||
eventEmitter.emit("close", data.userId);
|
||||
break;
|
||||
case "error":
|
||||
eventEmitter.emit("error", data.error);
|
||||
break;
|
||||
default:
|
||||
console.log(`Unknown message type: ${data.type}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(`Error parsing message: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Broadcasts a message to all connected clients.
|
||||
*
|
||||
* @param {string} message - The message to broadcast.
|
||||
*/
|
||||
function broadcast(message: string) {
|
||||
wss.clients.forEach((client) => {
|
||||
if (client.readyState === WebSocket.OPEN) {
|
||||
client.send(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an array of all connected clients.
|
||||
*
|
||||
* @returns {WebSocket[]} An array of connected clients.
|
||||
*/
|
||||
function getClients() {
|
||||
return clients;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sends a message to a specific client.
|
||||
*
|
||||
* @param {string} clientId - The ID of the client to send the message to.
|
||||
* @param {string} message - The message to send.
|
||||
*/
|
||||
/*function sendMessageToClient(clientId: string, message: string) {
|
||||
const client = clients.find((client) => client.id === clientId);
|
||||
if (client) {
|
||||
client.send(message);
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
//export { wss, eventEmitter, broadcast, getClients, sendMessageToClient };
|
||||
|
||||
|
|
@ -27,13 +27,11 @@
|
|||
height: 100px;
|
||||
position: relative;
|
||||
margin: 50px auto;
|
||||
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
padding-top: 80px;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -80,6 +78,7 @@
|
|||
color: rgb(247, 248, 248);
|
||||
appearance: none;
|
||||
transition: border 0.15s ease 0s;
|
||||
|
||||
:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
|
|
|
|||
|
|
@ -2,294 +2,255 @@
|
|||
/* eslint-disable no-undef */
|
||||
/* eslint-env browser: true */
|
||||
|
||||
let newMediaList;
|
||||
const MEDIA_TYPES = {
|
||||
video: ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm'],
|
||||
image: ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.tiff', '.webp']
|
||||
};
|
||||
|
||||
const videoExtensions = [
|
||||
".mp4",
|
||||
".mov",
|
||||
".avi",
|
||||
".flv",
|
||||
".mkv",
|
||||
".wmv",
|
||||
".webm",
|
||||
];
|
||||
const getFileExtension = filename => {
|
||||
const parts = filename.split('.');
|
||||
return parts.length > 1 ? `.${parts.pop().toLowerCase()}` : '';
|
||||
};
|
||||
|
||||
const imageExtensions = [
|
||||
".jpg",
|
||||
".jpeg",
|
||||
".png",
|
||||
".gif",
|
||||
".bmp",
|
||||
".svg",
|
||||
".tiff",
|
||||
".webp",
|
||||
];
|
||||
const getMediaType = filename => {
|
||||
const ext = getFileExtension(filename);
|
||||
if (MEDIA_TYPES.video.includes(ext)) return 'video';
|
||||
if (MEDIA_TYPES.image.includes(ext)) return 'image';
|
||||
return 'other';
|
||||
};
|
||||
|
||||
class FileUploader {
|
||||
constructor() {
|
||||
this.dropArea = document.getElementById('dropArea');
|
||||
this.gallery = document.getElementById('gallery');
|
||||
this.setupEventListeners();
|
||||
this.setupProgressUpdates();
|
||||
}
|
||||
|
||||
function copyURI(evt) {
|
||||
evt.preventDefault();
|
||||
navigator.clipboard
|
||||
.writeText(absolutePath(evt.target.getAttribute("src")))
|
||||
.then(
|
||||
() => {
|
||||
console.log("copied");
|
||||
},
|
||||
() => {
|
||||
console.log("failed");
|
||||
setupEventListeners() {
|
||||
// Drag and drop handlers
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
this.dropArea.addEventListener(eventName, e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
this.dropArea.addEventListener(eventName, () =>
|
||||
this.dropArea.classList.add('highlight'));
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
this.dropArea.addEventListener(eventName, () =>
|
||||
this.dropArea.classList.remove('highlight'));
|
||||
});
|
||||
|
||||
// Handle file drops
|
||||
this.dropArea.addEventListener('drop', e =>
|
||||
this.handleFiles(e.dataTransfer.files));
|
||||
|
||||
// Handle paste events
|
||||
window.addEventListener('paste', e => this.handlePaste(e));
|
||||
|
||||
// Handle manual file selection
|
||||
document.getElementById('fileupload')
|
||||
.addEventListener('change', e => this.handleFiles(e.target.files));
|
||||
|
||||
// Handle manual upload button
|
||||
document.getElementById('submit')
|
||||
.addEventListener('click', () => this.uploadSelectedFiles());
|
||||
}
|
||||
|
||||
setupProgressUpdates() {
|
||||
console.log("Setting up SSE connection...");
|
||||
const evtSource = new EventSource('/progress-updates');
|
||||
|
||||
evtSource.onopen = () => {
|
||||
console.log("SSE connection established");
|
||||
};
|
||||
|
||||
evtSource.onmessage = event => {
|
||||
console.log("Raw SSE data:", event.data);
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
if (data.type === 'connected') {
|
||||
console.log("Initial connection established");
|
||||
return;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function copyA(evt) {
|
||||
evt.preventDefault();
|
||||
navigator.clipboard
|
||||
.writeText(absolutePath(evt.target.getAttribute("href")))
|
||||
.then(
|
||||
() => {
|
||||
console.log("copied");
|
||||
},
|
||||
() => {
|
||||
console.log("failed");
|
||||
const { filename, progress, status } = data;
|
||||
const sanitizedFilename = sanitizeId(filename);
|
||||
|
||||
console.log("Looking for elements:", {
|
||||
spinnerSelector: `spinner-${sanitizedFilename}`,
|
||||
containerSelector: `media-container-${sanitizedFilename}`,
|
||||
});
|
||||
|
||||
const spinnerElement = document.getElementById(`spinner-${sanitizedFilename}`);
|
||||
const containerElement = document.getElementById(`media-container-${sanitizedFilename}`);
|
||||
|
||||
if (!spinnerElement || !containerElement) {
|
||||
console.warn("Could not find required elements for:", filename);
|
||||
return;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function copyPath(evt) {
|
||||
navigator.clipboard.writeText(absolutePath(evt)).then(
|
||||
() => {
|
||||
console.log("copied");
|
||||
},
|
||||
() => {
|
||||
console.log("failed");
|
||||
if (status === 'complete') {
|
||||
console.log("Processing complete, showing video for:", filename);
|
||||
spinnerElement.style.display = 'none';
|
||||
containerElement.style.display = 'block';
|
||||
} else if (status === 'processing') {
|
||||
console.log("Updating progress for:", filename);
|
||||
spinnerElement.textContent =
|
||||
`Optimizing Video for Sharing: ${(progress * 100).toFixed(2)}% done`;
|
||||
}
|
||||
};
|
||||
|
||||
evtSource.onerror = (err) => {
|
||||
console.error("SSE Error:", err);
|
||||
};
|
||||
}
|
||||
|
||||
async handleFiles(files) {
|
||||
const filesArray = [...files];
|
||||
for (const file of filesArray) {
|
||||
await this.uploadFile(file);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
handlePaste(e) {
|
||||
const items = [...e.clipboardData.items]
|
||||
.filter(item => item.type.indexOf('image') !== -1);
|
||||
|
||||
if (items.length) {
|
||||
const file = items[0].getAsFile();
|
||||
this.uploadFile(file);
|
||||
}
|
||||
}
|
||||
|
||||
async uploadFile(file) {
|
||||
const formData = new FormData();
|
||||
formData.append('fileupload', file);
|
||||
formData.append('expire', document.getElementById('expire').value);
|
||||
|
||||
try {
|
||||
const response = await fetch('/', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error(`Upload failed: ${response.status}`);
|
||||
|
||||
// Get the new file list HTML and insert it
|
||||
const listResponse = await fetch('/media-list');
|
||||
const html = await listResponse.text();
|
||||
document.getElementById('embedder-list').innerHTML = html;
|
||||
|
||||
// Clear preview
|
||||
this.gallery.innerHTML = '';
|
||||
|
||||
} catch (error) {
|
||||
console.error('Upload error:', error);
|
||||
alert('Upload failed: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
uploadSelectedFiles() {
|
||||
const fileInput = document.getElementById('fileupload');
|
||||
if (fileInput.files.length) {
|
||||
this.handleFiles(fileInput.files);
|
||||
}
|
||||
}
|
||||
|
||||
showMediaElement(filename) {
|
||||
const container = document.getElementById(`media-container-${filename}`);
|
||||
const spinner = document.getElementById(`spinner-${filename}`);
|
||||
|
||||
if (container && spinner) {
|
||||
const mediaType = getMediaType(filename);
|
||||
|
||||
if (mediaType === 'video') {
|
||||
container.innerHTML = `
|
||||
<video class="image" autoplay loop muted playsinline>
|
||||
<source src="/uploads/720p-${filename}">
|
||||
</video>`;
|
||||
}
|
||||
|
||||
spinner.style.display = 'none';
|
||||
container.style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function absolutePath(href) {
|
||||
let link = document.createElement("a");
|
||||
// Initialize on page load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new FileUploader();
|
||||
|
||||
// Setup search functionality
|
||||
const searchInput = document.getElementById('search');
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', e => {
|
||||
const searchValue = e.target.value.toLowerCase();
|
||||
const mediaItems = document.querySelectorAll('ul.embedder-list li');
|
||||
|
||||
mediaItems.forEach(item => {
|
||||
const matches = item.id.toLowerCase().includes(searchValue);
|
||||
item.classList.toggle('hide', !matches);
|
||||
item.classList.toggle('show', matches);
|
||||
|
||||
item.addEventListener('animationend', function handler() {
|
||||
if (!matches && searchValue !== '') {
|
||||
this.style.display = 'none';
|
||||
}
|
||||
this.removeEventListener('animationend', handler);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Utility functions for the media list
|
||||
window.copyURI = e => {
|
||||
e.preventDefault();
|
||||
navigator.clipboard.writeText(absolutePath(e.target.getAttribute('src')))
|
||||
.then(() => console.log('Copied to clipboard'))
|
||||
.catch(err => console.error('Copy failed:', err));
|
||||
};
|
||||
|
||||
window.copyA = e => {
|
||||
e.preventDefault();
|
||||
navigator.clipboard.writeText(absolutePath(e.target.getAttribute('href')))
|
||||
.then(() => console.log('Copied to clipboard'))
|
||||
.catch(err => console.error('Copy failed:', err));
|
||||
};
|
||||
|
||||
window.copyPath = evt => {
|
||||
navigator.clipboard.writeText(absolutePath(evt))
|
||||
.then(() => console.log('Copied to clipboard'))
|
||||
.catch(err => console.error('Copy failed:', err));
|
||||
};
|
||||
|
||||
window.absolutePath = href => {
|
||||
const link = document.createElement('a');
|
||||
link.href = href;
|
||||
return link.href;
|
||||
}
|
||||
};
|
||||
|
||||
function extension(string) {
|
||||
return string.slice(((string.lastIndexOf(".") - 2) >>> 0) + 2);
|
||||
}
|
||||
window.openFullSize = imageUrl => {
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'modal';
|
||||
|
||||
let dropArea = document.getElementById("dropArea");
|
||||
const mediaType = getMediaType(imageUrl);
|
||||
const element = mediaType === 'video'
|
||||
? `<video src="${imageUrl}" controls></video>`
|
||||
: `<img src="${imageUrl}">`;
|
||||
|
||||
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
|
||||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
["dragenter", "dragover"].forEach((eventName) => {
|
||||
dropArea.addEventListener(eventName, highlight, false);
|
||||
});
|
||||
["dragleave", "drop"].forEach((eventName) => {
|
||||
dropArea.addEventListener(eventName, unhighlight, false);
|
||||
});
|
||||
|
||||
function highlight(e) {
|
||||
dropArea.classList.add("highlight");
|
||||
}
|
||||
|
||||
function unhighlight(e) {
|
||||
dropArea.classList.remove("highlight");
|
||||
}
|
||||
|
||||
dropArea.addEventListener("drop", handleDrop, false);
|
||||
window.addEventListener("paste", handlePaste);
|
||||
|
||||
function handleDrop(e) {
|
||||
let dt = e.dataTransfer;
|
||||
let files = dt.files;
|
||||
handleFiles(files);
|
||||
}
|
||||
|
||||
function handlePaste(e) {
|
||||
// Get the data of clipboard
|
||||
const clipboardItems = e.clipboardData.items;
|
||||
const items = [].slice.call(clipboardItems).filter(function (item) {
|
||||
// Filter the image items only
|
||||
return item.type.indexOf("image") !== -1;
|
||||
});
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const item = items[0];
|
||||
// Get the blob of image
|
||||
const blob = item.getAsFile();
|
||||
console.log(blob);
|
||||
|
||||
uploadFile(blob);
|
||||
previewFile(blob);
|
||||
}
|
||||
|
||||
function handleFiles(files) {
|
||||
files = [...files];
|
||||
files.forEach(uploadFile);
|
||||
files.forEach(previewFile);
|
||||
}
|
||||
|
||||
function previewFile(file) {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onloadend = function () {
|
||||
let img = document.createElement("img");
|
||||
img.src = reader.result;
|
||||
img.className = "image";
|
||||
document.getElementById("gallery").appendChild(img);
|
||||
document.getElementById("fileupload").src = img.src;
|
||||
};
|
||||
}
|
||||
|
||||
function uploadFile(file) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
let formData = new FormData();
|
||||
|
||||
xhr.open("POST", "/", true);
|
||||
|
||||
xhr.addEventListener("readystatechange", function () {
|
||||
if (xhr.readyState == 4) {
|
||||
if (xhr.status == 200) {
|
||||
//document.getElementById("embedder-list").innerHTML = response;
|
||||
htmx.ajax("GET", "/media-list", {target: "#embedder-list", swap: "innerHTML"});
|
||||
document.getElementById("gallery").innerHTML = "";
|
||||
htmx.process(document.body);
|
||||
} else {
|
||||
alert(`Upload failed, error code: ${xhr.status}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (file == null || file == undefined) {
|
||||
file = document.querySelector("#fileupload").files[0];
|
||||
}
|
||||
|
||||
formData.append("fileupload", file);
|
||||
formData.append("expire", document.getElementById("expire").value);
|
||||
xhr.send(formData);
|
||||
}
|
||||
|
||||
function openFullSize(imageUrl) {
|
||||
let modal = document.createElement("div");
|
||||
modal.classList.add("modal");
|
||||
let img = document.createElement("img");
|
||||
let video = document.createElement("video");
|
||||
img.src = imageUrl;
|
||||
video.src = imageUrl;
|
||||
video.controls = true;
|
||||
|
||||
if (
|
||||
imageExtensions.includes(extension(imageUrl))
|
||||
) {
|
||||
modal.appendChild(img);
|
||||
} else if (
|
||||
videoExtensions.includes(extension(imageUrl))
|
||||
) {
|
||||
modal.appendChild(video);
|
||||
}
|
||||
|
||||
// Add the modal to the page
|
||||
modal.innerHTML = element;
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Add an event listener to close the modal when the user clicks on it
|
||||
modal.addEventListener("click", function () {
|
||||
modal.remove();
|
||||
});
|
||||
}
|
||||
|
||||
let searchInput = document.getElementById("search");
|
||||
|
||||
searchInput.addEventListener("input", () => {
|
||||
let searchValue = searchInput.value;
|
||||
let mediaList = document.querySelectorAll("ul.embedder-list li");
|
||||
|
||||
mediaList.forEach((li) => {
|
||||
if (!li.id.toLowerCase().includes(searchValue)) {
|
||||
//make lowercase to allow case insensitivity
|
||||
li.classList.add("hide");
|
||||
li.classList.remove("show");
|
||||
li.addEventListener(
|
||||
"animationend",
|
||||
function () {
|
||||
if (searchInput.value !== "") {
|
||||
this.style.display = "none";
|
||||
}
|
||||
},
|
||||
{ once: true }
|
||||
); // The {once: true} option automatically removes the event listener after it has been called
|
||||
} else {
|
||||
li.style.display = "";
|
||||
li.classList.remove("hide");
|
||||
if (searchValue === "" && !li.classList.contains("show")) {
|
||||
li.classList.add("show");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function p(num) {
|
||||
return `${(num * 100).toFixed(2)}%`;
|
||||
}
|
||||
|
||||
function checkFileAvailability(filePath) {
|
||||
const checkFile = () => {
|
||||
console.log(`Checking if ${filePath} is processed...`);
|
||||
fetch(`/uploads/${filePath}-progress.json`)
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
console.log(`${filePath} still processing`);
|
||||
return response.json().then(json => {
|
||||
document.getElementById(`spinner-${filePath}`).innerText = `Optimizing Video for Sharing: ${p(json.progress)} done`;
|
||||
return response;
|
||||
});
|
||||
} else if (response.status === 404) {
|
||||
console.log(`${filePath} finished processing`);
|
||||
console.log(`/uploads/720p-${filePath}-progress.json finished`);
|
||||
clearInterval(interval);
|
||||
createVideoElement(filePath);
|
||||
} else {
|
||||
throw new Error(`HTTP error: Status code ${response.status}`);
|
||||
}
|
||||
})
|
||||
.catch((error) => console.error("Error:", error));
|
||||
};
|
||||
|
||||
checkFile();
|
||||
const interval = setInterval(checkFile, 1000);
|
||||
}
|
||||
|
||||
function createVideoElement(filePath) {
|
||||
const videoContainer = document.getElementById(`video-${filePath}`);
|
||||
videoContainer.outerHTML = `
|
||||
<video id='video-${filePath}' class="image" autoplay loop muted playsinline>
|
||||
<source src="/uploads/720p-${filePath}">
|
||||
</video>
|
||||
`;
|
||||
videoContainer.style.display = "block";
|
||||
document.getElementById(`spinner-${filePath}`).style.display = "none";
|
||||
}
|
||||
|
||||
function updateMediaList() {
|
||||
htmx.ajax("GET", "/media-list", {target: "#embedder-list", swap: "innerHTML"});
|
||||
htmx.process(document.body);
|
||||
}
|
||||
|
||||
function refreshMediaList(files) {
|
||||
files.forEach(file => {
|
||||
console.log(`Checking ${file.path}...`);
|
||||
if (videoExtensions.includes(extension(file.path))) {
|
||||
const progressFileName = `uploads/${file.path}-progress.json`;
|
||||
console.log(`Fetching ${progressFileName}...`);
|
||||
checkFileAvailability(file.path);
|
||||
} else {
|
||||
console.log(`File ${file.path} is not a video, displaying...`);
|
||||
}
|
||||
});
|
||||
modal.addEventListener('click', () => modal.remove());
|
||||
};
|
||||
|
||||
function sanitizeId(filename) {
|
||||
return filename.replace(/[^a-z0-9]/gi, '_');
|
||||
}
|
||||
|
|
@ -17,12 +17,13 @@ import path from "path";
|
|||
import { extension, videoExtensions, oembedObj } from "../lib/lib";
|
||||
import { db, MediaRow, getPath, deleteId } from "../lib/db";
|
||||
import { fileStorage } from "../lib/multer";
|
||||
import { progressManager } from "../services/ProgressManager";
|
||||
import {
|
||||
checkAuth,
|
||||
checkSharexAuth,
|
||||
convertTo720p,
|
||||
createEmbedData,
|
||||
handleUpload,
|
||||
processUploadedMedia,
|
||||
} from "../lib/middleware";
|
||||
|
||||
const upload = multer({ storage: fileStorage /**, fileFilter: fileFilter**/ }); //maybe make this a env variable?
|
||||
|
|
@ -30,7 +31,6 @@ const upload = multer({ storage: fileStorage /**, fileFilter: fileFilter**/ });
|
|||
|
||||
const fetchMedia: Middleware = (req, res, next) => {
|
||||
const admin: boolean = req.user.username == "admin" ? true : false;
|
||||
/**Check if the user is an admin, if so, show all posts from all users */
|
||||
const query: string = admin
|
||||
? "SELECT * FROM media"
|
||||
: "SELECT * FROM media WHERE username = ?";
|
||||
|
|
@ -43,15 +43,20 @@ const fetchMedia: Middleware = (req, res, next) => {
|
|||
return res.status(500).send("Database error");
|
||||
}
|
||||
const files = rows.map((row: MediaRow) => {
|
||||
const isProcessed = videoExtensions.includes(extension(row.path)[1]) ?
|
||||
fs.existsSync(`uploads/720p-${row.path}`) :
|
||||
true;
|
||||
|
||||
return {
|
||||
id: row.id,
|
||||
path: row.path,
|
||||
expire: row.expire,
|
||||
username: row.username,
|
||||
url: "/" + row.id,
|
||||
isProcessed
|
||||
};
|
||||
});
|
||||
res.locals.files = files.reverse(); //reverse so newest files appear first
|
||||
res.locals.files = files.reverse();
|
||||
res.locals.Count = files.length;
|
||||
next();
|
||||
});
|
||||
|
|
@ -59,6 +64,29 @@ const fetchMedia: Middleware = (req, res, next) => {
|
|||
|
||||
const router = express.Router();
|
||||
|
||||
router.get('/progress-updates', (req, res) => {
|
||||
console.log("SSE connection requested"); // Debug log
|
||||
|
||||
res.setHeader('Content-Type', 'text/event-stream');
|
||||
res.setHeader('Cache-Control', 'no-cache');
|
||||
res.setHeader('Connection', 'keep-alive');
|
||||
|
||||
// Send an initial message to confirm connection
|
||||
res.write(`data: ${JSON.stringify({ type: 'connected' })}\n\n`);
|
||||
|
||||
const sendUpdate = (data: any) => {
|
||||
res.write(`data: ${JSON.stringify(data)}\n\n`);
|
||||
};
|
||||
|
||||
progressManager.subscribeToUpdates(sendUpdate);
|
||||
|
||||
// Clean up on client disconnect
|
||||
req.on('close', () => {
|
||||
console.log("SSE connection closed"); // Debug log
|
||||
progressManager.unsubscribeFromUpdates(sendUpdate);
|
||||
});
|
||||
});
|
||||
|
||||
router.get(
|
||||
"/",
|
||||
(req: Request, res: Response, next: NextFunction) => {
|
||||
|
|
@ -79,18 +107,17 @@ router.get("/media-list", fetchMedia, (req: Request, res: Response) => {
|
|||
router.get(
|
||||
"/gifv/:file",
|
||||
async (req: Request, res: Response, next: NextFunction) => {
|
||||
const url = `${req.protocol}://${req.get("host")}/uploads/${
|
||||
req.params.file
|
||||
}`;
|
||||
const url = `${req.protocol}://${req.get("host")}/uploads/${req.params.file
|
||||
}`;
|
||||
let width;
|
||||
let height;
|
||||
|
||||
const [filename, fileExtension] = extension(`uploads/${req.params.file}`);
|
||||
if (
|
||||
fileExtension == ".mp4" ||
|
||||
fileExtension == ".mov" ||
|
||||
fileExtension == ".webm" ||
|
||||
fileExtension == ".gif"
|
||||
fileExtension == ".mov" ||
|
||||
fileExtension == ".webm" ||
|
||||
fileExtension == ".gif"
|
||||
) {
|
||||
const imageData = ffProbe(
|
||||
`uploads/${req.params.file}`,
|
||||
|
|
@ -167,10 +194,10 @@ router.post(
|
|||
[
|
||||
checkAuth,
|
||||
upload.array("fileupload"),
|
||||
convertTo720p,
|
||||
createEmbedData,
|
||||
handleUpload,
|
||||
fetchMedia,
|
||||
processUploadedMedia,
|
||||
createEmbedData,
|
||||
],
|
||||
(req: Request, res: Response) => {
|
||||
return res.render("partials/_fileList", { user: req.user }); // Render only the file list partial
|
||||
|
|
@ -192,9 +219,9 @@ router.get(
|
|||
[checkAuth],
|
||||
async (req: Request, res: Response, next: NextFunction) => {
|
||||
const filename: any = await getPath(req.params.id);
|
||||
const filePath = path.join(__dirname , "../../uploads/" + filename.path);
|
||||
const filePath = path.join(__dirname, "../../uploads/" + filename.path);
|
||||
const oembed = path.join(
|
||||
__dirname , "../../uploads/oembed-" + filename.path + ".json"
|
||||
__dirname, "../../uploads/oembed-" + filename.path + ".json"
|
||||
);
|
||||
|
||||
const [fileName, fileExtension] = extension(filePath);
|
||||
|
|
@ -202,10 +229,10 @@ router.get(
|
|||
|
||||
if (
|
||||
videoExtensions.includes(fileExtension) ||
|
||||
fileExtension == ".gif"
|
||||
fileExtension == ".gif"
|
||||
) {
|
||||
filesToDelete.push(
|
||||
path.join(__dirname , "../../uploads/720p-" + filename.path)
|
||||
path.join(__dirname, "../../uploads/720p-" + filename.path)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
56
app/services/MediaProcesser.ts
Normal file
56
app/services/MediaProcesser.ts
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import ffmpeg from 'fluent-ffmpeg';
|
||||
import { progressManager } from './ProgressManager';
|
||||
import { EncodingType, currentEncoding } from '../lib/ffmpeg';
|
||||
|
||||
export class MediaProcessor {
|
||||
static async processVideo(
|
||||
inputPath: string,
|
||||
filename: string,
|
||||
extension: string
|
||||
): Promise<void> {
|
||||
console.log("Starting video processing:", filename); // Debug log
|
||||
|
||||
const outputPath = `uploads/720p-${filename}${extension}`;
|
||||
const outputOptions = [
|
||||
'-vf', 'scale=-2:720',
|
||||
'-c:v', currentEncoding,
|
||||
'-c:a', 'copy',
|
||||
'-pix_fmt', 'yuv420p'
|
||||
];
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
ffmpeg()
|
||||
.input(inputPath)
|
||||
.outputOptions(outputOptions)
|
||||
.output(outputPath)
|
||||
.on('progress', (progress) => {
|
||||
console.log("Progress:", progress.percent); // Debug log
|
||||
progressManager.updateProgress({
|
||||
filename: `${filename}${extension}`,
|
||||
progress: progress.percent / 100,
|
||||
status: 'processing'
|
||||
});
|
||||
})
|
||||
.on('end', () => {
|
||||
console.log("Processing complete:", filename); // Debug log
|
||||
progressManager.updateProgress({
|
||||
filename: `${filename}${extension}`,
|
||||
progress: 1,
|
||||
status: 'complete'
|
||||
});
|
||||
resolve();
|
||||
})
|
||||
.on('error', (err) => {
|
||||
console.error("Processing error:", err); // Debug log
|
||||
progressManager.updateProgress({
|
||||
filename: `${filename}${extension}`,
|
||||
progress: 0,
|
||||
status: 'error',
|
||||
message: err.message
|
||||
});
|
||||
reject(err);
|
||||
})
|
||||
.run();
|
||||
});
|
||||
}
|
||||
}
|
||||
45
app/services/ProgressManager.ts
Normal file
45
app/services/ProgressManager.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import { EventEmitter } from 'events';
|
||||
|
||||
export interface ProgressUpdate {
|
||||
filename: string;
|
||||
progress: number;
|
||||
status: 'processing' | 'complete' | 'error';
|
||||
message?: string;
|
||||
}
|
||||
|
||||
class ProgressManager {
|
||||
private static instance: ProgressManager;
|
||||
private emitter: EventEmitter;
|
||||
private activeJobs: Map<string, ProgressUpdate>;
|
||||
|
||||
private constructor() {
|
||||
this.emitter = new EventEmitter();
|
||||
this.activeJobs = new Map();
|
||||
}
|
||||
|
||||
static getInstance(): ProgressManager {
|
||||
if (!ProgressManager.instance) {
|
||||
ProgressManager.instance = new ProgressManager();
|
||||
}
|
||||
return ProgressManager.instance;
|
||||
}
|
||||
|
||||
updateProgress(update: ProgressUpdate) {
|
||||
this.activeJobs.set(update.filename, update);
|
||||
this.emitter.emit('progress', update);
|
||||
}
|
||||
|
||||
subscribeToUpdates(callback: (update: ProgressUpdate) => void) {
|
||||
this.emitter.on('progress', callback);
|
||||
}
|
||||
|
||||
unsubscribeFromUpdates(callback: (update: ProgressUpdate) => void) {
|
||||
this.emitter.off('progress', callback);
|
||||
}
|
||||
|
||||
getJobStatus(filename: string): ProgressUpdate | undefined {
|
||||
return this.activeJobs.get(filename);
|
||||
}
|
||||
}
|
||||
|
||||
export const progressManager = ProgressManager.getInstance();
|
||||
|
|
@ -1,73 +1,86 @@
|
|||
<%
|
||||
function extension(string) {
|
||||
return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
|
||||
}
|
||||
const getMediaType = (filename) => {
|
||||
const ext = filename.slice(((filename.lastIndexOf(".") - 2) >>> 0) + 2).toLowerCase();
|
||||
const videoExts = ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm'];
|
||||
const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.tiff', '.webp'];
|
||||
|
||||
const videoExtensions = ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm'];
|
||||
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.tiff', '.webp'];
|
||||
if (videoExts.includes(ext)) return 'video';
|
||||
if (imageExts.includes(ext)) return 'image';
|
||||
return 'other';
|
||||
};
|
||||
|
||||
function sanitizeId(filename) {
|
||||
return filename.replace(/[^a-z0-9]/gi, '_');
|
||||
}
|
||||
%>
|
||||
|
||||
<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">
|
||||
<div class="view">
|
||||
<% if (videoExtensions.includes(extension(file.path))) { %>
|
||||
<!-- Show spinner initially -->
|
||||
<div id="spinner-<%= file.path %>" class="spinner">Optimizing Video for Sharing...</div>
|
||||
<li id="<%= file.path %>" class="show">
|
||||
<div class="view">
|
||||
<% const mediaType = getMediaType(file.path); %>
|
||||
|
||||
<!-- Hidden video container to be displayed later -->
|
||||
<div class="video">
|
||||
<video id="video-<%= file.path %>" class="image" autoplay loop muted playsinline style="display: none;">
|
||||
<source src="/uploads/720p-<%= file.path %>">
|
||||
</video>
|
||||
<div class="overlay">
|
||||
<% if(user.username == "admin" && file.username != "admin") { %>
|
||||
<small class="username"><%= file.username %></small>
|
||||
<br>
|
||||
<% } %>
|
||||
<a href="/gifv/<%=file.path %>" onclick="copyA(event)">Copy as GIFv</a>
|
||||
</div>
|
||||
</div>
|
||||
<% } else if (extension(file.path) == ".gif") { %>
|
||||
<div class="video">
|
||||
<img class="image" src="/uploads/720p-<%=file.path %>" width="100%" onclick="copyURI(event);" loading="lazy">
|
||||
<div class="overlay">
|
||||
<% if(user.username == "admin" && file.username != "admin") { %>
|
||||
<small class="username"><%= file.username %></small>
|
||||
<br>
|
||||
<% } %>
|
||||
<a href="/gifv/<%=file.path %>" onclick="copyA(event)">Copy as GIFv</a>
|
||||
</div>
|
||||
</div>
|
||||
<% } else if (imageExtensions.includes(extension(file.path))) { %>
|
||||
<div class="video">
|
||||
<img class="image" src="/uploads/<%=file.path %>" width="100%" onclick="copyURI(event)" loading="lazy">
|
||||
<% if(user.username == "admin" && file.username != "admin") { %>
|
||||
<div class="overlay">
|
||||
<small class="username"><%= file.username %></small>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<% } else {%>
|
||||
<!-- non-media file -->
|
||||
<div class="nonmedia" onclick="copyPath('/uploads/<%=file.path%>')">
|
||||
<p><%=extension(file.path)%> file</p>
|
||||
<% if(user.username == "admin" && file.username != "admin") { %>
|
||||
<div class="overlay">
|
||||
<small class="username"><%= file.username %></small>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<% } %>
|
||||
<label><%= file.path %></label>
|
||||
<button class="destroy" hx-get="<%=file.url%>/delete" hx-trigger="click" hx-target="#embedder-list" hx-swap="innerHTML"></button>
|
||||
<button type="button" class="fullsize" onclick="openFullSize('/uploads/<%=file.path%>')"></button>
|
||||
</div>
|
||||
</li>
|
||||
<% if (mediaType === 'video') { %>
|
||||
<div class="video">
|
||||
<% const sanitizedId = file.path.replace(/[^a-z0-9]/gi, '_'); %>
|
||||
|
||||
<div id="spinner-<%= sanitizedId %>" class="spinner" style="display: <%= file.isProcessed ? 'none' : 'block' %>;">
|
||||
<div class="spinner-content">
|
||||
Optimizing Video for Sharing...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="media-container-<%= sanitizedId %>" class="video-container" style="display: <%= file.isProcessed ? 'block' : 'none' %>;">
|
||||
<video class="image" autoplay loop muted playsinline>
|
||||
<source src="/uploads/720p-<%= file.path %>">
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="overlay">
|
||||
<% if(user.username === "admin" && file.username !== "admin") { %>
|
||||
<small class="username"><%= file.username %></small>
|
||||
<br>
|
||||
<% } %>
|
||||
<a href="/gifv/<%= file.path %>" onclick="copyA(event)">Copy as GIFv</a>
|
||||
</div>
|
||||
</div>
|
||||
<% } else if (mediaType === 'image') { %>
|
||||
<!-- Image container -->
|
||||
<div class="video">
|
||||
<img class="image"
|
||||
src="/uploads/<%= file.path %>"
|
||||
onclick="copyURI(event)"
|
||||
loading="lazy">
|
||||
|
||||
<% if(user.username === "admin" && file.username !== "admin") { %>
|
||||
<div class="overlay">
|
||||
<small class="username"><%= file.username %></small>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<% } else { %>
|
||||
<!-- Non-media file -->
|
||||
<div class="nonmedia" onclick="copyPath('/uploads/<%= file.path %>')">
|
||||
<p><%= file.path.split('.').pop().toUpperCase() %> file</p>
|
||||
<% if(user.username === "admin" && file.username !== "admin") { %>
|
||||
<div class="overlay">
|
||||
<small class="username"><%= file.username %></small>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<label><%= file.path %></label>
|
||||
<button class="destroy"
|
||||
hx-get="<%= file.url %>/delete"
|
||||
hx-trigger="click"
|
||||
hx-target="#embedder-list"
|
||||
hx-swap="innerHTML">
|
||||
</button>
|
||||
<button type="button"
|
||||
class="fullsize"
|
||||
onclick="openFullSize('/uploads/<%= file.path %>')">
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<% }); %>
|
||||
Loading…
Add table
Add a link
Reference in a new issue