feat(YoutubeVideoBlock): merge component and style file and move from…

… demo/site to cms-site

demo/site/src/blocks/PageContentBlock.tsx

@@ -1,4 +1,4 @@
-import { BlocksBlock, PropsWithData, SupportedBlocks } from "@comet/cms-site";
+import { BlocksBlock, PropsWithData, SupportedBlocks, YouTubeVideoBlock } from "@comet/cms-site";
 import { PageContentBlockData } from "@src/blocks.generated";
 import * as React from "react";
 
@@ -14,7 +14,6 @@ import RichTextBlock from "./RichTextBlock";
 import SpaceBlock from "./SpaceBlock";
 import { TextImageBlock } from "./TextImageBlock";
 import { TwoListsBlock } from "./TwoListsBlock";
-import YouTubeVideoBlock from "./YouTubeVideoBlock";
 
 const supportedBlocks: SupportedBlocks = {
     space: (props) => <SpaceBlock data={props} />,

demo/site/src/blocks/YouTubeVideoBlock.tsx → packages/site/cms-site/src/blocks/YouTubeVideoBlock.tsx

@@ -1,8 +1,28 @@
-import { PropsWithData, withPreview } from "@comet/cms-site";
-import { YouTubeVideoBlockData } from "@src/blocks.generated";
 import * as React from "react";
+import styled from "styled-components";
 
-import * as sc from "./YouTubeVideoBlock.sc";
+import { YouTubeVideoBlockData } from "../blocks.generated";
+import { withPreview } from "../iframebridge/withPreview";
+import { PropsWithData } from "./PropsWithData";
+
+interface VideoContainerProps {
+    heightInPercent: number;
+}
+
+const VideoContainer = styled.div<VideoContainerProps>`
+    height: 0;
+    overflow: hidden;
+    padding-top: ${({ heightInPercent }) => heightInPercent}%;
+    position: relative;
+
+    iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+`;
 
 const getHeightInPercentForAspectRatio = (aspectRatio: YouTubeVideoBlockData["aspectRatio"]) => {
     switch (aspectRatio) {
@@ -47,9 +67,9 @@ const YouTubeVideoBlock: React.FunctionComponent<PropsWithData<YouTubeVideoBlock
     youtubeUrl.search = searchParams.toString();
 
     return (
-        <sc.VideoContainer heightInPercent={getHeightInPercentForAspectRatio(aspectRatio)}>
+        <VideoContainer heightInPercent={getHeightInPercentForAspectRatio(aspectRatio)}>
             <iframe src={youtubeUrl.toString()} style={{ border: 0 }} />
-        </sc.VideoContainer>
+        </VideoContainer>
     );
 };
 

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

@@ -8,6 +8,7 @@ export { InternalLinkBlock } from "./blocks/InternalLinkBlock";
 export { PixelImageBlock } from "./blocks/PixelImageBlock";
 export type { PropsWithData } from "./blocks/PropsWithData";
 export { SvgImageBlock } from "./blocks/SvgImageBlock";
+export { default as YouTubeVideoBlock } from "./blocks/YouTubeVideoBlock";
 export { IFrameBridgeProvider } from "./iframebridge/IFrameBridge";
 export { IFrameMessageType } from "./iframebridge/IFrameMessage";
 export { Preview } from "./iframebridge/Preview";