Harmonize video blocks options (#2233)

Outsource video options fields to use in DamVideoBlock, YouTubeVideoBlock (when moved to cms-admin from blocks-admin) and VimeoVideoBlock (PR open).
vivid-planet · Jul 2, 2024 · 95e3929 · 95e3929
1 parent 87b2dcb
commit 95e3929
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 34 deletions.
diff --git a/packages/admin/cms-admin/src/blocks/DamVideoBlock.tsx b/packages/admin/cms-admin/src/blocks/DamVideoBlock.tsx
@@ -1,5 +1,5 @@
 import { gql, useApolloClient } from "@apollo/client";
-import { Field, FieldContainer, FinalFormSwitch } from "@comet/admin";
+import { Field, FieldContainer } from "@comet/admin";
 import { Delete, MoreVertical, OpenNewTab, Video } from "@comet/admin-icons";
 import {
     AdminComponentButton,
@@ -23,6 +23,7 @@ import { DamPathLazy } from "../form/file/DamPathLazy";
 import { FileField } from "../form/file/FileField";
 import { CmsBlockContext } from "./CmsBlockContextProvider";
 import { GQLVideoBlockDamFileQuery, GQLVideoBlockDamFileQueryVariables } from "./DamVideoBlock.generated";
+import { VideoOptionsFields } from "./helpers/VideoOptionsFields";
 
 type State = DamVideoBlockData;
 
@@ -128,21 +129,7 @@ export const DamVideoBlock: BlockInterface<DamVideoBlockData, State, DamVideoBlo
 
         return (
             <Box padding={isInPaper ? 3 : 0} pb={0}>
-                <BlocksFinalForm
-                    onSubmit={(values) => {
-                        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}
-                >
+                <BlocksFinalForm onSubmit={updateState} initialValues={state}>
                     {state.damFile ? (
                         <FieldContainer fullWidth>
                             <AdminComponentPaper disablePadding>
@@ -203,24 +190,7 @@ export const DamVideoBlock: BlockInterface<DamVideoBlockData, State, DamVideoBlo
                     ) : (
                         <Field name="damFile" component={FileField} fullWidth allowedMimetypes={["video/mp4"]} />
                     )}
-                    <Field
-                        type="checkbox"
-                        name="autoplay"
-                        label={<FormattedMessage id="comet.blocks.video.autoplay" defaultMessage="Autoplay" />}
-                        component={FinalFormSwitch}
-                    />
-                    <Field
-                        type="checkbox"
-                        name="loop"
-                        label={<FormattedMessage id="comet.blocks.video.loop" defaultMessage="Loop" />}
-                        component={FinalFormSwitch}
-                    />
-                    <Field
-                        type="checkbox"
-                        name="showControls"
-                        label={<FormattedMessage id="comet.blocks.video.showControls" defaultMessage="Show controls" />}
-                        component={FinalFormSwitch}
-                    />
+                    <VideoOptionsFields />
                 </BlocksFinalForm>
             </Box>
         );

diff --git a/packages/admin/cms-admin/src/blocks/helpers/VideoOptionsFields.tsx b/packages/admin/cms-admin/src/blocks/helpers/VideoOptionsFields.tsx
@@ -0,0 +1,52 @@
+import { Field, FinalFormSwitch, OnChangeField } from "@comet/admin";
+import { FormControlLabel } from "@mui/material";
+import * as React from "react";
+import { useForm } from "react-final-form";
+import { FormattedMessage } from "react-intl";
+
+export const VideoOptionsFields = () => {
+    const form = useForm();
+    return (
+        <>
+            <Field name="autoplay" type="checkbox">
+                {(props) => (
+                    <FormControlLabel
+                        label={<FormattedMessage id="comet.blocks.video.autoplay" defaultMessage="Autoplay" />}
+                        control={<FinalFormSwitch {...props} />}
+                    />
+                )}
+            </Field>
+            <Field name="loop" type="checkbox">
+                {(props) => (
+                    <FormControlLabel
+                        label={<FormattedMessage id="comet.blocks.video.loop" defaultMessage="Loop" />}
+                        control={<FinalFormSwitch {...props} />}
+                    />
+                )}
+            </Field>
+            <Field name="showControls" type="checkbox">
+                {(props) => (
+                    <FormControlLabel
+                        label={<FormattedMessage id="comet.blocks.video.showControls" defaultMessage="Show controls" />}
+                        control={<FinalFormSwitch {...props} />}
+                    />
+                )}
+            </Field>
+            {/* case: autoplay = false and showControls = false is not allowed */}
+            <OnChangeField name="autoplay">
+                {(value, previousValue) => {
+                    if (!value && previousValue) {
+                        form.change("showControls", true);
+                    }
+                }}
+            </OnChangeField>
+            <OnChangeField name="showControls">
+                {(value, previousValue) => {
+                    if (!value && previousValue) {
+                        form.change("autoplay", true);
+                    }
+                }}
+            </OnChangeField>
+        </>
+    );
+};