Remove aspect ratio from YouTubeBlock (#2235)

Due to the media block standardization and following from this the video block revisions we decided to remove the aspect ratio from the YouTubeBlock. --------- Co-authored-by: Johannes Obermair <[email protected]>
vivid-planet · Jul 3, 2024 · a589188 · a589188
1 parent 3ea123f
commit a589188
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 138 deletions.
diff --git a/.changeset/spotty-penguins-wash.md b/.changeset/spotty-penguins-wash.md
@@ -0,0 +1,20 @@
+---
+"@comet/blocks-admin": major
+"@comet/cms-site": major
+"@comet/cms-api": major
+---
+
+Remove `aspectRatio` from `YouTubeBlock`
+
+The block's aspect ratio options (4x3, 16x9) proved too inflexible to be of actual use in an application. Therefore, the aspect ratio field was removed. It should be defined in the application instead.
+
+**Migrate**
+
+The block requires an aspect ratio in the site. It should be set using the `aspectRatio` prop (default: `16x9`):
+
+```diff
+ <YouTubeVideoBlock
+   data={video}
++  aspectRatio="9x16"
+ />
+```
diff --git a/demo/api/block-meta.json b/demo/api/block-meta.json
@@ -2181,15 +2181,6 @@
                 "kind": "String",
                 "nullable": true
             },
-            {
-                "name": "aspectRatio",
-                "kind": "Enum",
-                "enum": [
-                    "16X9",
-                    "4X3"
-                ],
-                "nullable": false
-            },
             {
                 "name": "autoplay",
                 "kind": "Boolean",
@@ -2212,15 +2203,6 @@
                 "kind": "String",
                 "nullable": true
             },
