added more media changes

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) => {
         /**

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) => {
         /**

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;

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;

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

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;

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")