feat: Unify Thumbnail & ThumbnailComponent

Author: willybrauner

Diff for: packages/ui/src/elements/Thumbnail/index.tsx

@@ -10,19 +10,28 @@ import type { SanitizedCollectionConfig } from 'payload'
 import { File } from '../../graphics/File/index.js'
 import { ShimmerEffect } from '../ShimmerEffect/index.js'
 
-/**
- * Check if specific media exist before render it in it's appropriate HTML tag.
- * This internal hook allows to share this logic between Thumbnail & ThumbnailComponent
- */
-const useFileExists = (fileSrc: string | undefined, fileType: string): boolean => {
+export type ThumbnailProps = {
+  alt?: string
+  className?: string
+  collectionSlug?: string
+  doc?: Record<string, unknown>
+  fileSrc?: string
+  imageCacheTag?: string
+  size?: 'expand' | 'large' | 'medium' | 'small'
+  uploadConfig?: SanitizedCollectionConfig['upload']
+}
+
+export const Thumbnail = (props: ThumbnailProps) => {
+  const { className = '', doc: { filename, mimeType } = {}, fileSrc, imageCacheTag, size } = props
+  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')
+  const fileType = (mimeType as string)?.split('/')?.[0]
   const [fileExists, setFileExists] = React.useState<boolean | undefined>(undefined)
 
   React.useEffect(() => {
     if (!fileSrc || !fileType) {
       setFileExists(false)
       return
     }
-
     if (fileType === 'image') {
       const img = new Image()
       img.src = fileSrc
@@ -39,76 +48,16 @@ const useFileExists = (fileSrc: string | undefined, fileType: string): boolean =
     }
   }, [fileSrc, fileType])
 
-  return fileExists
-}
-
-export type ThumbnailProps = {
-  className?: string
-  collectionSlug?: string
-  doc?: Record<string, unknown>
-  fileSrc?: string
-  imageCacheTag?: string
-  size?: 'expand' | 'large' | 'medium' | 'small'
-  uploadConfig?: SanitizedCollectionConfig['upload']
-}
-
-export const Thumbnail: React.FC<ThumbnailProps> = (props) => {
-  const { className = '', doc: { filename, mimeType } = {}, fileSrc, imageCacheTag, size } = props
-  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')
-  const fileType = (mimeType as string)?.split('/')?.[0]
-
-  const fileExists = useFileExists(fileSrc, fileType)
-  const src = React.useMemo(
-    () => `${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`,
-    [fileSrc, imageCacheTag],
-  )
-
-  return (
-    <div className={classNames}>
-      {fileExists === undefined && <ShimmerEffect height="100%" />}
-      {fileExists && fileType === 'image' && <img alt={filename as string} src={src} />}
-      {fileExists && fileType === 'video' && (
-        <video
-          aria-label={filename as string}
-          autoPlay={false}
-          controls={false}
-          muted={true}
-          playsInline={true}
-          src={src}
-        />
-      )}
-      {fileExists === false && <File />}
-    </div>
-  )
-}
-
-type ThumbnailComponentProps = {
-  readonly alt?: string
-  readonly className?: string
-  readonly filename: string
-  readonly fileSrc: string
-  readonly imageCacheTag?: string
-  readonly mimeType?: string
-  readonly size?: 'expand' | 'large' | 'medium' | 'small'
-}
-export function ThumbnailComponent(props: ThumbnailComponentProps) {
-  const { alt, className = '', filename, fileSrc, imageCacheTag, mimeType, size } = props
-  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')
-  const fileType = mimeType?.split('/')?.[0]
-
-  const fileExists = useFileExists(fileSrc, fileType)
-  const src = React.useMemo(
-    () => `${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`,
-    [fileSrc, imageCacheTag],
-  )
+  const src = `${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`
+  const alt = props.alt || (filename as string)
 
   return (
     <div className={classNames}>
       {fileExists === undefined && <ShimmerEffect height="100%" />}
-      {fileExists && fileType === 'image' && <img alt={alt || filename} src={src} />}
+      {fileExists && fileType === 'image' && <img alt={alt} src={src} />}
       {fileExists && fileType === 'video' && (
         <video
-          aria-label={alt || filename}
+          aria-label={alt}
           autoPlay={false}
           controls={false}
           muted={true}

Diff for: packages/ui/src/fields/Upload/RelationshipContent/index.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 
 import { Button } from '../../../elements/Button/index.js'
 import { useDocumentDrawer } from '../../../elements/DocumentDrawer/index.js'
-import { ThumbnailComponent } from '../../../elements/Thumbnail/index.js'
+import { Thumbnail } from '../../../elements/Thumbnail/index.js'
 import './index.scss'
 
 const baseClass = 'upload-relationship-details'
@@ -71,12 +71,11 @@ export function RelationshipContent(props: Props) {
   return (
     <div className={[baseClass, className].filter(Boolean).join(' ')}>
       <div className={`${baseClass}__imageAndDetails`}>
-        <ThumbnailComponent
+        <Thumbnail
           alt={alt}
           className={`${baseClass}__thumbnail`}
-          filename={filename}
+          doc={{ filename, mimeType }}
           fileSrc={src}
-          mimeType={mimeType}
           size="small"
         />
         <div className={`${baseClass}__details`}>