Split nameAndExtension to seperate variables

app/lib/middleware.ts

@@ -6,7 +6,6 @@ import process from "process";
 import { extension, videoExtensions, imageExtensions, oembedObj } from "./lib";
 import { insertToDB } from "./db";
 import { ffmpegDownscale, ffProbe } from "./ffmpeg";
-import { ffprobe } from "fluent-ffmpeg";
 
 export const checkAuth: Middleware = (req, res, next) => {
   if (!req.user) {
@@ -49,8 +48,8 @@ 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].filename);
-    const isMedia = videoExtensions.includes(nameAndExtension[1]) || imageExtensions.includes(nameAndExtension[1]);
+    const [filename, fileExtension] = extension(files[file].filename);
+    const isMedia = videoExtensions.includes(fileExtension) || imageExtensions.includes(fileExtension);
 
     const oembed: oembedObj = {
       type: "video",
@@ -59,19 +58,18 @@ export const createEmbedData: Middleware = async (req, res, next) => {
       provider_url: "https://github.com/WaveringAna/embedder",
       cache_age: 86400,
       html: `<iframe src='${req.protocol}://${req.get("host")}/gifv/${
-        nameAndExtension[0]
-      }${nameAndExtension[1]}'></iframe>`
+        filename
+      }${fileExtension}'></iframe>`
     };
 
     if (isMedia) {
       let ffProbeData;
       try { ffProbeData = await ffProbe(
         `uploads/${files[file].filename}`,
-        nameAndExtension[0],
-        nameAndExtension[1],
+        filename,
+        fileExtension,
       ); } catch (error) {
         console.log(`Error: ${error}`);
-        console.log(nameAndExtension[1]);
       }
 
       oembed.width = ffProbeData.streams[0].width;
@@ -79,12 +77,12 @@ export const createEmbedData: Middleware = async (req, res, next) => {
     }
 
     fs.writeFile(
-      `uploads/oembed-${nameAndExtension[0]}${nameAndExtension[1]}.json`,
+      `uploads/oembed-${filename}${fileExtension}.json`,
       JSON.stringify(oembed),
       function (err) {
         if (err) return next(err);
         console.log(
-          `oembed file created ${nameAndExtension[0]}${nameAndExtension[1]}.json`,
+          `oembed file created ${filename}${fileExtension}.json`,
         );
       },
     );
@@ -97,24 +95,24 @@ 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].filename);
+    const [filename, fileExtension] = extension(files[file].filename);
 
     //Skip if not a video
     if (
-      !videoExtensions.includes(nameAndExtension[1]) &&
-      nameAndExtension[1] !== ".gif"
+      !videoExtensions.includes(fileExtension) &&
+      fileExtension !== ".gif"
     ) {
       console.log(`${files[file].filename} is not a video file`);
-      console.log(nameAndExtension[1]);
+      console.log(fileExtension);
       continue;
     }
 
     console.log(`Creating 720p for ${files[file].filename}`);
 
     ffmpegDownscale(
-      `uploads/${nameAndExtension[0]}${nameAndExtension[1]}`,
-      nameAndExtension[0],
-      nameAndExtension[1],
+      `uploads/${filename}${fileExtension}`,
+      filename,
+      fileExtension,
     )
       .then(() => {
         //Nothing for now, can fire event flag that it is done to front end when react conversion is done

app/lib/multer.ts

@@ -23,11 +23,11 @@ export const fileStorage = multer.diskStorage({
     file: Express.Multer.File,
     callback: FileNameCallback,
   ): void => {
-    const nameAndExtension = extension(file.originalname);
+    const [filename, fileExtension] = extension(file.originalname);
     console.log(`Uploading ${file}`);
     db.all(
       "SELECT * FROM media WHERE path = ?",
-      [nameAndExtension[0] + nameAndExtension[1]],
+      [filename + fileExtension],
       (err: Error, exists: []) => {
         if (err) {
           console.log(err);
@@ -43,12 +43,12 @@ export const fileStorage = multer.diskStorage({
           ) {
             callback(
               null,
-              nameAndExtension[0] + "-" + suffix + nameAndExtension[1],
+              filename + "-" + suffix + fileExtension,
             );
           } else {
             callback(
               null,
-              request.body.title + "-" + suffix + nameAndExtension[1],
+              request.body.title + "-" + suffix + fileExtension,
             );
           }
         } else {
@@ -57,9 +57,9 @@ export const fileStorage = multer.diskStorage({
             request.body.title == null ||
             request.body.title == undefined
           ) {
-            callback(null, nameAndExtension[0] + nameAndExtension[1]);
+            callback(null, filename + fileExtension);
           } else {
-            callback(null, request.body.title + nameAndExtension[1]);
+            callback(null, request.body.title + fileExtension);
           }
         }
       },

app/public/js/index.js

@@ -255,8 +255,8 @@ function checkFileAvailability(filePath) {
 function createVideoElement(filePath) {
   const videoContainer = document.getElementById(`video-${filePath}`);
   videoContainer.outerHTML = `
-    <video id='video-${filePath}' class="image" autoplay loop muted playsinline loading="lazy">
-      <source src="/uploads/720p-${filePath}" loading="lazy">
+    <video id='video-${filePath}' class="image" autoplay loop muted playsinline>
+      <source src="/uploads/720p-${filePath}">
     </video>
   `;
   videoContainer.style.display = "block";

app/routes/index.ts

@@ -69,7 +69,7 @@ router.get(
 );
 
 router.get("/media-list", fetchMedia, (req: Request, res: Response) => {
-  res.render("partials/_fileList", { user: req.user }); // Render only the file list partial
+  res.render("partials/_fileList", { user: req.user });
 });
 
 router.get(
@@ -81,17 +81,17 @@ router.get(
     let width;
     let height;
 
-    const nameAndExtension = extension(`uploads/${req.params.file}`);
+    const [filename, fileExtension] = extension(`uploads/${req.params.file}`);
     if (
-      nameAndExtension[1] == ".mp4" ||
-      nameAndExtension[1] == ".mov" ||
-      nameAndExtension[1] == ".webm" ||
-      nameAndExtension[1] == ".gif"
+      fileExtension == ".mp4" ||
+      fileExtension == ".mov" ||
+      fileExtension == ".webm" ||
+      fileExtension == ".gif"
     ) {
       const imageData = ffProbe(
         `uploads/${req.params.file}`,
-        nameAndExtension[0],
-        nameAndExtension[1]
+        filename,
+        fileExtension
       );
 
       width = (await imageData).streams[0].width;
@@ -147,18 +147,17 @@ router.get(
   [checkAuth],
   async (req: Request, res: Response, next: NextFunction) => {
     const filename: any = await getPath(req.params.id);
-    console.log(filename);
     const filePath = path.join(__dirname , "../../uploads/" + filename.path);
     const oembed = path.join(
       __dirname , "../../uploads/oembed-" + filename.path + ".json"
     );
 
-    const nameAndExtension = extension(filePath);
+    const [fileName, fileExtension] = extension(filePath);
     const filesToDelete = [filePath, oembed];
 
     if (
-      videoExtensions.includes(nameAndExtension[1]) ||
-      nameAndExtension[1] == ".gif"
+      videoExtensions.includes(fileExtension) ||
+      fileExtension == ".gif"
     ) {
       filesToDelete.push(
         path.join(__dirname , "../../uploads/720p-" + filename.path)
@@ -186,7 +185,10 @@ router.get(
           });
         });
       })
-    );
+    ).catch((err) => {
+      console.error("Error deleting files:", err);
+      return next(err);
+    });
 
     next();
   },

app/views/partials/_fileList.ejs

@@ -23,8 +23,8 @@ const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.tiff
 
     <!-- Hidden video container to be displayed later -->
     <div class="video">
-      <video id="video-<%= file.path %>" class="image" autoplay loop muted playsinline loading="lazy" style="display: none;">
-        <source src="/uploads/720p-<%= file.path %>" loading="lazy">
+      <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") { %>