From a9bf03e563c7894b906c20bd6814b2fec8d3b264 Mon Sep 17 00:00:00 2001
From: subnub <kyle.hoell@gmail.com>
Date: Tue, 2 Jul 2024 00:57:21 -0400
Subject: [PATCH] added more media changes

---
 .../ChunkService/utils/createVideoThumbnailFS.ts     |  2 +-
 .../ChunkService/utils/tempCreateVideoThumbnailFS.ts |  2 +-
 src/components/MediaItem/index.tsx                   |  6 +++---
 src/components/Medias/index.tsx                      | 12 ++++++------
 src/components/MultiSelectBar/index.tsx              |  2 +-
 src/hooks/files.ts                                   |  1 -
 src/hooks/utils.ts                                   |  2 --
 7 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/backend/services/ChunkService/utils/createVideoThumbnailFS.ts b/backend/services/ChunkService/utils/createVideoThumbnailFS.ts
index f5ddd90..8ea52a8 100644
--- a/backend/services/ChunkService/utils/createVideoThumbnailFS.ts
+++ b/backend/services/ChunkService/utils/createVideoThumbnailFS.ts
@@ -90,7 +90,7 @@ const createVideoThumbnailFS = (
       .outputOptions([
         "-f image2pipe",
         "-vframes 1",
-        "-vf scale='if(gt(iw,ih),600,-1):if(gt(ih,iw),600,-1)'",
+        "-vf scale='if(gt(iw,ih),600,-1):if(gt(ih,iw),300,-1)'",
       ])
       .on("start", (command) => {
         /**
diff --git a/backend/services/ChunkService/utils/tempCreateVideoThumbnailFS.ts b/backend/services/ChunkService/utils/tempCreateVideoThumbnailFS.ts
index 15a5f97..4727a7c 100644
--- a/backend/services/ChunkService/utils/tempCreateVideoThumbnailFS.ts
+++ b/backend/services/ChunkService/utils/tempCreateVideoThumbnailFS.ts
@@ -57,7 +57,7 @@ const tempCreateVideoThumbnailFS = (
       .outputOptions([
         "-f image2pipe",
         "-vframes 1",
-        "-vf scale='if(gt(iw,ih),600,-1):if(gt(ih,iw),600,-1)'",
+        "-vf scale='if(gt(iw,ih),600,-1):if(gt(ih,iw),300,-1)'",
       ])
       .on("start", (command) => {
         /**
diff --git a/src/components/MediaItem/index.tsx b/src/components/MediaItem/index.tsx
index c491c74..30e7244 100644
--- a/src/components/MediaItem/index.tsx
+++ b/src/components/MediaItem/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { memo, useRef } from "react";
 import { FileInterface } from "../../types/file";
 import { useThumbnail } from "../../hooks/files";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
@@ -14,7 +14,7 @@ type MediaItemType = {
   file: FileInterface;
 };
 
-const MediaItem: React.FC<MediaItemType> = ({ file }) => {
+const MediaItem: React.FC<MediaItemType> = memo(({ file }) => {
   const elementSelected = useAppSelector((state) => {
     if (state.selected.mainSection.type !== "file") return false;
     return state.selected.mainSection.id === file._id;
@@ -114,6 +114,6 @@ const MediaItem: React.FC<MediaItemType> = ({ file }) => {
       />
     </div>
   );
-};
+});
 
 export default MediaItem;
diff --git a/src/components/Medias/index.tsx b/src/components/Medias/index.tsx
index 824a712..fd22945 100644
--- a/src/components/Medias/index.tsx
+++ b/src/components/Medias/index.tsx
@@ -1,11 +1,11 @@
 import classNames from "classnames";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { memo, useEffect, useMemo, useState } from "react";
 import MediaItem from "../MediaItem";
 import { useFiles, useThumbnail } from "../../hooks/files";
 import MultiSelectBar from "../MultiSelectBar";
 import { useInfiniteScroll } from "../../hooks/infiniteScroll";
 
-const Medias = () => {
+const Medias = memo(() => {
   const {
     data: files,
     isFetchingNextPage,
@@ -28,14 +28,14 @@ const Medias = () => {
 
   return (
     <div className="w-full p-[17px_15px] mobileMode:p-[17px_40px] overflow-y-scroll">
-      <div className="fixed bottom-0 flex justify-center items-center right-0 left-0">
-        <MultiSelectBar />
-      </div>
       <div
         className={classNames(
           "grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-[10px]"
         )}
       >
+        <div className="fixed bottom-0 flex justify-center items-center right-0 left-0">
+          <MultiSelectBar />
+        </div>
         {files?.pages.map((filePage, index) => (
           <React.Fragment key={index}>
             {filePage.map((file) => (
@@ -47,6 +47,6 @@ const Medias = () => {
       <div ref={sentinelRef} className="h-1"></div>
     </div>
   );
-};
+});
 
 export default Medias;
diff --git a/src/components/MultiSelectBar/index.tsx b/src/components/MultiSelectBar/index.tsx
index bdc3119..8b35dd5 100644
--- a/src/components/MultiSelectBar/index.tsx
+++ b/src/components/MultiSelectBar/index.tsx
@@ -106,7 +106,7 @@ const MultiSelectBar: React.FC = () => {
   if (!multiSelectMode) return <div></div>;
 
   return (
-    <div className="flex justify-center items-center">
+    <div className="flex justify-center items-center z-10">
       <div className="border border-[#ebe9f9] bg-[#ebe9f9] rounded-full p-2 px-5 text-black text-sm mb-4 max-w-[600px] w-full mt-4 min-w-[300px] shadow-lg">
         <div className="flex flex-row items-center justify-between">
           <div className="flex flex-row items-center">
diff --git a/src/hooks/files.ts b/src/hooks/files.ts
index d0e852f..cf4679c 100644
--- a/src/hooks/files.ts
+++ b/src/hooks/files.ts
@@ -127,7 +127,6 @@ export const useThumbnail = (
     });
   }, []);
   const getThumbnail = useCallback(async () => {
-    console.log("getting thumbnail", thumbnailID);
     try {
       if (!thumbnailID || requestedThumbnail.current) return;
       if (isQuickFile && !isHome) return;
diff --git a/src/hooks/utils.ts b/src/hooks/utils.ts
index 99dcd0e..0f50995 100644
--- a/src/hooks/utils.ts
+++ b/src/hooks/utils.ts
@@ -9,7 +9,6 @@ export const useUtils = () => {
   }, [location.pathname]);
 
   const isTrash = useMemo(() => {
-    console.log("location", location.pathname);
     return (
       location.pathname === "/trash" ||
       location.pathname.includes("/folder-trash") ||
@@ -18,7 +17,6 @@ export const useUtils = () => {
   }, [location.pathname]);
 
   const isMedia = useMemo(() => {
-    console.log("location", location.pathname);
     return (
       location.pathname === "/media" ||
       location.pathname.includes("/search-media")