From 3e5f99ea5fe3a60c345a57236a0881b08fd53612 Mon Sep 17 00:00:00 2001
From: Christian Pillsbury <cpillsbury@mux.com>
Date: Mon, 9 Sep 2024 13:14:10 -0700
Subject: [PATCH] chore: Improve MuxPlayer nextjs page to better account for
 more complex values. Initial re-org of prop categories.

---
 .../app/page-state/index.ts                   |  28 +-
 .../components/renderers.tsx                  |  66 ++++-
 .../pages/MuxPlayer.tsx                       | 276 ++++++++++--------
 3 files changed, 227 insertions(+), 143 deletions(-)

diff --git a/examples/nextjs-with-typescript/app/page-state/index.ts b/examples/nextjs-with-typescript/app/page-state/index.ts
index 0ed7a208f..b293240fd 100644
--- a/examples/nextjs-with-typescript/app/page-state/index.ts
+++ b/examples/nextjs-with-typescript/app/page-state/index.ts
@@ -5,6 +5,8 @@ import { Dispatch, Reducer, useEffect, useReducer } from 'react';
 
 const DEFAULT_INITIAL_STATE = Object.freeze({}) as Readonly<Record<string, any>>;
 
+export const isObject = (x: unknown): x is object => (x && typeof x === 'object' && !Array.isArray(x));
+
 export const defaultToInitialState = <T extends Record<string, any> = Record<string, any>>(
   query: NextParsedUrlQuery,
   ..._additionalArgs: any[]
@@ -42,10 +44,30 @@ export const reducer = <T extends Record<string, any> = Record<string, any>>(
   const { type, value } = action;
   switch (type) {
     case ActionType.UPDATE: {
-      return {
-        ...state,
-        ...value,
+      const updateFn = typeof value === 'function' ? value : (prevState) => {
+        return Object.entries(value).reduce((nextState, [name, value]) => {
+          let nextValue = value;
+          if (isObject(value) && isObject(nextState[name])) {
+            // nextValue = { ...nextState[name], ...value };
+            nextValue = Object.entries(value).reduce((nextValue, [newValueKey, newValueValue]) => {
+              // Treat undefined (but not null) as a removal/delete condition
+              if (newValueValue === undefined) {
+                delete nextValue[newValueKey];
+              } else {
+                nextValue[newValueKey] = newValueValue;
+              }
+              return nextValue;
+            }, { ...nextState[name] });
+            // Also remove empty objects (aka no remaining keys after prior logic)
+            if (!Object.keys(nextValue).length) {
+              nextValue = undefined;
+            }
+          }
+          nextState[name] = nextValue;
+          return nextState;
+        }, { ...prevState });
       };
+      return updateFn(state);
     }
     default: {
       return state;
diff --git a/examples/nextjs-with-typescript/components/renderers.tsx b/examples/nextjs-with-typescript/components/renderers.tsx
index 8800828f9..6bde9950d 100644
--- a/examples/nextjs-with-typescript/components/renderers.tsx
+++ b/examples/nextjs-with-typescript/components/renderers.tsx
@@ -1,6 +1,12 @@
 import { Fragment, ReactNode } from 'react';
 
-export const toWordsFromCamel = (string: string) => {
+export const toWordsFromKeyName = (string: string) => {
+  if (string.includes('.')) {
+    return string.split('.').map(toWordsFromKeyName).join(': ');
+  }
+  if (string.includes('_')) {
+    return string.split('_').map(toWordsFromKeyName).join(' ');
+  }
   const first = string[0].toUpperCase();
   const rest = string.slice(1);
   return `${first}${rest.replace(/[A-Z]/g, (match) => ` ${match}`)}`;
@@ -19,7 +25,7 @@ export const BooleanRenderer = ({
   removeFalse?: boolean;
   onChange: (obj: any) => void;
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
     <div>
       <label htmlFor={`${name}-control`}>
@@ -28,7 +34,10 @@ export const BooleanRenderer = ({
       <input
         id={`${name}-control`}
         type="checkbox"
-        onChange={({ target: { checked } }) => onChange({ [name]: removeFalse && !checked ? undefined : checked })}
+        onChange={({ target: { checked } }) => {
+          const changeValue = removeFalse && !checked ? undefined : checked
+          onChange(toChangeObject(name, changeValue));
+        }}
         checked={value ?? false}
       />
     </div>
@@ -52,7 +61,7 @@ export const NumberRenderer = ({
   max?: number;
   step?: number;
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
     <div>
       <label htmlFor={`${name}-control`}>
@@ -64,7 +73,10 @@ export const NumberRenderer = ({
         min={min}
         max={max}
         step={step}
-        onChange={({ target: { value } }) => onChange({ [name]: value ? +value : undefined })}
+        onChange={({ target: { value } }) => {
+          const changeValue = value ? +value : undefined
+          onChange(toChangeObject(name, changeValue));
+        }}
         value={value ?? ''}
       />
     </div>
@@ -84,7 +96,7 @@ export const TextRenderer = ({
   onChange: (obj: any) => void;
   placeholder?: string;
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
     <div>
       <label htmlFor={`${name}-control`}>
@@ -93,7 +105,10 @@ export const TextRenderer = ({
       <input
         id={`${name}-control`}
         type="text"
-        onChange={({ target: { value } }) => onChange({ [name]: value ? value : undefined })}
+        onChange={({ target: { value } }) => {
+          const changeValue = value ? value : undefined;
+          onChange(toChangeObject(name, changeValue));
+        }}
         value={value ?? ''}
         placeholder={placeholder}
       />
@@ -114,7 +129,7 @@ export const URLRenderer = ({
   onChange: (obj: any) => void;
   placeholder?: string;
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
     <div>
       <label htmlFor={`${name}-control`}>
@@ -123,7 +138,10 @@ export const URLRenderer = ({
       <input
         id={`${name}-control`}
         type="url"
-        onChange={({ target: { value } }) => onChange({ [name]: value ? value : undefined })}
+        onChange={({ target: { value } }) => {
+          const changeValue = value ? value : undefined;
+          onChange(toChangeObject(name, changeValue));
+        }}
         value={value ?? ''}
         placeholder={placeholder}
       />
@@ -142,7 +160,7 @@ export const ColorRenderer = ({
   label?: string;
   onChange: (obj: any) => void;
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
     <div>
       <label htmlFor={`${name}-control`}>
@@ -151,7 +169,10 @@ export const ColorRenderer = ({
       <input
         id={`${name}-control`}
         type="color"
-        onChange={({ target: { value } }) => onChange({ [name]: value ? value : undefined })}
+        onChange={({ target: { value } }) => {
+          const changeValue = value ? value : undefined;
+          onChange(toChangeObject(name, changeValue));
+        }}
         value={value ?? '#000000'}
       />
     </div>
@@ -182,7 +203,7 @@ export const EnumRenderer = ({
   values: any[];
   formatter?: (enumValue: any) => ReactNode;
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
       <label>
@@ -203,7 +224,10 @@ export const EnumRenderer = ({
               <input
                 id={`${name}-${enumValue}-control`}
                 type="radio"
-                onChange={() => onChange({ [name]: values[i] })}
+                onChange={() => {
+                  const changeValue = values[i];
+                  onChange(toChangeObject(name, changeValue));
+                }}
                 value={typeof enumValue === 'string' ? enumValue : enumValue?.toString()}
                 checked={value === enumValue}
               />
@@ -229,7 +253,7 @@ export const EnumMultiSelectRenderer = ({
   onChange: (obj: any) => void;
   values: any[];
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
     <div>
       <label htmlFor={`${name}-control`}>
@@ -241,10 +265,10 @@ export const EnumMultiSelectRenderer = ({
         size={values.length}
         defaultValue={value ?? []}
         onChange={({ target: { selectedOptions } }) => {
-          const currentValues = selectedOptions?.length
+          const changeValue =selectedOptions?.length
             ? Array.from(selectedOptions, ({ value }) => values.find((enumValue) => enumValue.toString() === value))
             : undefined;
-          onChange({ [name]: currentValues });
+          onChange(toChangeObject(name, changeValue));
         }}
       >
         {values.map((enumValue) => {
@@ -258,3 +282,13 @@ export const EnumMultiSelectRenderer = ({
     </div>
   );
 };
+
+// NOTE: Placing this function at the bottom bc generic syntax messes up code highlighting in VSCode. This at least keeps the jank narrow. (CJP)
+export const toChangeObject = <T = undefined>(name: string, value: T) => {
+  // NOTE: Currently only support depth=1
+  if (name.includes('.')) {
+    const [name1, name2] = name.split('.');
+    return { [name1]: { [name2]: value } };
+  }
+  return { [name]: value };
+};
\ No newline at end of file
diff --git a/examples/nextjs-with-typescript/pages/MuxPlayer.tsx b/examples/nextjs-with-typescript/pages/MuxPlayer.tsx
index d1b517caa..ee9c40fbb 100644
--- a/examples/nextjs-with-typescript/pages/MuxPlayer.tsx
+++ b/examples/nextjs-with-typescript/pages/MuxPlayer.tsx
@@ -239,8 +239,6 @@ const MaxResolutionValues = Object.values(MaxResolution);
 const MinResolutionValues = Object.values(MinResolution);
 const RenditionOrderValues = Object.values(RenditionOrder);
 
-export const getServerSideProps = getLocationServerSideProps;
-
 type Props = LocationProps;
 
 function MuxPlayerPage({ location }: Props) {
@@ -341,7 +339,6 @@ function MuxPlayerPage({ location }: Props) {
           onEnded={onEnded}
           onWaiting={onWaiting}
         />
-
         <div className="options">
           <ComponentCodeRenderer state={state} component="MuxPlayer" />
           <URLPathRenderer state={state} location={typeof window !== 'undefined' ? window.location : location} />
@@ -370,57 +367,42 @@ function MuxPlayerPage({ location }: Props) {
           <div>
             <h2>Manual Config</h2>
           </div>
+          {/* These are all properties that effect how media assets are requested */}
+          {/* Props for the main media stream playback */}
           <TextRenderer value={state.playbackId} name="playbackId" onChange={genericOnChange} />
+          <TextRenderer value={state.tokens?.playback} name="tokens.playback" onChange={genericOnChange} />
+          <TextRenderer value={state.tokens?.drm} name="tokens.drm" onChange={genericOnChange} />
           <EnumRenderer
-            value={state.streamType}
-            name="streamType"
+            value={state.maxResolution}
+            name="maxResolution"
             onChange={genericOnChange}
-            values={['on-demand', 'live', 'll-live', 'live:dvr', 'll-live:dvr', 'unknown']}
-            formatter={(enumValue) =>
-              ['on-demand', 'live', 'unknown'].includes(enumValue) ? (
-                <code>{JSON.stringify(enumValue)}</code>
-              ) : (
-                <>
-                  <code>{JSON.stringify(enumValue)}</code> (deprecated)
-                </>
-              )
-            }
+            values={MaxResolutionValues}
           />
           <EnumRenderer
-            value={state.targetLiveWindow}
-            name="targetLiveWindow"
+            value={state.minResolution}
+            name="minResolution"
             onChange={genericOnChange}
-            values={[Infinity, 0, NaN]}
+            values={MinResolutionValues}
           />
           <EnumRenderer
-            value={state.defaultStreamType}
-            name="defaultStreamType"
+            value={state.renditionOrder}
+            name="renditionOrder"
             onChange={genericOnChange}
-            values={['on-demand', 'live', 'unknown']}
-          />
-          <EnumRenderer
-            value={getPlayerSize(stylesState.width)}
-            name="width"
-            label="Width Cutoffs for Responsive Player Chrome/UI"
-            onChange={({ width: playerSize }) => {
-              const width = PlayerSizeWidths[playerSize?.split(' ')[0]];
-              dispatchStyles(updateProps({ width }));
-            }}
-            values={['extra-small', 'small', 'large']}
+            values={RenditionOrderValues}
           />
-          <BooleanRenderer value={state.audio} name="audio" onChange={genericOnChange} />
-          <EnumRenderer
-            value={state.theme}
-            name="theme"
+          <NumberRenderer
+            value={state.programStartTime}
+            name="programStartTime"
             onChange={genericOnChange}
-            values={['classic', 'microvideo', 'minimal', 'gerwig']}
+            min={0}
+            step={1}
           />
-          <TextRenderer
-            value={state.envKey}
-            name="envKey"
-            label="Env Key (Mux Data)"
+          <NumberRenderer
+            value={state.programEndTime}
+            name="programEndTime"
             onChange={genericOnChange}
-            placeholder={`Inferred from playbackId`}
+            min={0}
+            step={1}
           />
           <URLRenderer
             value={state.customDomain}
@@ -428,67 +410,84 @@ function MuxPlayerPage({ location }: Props) {
             onChange={genericOnChange}
             placeholder="my.customdomain.com"
           />
+          <EnumRenderer
+            value={state.preferCmcd}
+            name="preferCmcd"
+            onChange={genericOnChange}
+            values={['query', 'header', 'none']}
+          />
+          {/* Props for the thumbnail (aka poster) */}
+          <TextRenderer value={state.tokens?.thumbnail} name="tokens.thumbnail" onChange={genericOnChange} />
+          <NumberRenderer value={state.thumbnailTime} name="thumbnailTime" onChange={genericOnChange} min={0} />
           <URLRenderer
             value={state.poster}
             name="poster"
             onChange={genericOnChange}
             placeholder={`Inferred from playbackId`}
           />
+          {/* Props for the storyboard */}
+          <TextRenderer value={state.tokens?.storyboard} name="tokens.storyboard" onChange={genericOnChange} />
           <URLRenderer
             value={state.storyboardSrc}
             name="storyboardSrc"
             onChange={genericOnChange}
             placeholder={`Inferred from playbackId`}
           />
-          <TextRenderer
-            value={state.placeholder}
-            name="placeholder"
-            label="Placeholder Image"
-            onChange={genericOnChange}
-          />
-          <TextRenderer value={state.title} name="title" onChange={genericOnChange} />
-          <BooleanRenderer value={state.paused} name="paused" onChange={genericOnChange} />
+          {/* These are all properties that effect playback/initial load behavior */}
           <EnumRenderer
             value={state.autoPlay}
             name="autoPlay"
             onChange={genericOnChange}
             values={[true, false, 'any', 'muted']}
           />
-          <EnumRenderer
-            value={state.preload}
-            name="preload"
-            onChange={genericOnChange}
-            values={['none', 'metadata', 'auto']}
-          />
-          <BooleanRenderer value={state.muted} name="muted" onChange={genericOnChange} />
-          <BooleanRenderer value={state.nohotkeys} name="nohotkeys" label="No Hot Keys" onChange={genericOnChange} />
-          <BooleanRenderer
-            value={state.defaultShowRemainingTime}
-            name="defaultShowRemainingTime"
+          <NumberRenderer
+            value={state.playbackRate}
+            name="playbackRate"
             onChange={genericOnChange}
+            min={0}
+            max={3}
+            step={0.25}
           />
+          <BooleanRenderer value={state.loop} name="loop" onChange={genericOnChange} />
           <BooleanRenderer
             value={state.defaultHiddenCaptions}
             name="defaultHiddenCaptions"
             onChange={genericOnChange}
           />
-          <NumberRenderer
-            value={state.forwardSeekOffset}
-            name="forwardSeekOffset"
+          <EnumRenderer
+            value={state.preload}
+            name="preload"
             onChange={genericOnChange}
-            min={1}
-            max={99}
+            values={['none', 'metadata', 'auto']}
           />
-          <NumberRenderer
-            value={state.backwardSeekOffset}
-            name="backwardSeekOffset"
+          <EnumRenderer
+            value={state.crossOrigin}
+            name="crossOrigin"
             onChange={genericOnChange}
-            min={1}
-            max={99}
+            values={['anonymous', 'use-credentials']}
+          />
+          <EnumRenderer
+            value={state.preferPlayback}
+            name="preferPlayback"
+            onChange={genericOnChange}
+            values={['mse', 'native']}
           />
-          <NumberRenderer value={state.volume} name="volume" onChange={genericOnChange} min={0} max={1} step={0.05} />
-          <BooleanRenderer value={state.noVolumePref} name="noVolumePref" onChange={genericOnChange} />
           <NumberRenderer value={state.startTime} name="startTime" onChange={genericOnChange} min={0} />
+          {/* These are all Mux Data-related properties */}
+          <TextRenderer
+            value={state.envKey}
+            name="envKey"
+            label="Env Key (Mux Data)"
+            onChange={genericOnChange}
+            placeholder={`Inferred from playbackId`}
+          />
+          <TextRenderer value={state.metadata?.video_id} name="metadata.video_id" onChange={genericOnChange} />
+          <TextRenderer value={state.metadata?.video_title} name="metadata.video_title" onChange={genericOnChange} />
+          <TextRenderer value={state.metadata?.viewer_user_id} name="metadata.viewer_user_id" onChange={genericOnChange} />
+          <BooleanRenderer value={state.disableTracking} name="disableTracking" onChange={genericOnChange} />
+          <BooleanRenderer value={state.disableCookies} name="disableCookies" onChange={genericOnChange} />
+          {/* These are all playback state properties */}
+          <BooleanRenderer value={state.paused} name="paused" onChange={genericOnChange} />
           <NumberRenderer
             value={state.currentTime}
             name="currentTime"
@@ -497,38 +496,72 @@ function MuxPlayerPage({ location }: Props) {
             /** @TODO solve `undefined` error cases (CJP) */
             // max={mediaElRef.current?.duration}
           />
-          <NumberRenderer value={state.thumbnailTime} name="thumbnailTime" onChange={genericOnChange} min={0} />
-          <BooleanRenderer value={state.disableTracking} name="disableTracking" onChange={genericOnChange} />
-          <BooleanRenderer value={state.disableCookies} name="disableCookies" onChange={genericOnChange} />
-          <BooleanRenderer value={state.debug} name="debug" onChange={genericOnChange} />
+          {/* Audio */}
+          <BooleanRenderer value={state.muted} name="muted" onChange={genericOnChange} />
+          <NumberRenderer value={state.volume} name="volume" onChange={genericOnChange} min={0} max={1} step={0.05} />
+          <BooleanRenderer value={state.noVolumePref} name="noVolumePref" onChange={genericOnChange} />
           <EnumRenderer
-            value={state.preferCmcd}
-            name="preferCmcd"
+            value={state.streamType}
+            name="streamType"
             onChange={genericOnChange}
-            values={['query', 'header', 'none']}
+            values={['on-demand', 'live', 'll-live', 'live:dvr', 'll-live:dvr', 'unknown']}
+            formatter={(enumValue) =>
+              ['on-demand', 'live', 'unknown'].includes(enumValue) ? (
+                <code>{JSON.stringify(enumValue)}</code>
+              ) : (
+                <>
+                  <code>{JSON.stringify(enumValue)}</code> (deprecated)
+                </>
+              )
+            }
           />
+          {/* These are all cosmetic/UI related properties */}
+          {/* Props for general UI/Chrome */}
           <EnumRenderer
-            value={state.preferPlayback}
-            name="preferPlayback"
+            value={getPlayerSize(stylesState.width)}
+            name="width"
+            label="Width Cutoffs for Responsive Player Chrome/UI"
+            onChange={({ width: playerSize }) => {
+              const width = PlayerSizeWidths[playerSize?.split(' ')[0]];
+              dispatchStyles(updateProps({ width }));
+            }}
+            values={['extra-small', 'small', 'large']}
+          />
+          <BooleanRenderer value={state.audio} name="audio" onChange={genericOnChange} />
+          <EnumRenderer
+            value={state.theme}
+            name="theme"
             onChange={genericOnChange}
-            values={['mse', 'native']}
+            values={['classic', 'microvideo', 'minimal', 'gerwig']}
           />
-          <BooleanRenderer value={state.loop} name="loop" onChange={genericOnChange} />
           <EnumRenderer
-            value={state.crossOrigin}
-            name="crossOrigin"
+            value={state.defaultStreamType}
+            name="defaultStreamType"
             onChange={genericOnChange}
-            values={['anonymous', 'use-credentials']}
+            values={['on-demand', 'live', 'unknown']}
           />
+          <EnumRenderer
+            value={state.targetLiveWindow}
+            name="targetLiveWindow"
+            onChange={genericOnChange}
+            values={[Infinity, 0, NaN]}
+          />
+          {/* Props for UI component config */}
+          <TextRenderer value={state.title} name="title" onChange={genericOnChange} />
           <NumberRenderer
-            value={state.playbackRate}
-            name="playbackRate"
+            value={state.forwardSeekOffset}
+            name="forwardSeekOffset"
             onChange={genericOnChange}
-            min={0}
-            max={3}
-            step={0.25}
+            min={1}
+            max={99}
+          />
+          <NumberRenderer
+            value={state.backwardSeekOffset}
+            name="backwardSeekOffset"
+            onChange={genericOnChange}
+            min={1}
+            max={99}
           />
-          {/** @TODO Is this sufficient for a UI or do we want a "fancier" one that allows adding/removing dynamic items from a list (CJP) */}
           <EnumMultiSelectRenderer
             value={state.playbackRates}
             name="playbackRates"
@@ -542,6 +575,18 @@ function MuxPlayerPage({ location }: Props) {
             min={0}
             step={1}
           />
+          <BooleanRenderer
+            value={state.defaultShowRemainingTime}
+            name="defaultShowRemainingTime"
+            onChange={genericOnChange}
+          />
+          <TextRenderer
+            value={state.placeholder}
+            name="placeholder"
+            label="Placeholder Image"
+            onChange={genericOnChange}
+          />
+          {/* Props for color and custom styles (including hiding default components) */}
           <ColorRenderer value={state.primaryColor} name="primaryColor" onChange={genericOnChange} />
           <ColorRenderer value={state.secondaryColor} name="secondaryColor" onChange={genericOnChange} />
           <ColorRenderer value={state.accentColor} name="accentColor" onChange={genericOnChange} />
@@ -564,6 +609,8 @@ function MuxPlayerPage({ location }: Props) {
             label="Controls Backdrop Color"
             onChange={genericOnStyleChange}
           />
+          {/* Hotkeys props */}
+          <BooleanRenderer value={state.nohotkeys} name="nohotkeys" label="No Hot Keys" onChange={genericOnChange} />
           <EnumMultiSelectRenderer
             value={state.hotkeys?.split(' ')}
             name="hotkeys"
@@ -573,38 +620,8 @@ function MuxPlayerPage({ location }: Props) {
             }}
             values={['noc', 'nof', 'nok', 'nom', 'nospace', 'noarrowleft', 'noarrowright']}
           />
-          <EnumRenderer
-            value={state.maxResolution}
-            name="maxResolution"
-            onChange={genericOnChange}
-            values={MaxResolutionValues}
-          />
-          <EnumRenderer
-            value={state.minResolution}
-            name="minResolution"
-            onChange={genericOnChange}
-            values={MinResolutionValues}
-          />
-          <EnumRenderer
-            value={state.renditionOrder}
-            name="renditionOrder"
-            onChange={genericOnChange}
-            values={RenditionOrderValues}
-          />
-          <NumberRenderer
-            value={state.programStartTime}
-            name="programStartTime"
-            onChange={genericOnChange}
-            min={0}
-            step={1}
-          />
-          <NumberRenderer
-            value={state.programEndTime}
-            name="programEndTime"
-            onChange={genericOnChange}
-            min={0}
-            step={1}
-          />
+          {/* Debug (where to put?) */}
+          <BooleanRenderer value={state.debug} name="debug" onChange={genericOnChange} />
         </div>
       </main>
     </>
@@ -612,3 +629,14 @@ function MuxPlayerPage({ location }: Props) {
 }
 
 export default MuxPlayerPage;
+
+export async function getServerSideProps(context) {
+  // @ts-ignore
+  const { props: locationProps } = await getLocationServerSideProps(context);
+  return {
+    props: {
+      ...locationProps,
+      // hideDefaultLayout: true
+    }
+  };
+}