made it so media items display error, improved some scripts

backend/server/server-start.ts

@@ -28,7 +28,7 @@ const serverStart = async () => {
     const port = process.env.HTTP_PORT || process.env.PORT;
 
     server.listen(port, process.env.URL, () => {
-      console.log("Development Server Running On Port:", port, process.env.URL);
+      console.log("Development Backend Server Running On Port:", port);
     });
   }
 };

backend/services/chunk-service/utils/createVideoThumbnail.ts

@@ -157,7 +157,7 @@ const createVideoThumbnail = (
           }
         })
         .on("error", async (err, sdf, stderr) => {
-          console.log("thumbnail error attempting temp directory fix");
+          // console.log("thumbnail error attempting temp directory fix");
 
           error = true;
 

backend/services/chunk-service/utils/tempCreateVideoThumbnail.ts

@@ -22,7 +22,7 @@ const tempCreateVideoThumbnail = (
   filename: string,
   user: UserInterface
 ) => {
-  return new Promise<FileInterface>(async (resolve, reject) => {
+  return new Promise<FileInterface>((resolve, reject) => {
     const password = user.getEncryptionKey();
 
     let CIPHER_KEY = crypto.createHash("sha256").update(password!).digest();

package.json

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "dev": "concurrently \"vite\" \"tsc -w -p ./backend/tsconfig.json\" \"npm run dev:backend\"",
-    "dev:backend": "NODE_ENV=development nodemon dist-backend/server/server-start.js",
+    "dev:backend": "NODE_ENV=development nodemon --quiet dist-backend/server/server-start.js",
     "build:frontend": "vite build",
     "build:backend": "tsc -p ./backend/tsconfig.json",
     "build": "npm run build:frontend && npm run build:backend",

serverUtils/createVideoThumbnails.js

@@ -10,17 +10,30 @@ const getKey = require("../dist-backend/key/get-key").default;
 
 const waitForDatabase = () => {
   return new Promise((resolve, reject) => {
+    // Wait for the database to be ready.
+    const timeoutWait = () => {
+      setTimeout(() => resolve(), 3000);
+    };
+
     if (conn.readyState !== 1) {
       conn.once("open", () => {
-        resolve();
+        timeoutWait();
       });
     } else {
-      resolve();
+      timeoutWait();
     }
   });
 };
 
+// Wait to be after anything else may be printed to the terminal
+const terminalWait = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(), 2000);
+  });
+};
+
 const updateDocs = async () => {
+  await terminalWait();
   console.log(`Updating video thumbnails, env is ${process.env.NODE_ENV}`);
 
   console.log("\nWaiting for database...");
@@ -48,7 +61,7 @@ const updateDocs = async () => {
     try {
       const currentFile = files[i];
 
-      console.log("current file", currentFile._id);
+      console.log(`Progress ${i + 1}/${files.length}`);
 
       const user = await User.findById(currentFile.metadata.owner);
 

src/components/MediaItem/MediaItem.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useRef } from "react";
+import React, { memo, useRef, useState } from "react";
 import { FileInterface } from "../../types/file";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import {
@@ -12,12 +12,14 @@ import { useContextMenu } from "../../hooks/contextMenu";
 import ContextMenu from "../ContextMenu/ContextMenu";
 import PlayButtonIcon from "../../icons/PlayIcon";
 import getBackendURL from "../../utils/getBackendURL";
+import AlertIcon from "../../icons/AlertIcon";
 
 type MediaItemType = {
   file: FileInterface;
 };
 
 const MediaItem: React.FC<MediaItemType> = memo(({ file }) => {
+  const [thumbnailError, setThumbnailError] = useState(false);
   const elementSelected = useAppSelector((state) => {
     if (state.selected.mainSection.type !== "file") return false;
     return state.selected.mainSection.id === file._id;
@@ -105,15 +107,23 @@ const MediaItem: React.FC<MediaItemType> = memo(({ file }) => {
           />
         </div>
       )}
-      {file.metadata.isVideo && (
+      {file.metadata.isVideo && !thumbnailError && (
         <div className="w-full h-full absolute flex justify-center items-center text-white">
           <PlayButtonIcon className="w-[50px] h-[50px]" />
         </div>
       )}
-      <img
-        className="object-cover h-full w-full disable-force-touch"
-        src={thumbnail}
-      />
+      {!thumbnailError && (
+        <img
+          className="object-cover h-full w-full disable-force-touch"
+          src={thumbnail}
+          onError={() => setThumbnailError(true)}
+        />
+      )}
+      {thumbnailError && (
+        <div className="w-full h-full flex justify-center items-center">
+          <AlertIcon className="w-7 h-7 text-red-500" />
+        </div>
+      )}
     </div>
   );
 });