feat: maximize media

apps/frontend/src/components/layout/new-modal.tsx

@@ -21,6 +21,7 @@ interface OpenModalInterface {
   closeOnClickOutside?: boolean;
   removeLayout?: boolean;
   fullScreen?: boolean;
+  top?: string | number;
   closeOnEscape?: boolean;
   withCloseButton?: boolean;
   askClose?: boolean;
@@ -175,12 +176,21 @@ export const Component: FC<{
       >
         <div className="relative flex-1">
           <div
+            style={
+              modal.top
+                ? { paddingTop: modal.top, paddingBottom: modal.top }
+                : {}
+            }
             className={clsx(
               'absolute min-w-full',
               !modal.fullScreen
-                ? 'min-h-full pt-[100px] pb-[100px]'
+                ? modal.top
+                  ? ''
+                  : 'min-h-full pt-[100px] pb-[100px]'
                 : 'h-screen',
-                modal.size && modal.height ? 'flex justify-center items-center' : 'top-0 left-0'
+              modal.size && modal.height
+                ? 'flex justify-center items-center'
+                : 'top-0 left-0'
             )}
           >
             <div
@@ -188,7 +198,7 @@ export const Component: FC<{
                 !modal.removeLayout && 'gap-[40px] p-[32px]',
                 'bg-newBgColorInner mx-auto flex flex-col w-fit rounded-[24px] relative',
                 modal.size ? '' : 'min-w-[600px]',
-                modal.fullScreen && 'h-full',
+                modal.fullScreen && 'h-full'
               )}
               {...((!!modal.size || !!modal.height) && {
                 style: {
@@ -228,7 +238,14 @@ export const Component: FC<{
                   </div>
                 ) : null}
               </div>
-              <div className={clsx("whitespace-pre-line", !!modal.height && !!modal.size && 'flex flex-1 flex-col')}>{RenderComponent}</div>
+              <div
+                className={clsx(
+                  'whitespace-pre-line',
+                  !!modal.height && !!modal.size && 'flex flex-1 flex-col'
+                )}
+              >
+                {RenderComponent}
+              </div>
             </div>
           </div>
         </div>

apps/frontend/src/components/media/media.component.tsx

@@ -290,6 +290,32 @@ export const MediaBox: FC<{
     []
   );
 
+  const maximize = useCallback(
+    (media: Media) => async (e: any) => {
+      e.stopPropagation();
+      modals.openModal({
+        title: '',
+        top: 10,
+        children: (
+          <div className="w-full h-full p-[50px]">
+            {media.path.indexOf('mp4') > -1 ? (
+              <VideoFrame url={mediaDirectory.set(media.path)} />
+            ) : (
+              <img
+                width="100%"
+                height="100%"
+                className="w-full h-full max-h-[100%] max-w-[100%] object-cover"
+                src={mediaDirectory.set(media.path)}
+                alt="media"
+              />
+            )}
+          </div>
+        ),
+      });
+    },
+    []
+  );
+
   const deleteImage = useCallback(
     (media: Media) => async (e: any) => {
       e.stopPropagation();
@@ -459,7 +485,26 @@ export const MediaBox: FC<{
                         onClick={deleteImage(media)}
                       />
                     )}
-                    <div className="w-full h-full rounded-[6px] overflow-hidden">
+                    <div className="w-full h-full rounded-[6px] overflow-hidden relative">
+                      <div className="absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%]">
+                        <div
+                          onClick={maximize(media)}
+                          className="cursor-pointer p-[4px] bg-black/40 hidden group-hover:block hover:scale-150 transition-all"
+                        >
+                          <svg
+                            width="30"
+                            height="30"
+                            viewBox="0 0 14 14"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M2 9H0V14H5V12H2V9ZM0 5H2V2H5V0H0V5ZM12 12H9V14H14V9H12V12ZM9 0V2H12V5H14V0H9Z"
+                              fill="#F1F5F9"
+                            />
+                          </svg>
+                        </div>
+                      </div>
                       {media.path.indexOf('mp4') > -1 ? (
                         <VideoFrame url={mediaDirectory.set(media.path)} />
                       ) : (