YouTubeVideoBlock: Fix youtubeIdentifier Type (#2121)

- Fix type of youtubeIdentifier (was required, actually is optional) - Don't show validation error if youtubeIdentifier is empty - Allow emptying youtubeIdentifier --------- Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
vivid-planet · May 28, 2024 · 93a84b6 · 93a84b6
1 parent fdf9fa7
commit 93a84b6
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 8 deletions.
diff --git a/.changeset/real-plants-rescue.md b/.changeset/real-plants-rescue.md
@@ -0,0 +1,7 @@
+---
+"@comet/blocks-api": patch
+---
+
+Fix type of `youtubeIdentifier` in `YouTubeVideoBlock`
+
+Previously, it was incorrectly typed as required. Now it's optional.
diff --git a/demo/api/block-meta.json b/demo/api/block-meta.json
@@ -2061,7 +2061,7 @@
             {
                 "name": "youtubeIdentifier",
                 "kind": "String",
-                "nullable": false
+                "nullable": true
             },
             {
                 "name": "aspectRatio",

diff --git a/packages/admin/blocks-admin/src/blocks/YouTubeVideoBlock.tsx b/packages/admin/blocks-admin/src/blocks/YouTubeVideoBlock.tsx
@@ -23,6 +23,8 @@ const isValidYouTubeIdentifier = (value: string) => {
 };
 
 const validateIdentifier = (value?: string) => {
+    if (!value) return undefined;
+
     return value && isValidYouTubeIdentifier(value) ? undefined : (
         <FormattedMessage id="comet.blocks.youTubeVideo.validation" defaultMessage="Should be a valid YouTube URL or identifier" />
     );
@@ -56,7 +58,7 @@ export const YouTubeVideoBlock: BlockInterface<YouTubeVideoBlockData, State, You
                 <SelectPreviewComponent>
                     <BlocksFinalForm
                         onSubmit={(newState) => {
-                            updateState({ ...state, ...newState });
+                            updateState(newState);
                         }}
                         initialValues={state}
                     >

diff --git a/packages/api/blocks-api/block-meta.json b/packages/api/blocks-api/block-meta.json
@@ -49,7 +49,7 @@
             {
                 "name": "youtubeIdentifier",
                 "kind": "String",
-                "nullable": false
+                "nullable": true
             },
             {
                 "name": "aspectRatio",
@@ -80,7 +80,7 @@
             {
                 "name": "youtubeIdentifier",
                 "kind": "String",
-                "nullable": false
+                "nullable": true
             },
             {
                 "name": "aspectRatio",

diff --git a/packages/api/blocks-api/src/blocks/youtube-video.block.ts b/packages/api/blocks-api/src/blocks/youtube-video.block.ts
@@ -9,7 +9,7 @@ enum AspectRatio {
 }
 
 class YouTubeVideoBlockData extends BlockData {
-    @BlockField()
+    @BlockField({ nullable: true })
     youtubeIdentifier?: string;
 
     @BlockField({ type: "enum", enum: AspectRatio })
@@ -28,7 +28,7 @@ class YouTubeVideoBlockData extends BlockData {
 class YouTubeVideoBlockInput extends BlockInput {
     @IsOptional()
     @IsString()
-    @BlockField()
+    @BlockField({ nullable: true })
     youtubeIdentifier?: string;
 
     @IsEnum(AspectRatio)

diff --git a/packages/api/cms-api/block-meta.json b/packages/api/cms-api/block-meta.json
@@ -976,7 +976,7 @@
             {
                 "name": "youtubeIdentifier",
                 "kind": "String",
-                "nullable": false
+                "nullable": true
             },
             {
                 "name": "aspectRatio",
@@ -1007,7 +1007,7 @@
             {
                 "name": "youtubeIdentifier",
                 "kind": "String",
-                "nullable": false
+                "nullable": true
             },
             {
                 "name": "aspectRatio",

diff --git a/packages/site/cms-site/src/blocks/YouTubeVideoBlock.tsx b/packages/site/cms-site/src/blocks/YouTubeVideoBlock.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 import { YouTubeVideoBlockData } from "../blocks.generated";
 import { withPreview } from "../iframebridge/withPreview";
+import { PreviewSkeleton } from "../previewskeleton/PreviewSkeleton";
 import { PropsWithData } from "./PropsWithData";
 
 interface VideoContainerProps {
@@ -47,6 +48,7 @@ const parseYoutubeIdentifier = (value: string): string | undefined => {
 
 export const YouTubeVideoBlock = withPreview(
     ({ data: { youtubeIdentifier, autoplay, loop, showControls, aspectRatio } }: PropsWithData<YouTubeVideoBlockData>) => {
+        if (!youtubeIdentifier) return <PreviewSkeleton type="media" hasContent={false} />;
         const identifier = parseYoutubeIdentifier(youtubeIdentifier);
 
         const searchParams = new URLSearchParams();