diff --git a/app/lib/middleware.ts b/app/lib/middleware.ts index b2805b2..97b7157 100644 --- a/app/lib/middleware.ts +++ b/app/lib/middleware.ts @@ -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]}`, diff --git a/app/public/css/app.css b/app/public/css/app.css index da81a13..64e0859 100644 --- a/app/public/css/app.css +++ b/app/public/css/app.css @@ -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 */ .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 */ .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 */ .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 */ .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; - } \ No newline at end of file +.modal video { + max-width: 100%; + max-height: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.main { + padding-top: 10px; +} diff --git a/app/public/js/index.js b/app/public/js/index.js index b64136d..36bc395 100644 --- a/app/public/js/index.js +++ b/app/public/js/index.js @@ -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) { diff --git a/app/views/index.ejs b/app/views/index.ejs index 56a1d8e..7d47e8b 100644 --- a/app/views/index.ejs +++ b/app/views/index.ejs @@ -13,7 +13,6 @@ - @@ -72,16 +71,8 @@ - \ No newline at end of file diff --git a/app/views/partials/_fileList.ejs b/app/views/partials/_fileList.ejs index 6744f3d..80bbae7 100644 --- a/app/views/partials/_fileList.ejs +++ b/app/views/partials/_fileList.ejs @@ -7,6 +7,12 @@ const videoExtensions = ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm' const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.tiff', '.webp']; %> + + <% files.forEach(function(file) { %>