Merge pull request #632 from 1ifeworld/salief/add-media-icons

drop generic thumbnails, add item fallback comp
1ifeworld · Jun 2, 2024 · 4d651a7 · 4d651a7
2 parents acb797d + 79217ae
commit 4d651a7
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 65 deletions.
diff --git a/apps/site/components/client/ChannelCard2.tsx b/apps/site/components/client/ChannelCard2.tsx
@@ -5,7 +5,7 @@ import {
 import { Flex, Stack, Typography, Public } from '@/design-system'
 import type { Channel, ChannelRoles } from '@/gql'
 import Image from 'next/image'
-import { GenericThumbnailSmall } from '@/server'
+import { ItemFallback } from '@/server'
 import { w3sUrlFromCid } from '@/lib'
 import { UsernameNoFetch } from '@/client'
 import { truncateText } from '@/utils'
@@ -57,9 +57,9 @@ export function ChannelCard2({
         ) : (
           <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}
+              <ItemFallback
+                contentType={metadata[0]?.itemMetadata?.contentType as string}
+                size="md"
               />
             ) : (
               <Flex className="bg-[#E9E9E9] justify-center items-center aspect-square w-16">

diff --git a/apps/site/components/server/ChannelCard.tsx b/apps/site/components/server/ChannelCard.tsx
@@ -9,7 +9,7 @@ import { truncateText } from '@/utils'
 import { Flex, Stack, Typography, Public } from '@/design-system'
 import type { Adds, Channel, ChannelRoles } from '@/gql'
 import { type MediaAssetObject, w3sUrlFromCid } from '@/lib'
-import { GenericThumbnailLarge, Username } from '@/server'
+import { ItemFallback, Username } from '@/server'
 import { kv } from '@vercel/kv'
 import { muxClient } from '@/config/mux'
 import { isVideo } from '@/lib'
@@ -113,11 +113,9 @@ export async function ChannelCard({
           </Typography>
         </Flex>
       ) : (
-        <GenericThumbnailLarge
-          className={`${
-            orientation === 0 ? `h-${width / 4} w-${width / 4}` : ''
-          }`}
-          text={channelCardMetadata?.contentType as string}
+        <ItemFallback
+          contentType={channelCardMetadata?.contentType as string}
+          size={orientation === 0 ? 'md' : 'lg'}
         />
       )}
       {/* Channel name & creator */}

diff --git a/apps/site/components/server/ItemCard.tsx b/apps/site/components/server/ItemCard.tsx
@@ -5,7 +5,7 @@ import {
 import { Flex, Stack, Typography, Public } from '@/design-system'
 import type { Adds, ChannelRoles } from '@/gql'
 import { type MediaAssetObject, w3sUrlFromCid, isVideo } from '@/lib'
-import { GenericThumbnailLarge, Username } from '@/server'
+import { Username, ItemFallback } from '@/server'
 import { kv } from '@vercel/kv'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -79,7 +79,7 @@ export async function ItemCard({
               priority={true}
             />
           ) : (
-            <GenericThumbnailLarge text={itemMetadata?.contentType as string} />
+            <ItemFallback contentType={itemMetadata?.contentType as string} />
           )}
         </Stack>
       </Link>

diff --git a/apps/site/components/server/ItemFallback.tsx b/apps/site/components/server/ItemFallback.tsx
@@ -0,0 +1,159 @@
+import { cn, Flex } from '@/design-system'
+import { P, match } from 'ts-pattern'
+import { isVideo, isAudio, isGlb, isPdf, isMarkdown } from '@/lib'
+
+export function ItemFallback({
+  contentType,
+  className,
+  size,
+}: {
+  contentType: string
+  className?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+}) {
+  return (
+    <Flex
+      className={cn(
+        'bg-[#E9E9E9] justify-center items-center aspect-square w-full',
+        size === 'xs' && 'w-10',
+        size === 'sm' && 'w-12',
+        size === 'md' && 'w-16',
+        size === 'lg' && 'w-64',
+        className,
+      )}
+    >
+      {match(contentType)
+        .with(
+          P.when((type: string) => isAudio({ mimeType: type })),
+          () => <AudioFallback size={size} />,
+        )
+        .with(
+          P.when((type: string) => isVideo({ mimeType: type })),
+          () => <VideoFallback />,
+        )
+        .with(
+          P.when((type: string) => isMarkdown({ mimeType: type })),
+          () => <TextFallback size={size} />,
+        )
+        .with(
+          P.when((type: string) => isGlb({ mimeType: type })),
+          () => <ThreeDFallback size={size} />,
+        )
+        .with(
+          P.when((type: string) => isPdf({ mimeType: type })),
+          () => <FileFallback />,
+        )
+        .otherwise(() => (
+          <Unsupported size={size} />
+        ))}
+    </Flex>
+  )
+}
+
+export function AudioFallback({ size }: { size?: 'xs' | 'sm' | 'md' | 'lg' }) {
+  return (
+    <div className={cn('w-1/4 aspect-square', size === 'lg' && 'mr-3')}>
+      <svg viewBox="0 0 66 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M0.0469468 71.5663C-0.349763 67.1658 1.8652 64.3989 3.02227 63.5654C4.17934 62.732 7.9342 61.0652 12.94 61.5652C17.5 62.0207 19.3866 60 19.3866 57.5648V12.0599C19.3866 9.6596 21.0395 8.72617 21.866 8.55948L47.6522 3.05889C51.454 2.39215 59.5065 0.558618 62.5288 0.0585639C64.9613 -0.441476 66 2.39215 66 3.55894V61.0652C66 64.0655 64.4132 70.3662 56.0822 71.5663C47.7513 72.7664 43.1422 68.566 41.7015 65.5657C40.3882 62.8306 40.5114 57.5648 43.6851 55.5646C47.6522 53.0643 52.1151 53.5644 56.0822 53.0643C59.2992 52.6588 60.5452 51.5641 60.5452 50.064V19.5607C60.5452 18.3605 59.5065 17.8541 58.5617 18.0605C48.6439 20.2274 28.4117 24.6612 26.8249 25.0613C25.238 25.4613 24.8413 27.2282 24.8413 28.0616V69.5661C24.8413 70.3995 24.7944 72.5665 22.8578 75.5667C19.3396 80.0673 10.4136 80.5673 6.49348 79.5672C3.47121 78.5671 0.443657 75.9668 0.0469468 71.5663Z"
+          fill="#C9C9C9"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export function VideoFallback() {
+  return (
+    <div className="w-1/4 aspect-square">
+      <svg viewBox="0 0 83 83" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="41.5" cy="41.5" r="41.5" fill="#C9C9C9" />
+        <path
+          d="M62.0271 41.6602L29.1323 21.3779V62.1129L62.0271 41.6602Z"
+          fill="#F3F3F3"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export function FileFallback() {
+  return (
+    <div className="w-1/4 aspect-square">
+      <svg viewBox="0 0 66 83" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M0 0V83H65.5263V34.7047H30.8216V0H0Z"
+          fill="#D3D3D3"
+        />
+        <path d="M65.5263 34.7047L30.8216 0V34.7047H65.5263Z" fill="#B6B6B6" />
+      </svg>
+    </div>
+  )
+}
+
+export function TextFallback({ size }: { size?: 'xs' | 'sm' | 'md' | 'lg' }) {
+  return (
+    <div
+      className={cn(
+        'w-1/3 md:1/4 aspect-square mt-6',
+        size === 'xs' && 'mt-1',
+        size === 'sm' && 'mt-1',
+        size === 'md' && 'mt-1',
+        size === 'lg' && 'mr-1 mt-4',
+      )}
+    >
+      <svg viewBox="0 0 83 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M34.7162 52.6443L30.0473 36.9038H11.8984L7.22941 52.6443H0L16.6427 0H25.4536L42.021 52.6443H34.7162ZM13.6305 31.0293H28.3152L20.9352 6.32636L13.6305 31.0293Z"
+          fill="#C9C9C9"
+        />
+        <path
+          d="M83 48.5021V53.2469C81.4437 53.6987 80.1886 53.9247 79.2347 53.9247C75.0175 53.9247 72.683 51.9414 72.2312 47.9749C70.0222 50.1339 67.8634 51.6904 65.7548 52.6443C63.6463 53.5481 61.3369 54 58.8266 54C55.0111 54 51.8985 52.9958 49.4887 50.9874C47.1291 48.9289 45.9493 46.0669 45.9493 42.4017C45.9493 39.6904 46.5266 37.5314 47.6813 35.9247C48.836 34.2678 50.2417 33.0377 51.8985 32.2343C53.6054 31.3808 55.2119 30.8285 56.7181 30.5774C57.4209 30.477 58.5003 30.3264 59.9562 30.1255C61.4122 29.8745 63.2446 29.5983 65.4536 29.2971C67.9638 28.9456 69.6959 28.4686 70.6497 27.8661C71.6538 27.2636 72.1559 26.3347 72.1559 25.0795V23.7239C72.1559 19.8075 69.1436 17.8494 63.1191 17.8494C60.2073 17.8494 57.9983 18.4268 56.4921 19.5816C55.0362 20.6862 54.1828 22.4435 53.9317 24.8536H47.606C47.7064 20.2845 49.1874 17.0209 52.0491 15.0628C54.9609 13.0544 58.7513 12.0502 63.4203 12.0502C68.2901 12.0502 71.9802 12.9791 74.4904 14.8368C77.0006 16.6444 78.2557 19.3054 78.2557 22.8201V45.5649C78.2557 47.6234 79.3853 48.6527 81.6445 48.6527C82.0461 48.6527 82.498 48.6025 83 48.5021ZM72.1559 38.9372V32.6862C70.8506 33.2887 69.2189 33.7657 67.261 34.1172C65.3532 34.4686 63.5709 34.7448 61.9142 34.9456C59.0024 35.2971 56.6679 35.9749 54.9107 36.9791C53.2038 37.9833 52.3503 39.7406 52.3503 42.251C52.3503 44.2092 53.0532 45.7406 54.4589 46.8452C55.9148 47.9498 57.8979 48.5021 60.4081 48.5021C62.2656 48.5021 64.073 48.1004 65.8301 47.2971C67.6375 46.4435 69.1436 45.2887 70.3485 43.8326C71.5534 42.3766 72.1559 40.7448 72.1559 38.9372Z"
+          fill="#C9C9C9"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export function ThreeDFallback({ size }: { size?: 'xs' | 'sm' | 'md' | 'lg' }) {
+  return (
+    <div
+      className={cn(
+        'w-[30%] md:1/4 aspect-square mt-6',
+        size === 'xs' && 'mt-1',
+        size === 'sm' && 'mt-1',
+        size === 'md' && 'mt-1',
+        size === 'lg' && 'mr-1 mt-4',
+      )}
+    >
+      <svg viewBox="0 0 77 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M14.0071 23.0152C14.2554 23.0648 14.4789 23.0897 14.6775 23.0897C14.9258 23.0897 15.174 23.0897 15.4223 23.0897H16.763C18.1037 23.0897 19.3699 22.9159 20.5616 22.5683C21.803 22.171 22.8706 21.6248 23.7644 20.9297C24.7078 20.1848 25.4527 19.2662 25.9989 18.1738C26.5451 17.0814 26.8182 15.84 26.8182 14.4497C26.8182 11.6193 25.9244 9.50897 24.1368 8.11862C22.3492 6.67862 20.1147 5.95862 17.4333 5.95862C15.7451 5.95862 14.2554 6.28138 12.9644 6.9269C11.723 7.52276 10.6802 8.34207 9.8361 9.38483C9.04162 10.4276 8.44576 11.6441 8.04852 13.0345C7.65128 14.4248 7.45266 15.8897 7.45266 17.429H1.12162C1.22093 14.8966 1.61817 12.5876 2.31335 10.5021C3.05817 8.41655 4.10093 6.62897 5.44162 5.13931C6.78231 3.64966 8.44576 2.48276 10.432 1.63862C12.4678 0.794483 14.8016 0.372413 17.4333 0.372413C19.7175 0.372413 21.8278 0.670345 23.7644 1.26621C25.7506 1.81241 27.4637 2.65655 28.9037 3.79862C30.3437 4.94069 31.4609 6.40552 32.2554 8.1931C33.0996 9.98069 33.5216 12.091 33.5216 14.5241C33.5216 16.9076 32.8264 19.0179 31.4361 20.8552C30.0458 22.6924 28.3078 24.0828 26.2223 25.0262V25.1752C29.4499 25.8703 31.8333 27.3848 33.3727 29.7186C34.9616 32.0524 35.7561 34.8083 35.7561 37.9862C35.7561 40.6179 35.2596 42.9517 34.2664 44.9876C33.323 46.9738 32.032 48.6372 30.3933 49.9779C28.7547 51.3186 26.8182 52.3366 24.5837 53.0317C22.3989 53.6772 20.0651 54 17.5823 54C14.9009 54 12.4678 53.6276 10.283 52.8828C8.09817 52.1379 6.2361 51.0455 4.69679 49.6055C3.15748 48.1159 1.96576 46.3034 1.12162 44.1683C0.32714 42.0331 -0.0452738 39.6 0.00438134 36.869H6.33542C6.43473 40.2952 7.42783 43.1007 9.31473 45.2855C11.2016 47.4207 13.9575 48.4883 17.5823 48.4883C19.1216 48.4883 20.5864 48.2648 21.9768 47.8179C23.3671 47.3214 24.5837 46.651 25.6264 45.8069C26.6692 44.9131 27.4885 43.8455 28.0844 42.6041C28.7299 41.3131 29.0527 39.8731 29.0527 38.2841C29.0527 36.6455 28.7547 35.2055 28.1589 33.9641C27.563 32.6731 26.7685 31.6055 25.7754 30.7614C24.7823 29.8676 23.5906 29.2221 22.2002 28.8248C20.8596 28.3779 19.3947 28.1545 17.8058 28.1545C16.4651 28.1545 15.1989 28.229 14.0071 28.3779V23.0152Z"
+          fill="#C9C9C9"
+        />
+        <path
+          d="M46.68 34.2621C46.68 36.0497 46.9035 37.8124 47.3504 39.5503C47.8469 41.2386 48.5669 42.7531 49.5104 44.0938C50.5035 45.4345 51.7449 46.5021 53.2345 47.2965C54.7738 48.091 56.5614 48.4883 58.5973 48.4883C60.7325 48.4883 62.5449 48.0662 64.0345 47.2221C65.5242 46.3779 66.7407 45.2855 67.6842 43.9448C68.6276 42.5545 69.298 40.9903 69.6952 39.2524C70.1421 37.5145 70.3656 35.7517 70.3656 33.9641C70.3656 32.0772 70.1421 30.2648 69.6952 28.5269C69.2483 26.7393 68.5283 25.1752 67.5352 23.8345C66.5918 22.4938 65.3504 21.4262 63.8111 20.6317C62.2718 19.7876 60.4097 19.3655 58.2249 19.3655C56.0897 19.3655 54.2773 19.7876 52.7876 20.6317C51.298 21.4759 50.1063 22.5931 49.2125 23.9834C48.3187 25.3738 47.6731 26.9628 47.2759 28.7503C46.8787 30.5379 46.68 32.3752 46.68 34.2621ZM76.4731 53.1807H70.1421V47.9669H69.9931C68.9504 50.1021 67.3118 51.6414 65.0773 52.5848C62.8428 53.5283 60.3849 54 57.7035 54C54.7242 54 52.1173 53.4538 49.8828 52.3614C47.698 51.269 45.8607 49.8041 44.3711 47.9669C42.9311 46.1297 41.8387 43.9945 41.0938 41.5614C40.349 39.1283 39.9766 36.5462 39.9766 33.8152C39.9766 31.0841 40.3242 28.5021 41.0194 26.069C41.7642 23.6359 42.8566 21.5255 44.2966 19.7379C45.7863 17.9007 47.6235 16.4607 49.8083 15.4179C52.0428 14.3255 54.6249 13.7793 57.5545 13.7793C58.5476 13.7793 59.6152 13.8786 60.7573 14.0772C61.8994 14.2759 63.0414 14.6234 64.1835 15.12C65.3256 15.5669 66.3931 16.1876 67.3862 16.9821C68.429 17.7269 69.298 18.6703 69.9931 19.8124H70.1421V0H76.4731V53.1807Z"
+          fill="#C9C9C9"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export function Unsupported({ size }: { size?: 'xs' | 'sm' | 'md' | 'lg' }) {
+  return (
+    <div
+      className={cn('w-1/6 aspect-square mt-1', size === 'lg' && 'mr-1 mt-4')}
+    >
+      <svg viewBox="0 0 33 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M12.0457 45.8003H20.2454V54H12.0457V45.8003ZM0.00461698 17.7291C-0.0446307 15.2175 0.300103 12.8782 1.03882 10.7114C1.82678 8.54446 2.93485 6.67305 4.36303 5.09712C5.79121 3.47195 7.5395 2.21614 9.6079 1.32968C11.6763 0.443227 13.9909 0 16.5518 0C18.8664 0 20.9595 0.344733 22.8309 1.0342C24.7515 1.67442 26.4013 2.63474 27.7803 3.91518C29.1592 5.14637 30.218 6.67305 30.9567 8.49521C31.7447 10.3174 32.1387 12.4104 32.1387 14.7743C32.1387 16.301 31.9417 17.6799 31.5477 18.9111C31.203 20.093 30.7351 21.1765 30.1442 22.1614C29.5532 23.1464 28.8637 24.0575 28.0758 24.8947C27.337 25.7319 26.5737 26.5445 25.7857 27.3324C24.9978 28.0711 24.2098 28.8345 23.4219 29.6224C22.6831 30.3611 21.9937 31.1737 21.3535 32.0602C20.7625 32.8974 20.27 33.8331 19.876 34.8673C19.5313 35.8523 19.3589 36.985 19.3589 38.2654V41.1464H13.0799V37.6744C13.1784 35.606 13.5477 33.8577 14.1879 32.4295C14.8774 30.9521 15.69 29.6471 16.6257 28.5144C17.6106 27.3817 18.6202 26.3475 19.6544 25.4118C20.7379 24.4268 21.7228 23.4172 22.6093 22.383C23.545 21.2996 24.2837 20.1176 24.8254 18.8372C25.3671 17.5568 25.5887 16.0055 25.4903 14.1833C25.2933 11.4747 24.4068 9.35704 22.8309 7.83037C21.3042 6.30369 19.2112 5.54035 16.5518 5.54035C14.7789 5.54035 13.2522 5.86046 11.9718 6.50068C10.6913 7.1409 9.6079 8.00273 8.72144 9.08618C7.88423 10.1696 7.26864 11.4501 6.87466 12.9275C6.48068 14.4049 6.28369 16.0055 6.28369 17.7291H0.00461698Z"
+          fill="#C9C9C9"
+        />
+      </svg>
+    </div>
+  )
+}
diff --git a/apps/site/components/server/Thumbnails.tsx b/apps/site/components/server/Thumbnails.tsx
diff --git a/apps/site/components/server/channel/ThumbnailNameCreator.tsx b/apps/site/components/server/channel/ThumbnailNameCreator.tsx
@@ -2,7 +2,7 @@ import { Stack, Typography } from '@/design-system'
 import type { Item } from '@/gql'
 import { ipfsUrlToCid, w3sUrlFromCid } from '@/lib'
 import { VIDEO_THUMBNAIL_TYPES_TO_RENDER } from 'constants/thumbnails'
-import { GenericThumbnailSmall, Username } from '@/server'
+import { ItemFallback, Username } from '@/server'
 import { truncateText } from '@/utils'
 import Image from 'next/image'
 import { muxClient } from '@/config/mux'
@@ -89,9 +89,10 @@ export async function ThumbnailNameCreator({
           />
         </div>
       ) : (
-        <GenericThumbnailSmall
+        <ItemFallback
+          contentType={itemMetadata?.contentType as string}
           className="hover:cursor-pointer"
-          text={itemMetadata?.contentType as string}
+          size="xs"
         />
       )}
       <Stack className="gap-y-[3px]">

diff --git a/apps/site/components/server/index.ts b/apps/site/components/server/index.ts
@@ -4,8 +4,8 @@ export * from './channel'
 // Individual components
 export * from './ChannelCard'
 export * from './ItemCard'
+export * from './ItemFallback'
 export * from './ItemSidebar'
 export * from './MarqueeWrapper'
 export * from './RiverLogo'
-export * from './Thumbnails'
 export * from './Username'