waveringana/embedder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix spinner, ffmpegdownscale/convert not using correct file name

Browse source
This commit is contained in:
waveringana 2023-11-29 12:42:03 -05:00
parent 3ed7b0b5c7
commit 02734f1d9d
5 changed files with 157 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/lib/middleware.ts
View file

@ -49,7 +49,7 @@ export const checkSharexAuth: Middleware = (req, res, next) => {
export const createEmbedData: Middleware = async (req, res, next) => { export const createEmbedData: Middleware = async (req, res, next) => {
const files = req.files as Express.Multer.File[]; const files = req.files as Express.Multer.File[];
for (const file in files) { 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 isMedia = videoExtensions.includes(nameAndExtension[1]) || imageExtensions.includes(nameAndExtension[1]);
const oembed: oembedObj = { const oembed: oembedObj = {
@ -66,7 +66,7 @@ export const createEmbedData: Middleware = async (req, res, next) => {
if (isMedia) { if (isMedia) {
let ffProbeData; let ffProbeData;
try { ffProbeData = await ffProbe( try { ffProbeData = await ffProbe(
`uploads/${files[file].originalname}`, `uploads/${files[file].filename}`,
nameAndExtension[0], nameAndExtension[0],
nameAndExtension[1], nameAndExtension[1],
); } catch (error) { ); } catch (error) {
@ -97,19 +97,19 @@ export const convertTo720p: Middleware = (req, res, next) => {
const files = req.files as Express.Multer.File[]; const files = req.files as Express.Multer.File[];
console.log("convert to 720p running"); console.log("convert to 720p running");
for (const file in files) { for (const file in files) {
const nameAndExtension = extension(files[file].originalname); const nameAndExtension = extension(files[file].filename);
//Skip if not a video //Skip if not a video
if ( if (
!videoExtensions.includes(nameAndExtension[1]) && !videoExtensions.includes(nameAndExtension[1]) &&
nameAndExtension[1] !== ".gif" 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]); console.log(nameAndExtension[1]);
continue; continue;
} }
console.log(`Creating 720p for ${files[file].originalname}`); console.log(`Creating 720p for ${files[file].filename}`);
ffmpegDownscale( ffmpegDownscale(
`uploads/${nameAndExtension[0]}${nameAndExtension[1]}`, `uploads/${nameAndExtension[0]}${nameAndExtension[1]}`,

276
app/public/css/app.css
View file

@ -1,147 +1,141 @@
.nav { .nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
left: 0; left: 0;
padding-bottom: 10px; padding-bottom: 10px;
} }
.nav ul { .nav ul {
margin: 0; margin: 0;
list-style: none; list-style: none;
text-align: left; text-align: left;
padding-inline-start: 0px; padding-inline-start: 0px;
} }
.nav li { .nav li {
display: inline-block; display: inline-block;
height: 40px; height: 40px;
margin-left: 12px; margin-left: 12px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 40px; line-height: 40px;
} }
.spinner { .spinner {
/* Positioning and Sizing */ width: 300px;
width: 100px; height: 100px;
height: 100px; position: relative;
position: relative; margin: 50px auto;
margin: 50px auto;
/* Centering the spinner */
/* Text Styling */ color: #555;
color: #555; text-align: center;
text-align: center; font-family: Arial, sans-serif;
font-family: Arial, sans-serif; font-size: 14px;
font-size: 14px; padding-top: 80px;
padding-top: 80px;
/* Adjust as needed for text position */
/* Adding a background to the spinner for better visibility */ background-color: rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.8); border-radius: 10px;
border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
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);
}
} }
/* 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 { .nav a {
display: block; display: block;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
.nav a:hover { .nav a:hover {
border-bottom: 1px solid #DB7676; border-bottom: 1px solid #db7676;
} }
.nav button { .nav button {
height: 14px; height: 14px;
} }
.nav button:hover { .nav button:hover {
border-bottom: 1px solid #DB7676; border-bottom: 1px solid #db7676;
cursor: pointer; cursor: pointer;
} }
/* background image by Cole Bemis <https://feathericons.com> */ /* background image by Cole Bemis <https://feathericons.com> */
.user { .user {
padding-left: 20px; 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-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-repeat: no-repeat;
background-position: center left; background-position: center left;
} }
/* background image by Cole Bemis <https://feathericons.com> */ /* background image by Cole Bemis <https://feathericons.com> */
.username { .username {
padding-left: 20px; 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-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-repeat: no-repeat;
background-position: center left; background-position: center left;
color: #73AD21; color: #73ad21;
} }
/* background image by Cole Bemis <https://feathericons.com> */ /* background image by Cole Bemis <https://feathericons.com> */
.logout { .logout {
padding-left: 20px; 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-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-repeat: no-repeat;
background-position: center left; background-position: center left;
} }
/* background image by Cole Bemis <https://feathericons.com> */ /* background image by Cole Bemis <https://feathericons.com> */
.adduser { .adduser {
padding-left: 20px; 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-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-repeat: no-repeat;
background-position: center left; background-position: center left;
} }
#dropArea { #dropArea {
@ -157,24 +151,24 @@
} }
.dragregion { .dragregion {
text-align: center; text-align: center;
} }
.image { .image {
width: 100%; width: 100%;
} }
div.nonmedia { div.nonmedia {
height: 100px; height: 100px;
width: 100%; width: 100%;
} }
div.nonmedia p { div.nonmedia p {
color: #444; color: #444;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
line-height: 100px; line-height: 100px;
text-align: center; text-align: center;
} }
label { label {
@ -192,13 +186,13 @@ label {
transform: translateY(0%) translateX(70%); transform: translateY(0%) translateX(70%);
z-index: 1; z-index: 1;
border-radius: 25px; border-radius: 25px;
border: 2px solid #73AD21; border: 2px solid #73ad21;
padding: 5px; padding: 5px;
background-color: #eee; background-color: #eee;
} }
.video .overlay a { .video .overlay a {
color: #73AD21; color: #73ad21;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;
@ -206,33 +200,33 @@ label {
} }
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
z-index: 9999; z-index: 9999;
} }
.modal img { .modal img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.modal video { .modal video {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.main { .main {
padding-top: 10px; padding-top: 10px;
} }

27
app/public/js/index.js
View file

@ -1,7 +1,7 @@
/* eslint-disable no-undef */ /* eslint-disable no-undef */
/* eslint-env browser: true */ /* eslint-env browser: true */
let files; let newMediaList;
function copyURI(evt) { function copyURI(evt) {
evt.preventDefault(); evt.preventDefault();
@ -221,6 +221,10 @@ searchInput.addEventListener("input", () => {
}); });
}); });
function p(num) {
return `${(num * 100).toFixed(2)}%`;
}
function checkFileAvailability(filePath) { function checkFileAvailability(filePath) {
const checkFile = () => { const checkFile = () => {
console.log(`Checking if ${filePath} is processed...`); console.log(`Checking if ${filePath} is processed...`);
@ -238,14 +242,14 @@ function checkFileAvailability(filePath) {
} }
}) })
.then((jsonData) => { .then((jsonData) => {
// Handle your JSON data here
console.log(jsonData); console.log(jsonData);
document.getElementById(`spinner-${filePath}`).innerText = `Optimizing Video for Sharing: ${p(jsonData.progress)} done`;
}) })
.catch((error) => console.error("Error:", error)); .catch((error) => console.error("Error:", error));
}; };
checkFile(); checkFile();
const interval = setInterval(checkFile, 5000); const interval = setInterval(checkFile, 1000);
} }
function createVideoElement(filePath) { function createVideoElement(filePath) {
@ -259,20 +263,9 @@ function createVideoElement(filePath) {
document.getElementById(`spinner-${filePath}`).style.display = "none"; document.getElementById(`spinner-${filePath}`).style.display = "none";
} }
async function updateMediaList() { function updateMediaList() {
try { htmx.ajax("GET", "/media-list", {target: "#embedder-list", swap: "innerHTML"});
const response = await fetch("/media-list"); htmx.process(document.body);
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 refreshMediaList(files) { function refreshMediaList(files) {

9
app/views/index.ejs
View file

@ -13,7 +13,6 @@
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest"> <link rel="manifest" href="/site.webmanifest">
<script src="https://unpkg.com/htmx.org@1.9.8"></script> <script src="https://unpkg.com/htmx.org@1.9.8"></script>
</head> </head>
<body> <body>
@ -72,16 +71,8 @@
<script src="/js/index.js"></script> <script src="/js/index.js"></script>
<script> <script>
document.body.addEventListener('htmx:afterSettle', function(event) { 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> </script>
</body> </body>
</html> </html>

6
app/views/partials/_fileList.ejs
View file

@ -7,6 +7,12 @@ const videoExtensions = ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm'
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.tiff', '.webp']; 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 --> <!-- _fileList.ejs -->
<% files.forEach(function(file) { %> <% files.forEach(function(file) { %>
<li id="<%= file.path %>" class="show"> <li id="<%= file.path %>" class="show">