Move DamVideoBlock to @comet/cms-site (#2131)

---------

Co-authored-by: Stefanie Kaltenhauser <stefanie.kaltenhauser@vivid-planet.com>
Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>

.changeset/spicy-seas-sort.md

@@ -0,0 +1,5 @@
+---
+"@comet/cms-site": minor
+---
+
+Add `DamVideoBlock`

demo/site/src/blocks/MediaBlock.tsx

@@ -1,9 +1,8 @@
-import { OneOfBlock, PropsWithData, SupportedBlocks, withPreview } from "@comet/cms-site";
+import { DamVideoBlock, OneOfBlock, PropsWithData, SupportedBlocks, withPreview } from "@comet/cms-site";
 import { MediaBlockData } from "@src/blocks.generated";
 import * as React from "react";
 
 import { DamImageBlock } from "./DamImageBlock";
-import DamVideoBlock from "./DamVideoBlock";
 
 const supportedBlocks: SupportedBlocks = {
     image: (props) => <DamImageBlock data={props} />,

demo/site/src/blocks/PageContentBlock.tsx

@@ -1,12 +1,11 @@
-import { BlocksBlock, PropsWithData, SupportedBlocks, YouTubeVideoBlock } from "@comet/cms-site";
+import { BlocksBlock, DamVideoBlock, PropsWithData, SupportedBlocks, YouTubeVideoBlock } from "@comet/cms-site";
 import { PageContentBlockData } from "@src/blocks.generated";
 import { TeaserBlock } from "@src/documents/pages/blocks/TeaserBlock";
 import * as React from "react";
 
 import { AnchorBlock } from "./AnchorBlock";
 import { ColumnsBlock } from "./ColumnsBlock";
 import { DamImageBlock } from "./DamImageBlock";
-import DamVideoBlock from "./DamVideoBlock";
 import { FullWidthImageBlock } from "./FullWidthImageBlock";
 import { HeadlineBlock } from "./HeadlineBlock";
 import { LinkListBlock } from "./LinkListBlock";

packages/site/cms-site/src/blocks/DamVideoBlock.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import styled from "styled-components";
+
+import { DamVideoBlockData } from "../blocks.generated";
+import { withPreview } from "../iframebridge/withPreview";
+import { PreviewSkeleton } from "../previewskeleton/PreviewSkeleton";
+import { PropsWithData } from "./PropsWithData";
+
+export const DamVideoBlock = withPreview(
+    ({ data: { damFile, autoplay, loop, showControls } }: PropsWithData<DamVideoBlockData>): JSX.Element => {
+        if (damFile === undefined) {
+            return <PreviewSkeleton type="media" hasContent={false} />;
+        }
+
+        return (
+            <Video autoPlay={autoplay} muted={autoplay} loop={loop} controls={showControls} playsInline>
+                <source src={damFile.fileUrl} type={damFile.mimetype} />
+            </Video>
+        );
+    },
+    { label: "Video" },
+);
+
+const Video = styled.video`
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+`;

packages/site/cms-site/src/index.ts

@@ -1,4 +1,5 @@
 export { DamFileDownloadLinkBlock } from "./blocks/DamFileDownloadLinkBlock";
+export { DamVideoBlock } from "./blocks/DamVideoBlock";
 export { ExternalLinkBlock } from "./blocks/ExternalLinkBlock";
 export { BlocksBlock } from "./blocks/factories/BlocksBlock";
 export { ListBlock } from "./blocks/factories/ListBlock";