perf(Assets): project assets perf improvements

LibreTexts · Jun 17, 2024 · 126df44 · 126df44
1 parent f306529
commit 126df44
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 157 deletions.
diff --git a/client/src/components/FilesManager/EditFile.tsx b/client/src/components/FilesManager/EditFile.tsx
@@ -513,24 +513,31 @@ const EditFile: React.FC<EditFileProps> = ({
                     </Button>
                   </div>
                 )}
-                {!isFolder && getValues("isVideo") && getValues('videoStorageID') && (
-                  <div className="mt-4">
-                    <Button
-                      color="blue"
-                      onClick={() => setShowCaptionsModal(true)}
-                      disabled={false}
-                      type="button"
-                    >
-                      <Icon name="closed captioning outline" />
-                      Manage Captions
-                    </Button>
-                  </div>
-                )}
+                {!isFolder &&
+                  getValues("isVideo") &&
+                  getValues("videoStorageID") && (
+                    <div className="mt-4">
+                      <Button
+                        color="blue"
+                        onClick={() => setShowCaptionsModal(true)}
+                        disabled={false}
+                        type="button"
+                      >
+                        <Icon name="closed captioning outline" />
+                        Manage Captions
+                      </Button>
+                    </div>
+                  )}
                 <FilePreview
                   className="mt-8"
                   projectID={projectID}
                   fileID={fileID}
-                  file={watch()}
+                  name={getValues("name")}
+                  isURL={getValues("isURL")}
+                  url={getValues("url")}
+                  isVideo={getValues("isVideo")}
+                  videoStorageID={getValues("videoStorageID")}
+                  storageType={getValues("storageType")}
                   videoStreamURL={videoStreamURL}
                 />
               </div>
@@ -829,7 +836,7 @@ const EditFile: React.FC<EditFileProps> = ({
         onClose={() => setShowCaptionsModal(false)}
         projectID={projectID}
         fileID={fileID}
-        key='captions-modal'
+        key="captions-modal"
       />
       <FilesUploader
         show={showUploader}

diff --git a/client/src/components/FilesManager/FilePreview.tsx b/client/src/components/FilesManager/FilePreview.tsx
@@ -10,14 +10,24 @@ import { Stream } from "@cloudflare/stream-react";
 interface FilePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   projectID: string;
   fileID: string;
-  file: ProjectFile;
+  name: string;
+  isURL?: boolean;
+  url?: string;
+  isVideo?: boolean;
+  videoStorageID?: string;
+  storageType: "file" | "folder";
   videoStreamURL?: string;
 }
 
 const FilePreview: React.FC<FilePreviewProps> = ({
   projectID,
   fileID,
-  file,
+  name,
+  isURL,
+  url,
+  isVideo,
+  videoStorageID,
+  storageType,
   videoStreamURL,
   ...rest
 }) => {
@@ -30,12 +40,12 @@ const FilePreview: React.FC<FilePreviewProps> = ({
   ); // image is default type if not determined
 
   useEffect(() => {
-    if (!file) return;
+    if (!fileID) return;
     const { shouldShow, type } = checkShouldShowPreview();
     setShouldShowPreview(shouldShow);
     setPreviewType(type);
     if (shouldShow && type === "image") loadFileURL();
-  }, [file]);
+  }, [fileID]);
 
   async function loadFileURL() {
     try {
@@ -60,23 +70,23 @@ const FilePreview: React.FC<FilePreviewProps> = ({
     shouldShow: boolean;
     type: "image" | "video" | "url";
   } {
-    if (!file) return { shouldShow: false, type: "image" };
+    if (!fileID) return { shouldShow: false, type: "image" };
 
     // Don't show preview for folders
-    if (file.storageType !== "file") {
+    if (storageType !== "file") {
       return { shouldShow: false, type: "image" };
     }
 
-    if (file.isURL && file.url) {
+    if (isURL && url) {
       return { shouldShow: true, type: "url" };
     }
 
-    if (file.isVideo && file.videoStorageID) {
+    if (isVideo && videoStorageID) {
       return { shouldShow: true, type: "video" };
     }
 
     // Check if file is an image
-    const ext = file.name.split(".").pop()?.toLowerCase();
+    const ext = name.split(".").pop()?.toLowerCase();
     const validImgExt = ["png", "jpg", "jpeg", "gif", "bmp", "svg"].includes(
       ext ?? ""
     );
@@ -114,7 +124,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
         <>
           <p className="font-semibold">External URL</p>
           <div className="mt-2">
-            <URLFileHyperlink url={file.url} />
+            <URLFileHyperlink url={url} />
           </div>
         </>
       )}