Add support to set a custom preview image icon to DamVideoBlock, `V…

…imeoVideoBlock`, and `YouTubeVideoBlock` (#2615) Support for the `icon` prop was added in #2542, but there was no easy way to set the icon.
vivid-planet · Oct 9, 2024 · ec57e2d · ec57e2d
1 parent 700ddc3
commit ec57e2d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 6 deletions.
diff --git a/.changeset/swift-jobs-dress.md b/.changeset/swift-jobs-dress.md
@@ -0,0 +1,15 @@
+---
+"@comet/cms-site": minor
+---
+
+Add support to set a custom preview image icon to `DamVideoBlock`, `VimeoVideoBlock`, and `YouTubeVideoBlock`
+
+Use the `previewImageIcon` prop to pass the icon to the default `VideoPreviewImage` component:
+
+```diff
+<DamVideoBlock
+  data={props}
+  fill={fill}
++ previewImageIcon={<CustomPlayIcon />}
+/>
+```
diff --git a/demo/site/src/blocks/MediaBlock.tsx b/demo/site/src/blocks/MediaBlock.tsx
@@ -1,14 +1,15 @@
 "use client";
 import { DamVideoBlock, OneOfBlock, PropsWithData, SupportedBlocks, VimeoVideoBlock, withPreview, YouTubeVideoBlock } from "@comet/cms-site";
 import { MediaBlockData } from "@src/blocks.generated";
+import styled from "styled-components";
 
 import { DamImageBlock } from "./DamImageBlock";
 
 const getSupportedBlocks = (fill?: boolean): SupportedBlocks => ({
     image: (props) => <DamImageBlock data={props} aspectRatio="inherit" fill={fill} />,
-    damVideo: (props) => <DamVideoBlock data={props} fill={fill} />,
-    youTubeVideo: (props) => <YouTubeVideoBlock data={props} fill={fill} />,
-    vimeoVideo: (props) => <VimeoVideoBlock data={props} fill={fill} />,
+    damVideo: (props) => <DamVideoBlock data={props} fill={fill} previewImageIcon={<CustomPlayIcon />} />,
+    youTubeVideo: (props) => <YouTubeVideoBlock data={props} fill={fill} previewImageIcon={<CustomPlayIcon />} />,
+    vimeoVideo: (props) => <VimeoVideoBlock data={props} fill={fill} previewImageIcon={<CustomPlayIcon />} />,
 });
 
 export const MediaBlock = withPreview(
@@ -17,3 +18,12 @@ export const MediaBlock = withPreview(
     },
     { label: "Media" },
 );
+
+const CustomPlayIcon = styled.span`
+    width: 64px;
+    height: 64px;
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 32px 0 32px 64px;
+    border-color: transparent transparent transparent red;
+`;
diff --git a/packages/site/cms-site/src/blocks/DamVideoBlock.tsx b/packages/site/cms-site/src/blocks/DamVideoBlock.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ReactElement, useState } from "react";
+import { ReactElement, ReactNode, useState } from "react";
 import styled, { css } from "styled-components";
 
 import { DamVideoBlockData } from "../blocks.generated";
@@ -14,6 +14,7 @@ interface DamVideoBlockProps extends PropsWithData<DamVideoBlockData> {
     previewImageSizes?: string;
     renderPreviewImage?: (props: VideoPreviewImageProps) => ReactElement;
     fill?: boolean;
+    previewImageIcon?: ReactNode;
 }
 
 export const DamVideoBlock = withPreview(
@@ -23,6 +24,7 @@ export const DamVideoBlock = withPreview(
         previewImageSizes,
         renderPreviewImage,
         fill,
+        previewImageIcon,
     }: DamVideoBlockProps) => {
         if (damFile === undefined) {
             return <PreviewSkeleton type="media" hasContent={false} />;
@@ -41,6 +43,7 @@ export const DamVideoBlock = withPreview(
                             aspectRatio,
                             sizes: previewImageSizes,
                             fill: fill,
+                            icon: previewImageIcon,
                         })
                     ) : (
                         <VideoPreviewImage
@@ -49,6 +52,7 @@ export const DamVideoBlock = withPreview(
                             aspectRatio={aspectRatio}
                             sizes={previewImageSizes}
                             fill={fill}
+                            icon={previewImageIcon}
                         />
                     )
                 ) : (

diff --git a/packages/site/cms-site/src/blocks/VimeoVideoBlock.tsx b/packages/site/cms-site/src/blocks/VimeoVideoBlock.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useState } from "react";
+import { ReactNode, useState } from "react";
 import styled, { css } from "styled-components";
 
 import { VimeoVideoBlockData } from "../blocks.generated";
@@ -29,6 +29,7 @@ interface VimeoVideoBlockProps extends PropsWithData<VimeoVideoBlockData> {
     previewImageSizes?: string;
     renderPreviewImage?: (props: VideoPreviewImageProps) => React.ReactElement;
     fill?: boolean;
+    previewImageIcon?: ReactNode;
 }
 
 export const VimeoVideoBlock = withPreview(
@@ -38,6 +39,7 @@ export const VimeoVideoBlock = withPreview(
         previewImageSizes,
         renderPreviewImage,
         fill,
+        previewImageIcon,
     }: VimeoVideoBlockProps) => {
         const [showPreviewImage, setShowPreviewImage] = useState(true);
         const hasPreviewImage = !!(previewImage && previewImage.damFile);
@@ -72,6 +74,7 @@ export const VimeoVideoBlock = withPreview(
                             aspectRatio,
                             sizes: previewImageSizes,
                             fill: fill,
+                            icon: previewImageIcon,
                         })
                     ) : (
                         <VideoPreviewImage
@@ -80,6 +83,7 @@ export const VimeoVideoBlock = withPreview(
                             aspectRatio={aspectRatio}
                             sizes={previewImageSizes}
                             fill={fill}
+                            icon={previewImageIcon}
                         />
                     )
                 ) : (

diff --git a/packages/site/cms-site/src/blocks/YouTubeVideoBlock.tsx b/packages/site/cms-site/src/blocks/YouTubeVideoBlock.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ReactElement, useState } from "react";
+import { ReactElement, ReactNode, useState } from "react";
 import styled, { css } from "styled-components";
 
 import { YouTubeVideoBlockData } from "../blocks.generated";
@@ -26,6 +26,7 @@ interface YouTubeVideoBlockProps extends PropsWithData<YouTubeVideoBlockData> {
     previewImageSizes?: string;
     renderPreviewImage?: (props: VideoPreviewImageProps) => ReactElement;
     fill?: boolean;
+    previewImageIcon?: ReactNode;
 }
 
 export const YouTubeVideoBlock = withPreview(
@@ -35,6 +36,7 @@ export const YouTubeVideoBlock = withPreview(
         previewImageSizes,
         renderPreviewImage,
         fill,
+        previewImageIcon,
     }: YouTubeVideoBlockProps) => {
         const [showPreviewImage, setShowPreviewImage] = useState(true);
         const hasPreviewImage = !!(previewImage && previewImage.damFile);
@@ -71,6 +73,7 @@ export const YouTubeVideoBlock = withPreview(
                             aspectRatio,
                             sizes: previewImageSizes,
                             fill: fill,
+                            icon: previewImageIcon,
                         })
                     ) : (
                         <VideoPreviewImage
@@ -79,6 +82,7 @@ export const YouTubeVideoBlock = withPreview(
                             aspectRatio={aspectRatio}
                             sizes={previewImageSizes}
                             fill={fill}
+                            icon={previewImageIcon}
                         />
                     )
                 ) : (