feat: display video thumbnail instead of default file icon

Author: willybrauner

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

@@ -7,6 +7,7 @@
   overflow: hidden;
 
   img,
+  video,
   svg {
     width: 100%;
     height: 100%;
@@ -20,6 +21,7 @@
     position: relative;
 
     img,
+    video,
     svg {
       position: absolute;
       top: 0;

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

@@ -30,36 +30,56 @@ const ThumbnailContext = React.createContext({
 export const useThumbnailContext = () => React.useContext(ThumbnailContext)
 
 export const Thumbnail: React.FC<ThumbnailProps> = (props) => {
-  const { className = '', doc: { filename } = {}, fileSrc, imageCacheTag, size } = props
+  const { className = '', doc: { filename, mimeType } = {}, fileSrc, imageCacheTag, size } = props
   const [fileExists, setFileExists] = React.useState(undefined)
-
   const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')
+  const [type, setType] = React.useState<'audio' | 'document' | 'image' | 'unknown' | 'video'>(
+    undefined,
+  )
 
   React.useEffect(() => {
-    if (!fileSrc) {
+    if (mimeType) setType(mimeType.split('/')[0])
+  }, [mimeType])
+
+  React.useEffect(() => {
+    if (!fileSrc || !type) {
       setFileExists(false)
       return
     }
-
-    const img = new Image()
-    img.src = fileSrc
-    img.onload = () => {
-      setFileExists(true)
-    }
-    img.onerror = () => {
+    if (type === 'image') {
+      const img = new Image()
+      img.src = fileSrc
+      img.onload = () => setFileExists(true)
+      img.onerror = () => setFileExists(false)
+    } else if (type === 'video') {
+      const video = document.createElement('video')
+      video.src = fileSrc
+      video.crossOrigin = 'anonymous'
+      video.onloadeddata = () => setFileExists(true)
+      video.onerror = () => setFileExists(false)
+    } else {
       setFileExists(false)
     }
-  }, [fileSrc])
+  }, [fileSrc, type])
 
   return (
     <div className={classNames}>
       {fileExists === undefined && <ShimmerEffect height="100%" />}
-      {fileExists && (
+      {fileExists && type === 'image' && (
         <img
           alt={filename as string}
           src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`}
         />
       )}
+      {fileExists && type === 'video' && (
+        <video
+          autoPlay={false}
+          controls={false}
+          muted={true}
+          playsInline={true}
+          src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`}
+        />
+      )}
       {fileExists === false && <File />}
     </div>
   )

Diff for: test/_community/config.ts

@@ -3,18 +3,15 @@ import path from 'path'
 
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { devUser } from '../credentials.js'
-// import { MediaCollection } from './collections/Media/index.js'
+import { MediaCollection } from './collections/Media/index.js'
 import { PostsCollection, postsSlug } from './collections/Posts/index.js'
 import { MenuGlobal } from './globals/Menu/index.js'
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
 export default buildConfigWithDefaults({
   // ...extend config here
-  collections: [
-    PostsCollection,
-    // MediaCollection
-  ],
+  collections: [PostsCollection, MediaCollection],
   cors: ['http://localhost:3000', 'http://localhost:3001'],
   globals: [
     MenuGlobal,

Diff for: test/_community/payload-types.ts

@@ -12,6 +12,7 @@ export interface Config {
   };
   collections: {
     posts: Post;
+    media: Media;
     users: User;
     'payload-preferences': PayloadPreference;
     'payload-migrations': PayloadMigration;
@@ -85,6 +86,50 @@ export interface Post {
   createdAt: string;
   _status?: ('draft' | 'published') | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media".
+ */
+export interface Media {
+  id: string;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+  sizes?: {
+    thumbnail?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    medium?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    large?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+  };
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".