Skip to content

Commit

Permalink
feat: contain
Browse files Browse the repository at this point in the history
  • Loading branch information
nevo-david committed Jan 1, 2025
1 parent 62da0cd commit 868a5c2
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 6 deletions.
4 changes: 2 additions & 2 deletions apps/frontend/src/app/(preview)/p/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
24 changes: 20 additions & 4 deletions libraries/react-shared-libraries/src/helpers/video.or.image.tsx
Original file line number Diff line number Diff line change
@@ -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}
/>
);
Expand Down

0 comments on commit 868a5c2

Please sign in to comment.