feat: support mp4s as doc preview image (#761)

Author: stevenle

.changeset/shaggy-penguins-fold.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+feat: support mp4s as doc preview image (#761)

docs/collections/Sandbox.schema.ts

@@ -7,7 +7,7 @@ export default schema.collection({
   url: '/sandbox/[...slug]',
   preview: {
     title: 'meta.title',
-    image: 'meta.image',
+    image: ['content.modules[0].file', 'meta.image'],
     defaultImage: {
       src: 'https://lh3.googleusercontent.com/c2ECbvhJtxf3xbPIjaXCSpmvAsJkkhzJwG98T9RPvWy4s30jZKClom8pvWTnupRYOnyI3qGhNXPOwqoN6sqljkDO62LIKRtR988',
     },

packages/root-cms/ui/components/DocPreviewCard/DocPreviewCard.tsx

@@ -1,13 +1,14 @@
 import './DocPreviewCard.css';
 
-import {Image, Loader} from '@mantine/core';
+import {Loader} from '@mantine/core';
 import {useEffect, useState} from 'preact/hooks';
 import {joinClassNames} from '../../utils/classes.js';
 import {getDocFromCacheOrFetch} from '../../utils/doc-cache.js';
 import {getDocServingUrl} from '../../utils/doc-urls.js';
 import {notifyErrors} from '../../utils/notifications.js';
 import {getNestedValue} from '../../utils/objects.js';
 import {DocStatusBadges} from '../DocStatusBadges/DocStatusBadges.js';
+import {FilePreview} from '../FilePreview/FilePreview.js';
 
 export interface DocPreviewCardProps {
   className?: string;
@@ -87,8 +88,8 @@ export function DocPreviewCard(props: DocPreviewCardProps) {
       {...attrs}
     >
       <div className="DocPreviewCard__image">
-        <Image
-          src={previewImage?.src}
+        <FilePreview
+          file={previewImage}
           width={80}
           height={60}
           withPlaceholder={!previewImage?.src}

packages/root-cms/ui/components/DocSelectModal/DocSelectModal.tsx

@@ -1,11 +1,13 @@
-import {Button, Image, Loader, Select} from '@mantine/core';
+import './DocSelectModal.css';
+
+import {Button, Loader, Select} from '@mantine/core';
 import {ContextModalProps, useModals} from '@mantine/modals';
 import {useState} from 'preact/hooks';
 import {useDocsList} from '../../hooks/useDocsList.js';
 import {useModalTheme} from '../../hooks/useModalTheme.js';
 import {getDocServingUrl} from '../../utils/doc-urls.js';
 import {getNestedValue} from '../../utils/objects.js';
-import './DocSelectModal.css';
+import {FilePreview} from '../FilePreview/FilePreview.js';
 
 const MODAL_ID = 'DocSelectModal';
 
@@ -69,8 +71,6 @@ export function DocSelectModal(
     }
   }
 
-  console.log('selected docs:', props.selectedDocIds);
-
   return (
     <div className="DocSelectModal">
       {collections.length === 0 && (
@@ -172,8 +172,8 @@ DocSelectModal.DocCard = (props: {
   return (
     <div className="DocSelectModal__DocCard">
       <div className="DocSelectModal__DocCard__image">
-        <Image
-          src={previewImage?.src}
+        <FilePreview
+          file={previewImage}
           width={120}
           height={90}
           withPlaceholder={!previewImage?.src}

packages/root-cms/ui/components/FilePreview/FilePreview.tsx

@@ -0,0 +1,89 @@
+import {Image} from '@mantine/core';
+
+export interface FilePreviewFile {
+  src?: string;
+  mimeType?: string;
+  [key: string]: any;
+}
+
+export interface FilePreviewProps {
+  file?: FilePreviewFile | string | null;
+  width: number;
+  height: number;
+  withPlaceholder?: boolean;
+  className?: string;
+  alt?: string;
+}
+
+export function FilePreview(props: FilePreviewProps) {
+  const {file, width, height, withPlaceholder, className, alt} = props;
+  const src = typeof file === 'string' ? file : file?.src;
+
+  if (isMp4File(file)) {
+    return (
+      <VideoPreview
+        className={className}
+        src={src!}
+        width={width}
+        height={height}
+      />
+    );
+  }
+
+  return (
+    <Image
+      className={className}
+      src={src}
+      width={width}
+      height={height}
+      withPlaceholder={withPlaceholder}
+      alt={alt}
+    />
+  );
+}
+
+function isMp4File(file?: FilePreviewFile | string | null) {
+  if (!file) {
+    return false;
+  }
+
+  if (typeof file === 'string') {
+    return /\.mp4($|\?)/i.test(file);
+  }
+
+  if (typeof file.mimeType === 'string') {
+    return file.mimeType.toLowerCase() === 'video/mp4';
+  }
+
+  const src = file.src;
+  if (typeof src !== 'string') {
+    return false;
+  }
+  return /\.mp4($|\?)/i.test(src);
+}
+
+function VideoPreview(props: {
+  className?: string;
+  src: string;
+  width: number;
+  height: number;
+}) {
+  return (
+    <video
+      className={props.className}
+      src={props.src}
+      width={props.width}
+      height={props.height}
+      muted
+      playsInline
+      preload="metadata"
+      style={{
+        width: `${props.width}px`,
+        height: `${props.height}px`,
+        backgroundColor: '#f1f3f5',
+        objectFit: 'cover',
+        display: 'block',
+      }}
+    />
+  );
+}

packages/root-cms/ui/pages/CollectionPage/CollectionPage.tsx

@@ -1,15 +1,16 @@
-import {Button, Image, Loader, Select, Tabs} from '@mantine/core';
+import './CollectionPage.css';
+
+import {Button, Loader, Select, Tabs} from '@mantine/core';
 import {
   IconArrowRoundaboutRight,
   IconCirclePlus,
   IconFolder,
 } from '@tabler/icons-preact';
-
 import {useEffect, useState} from 'preact/hooks';
 import {route} from 'preact-router';
-
 import {DocActionsMenu} from '../../components/DocActionsMenu/DocActionsMenu.js';
 import {DocStatusBadges} from '../../components/DocStatusBadges/DocStatusBadges.js';
+import {FilePreview} from '../../components/FilePreview/FilePreview.js';
 import {Heading} from '../../components/Heading/Heading.js';
 import {Markdown} from '../../components/Markdown/Markdown.js';
 import {NewDocModal} from '../../components/NewDocModal/NewDocModal.js';
@@ -20,7 +21,6 @@ import {Layout} from '../../layout/Layout.js';
 import {joinClassNames} from '../../utils/classes.js';
 import {getDocServingUrl} from '../../utils/doc-urls.js';
 import {getNestedValue} from '../../utils/objects.js';
-import './CollectionPage.css';
 
 interface CollectionPageProps {
   collection?: string;
@@ -299,8 +299,8 @@ CollectionPage.DocsList = (props: {
           >
             <div className="CollectionPage__collection__docsList__doc__image">
               <a href={cmsUrl}>
-                <Image
-                  src={previewImage?.src}
+                <FilePreview
+                  file={previewImage}
                   width={120}
                   height={90}
                   withPlaceholder={!previewImage?.src}