From f48a768c7e0f7117ef6f8609fa983a810e110b6f Mon Sep 17 00:00:00 2001
From: Johannes Munker <56400587+jomunker@users.noreply.github.com>
Date: Mon, 6 Nov 2023 14:01:21 +0100
Subject: [PATCH] Fix padding of DamVideoBlock and YouTubeVideoBlock (#1335)
Fixes the padding behavior of DamVideoBlock and YouTubeVideoBlock when used inside `AdminComponentPaper`. A generic VideoBlock is added to Demo for testing purposes.
---
.changeset/wise-sloths-remember.md | 5 +
demo/admin/src/pages/PageContentBlock.tsx | 2 +
demo/admin/src/pages/blocks/VideoBlock.tsx | 12 ++
demo/api/block-meta.json | 64 ++++++++
demo/api/src/pages/blocks/PageContentBlock.ts | 2 +
demo/api/src/pages/blocks/video.block.ts | 16 ++
.../src/blocks/YouTubeVideoBlock.tsx | 113 +++++++-------
.../cms-admin/src/blocks/DamVideoBlock.tsx | 140 ++++++++++--------
8 files changed, 239 insertions(+), 115 deletions(-)
create mode 100644 .changeset/wise-sloths-remember.md
create mode 100644 demo/admin/src/pages/blocks/VideoBlock.tsx
create mode 100644 demo/api/src/pages/blocks/video.block.ts
diff --git a/.changeset/wise-sloths-remember.md b/.changeset/wise-sloths-remember.md
new file mode 100644
index 0000000000..e389b92ca6
--- /dev/null
+++ b/.changeset/wise-sloths-remember.md
@@ -0,0 +1,5 @@
+---
+"@comet/blocks-admin": patch
+---
+
+Fix padding behavior of `YoutubeVideoBlock` and `DamVideoBlock` when used inside `AdminComponentPaper`
diff --git a/demo/admin/src/pages/PageContentBlock.tsx b/demo/admin/src/pages/PageContentBlock.tsx
index 6bbaf05c97..ce60078dd4 100644
--- a/demo/admin/src/pages/PageContentBlock.tsx
+++ b/demo/admin/src/pages/PageContentBlock.tsx
@@ -11,6 +11,7 @@ import { ColumnsBlock } from "./blocks/ColumnsBlock";
import { FullWidthImageBlock } from "./blocks/FullWidthImageBlock";
import { HeadlineBlock } from "./blocks/HeadlineBlock";
import { TextImageBlock } from "./blocks/TextImageBlock";
+import { VideoBlock } from "./blocks/VideoBlock";
export const PageContentBlock = createBlocksBlock({
name: "PageContent",
@@ -22,6 +23,7 @@ export const PageContentBlock = createBlocksBlock({
textImage: TextImageBlock,
damVideo: DamVideoBlock,
youTubeVideo: YouTubeVideoBlock,
+ video: VideoBlock,
linkList: LinkListBlock,
fullWidthImage: FullWidthImageBlock,
columns: ColumnsBlock,
diff --git a/demo/admin/src/pages/blocks/VideoBlock.tsx b/demo/admin/src/pages/blocks/VideoBlock.tsx
new file mode 100644
index 0000000000..77fe1bc1ed
--- /dev/null
+++ b/demo/admin/src/pages/blocks/VideoBlock.tsx
@@ -0,0 +1,12 @@
+import { BlockCategory, createOneOfBlock, YouTubeVideoBlock } from "@comet/blocks-admin";
+import { DamVideoBlock } from "@comet/cms-admin";
+import * as React from "react";
+import { FormattedMessage } from "react-intl";
+
+export const VideoBlock = createOneOfBlock({
+ name: "Video",
+ displayName: ,
+ category: BlockCategory.Media,
+ supportedBlocks: { youtubeVideo: YouTubeVideoBlock, damVideo: DamVideoBlock },
+ allowEmpty: true,
+});
diff --git a/demo/api/block-meta.json b/demo/api/block-meta.json
index e0ace8aed0..33dee2249e 100644
--- a/demo/api/block-meta.json
+++ b/demo/api/block-meta.json
@@ -927,6 +927,7 @@
"TextImage",
"DamVideo",
"YouTubeVideo",
+ "Video",
"LinkList",
"FullWidthImage",
"Columns",
@@ -1587,6 +1588,69 @@
}
]
},
+ {
+ "name": "Video",
+ "fields": [
+ {
+ "name": "attachedBlocks",
+ "kind": "NestedObjectList",
+ "object": {
+ "fields": [
+ {
+ "name": "type",
+ "kind": "String",
+ "nullable": false
+ },
+ {
+ "name": "props",
+ "kind": "OneOfBlocks",
+ "blocks": [
+ "DamVideo",
+ "YouTubeVideo"
+ ],
+ "nullable": false
+ }
+ ]
+ },
+ "nullable": false
+ },
+ {
+ "name": "activeType",
+ "kind": "String",
+ "nullable": true
+ },
+ {
+ "name": "block",
+ "kind": "NestedObject",
+ "object": {
+ "fields": [
+ {
+ "name": "type",
+ "kind": "String",
+ "nullable": false
+ },
+ {
+ "name": "props",
+ "kind": "OneOfBlocks",
+ "blocks": [
+ "DamVideo",
+ "YouTubeVideo"
+ ],
+ "nullable": false
+ }
+ ]
+ },
+ "nullable": true
+ }
+ ],
+ "inputFields": [
+ {
+ "name": "activeType",
+ "kind": "String",
+ "nullable": true
+ }
+ ]
+ },
{
"name": "YouTubeVideo",
"fields": [
diff --git a/demo/api/src/pages/blocks/PageContentBlock.ts b/demo/api/src/pages/blocks/PageContentBlock.ts
index 2199e37dbb..ea955363a1 100644
--- a/demo/api/src/pages/blocks/PageContentBlock.ts
+++ b/demo/api/src/pages/blocks/PageContentBlock.ts
@@ -9,6 +9,7 @@ import { ColumnsBlock } from "./columns.block";
import { FullWidthImageBlock } from "./full-width-image.block";
import { HeadlineBlock } from "./headline.block";
import { TextImageBlock } from "./TextImageBlock";
+import { VideoBlock } from "./video.block";
const supportedBlocks = {
space: SpaceBlock,
@@ -18,6 +19,7 @@ const supportedBlocks = {
textImage: TextImageBlock,
damVideo: DamVideoBlock,
youTubeVideo: YouTubeVideoBlock,
+ video: VideoBlock,
linkList: LinkListBlock,
fullWidthImage: FullWidthImageBlock,
columns: ColumnsBlock,
diff --git a/demo/api/src/pages/blocks/video.block.ts b/demo/api/src/pages/blocks/video.block.ts
new file mode 100644
index 0000000000..0f17a3585b
--- /dev/null
+++ b/demo/api/src/pages/blocks/video.block.ts
@@ -0,0 +1,16 @@
+import { createOneOfBlock } from "@comet/blocks-api/lib/blocks/factories/createOneOfBlock";
+import { YouTubeVideoBlock } from "@comet/blocks-api/lib/blocks/youtube-video.block";
+import { DamVideoBlock } from "@comet/cms-api";
+
+export const VideoBlock = createOneOfBlock(
+ {
+ supportedBlocks: {
+ damVideo: DamVideoBlock,
+ youtubeVideo: YouTubeVideoBlock,
+ },
+ allowEmpty: true,
+ },
+ {
+ name: "Video",
+ },
+);
diff --git a/packages/admin/blocks-admin/src/blocks/YouTubeVideoBlock.tsx b/packages/admin/blocks-admin/src/blocks/YouTubeVideoBlock.tsx
index de813d1454..fcbea726ab 100644
--- a/packages/admin/blocks-admin/src/blocks/YouTubeVideoBlock.tsx
+++ b/packages/admin/blocks-admin/src/blocks/YouTubeVideoBlock.tsx
@@ -1,11 +1,12 @@
import { Field, FieldContainer, FinalFormInput, FinalFormRadio, FinalFormSwitch } from "@comet/admin";
-import { FormControlLabel } from "@mui/material";
+import { Box, FormControlLabel } from "@mui/material";
import * as React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { YouTubeVideoBlockData, YouTubeVideoBlockInput } from "../blocks.generated";
import { BlocksFinalForm } from "../form/BlocksFinalForm";
import { SelectPreviewComponent } from "../iframebridge/SelectPreviewComponent";
+import { useAdminComponentPaper } from "./common/AdminComponentPaper";
import { createBlockSkeleton } from "./helpers/createBlockSkeleton";
import { BlockCategory, BlockInterface } from "./types";
@@ -42,62 +43,72 @@ export const YouTubeVideoBlock: BlockInterface !youtubeIdentifier || isValidYouTubeIdentifier(youtubeIdentifier),
AdminComponent: ({ state, updateState }) => {
const intl = useIntl();
+ const isInPaper = useAdminComponentPaper();
return (
-
- updateState({ ...newState })} initialValues={state}>
-
-
-
- {(props) => (
- }
- />
- )}
-
-
- {(props) => (
- }
- />
- )}
-
-
-
-
-
-
-
+
+
+ {
+ updateState({ ...state, ...newState });
+ }}
+ initialValues={state}
+ >
+
+
+
+ {(props) => (
+ }
+ />
+ )}
+
+
+ {(props) => (
+ }
+ />
+ )}
+
+
+
+
+
+
+
+
);
},
diff --git a/packages/admin/cms-admin/src/blocks/DamVideoBlock.tsx b/packages/admin/cms-admin/src/blocks/DamVideoBlock.tsx
index cd75da34e7..96341dc10f 100644
--- a/packages/admin/cms-admin/src/blocks/DamVideoBlock.tsx
+++ b/packages/admin/cms-admin/src/blocks/DamVideoBlock.tsx
@@ -1,7 +1,15 @@
import { gql } from "@apollo/client";
import { Field, FieldContainer, FinalFormSwitch, messages } from "@comet/admin";
import { Delete, Video } from "@comet/admin-icons";
-import { AdminComponentButton, AdminComponentPaper, BlockCategory, BlockInterface, BlocksFinalForm, createBlockSkeleton } from "@comet/blocks-admin";
+import {
+ AdminComponentButton,
+ AdminComponentPaper,
+ BlockCategory,
+ BlockInterface,
+ BlocksFinalForm,
+ createBlockSkeleton,
+ useAdminComponentPaper,
+} from "@comet/blocks-admin";
import { Box, Divider, Grid, Typography } from "@mui/material";
import * as React from "react";
import { FormattedMessage } from "react-intl";
@@ -75,73 +83,77 @@ export const DamVideoBlock: BlockInterface {
+ const isInPaper = useAdminComponentPaper();
+
return (
- {
- updateState((prevState) => {
- // case: autoplay = false and showControls = false is not allowed
- if (!values.autoplay && prevState.autoplay) {
- return { ...prevState, ...values, showControls: true };
- }
- if (!values.showControls && prevState.showControls) {
- return { ...prevState, ...values, autoplay: true };
- }
- return { ...prevState, ...values };
- });
- }}
- initialValues={state}
- >
- {state.damFile ? (
- } fullWidth>
-
-
-
-
- {/* TODO show thumbnail of video */}
-
-
-
- {state.damFile.name}
-
-
-
+
+ {
+ updateState((prevState) => {
+ // case: autoplay = false and showControls = false is not allowed
+ if (!values.autoplay && prevState.autoplay) {
+ return { ...prevState, ...values, showControls: true };
+ }
+ if (!values.showControls && prevState.showControls) {
+ return { ...prevState, ...values, autoplay: true };
+ }
+ return { ...prevState, ...values };
+ });
+ }}
+ initialValues={state}
+ >
+ {state.damFile ? (
+ } fullWidth>
+
+
+
+
+ {/* TODO show thumbnail of video */}
+
+
+
+ {state.damFile.name}
+
+
+
+
-
-
-
- } onClick={() => updateState({ damFile: undefined })}>
-
-
-
-
- ) : (
+
+
+ } onClick={() => updateState({ damFile: undefined })}>
+
+
+
+
+ ) : (
+ }
+ component={FileField}
+ fullWidth
+ allowedMimetypes={["video/mp4"]}
+ />
+ )}
+ }
+ component={FinalFormSwitch}
+ />
+ }
+ component={FinalFormSwitch}
+ />
}
- component={FileField}
- fullWidth
- allowedMimetypes={["video/mp4"]}
+ type="checkbox"
+ name="showControls"
+ label={}
+ component={FinalFormSwitch}
/>
- )}
- }
- component={FinalFormSwitch}
- />
- }
- component={FinalFormSwitch}
- />
- }
- component={FinalFormSwitch}
- />
-
+
+
);
},