feat: contain

apps/frontend/src/app/(preview)/p/[id]/page.tsx

@@ -146,9 +146,9 @@ export default async function Auth({
                         {JSON.parse(p?.image || '[]').map((p: any) => (
                           <div
                             key={p.name}
-                            className="flex-1 rounded-[10px] overflow-hidden"
+                            className="flex-1 rounded-[10px] max-h-[500px] overflow-hidden"
                           >
-                            <VideoOrImage src={p.path} autoplay={true} />
+                            <VideoOrImage isContain={true} src={p.path} autoplay={true} />
                           </div>
                         ))}
                       </div>

libraries/react-shared-libraries/src/helpers/video.or.image.tsx

@@ -1,14 +1,30 @@
 import { FC } from 'react';
+import { clsx } from 'clsx';
 
-export const VideoOrImage: FC<{ src: string; autoplay: boolean }> = (props) => {
-  const { src, autoplay } = props;
+export const VideoOrImage: FC<{
+  src: string;
+  autoplay: boolean;
+  isContain?: boolean;
+}> = (props) => {
+  const { src, autoplay, isContain } = props;
   if (src.indexOf('mp4') > -1) {
-    return <video src={src} autoPlay={autoplay} className="w-full h-full" muted={true} loop={true} />;
+    return (
+      <video
+        src={src}
+        autoPlay={autoplay}
+        className="w-full h-full"
+        muted={true}
+        loop={true}
+      />
+    );
   }
 
   return (
     <img
-      className="w-full h-full object-cover"
+      className={clsx(
+        isContain ? 'object-contain' : 'object-cover',
+        'w-full h-full object-cover'
+      )}
       src={src}
     />
   );