Skip to content
This repository has been archived by the owner on Feb 13, 2025. It is now read-only.

rm mosaic logic from client side channel card, adjust small generic thumbnail comp #624

Merged
merged 1 commit into from
May 31, 2024
Merged

rm mosaic logic from client side channel card, adjust small generic thumbnail comp #624

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 35 additions & 73 deletions apps/site/components/client/ChannelCard2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {
IMAGE_THUMBNAIL_TYPES_TO_RENDER,
VIDEO_THUMBNAIL_TYPES_TO_RENDER,
} from '@/constants'
import { Flex, Grid, Stack, Typography, Public } from '@/design-system'
import { Flex, Stack, Typography, Public } from '@/design-system'
import type { Channel, ChannelRoles } from '@/gql'
import Image from 'next/image'
import { GenericThumbnailSmall } from '@/server'
Expand Down Expand Up @@ -31,82 +31,44 @@ export function ChannelCard2({
return (
<Flex className="w-full gap-x-3 items-center">
<div>
{(metadata?.length as number) < 4 ? (
IMAGE_THUMBNAIL_TYPES_TO_RENDER.includes(
{IMAGE_THUMBNAIL_TYPES_TO_RENDER.includes(
metadata[0]?.itemMetadata?.contentType as string,
) ? (
<Image
src={w3sUrlFromCid({
cid: metadata[0]?.itemMetadata?.image as string,
})}
alt={metadata[0]?.itemMetadata?.name as string}
width={imageBoxWidth}
height={imageBoxWidth}
className="object-cover aspect-square"
/>
) : VIDEO_THUMBNAIL_TYPES_TO_RENDER.includes(
metadata[0]?.itemMetadata?.contentType as string,
) ? (
<Image
src={w3sUrlFromCid({
cid: metadata[0]?.itemMetadata?.image as string,
})}
alt={metadata[0]?.itemMetadata?.name as string}
width={imageBoxWidth}
height={imageBoxWidth}
className="object-cover aspect-square"
/>
) : VIDEO_THUMBNAIL_TYPES_TO_RENDER.includes(
metadata[0]?.itemMetadata?.contentType as string,
) ? (
<Image
className="object-contain"
src={`https://image.mux.com/${metadata[0]?.itemMetadata?.muxPlaybackId}/thumbnail.png?width=${imageBoxWidth}&height=${imageBoxWidth}&fit_mode=smartcrop&time=35`}
alt={metadata[0]?.itemMetadata?.name as string}
quality={25}
width={imageBoxWidth}
height={imageBoxWidth}
/>
) : (
<div className="w-full">
{metadata?.length ? (
<GenericThumbnailSmall
className="border-border border-[0.5px] h-16 w-16 md:w-16 md:h-16"
text={metadata[0]?.itemMetadata?.contentType as string}
/>
) : (
<Flex className="bg-[#E9E9E9] justify-center items-center aspect-square w-16">
<Typography className="text-secondary-foreground">
No items
</Typography>
</Flex>
)}
</div>
)
<Image
className="object-contain"
src={`https://image.mux.com/${metadata[0]?.itemMetadata?.muxPlaybackId}/thumbnail.png?width=${imageBoxWidth}&height=${imageBoxWidth}&fit_mode=smartcrop&time=35`}
alt={metadata[0]?.itemMetadata?.name as string}
quality={25}
width={imageBoxWidth}
height={imageBoxWidth}
/>
) : (
<Grid className="grid-cols-2 grid-rows-2 aspect-square relative">
{/* biome-ignore lint: */}
{metadata?.map((item: any, index: number) =>
IMAGE_THUMBNAIL_TYPES_TO_RENDER.includes(
metadata[index]?.itemMetadata?.contentType as string,
) ? (
<Image
key={index}
src={w3sUrlFromCid({
cid: metadata[index]?.itemMetadata?.image as string,
})}
alt={metadata[index]?.itemMetadata?.name as string}
width={imageBoxWidth / 2}
height={imageBoxWidth / 2}
className="object-cover aspect-square"
/>
) : VIDEO_THUMBNAIL_TYPES_TO_RENDER.includes(
metadata[index]?.itemMetadata?.contentType as string,
) ? (
<Image
className="object-contain"
src={`https://image.mux.com/${metadata[index]?.itemMetadata?.muxPlaybackId}/thumbnail.png?width=${imageBoxWidth}&height=${imageBoxWidth}&fit_mode=smartcrop&time=35`}
alt={metadata[index]?.itemMetadata?.name as string}
quality={25}
width={imageBoxWidth / 2}
height={imageBoxWidth / 2}
/>
) : (
<GenericThumbnailSmall
className="border-border border-[0.25px] w-8 h-8 md:w-8 md:h-8"
text={metadata[index]?.itemMetadata?.contentType as string}
/>
),
<div className="w-full">
{metadata?.length ? (
<GenericThumbnailSmall
className="h-16 w-16 md:w-16 md:h-16"
text={metadata[0]?.itemMetadata?.contentType as string}
/>
) : (
<Flex className="bg-[#E9E9E9] justify-center items-center aspect-square w-16">
<Typography className="text-secondary-foreground">
No items
</Typography>
</Flex>
)}
</Grid>
</div>
)}
</div>
<Stack className="gap-y-[3px]">
Expand Down