fix spinner, ffmpegdownscale/convert not using correct file name

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]}`,

app/public/css/app.css

@@ -22,22 +22,17 @@
 }
 
 .spinner {
-	/* Positioning and Sizing */
-	width: 100px;
+  width: 300px;
   height: 100px;
   position: relative;
   margin: 50px auto;
-	/* Centering the spinner */
 
-	/* Text Styling */
   color: #555;
   text-align: center;
   font-family: Arial, sans-serif;
   font-size: 14px;
   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);
   border-radius: 10px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@@ -56,7 +51,7 @@
 
 /* Spinner Animation */
 .spinner::before {
-	content: '';
+  content: "";
   box-sizing: border-box;
   position: absolute;
   top: 50%;
@@ -91,7 +86,6 @@
   }
 }
 
-
 .nav a {
   display: block;
   color: inherit;
@@ -99,7 +93,7 @@
 }
 
 .nav a:hover {
-	border-bottom: 1px solid #DB7676;
+  border-bottom: 1px solid #db7676;
 }
 
 .nav button {
@@ -107,7 +101,7 @@
 }
 
 .nav button:hover {
-	border-bottom: 1px solid #DB7676;
+  border-bottom: 1px solid #db7676;
   cursor: pointer;
 }
 
@@ -125,7 +119,7 @@
   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;
+  color: #73ad21;
 }
 
 /* background image by Cole Bemis <https://feathericons.com> */
@@ -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;

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;
+function updateMediaList() {
+  htmx.ajax("GET", "/media-list", {target: "#embedder-list", swap: "innerHTML"});
   htmx.process(document.body);
-  } catch (error) {
-    console.error("There was a problem with the fetch operation:", error);
-  }
 }
 
 function refreshMediaList(files) {

app/views/index.ejs

@@ -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>

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'];
 %>
 
+<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">