-            {
-                "name": "aspectRatio",
-                "kind": "Enum",
-                "enum": [
-                    "16X9",
-                    "4X3"
-                ],
-                "nullable": false
-            },
             {
                 "name": "autoplay",
                 "kind": "Boolean",

diff --git a/demo/api/src/pages/blocks/video.block.ts b/demo/api/src/pages/blocks/video.block.ts
@@ -1,5 +1,4 @@
-import { createOneOfBlock } from "@comet/blocks-api/lib/blocks/factories/createOneOfBlock";
-import { YouTubeVideoBlock } from "@comet/blocks-api/lib/blocks/youtube-video.block";
+import { createOneOfBlock, YouTubeVideoBlock } from "@comet/blocks-api";
 import { DamVideoBlock } from "@comet/cms-api";
 
 export const VideoBlock = createOneOfBlock(

diff --git a/packages/admin/blocks-admin/src/blocks/YouTubeVideoBlock.tsx b/packages/admin/blocks-admin/src/blocks/YouTubeVideoBlock.tsx
@@ -1,5 +1,5 @@
-import { Field, FieldContainer, FinalFormInput, FinalFormRadio, FinalFormSwitch } from "@comet/admin";
-import { Box, FormControlLabel } from "@mui/material";
+import { Field, FinalFormInput, FinalFormSwitch } from "@comet/admin";
+import { Box } from "@mui/material";
 import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -73,24 +73,6 @@ export const YouTubeVideoBlock: BlockInterface<YouTubeVideoBlockData, State, You
                             fullWidth
                             disableContentTranslation
                         />
-                        <FieldContainer label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.aspectRatio", defaultMessage: "Aspect Ratio" })}>
-                            <Field name="aspectRatio" type="radio" value="16X9">
-                                {(props) => (
-                                    <FormControlLabel
-                                        label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.aspectRatio.16X9", defaultMessage: "16:9" })}
-                                        control={<FinalFormRadio {...props} />}
-                                    />
-                                )}
-                            </Field>
-                            <Field name="aspectRatio" type="radio" value="4X3">
-                                {(props) => (
-                                    <FormControlLabel
-                                        label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.aspectRatio.4X3", defaultMessage: "4:3" })}
-                                        control={<FinalFormRadio {...props} />}
-                                    />
-                                )}
-                            </Field>
-                        </FieldContainer>
                         <Field
                             label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.autoplay", defaultMessage: "Autoplay" })}
                             name="autoplay"

diff --git a/packages/admin/blocks-admin/src/blocks/helpers/composeBlocks/composeBlocks.spec.tsx b/packages/admin/blocks-admin/src/blocks/helpers/composeBlocks/composeBlocks.spec.tsx
@@ -30,7 +30,6 @@ describe("composeBlocks", () => {
                 height: 50,
             },
             video: {
-                aspectRatio: "16X9",
                 youtubeIdentifier: "abc",
                 autoplay: true,
                 showControls: true,
@@ -42,7 +41,6 @@ describe("composeBlocks", () => {
                 height: 50,
             },
             video: {
-                aspectRatio: "16X9",
                 youtubeIdentifier: "abc",
                 autoplay: true,
                 showControls: true,
@@ -63,17 +61,16 @@ describe("composeBlocks", () => {
                 height: 10,
             },
             video: {
-                aspectRatio: "16X9",
                 youtubeIdentifier: "abc",
                 autoplay: true,
                 showControls: true,
             },
         });
 
         propsMap.space.updateState({ height: 30 });
-        propsMap.video.updateState({ aspectRatio: "4X3", youtubeIdentifier: "def" });
+        propsMap.video.updateState({ youtubeIdentifier: "def" });
 
-        expect(getTestState()).toStrictEqual({ space: { height: 30 }, video: { aspectRatio: "4X3", youtubeIdentifier: "def" } });
+        expect(getTestState()).toStrictEqual({ space: { height: 30 }, video: { youtubeIdentifier: "def" } });
     });
 
     it("composes values of 1 BlockInterface and 1 settings - flattened", () => {
@@ -158,7 +155,6 @@ describe("composeBlocks", () => {
                 height: 50,
             },
             video: {
-                aspectRatio: "16X9",
                 youtubeIdentifier: "abc",
                 autoplay: true,
                 showControls: true,
@@ -171,7 +167,6 @@ describe("composeBlocks", () => {
                 height: 50,
             },
             video: {
-                aspectRatio: "16X9",
                 youtubeIdentifier: "abc",
                 autoplay: true,
                 showControls: true,
@@ -198,7 +193,6 @@ describe("composeBlocks", () => {
                 height: 10,
             },
             video: {
-                aspectRatio: "16X9",
                 youtubeIdentifier: "abc",
                 autoplay: true,
                 showControls: true,
@@ -207,12 +201,12 @@ describe("composeBlocks", () => {
         });
 
         propsMap.space.updateState({ height: 30 });
-        propsMap.video.updateState({ aspectRatio: "4X3", youtubeIdentifier: "def", autoplay: false, showControls: true });
+        propsMap.video.updateState({ youtubeIdentifier: "def", autoplay: false, showControls: true });
         propsMap.foo.updateState("baz");
 
         expect(getTestState()).toStrictEqual({
             space: { height: 30 },
-            video: { aspectRatio: "4X3", youtubeIdentifier: "def", autoplay: false, showControls: true },
+            video: { youtubeIdentifier: "def", autoplay: false, showControls: true },
             foo: "baz",
         });
     });

diff --git a/packages/api/blocks-api/block-meta.json b/packages/api/blocks-api/block-meta.json
@@ -51,15 +51,6 @@
                 "kind": "String",
                 "nullable": true
             },
-            {
-                "name": "aspectRatio",
-                "kind": "Enum",
-                "enum": [
-                    "16X9",
-                    "4X3"
-                ],
-                "nullable": false
-            },
             {
                 "name": "autoplay",
                 "kind": "Boolean",
@@ -82,15 +73,6 @@
                 "kind": "String",
                 "nullable": true
             },
-            {
-                "name": "aspectRatio",
-                "kind": "Enum",
-                "enum": [
-                    "16X9",
-                    "4X3"
-                ],
-                "nullable": false
-            },
             {
                 "name": "autoplay",
                 "kind": "Boolean",

diff --git a/...api/blocks-api/src/blocks/YouTubeVideoBlock/migrations/1-remove-aspect-ratio.migration.ts b/...api/blocks-api/src/blocks/YouTubeVideoBlock/migrations/1-remove-aspect-ratio.migration.ts
@@ -0,0 +1,25 @@
+import { BlockMigration } from "../../../migrations/BlockMigration";
+import { BlockMigrationInterface } from "../../../migrations/types";
+
+interface From {
+    youtubeIdentifier?: string;
+    aspectRatio: unknown;
+    autoplay?: boolean;
+    showControls?: boolean;
+    loop?: boolean;
+}
+
+interface To {
+    youtubeIdentifier?: string;
+    autoplay?: boolean;
+    showControls?: boolean;
+    loop?: boolean;
+}
+
+export class RemoveAspectRatioMigration extends BlockMigration<(from: From) => To> implements BlockMigrationInterface {
+    public readonly toVersion = 1;
+
+    protected migrate({ aspectRatio, ...other }: From): To {
+        return { ...other };
+    }
+}
diff --git a/...cks-api/src/blocks/youtube-video.block.ts → .../YouTubeVideoBlock/youtube-video.block.ts b/...cks-api/src/blocks/youtube-video.block.ts → .../YouTubeVideoBlock/youtube-video.block.ts
@@ -1,23 +1,14 @@
-import { IsBoolean, IsEnum, IsOptional, IsString, Matches } from "class-validator";
+import { IsBoolean, IsOptional, IsString, Matches } from "class-validator";
 
-import { BlockData, BlockDataInterface, BlockInput, createBlock, inputToData } from "./block";
-import { BlockField } from "./decorators/field";
-
-/* eslint-disable @typescript-eslint/naming-convention */
-// TODO: Replace with PascalCase
-enum AspectRatio {
-    "16X9" = "16X9",
-    "4X3" = "4X3",
-}
-/* eslint-enable @typescript-eslint/naming-convention */
+import { typesafeMigrationPipe } from "../../migrations/typesafeMigrationPipe";
+import { BlockData, BlockDataInterface, BlockInput, createBlock, inputToData } from "../block";
+import { BlockField } from "../decorators/field";
+import { RemoveAspectRatioMigration } from "./migrations/1-remove-aspect-ratio.migration";
 
 class YouTubeVideoBlockData extends BlockData {
     @BlockField({ nullable: true })
     youtubeIdentifier?: string;
 
-    @BlockField({ type: "enum", enum: AspectRatio })
-    aspectRatio: AspectRatio;
-
     @BlockField({ nullable: true })
     autoplay?: boolean;
 
@@ -38,10 +29,6 @@ class YouTubeVideoBlockInput extends BlockInput {
     )
     youtubeIdentifier?: string;
 
-    @IsEnum(AspectRatio)
-    @BlockField({ type: "enum", enum: AspectRatio })
-    aspectRatio: AspectRatio;
-
     @IsBoolean()
     @IsOptional()
     @BlockField({ nullable: true })
@@ -62,4 +49,10 @@ class YouTubeVideoBlockInput extends BlockInput {
     }
 }
 
-export const YouTubeVideoBlock = createBlock(YouTubeVideoBlockData, YouTubeVideoBlockInput, "YouTubeVideo");
+export const YouTubeVideoBlock = createBlock(YouTubeVideoBlockData, YouTubeVideoBlockInput, {
+    name: "YouTubeVideo",
+    migrate: {
+        version: 1,
+        migrations: typesafeMigrationPipe([RemoveAspectRatioMigration]),
+    },
+});
diff --git a/packages/api/blocks-api/src/index.ts b/packages/api/blocks-api/src/index.ts
@@ -65,7 +65,7 @@ export { strictBlockDataFactoryDecorator } from "./blocks/helpers/strictBlockDat
 export { strictBlockInputFactoryDecorator } from "./blocks/helpers/strictBlockInputFactoryDecorator";
 export { SpaceBlock } from "./blocks/SpaceBlock/SpaceBlock";
 export { transformToSaveIndex } from "./blocks/transformToSaveIndex/transformToSaveIndex";
-export { YouTubeVideoBlock } from "./blocks/youtube-video.block";
+export { YouTubeVideoBlock } from "./blocks/YouTubeVideoBlock/youtube-video.block";
 export { getBlocksMeta } from "./blocks-meta";
 export { FlatBlocks } from "./flat-blocks/flat-blocks";
 export { BlockMigration } from "./migrations/BlockMigration";

diff --git a/packages/api/cms-api/block-meta.json b/packages/api/cms-api/block-meta.json
@@ -1075,15 +1075,6 @@
                 "kind": "String",
                 "nullable": true
             },
-            {
-                "name": "aspectRatio",
-                "kind": "Enum",
-                "enum": [
-                    "16X9",
-                    "4X3"
-                ],
-                "nullable": false
-            },
             {
                 "name": "autoplay",
                 "kind": "Boolean",
@@ -1106,15 +1097,6 @@
                 "kind": "String",
                 "nullable": true
             },
-            {
-                "name": "aspectRatio",
-                "kind": "Enum",
-                "enum": [
-                    "16X9",
-                    "4X3"
-                ],
-                "nullable": false
-            },
             {
                 "name": "autoplay",
                 "kind": "Boolean",