@wix/auto-patterns 1.54.0 → 1.56.0

package/dist/esm/components/fields/ImageInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FormField","ImageViewer","dashboard","useIsMobile","useSelector","useWixPatternsContainer","useController","getImageUrl","ImageInput","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","container","initTask","status","isMobile","openMedia","_chosenMediaItems$ite","chosenMediaItems","openMediaManager","multiSelect","category","newImage","items","media","image","controller","onChange","error","console","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","imageUrl","createElement","label","displayName","fieldState","statusMessage","message","onAddImage","onUpdateImage","updateImageInfo","removeImageInfo","addImageInfo","height","width","fit","onRemoveImage"],"sources":["../../../../src/components/fields/ImageInput.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, ImageViewer } from '@wix/design-system';\nimport { dashboard } from '@wix/dashboard';\nimport {\n  useIsMobile,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { getImageUrl } from '../../utils/media/getImageUrl';\nimport { BaseInputProps } from './types';\n\nexport interface ImageInputProps extends BaseInputProps<string> {}\n\nexport const ImageInput = (props: ImageInputProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n  const isMobile = useIsMobile();\n\n  async function openMedia() {\n    try {\n      const chosenMediaItems = await dashboard.openMediaManager({\n        multiSelect: false,\n        category: 'IMAGE',\n      });\n\n      const newImage = chosenMediaItems?.items[0]?.media?.image?.image;\n\n      controller.field.onChange(newImage);\n    } catch (error) {\n      console.error('Error opening Media Manager or no files selected:', error);\n    }\n  }\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  const imageUrl =\n    controller.field.value && getImageUrl(controller.field.value);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <ImageViewer\n        imageUrl={imageUrl}\n        dataHook={`image-${field.id}`}\n        onAddImage={isMobile ? undefined : () => openMedia()}\n        onUpdateImage={isMobile ? undefined : () => openMedia()}\n        updateImageInfo={t('cairo.replace-image.tooltip')}\n        removeImageInfo={t('cairo.remove-image.tooltip')}\n        addImageInfo={t('cairo.add-image.tooltip')}\n        height=\"120px\"\n        width=\"25%\"\n        fit=\"cover\"\n        onRemoveImage={() => controller.field.onChange(null)}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,WAAW,QAAQ,oBAAoB;AAC3D,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,SACEC,WAAW,EACXC,WAAW,EACXC,uBAAuB,QAClB,eAAe;AACtB,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,WAAW,QAAQ,+BAA+B;AAK3D,OAAO,MAAMC,UAAU,GAAIC,KAAsB,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EACpD,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEpD,MAAM;IAAEO,SAAS,EAAEC,CAAC;IAAE,GAAGC;EAAU,CAAC,GAAGb,uBAAuB,CAAC,CAAC;EAChED,WAAW,CAAC,MAAMc,SAAS,CAACC,QAAQ,CAACC,MAAM,CAAC;EAC5C,MAAMC,QAAQ,GAAGlB,WAAW,CAAC,CAAC;EAE9B,eAAemB,SAASA,CAAA,EAAG;IACzB,IAAI;MAAA,IAAAC,qBAAA;MACF,MAAMC,gBAAgB,GAAG,MAAMtB,SAAS,CAACuB,gBAAgB,CAAC;QACxDC,WAAW,EAAE,KAAK;QAClBC,QAAQ,EAAE;MACZ,CAAC,CAAC;MAEF,MAAMC,QAAQ,GAAGJ,gBAAgB,aAAAD,qBAAA,GAAhBC,gBAAgB,CAAEK,KAAK,CAAC,CAAC,CAAC,cAAAN,qBAAA,GAA1BA,qBAAA,CAA4BO,KAAK,cAAAP,qBAAA,GAAjCA,qBAAA,CAAmCQ,KAAK,qBAAxCR,qBAAA,CAA0CQ,KAAK;MAEhEC,UAAU,CAACpB,KAAK,CAACqB,QAAQ,CAACL,QAAQ,CAAC;IACrC,CAAC,CAAC,OAAOM,KAAK,EAAE;MACdC,OAAO,CAACD,KAAK,CAAC,mDAAmD,EAAEA,KAAK,CAAC;IAC3E;EACF;EAEA,MAAMF,UAAU,GAAG1B,aAAa,CAAC;IAC/B8B,IAAI,EAAE,CAAAxB,KAAK,oBAALA,KAAK,CAAEyB,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAExB,WAAW;IACpByB,YAAY,EAAExB,IAAI,oBAAJA,IAAI,CAAG,CAAAH,KAAK,oBAALA,KAAK,CAAEyB,EAAE,KAAI,EAAE,CAAC;IACrCG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IACE,CAAAA,iBAAA,GAAA/B,KAAK,CAACgC,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,KACzBH,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKI,SAAS,IAAIJ,KAAK,KAAK,EAAE,CAAC,EACvD;UACA,OAAOzB,CAAC,CAAC,qCAAqC,CAAC;QACjD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,MAAM8B,QAAQ,GACZf,UAAU,CAACpB,KAAK,CAAC8B,KAAK,IAAInC,WAAW,CAACyB,UAAU,CAACpB,KAAK,CAAC8B,KAAK,CAAC;EAE/D,oBACE3C,KAAA,CAAAiD,aAAA,CAAChD,SAAS;IACRiD,KAAK,EAAErC,KAAK,CAACsC,WAAY;IACzBL,QAAQ,GAAAnC,kBAAA,GAAEE,KAAK,CAACgC,UAAU,qBAAhBlC,kBAAA,CAAkBmC,QAAS;IACrCzB,MAAM,EAAEY,UAAU,CAACmB,UAAU,CAACjB,KAAK,GAAG,OAAO,GAAGY,SAAU;IAC1DM,aAAa,GAAAzC,qBAAA,GAAEqB,UAAU,CAACmB,UAAU,CAACjB,KAAK,qBAA3BvB,qBAAA,CAA6B0C,OAAQ;IACpDxC,QAAQ,EAAEA;EAAS,gBAEnBd,KAAA,CAAAiD,aAAA,CAAC/C,WAAW;IACV8C,QAAQ,EAAEA,QAAS;IACnBlC,QAAQ,EAAE,SAASD,KAAK,CAACyB,EAAE,EAAG;IAC9BiB,UAAU,EAAEjC,QAAQ,GAAGyB,SAAS,GAAG,MAAMxB,SAAS,CAAC,CAAE;IACrDiC,aAAa,EAAElC,QAAQ,GAAGyB,SAAS,GAAG,MAAMxB,SAAS,CAAC,CAAE;IACxDkC,eAAe,EAAEvC,CAAC,CAAC,6BAA6B,CAAE;IAClDwC,eAAe,EAAExC,CAAC,CAAC,4BAA4B,CAAE;IACjDyC,YAAY,EAAEzC,CAAC,CAAC,yBAAyB,CAAE;IAC3C0C,MAAM,EAAC,OAAO;IACdC,KAAK,EAAC,KAAK;IACXC,GAAG,EAAC,OAAO;IACXC,aAAa,EAAEA,CAAA,KAAM9B,UAAU,CAACpB,KAAK,CAACqB,QAAQ,CAAC,IAAI;EAAE,CACtD,CACQ,CAAC;AAEhB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Box","FormField","ImageViewer","dashboard","useIsMobile","useSelector","useWixPatternsContainer","useController","getImageUrl","MEDIA_HEIGHT","MEDIA_MAX_WIDTH","ImageInput","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","container","initTask","status","isMobile","openMedia","_chosenMediaItems$ite","chosenMediaItems","openMediaManager","multiSelect","category","newImage","items","media","image","controller","onChange","error","console","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","imageUrl","createElement","label","displayName","fieldState","statusMessage","message","width","maxWidth","onAddImage","onUpdateImage","updateImageInfo","removeImageInfo","addImageInfo","height","fit","onRemoveImage"],"sources":["../../../../src/components/fields/ImageInput.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, FormField, ImageViewer } from '@wix/design-system';\nimport { dashboard } from '@wix/dashboard';\nimport {\n  useIsMobile,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { getImageUrl } from '../../utils/media/getImageUrl';\nimport { BaseInputProps } from './types';\nimport { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from './mediaConstants';\n\nexport interface ImageInputProps extends BaseInputProps<string> {}\n\nexport const ImageInput = (props: ImageInputProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n  const isMobile = useIsMobile();\n\n  async function openMedia() {\n    try {\n      const chosenMediaItems = await dashboard.openMediaManager({\n        multiSelect: false,\n        category: 'IMAGE',\n      });\n\n      const newImage = chosenMediaItems?.items[0]?.media?.image?.image;\n\n      controller.field.onChange(newImage);\n    } catch (error) {\n      console.error('Error opening Media Manager or no files selected:', error);\n    }\n  }\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  const imageUrl =\n    controller.field.value && getImageUrl(controller.field.value);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <Box width=\"100%\" maxWidth={MEDIA_MAX_WIDTH}>\n        <ImageViewer\n          imageUrl={imageUrl}\n          dataHook={`image-${field.id}`}\n          onAddImage={isMobile ? undefined : () => openMedia()}\n          onUpdateImage={isMobile ? undefined : () => openMedia()}\n          updateImageInfo={t('cairo.replace-image.tooltip')}\n          removeImageInfo={t('cairo.remove-image.tooltip')}\n          addImageInfo={t('cairo.add-image.tooltip')}\n          height={MEDIA_HEIGHT}\n          width=\"100%\"\n          fit=\"cover\"\n          onRemoveImage={() => controller.field.onChange(null)}\n        />\n      </Box>\n    </FormField>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAEC,SAAS,EAAEC,WAAW,QAAQ,oBAAoB;AAChE,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,SACEC,WAAW,EACXC,WAAW,EACXC,uBAAuB,QAClB,eAAe;AACtB,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,WAAW,QAAQ,+BAA+B;AAE3D,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAIhE,OAAO,MAAMC,UAAU,GAAIC,KAAsB,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EACpD,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEpD,MAAM;IAAEO,SAAS,EAAEC,CAAC;IAAE,GAAGC;EAAU,CAAC,GAAGf,uBAAuB,CAAC,CAAC;EAChED,WAAW,CAAC,MAAMgB,SAAS,CAACC,QAAQ,CAACC,MAAM,CAAC;EAC5C,MAAMC,QAAQ,GAAGpB,WAAW,CAAC,CAAC;EAE9B,eAAeqB,SAASA,CAAA,EAAG;IACzB,IAAI;MAAA,IAAAC,qBAAA;MACF,MAAMC,gBAAgB,GAAG,MAAMxB,SAAS,CAACyB,gBAAgB,CAAC;QACxDC,WAAW,EAAE,KAAK;QAClBC,QAAQ,EAAE;MACZ,CAAC,CAAC;MAEF,MAAMC,QAAQ,GAAGJ,gBAAgB,aAAAD,qBAAA,GAAhBC,gBAAgB,CAAEK,KAAK,CAAC,CAAC,CAAC,cAAAN,qBAAA,GAA1BA,qBAAA,CAA4BO,KAAK,cAAAP,qBAAA,GAAjCA,qBAAA,CAAmCQ,KAAK,qBAAxCR,qBAAA,CAA0CQ,KAAK;MAEhEC,UAAU,CAACpB,KAAK,CAACqB,QAAQ,CAACL,QAAQ,CAAC;IACrC,CAAC,CAAC,OAAOM,KAAK,EAAE;MACdC,OAAO,CAACD,KAAK,CAAC,mDAAmD,EAAEA,KAAK,CAAC;IAC3E;EACF;EAEA,MAAMF,UAAU,GAAG5B,aAAa,CAAC;IAC/BgC,IAAI,EAAE,CAAAxB,KAAK,oBAALA,KAAK,CAAEyB,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAExB,WAAW;IACpByB,YAAY,EAAExB,IAAI,oBAAJA,IAAI,CAAG,CAAAH,KAAK,oBAALA,KAAK,CAAEyB,EAAE,KAAI,EAAE,CAAC;IACrCG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IACE,CAAAA,iBAAA,GAAA/B,KAAK,CAACgC,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,KACzBH,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKI,SAAS,IAAIJ,KAAK,KAAK,EAAE,CAAC,EACvD;UACA,OAAOzB,CAAC,CAAC,qCAAqC,CAAC;QACjD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,MAAM8B,QAAQ,GACZf,UAAU,CAACpB,KAAK,CAAC8B,KAAK,IAAIrC,WAAW,CAAC2B,UAAU,CAACpB,KAAK,CAAC8B,KAAK,CAAC;EAE/D,oBACE9C,KAAA,CAAAoD,aAAA,CAAClD,SAAS;IACRmD,KAAK,EAAErC,KAAK,CAACsC,WAAY;IACzBL,QAAQ,GAAAnC,kBAAA,GAAEE,KAAK,CAACgC,UAAU,qBAAhBlC,kBAAA,CAAkBmC,QAAS;IACrCzB,MAAM,EAAEY,UAAU,CAACmB,UAAU,CAACjB,KAAK,GAAG,OAAO,GAAGY,SAAU;IAC1DM,aAAa,GAAAzC,qBAAA,GAAEqB,UAAU,CAACmB,UAAU,CAACjB,KAAK,qBAA3BvB,qBAAA,CAA6B0C,OAAQ;IACpDxC,QAAQ,EAAEA;EAAS,gBAEnBjB,KAAA,CAAAoD,aAAA,CAACnD,GAAG;IAACyD,KAAK,EAAC,MAAM;IAACC,QAAQ,EAAEhD;EAAgB,gBAC1CX,KAAA,CAAAoD,aAAA,CAACjD,WAAW;IACVgD,QAAQ,EAAEA,QAAS;IACnBlC,QAAQ,EAAE,SAASD,KAAK,CAACyB,EAAE,EAAG;IAC9BmB,UAAU,EAAEnC,QAAQ,GAAGyB,SAAS,GAAG,MAAMxB,SAAS,CAAC,CAAE;IACrDmC,aAAa,EAAEpC,QAAQ,GAAGyB,SAAS,GAAG,MAAMxB,SAAS,CAAC,CAAE;IACxDoC,eAAe,EAAEzC,CAAC,CAAC,6BAA6B,CAAE;IAClD0C,eAAe,EAAE1C,CAAC,CAAC,4BAA4B,CAAE;IACjD2C,YAAY,EAAE3C,CAAC,CAAC,yBAAyB,CAAE;IAC3C4C,MAAM,EAAEvD,YAAa;IACrBgD,KAAK,EAAC,MAAM;IACZQ,GAAG,EAAC,OAAO;IACXC,aAAa,EAAEA,CAAA,KAAM/B,UAAU,CAACpB,KAAK,CAACqB,QAAQ,CAAC,IAAI;EAAE,CACtD,CACE,CACI,CAAC;AAEhB,CAAC","ignoreList":[]}

package/dist/esm/components/fields/ImageViewField.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Box, Text } from '@wix/design-system';
+import { getImageUrl } from '../../utils/media/getImageUrl';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH, MEDIA_BORDER_RADIUS } from './mediaConstants';
+export const ImageViewField = _ref => {
+  let {
+    value,
+    displayName,
+    id
+  } = _ref;
+  const imageValue = typeof value === 'string' ? value : undefined;
+  const imageUrl = getImageUrl(imageValue);
+  if (!imageUrl) {
+    return /*#__PURE__*/React.createElement(Text, null, "-");
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    height: MEDIA_HEIGHT,
+    width: "100%",
+    maxWidth: MEDIA_MAX_WIDTH,
+    borderRadius: MEDIA_BORDER_RADIUS,
+    overflow: "hidden"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: imageUrl,
+    alt: displayName || id,
+    style: {
+      height: '100%',
+      width: '100%',
+      objectFit: 'cover',
+      display: 'block'
+    }
+  }));
+};
+//# sourceMappingURL=ImageViewField.js.map

package/dist/esm/components/fields/ImageViewField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","Text","getImageUrl","MEDIA_HEIGHT","MEDIA_MAX_WIDTH","MEDIA_BORDER_RADIUS","ImageViewField","_ref","value","displayName","id","imageValue","undefined","imageUrl","createElement","height","width","maxWidth","borderRadius","overflow","src","alt","style","objectFit","display"],"sources":["../../../../src/components/fields/ImageViewField.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Text } from '@wix/design-system';\nimport { getImageUrl } from '../../utils/media/getImageUrl';\nimport {\n  MEDIA_HEIGHT,\n  MEDIA_MAX_WIDTH,\n  MEDIA_BORDER_RADIUS,\n} from './mediaConstants';\n\nexport interface ImageViewFieldProps {\n  value: unknown;\n  displayName: string;\n  id: string;\n}\n\nexport const ImageViewField: React.FC<ImageViewFieldProps> = ({\n  value,\n  displayName,\n  id,\n}) => {\n  const imageValue = typeof value === 'string' ? value : undefined;\n  const imageUrl = getImageUrl(imageValue);\n\n  if (!imageUrl) {\n    return <Text>-</Text>;\n  }\n\n  return (\n    <Box\n      height={MEDIA_HEIGHT}\n      width=\"100%\"\n      maxWidth={MEDIA_MAX_WIDTH}\n      borderRadius={MEDIA_BORDER_RADIUS}\n      overflow=\"hidden\"\n    >\n      <img\n        src={imageUrl}\n        alt={displayName || id}\n        style={{\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n          display: 'block',\n        }}\n      />\n    </Box>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAEC,IAAI,QAAQ,oBAAoB;AAC9C,SAASC,WAAW,QAAQ,+BAA+B;AAC3D,SACEC,YAAY,EACZC,eAAe,EACfC,mBAAmB,QACd,kBAAkB;AAQzB,OAAO,MAAMC,cAA6C,GAAGC,IAAA,IAIvD;EAAA,IAJwD;IAC5DC,KAAK;IACLC,WAAW;IACXC;EACF,CAAC,GAAAH,IAAA;EACC,MAAMI,UAAU,GAAG,OAAOH,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGI,SAAS;EAChE,MAAMC,QAAQ,GAAGX,WAAW,CAACS,UAAU,CAAC;EAExC,IAAI,CAACE,QAAQ,EAAE;IACb,oBAAOd,KAAA,CAAAe,aAAA,CAACb,IAAI,QAAC,GAAO,CAAC;EACvB;EAEA,oBACEF,KAAA,CAAAe,aAAA,CAACd,GAAG;IACFe,MAAM,EAAEZ,YAAa;IACrBa,KAAK,EAAC,MAAM;IACZC,QAAQ,EAAEb,eAAgB;IAC1Bc,YAAY,EAAEb,mBAAoB;IAClCc,QAAQ,EAAC;EAAQ,gBAEjBpB,KAAA,CAAAe,aAAA;IACEM,GAAG,EAAEP,QAAS;IACdQ,GAAG,EAAEZ,WAAW,IAAIC,EAAG;IACvBY,KAAK,EAAE;MACLP,MAAM,EAAE,MAAM;MACdC,KAAK,EAAE,MAAM;MACbO,SAAS,EAAE,OAAO;MAClBC,OAAO,EAAE;IACX;EAAE,CACH,CACE,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/components/fields/Video.js

@@ -0,0 +1,189 @@
+import React from 'react';
+import { FormField, ImageViewer, Modal, CustomModalLayout, MediaOverlay, Box, Tooltip, IconButton, PopoverMenu, Image } from '@wix/design-system';
+import { Replace, More, Download, Delete, Maximize } from '@wix/wix-ui-icons-common';
+import { dashboard } from '@wix/dashboard';
+import { useIsMobile, useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from './mediaConstants';
+import { useVideoPreview } from './useVideoPreview';
+import { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';
+import { isDataValidOrNotSet } from '../../cms-fields/validations/validations';
+import { TypeMismatchExclamation } from '../../cms-fields';
+import * as videoValidation from '../../cms-fields/validations/video';
+
+/** Media descriptor from Wix Media Manager for video files */
+
+/** Media item returned from openMediaManager for video category */
+
+export const Video = props => {
+  var _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: t
+  } = useAutoPatternsAppContainer();
+  const {
+    translate: pt,
+    ...container
+  } = useWixPatternsContainer();
+  useSelector(() => container.initTask.status);
+  const isMobile = useIsMobile();
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: formControl,
+    defaultValue: data == null ? void 0 : data[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && (value === null || value === undefined || value === '')) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  async function openMedia() {
+    try {
+      var _chosenMediaItems$ite, _mediaItem$media;
+      const chosenMediaItems = await dashboard.openMediaManager({
+        multiSelect: false,
+        category: 'VIDEO'
+      });
+      const mediaItem = chosenMediaItems == null || (_chosenMediaItems$ite = chosenMediaItems.items) == null ? void 0 : _chosenMediaItems$ite[0];
+      const newVideo = mediaItem == null || (_mediaItem$media = mediaItem.media) == null ? void 0 : _mediaItem$media.video;
+      if (newVideo) {
+        controller.field.onChange(newVideo);
+      }
+    } catch (error) {
+      console.error('Error opening Media Manager or no files selected:', error);
+    }
+  }
+  const {
+    videoUrl,
+    posterUrl: imageUrl,
+    isPreviewOpen,
+    openPreview: handlePreview,
+    closePreview: handleClosePreview,
+    handleDownload
+  } = useVideoPreview({
+    videoUri: controller.field.value
+  });
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook,
+    suffix: isDataValidOrNotSet(controller.field.value, videoValidation) ? undefined : /*#__PURE__*/React.createElement(TypeMismatchExclamation, {
+      typeName: t('auto-patterns.fields.field_type_video_title'),
+      clearButtonText: t('auto-patterns.fields.type_mismatch_clear'),
+      convertButtonText: t('auto-patterns.fields.type_mismatch_convert'),
+      onClear: () => controller.field.onChange(undefined),
+      onChange: value => controller.field.onChange(value),
+      convertDisabledText: t('auto-patterns.fields.type_mismatch_convert_disabled'),
+      fieldName: field.displayName,
+      isConverted: false,
+      isConverting: false,
+      convertedValue: null,
+      tooltipText: t('auto-patterns.fields.type_mismatch_tip', {
+        typeName: 'Video'
+      })
+    })
+  }, controller.field.value ? /*#__PURE__*/React.createElement(Box, {
+    width: "100%",
+    maxWidth: MEDIA_MAX_WIDTH,
+    height: MEDIA_HEIGHT
+  }, /*#__PURE__*/React.createElement(MediaOverlay, {
+    dataHook: `video-${field.id}`,
+    hoverSkin: "dark",
+    media: /*#__PURE__*/React.createElement(Image, {
+      src: imageUrl,
+      width: "100%",
+      height: MEDIA_HEIGHT,
+      fit: "cover"
+    })
+  }, /*#__PURE__*/React.createElement(MediaOverlay.Content, {
+    placement: "middle",
+    visible: "hover"
+  }, /*#__PURE__*/React.createElement(Box, {
+    gap: "SP2"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: t('auto-patterns.fields.replace_video_tooltip')
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: () => openMedia(),
+    skin: "light",
+    priority: "secondary",
+    disabled: isMobile,
+    ariaLabel: t('auto-patterns.fields.replace_video_tooltip'),
+    dataHook: `video-replace-${field.id}`
+  }, /*#__PURE__*/React.createElement(Replace, null))), /*#__PURE__*/React.createElement(PopoverMenu, {
+    triggerElement: _ref => {
+      let {
+        toggle
+      } = _ref;
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        content: t('auto-patterns.fields.more_actions_tooltip')
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        priority: "secondary",
+        onClick: toggle,
+        skin: "light",
+        ariaLabel: t('auto-patterns.fields.more_actions_tooltip'),
+        dataHook: `video-more-${field.id}`
+      }, /*#__PURE__*/React.createElement(More, null)));
+    }
+  }, /*#__PURE__*/React.createElement(PopoverMenu.MenuItem, {
+    prefixIcon: /*#__PURE__*/React.createElement(Maximize, null),
+    text: t('auto-patterns.fields.preview_video'),
+    onClick: handlePreview,
+    disabled: !videoUrl,
+    dataHook: `video-preview-${field.id}`
+  }), /*#__PURE__*/React.createElement(PopoverMenu.MenuItem, {
+    prefixIcon: /*#__PURE__*/React.createElement(Download, null),
+    text: t('auto-patterns.fields.download_video'),
+    onClick: handleDownload,
+    dataHook: `video-download-${field.id}`
+  }), /*#__PURE__*/React.createElement(PopoverMenu.Divider, null), /*#__PURE__*/React.createElement(PopoverMenu.MenuItem, {
+    prefixIcon: /*#__PURE__*/React.createElement(Delete, null),
+    text: t('auto-patterns.fields.remove_video'),
+    onClick: () => controller.field.onChange(null),
+    dataHook: `video-delete-${field.id}`
+  })))))) : /*#__PURE__*/React.createElement(Box, {
+    width: "100%",
+    maxWidth: MEDIA_MAX_WIDTH
+  }, /*#__PURE__*/React.createElement(ImageViewer, {
+    dataHook: `video-${field.id}`,
+    onAddImage: isMobile ? undefined : () => openMedia(),
+    addImageInfo: t('auto-patterns.fields.add_video_tooltip'),
+    height: MEDIA_HEIGHT,
+    width: "100%"
+  })), isPreviewOpen && /*#__PURE__*/React.createElement(Modal, {
+    isOpen: isPreviewOpen,
+    onRequestClose: handleClosePreview
+  }, /*#__PURE__*/React.createElement(CustomModalLayout, {
+    title: field.displayName,
+    onCloseButtonClick: handleClosePreview,
+    content: /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '24px'
+      }
+    }, /*#__PURE__*/React.createElement("video", {
+      controls: true,
+      autoPlay: true,
+      style: {
+        maxWidth: '100%',
+        maxHeight: '70vh'
+      },
+      poster: imageUrl
+    }, videoUrl && /*#__PURE__*/React.createElement("source", {
+      src: videoUrl,
+      type: "video/mp4"
+    }), "Your browser does not support the video tag."))
+  })));
+};
+//# sourceMappingURL=Video.js.map

package/dist/esm/components/fields/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","ImageViewer","Modal","CustomModalLayout","MediaOverlay","Box","Tooltip","IconButton","PopoverMenu","Image","Replace","More","Download","Delete","Maximize","dashboard","useIsMobile","useSelector","useWixPatternsContainer","useController","MEDIA_HEIGHT","MEDIA_MAX_WIDTH","useVideoPreview","useAutoPatternsAppContainer","isDataValidOrNotSet","TypeMismatchExclamation","videoValidation","Video","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","pt","container","initTask","status","isMobile","controller","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","openMedia","_chosenMediaItems$ite","_mediaItem$media","chosenMediaItems","openMediaManager","multiSelect","category","mediaItem","items","newVideo","media","video","onChange","error","console","videoUrl","posterUrl","imageUrl","isPreviewOpen","openPreview","handlePreview","closePreview","handleClosePreview","handleDownload","videoUri","createElement","label","displayName","fieldState","statusMessage","message","suffix","typeName","clearButtonText","convertButtonText","onClear","convertDisabledText","fieldName","isConverted","isConverting","convertedValue","tooltipText","width","maxWidth","height","hoverSkin","src","fit","Content","placement","visible","gap","content","onClick","skin","priority","disabled","ariaLabel","triggerElement","_ref","toggle","MenuItem","prefixIcon","text","Divider","onAddImage","addImageInfo","isOpen","onRequestClose","title","onCloseButtonClick","style","display","justifyContent","padding","controls","autoPlay","maxHeight","poster","type"],"sources":["../../../../src/components/fields/Video.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  FormField,\n  ImageViewer,\n  Modal,\n  CustomModalLayout,\n  MediaOverlay,\n  Box,\n  Tooltip,\n  IconButton,\n  PopoverMenu,\n  Image,\n} from '@wix/design-system';\nimport {\n  Replace,\n  More,\n  Download,\n  Delete,\n  Maximize,\n} from '@wix/wix-ui-icons-common';\nimport { dashboard } from '@wix/dashboard';\nimport {\n  useIsMobile,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { BaseInputProps } from './types';\nimport { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from './mediaConstants';\nimport { useVideoPreview } from './useVideoPreview';\nimport { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';\nimport { isDataValidOrNotSet } from '../../cms-fields/validations/validations';\nimport { TypeMismatchExclamation } from '../../cms-fields';\nimport * as videoValidation from '../../cms-fields/validations/video';\n\n/** Media descriptor from Wix Media Manager for video files */\ninterface VideoMediaDescriptor {\n  video?: string;\n}\n\n/** Media item returned from openMediaManager for video category */\ninterface MediaManagerVideoItem {\n  _id?: string;\n  displayName?: string;\n  mediaType?: string;\n  media?: VideoMediaDescriptor;\n}\n\nexport interface VideoProps extends BaseInputProps<string> {}\n\nexport const Video = (props: VideoProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t } = useAutoPatternsAppContainer();\n  const { translate: pt, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n  const isMobile = useIsMobile();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return pt('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  async function openMedia() {\n    try {\n      const chosenMediaItems = await dashboard.openMediaManager({\n        multiSelect: false,\n        category: 'VIDEO',\n      });\n\n      const mediaItem = chosenMediaItems?.items?.[0] as MediaManagerVideoItem | undefined;\n      const newVideo = mediaItem?.media?.video;\n      if (newVideo) {\n        controller.field.onChange(newVideo);\n      }\n    } catch (error) {\n      console.error('Error opening Media Manager or no files selected:', error);\n    }\n  }\n\n  const {\n    videoUrl,\n    posterUrl: imageUrl,\n    isPreviewOpen,\n    openPreview: handlePreview,\n    closePreview: handleClosePreview,\n    handleDownload,\n  } = useVideoPreview({ videoUri: controller.field.value });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n      suffix={\n        isDataValidOrNotSet(\n          controller.field.value,\n          videoValidation,\n        ) ? undefined : (\n          <TypeMismatchExclamation\n            typeName={t('auto-patterns.fields.field_type_video_title')}\n            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}\n            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}\n            onClear={() => controller.field.onChange(undefined)}\n            onChange={(value) => controller.field.onChange(value)}\n            convertDisabledText={t(\n              'auto-patterns.fields.type_mismatch_convert_disabled',\n            )}\n            fieldName={field.displayName}\n            isConverted={false}\n            isConverting={false}\n            convertedValue={null}\n            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {\n              typeName: 'Video',\n            })}\n          />\n        )\n      }\n    >\n      {controller.field.value ? (\n        <Box width=\"100%\" maxWidth={MEDIA_MAX_WIDTH} height={MEDIA_HEIGHT}>\n          <MediaOverlay\n            dataHook={`video-${field.id}`}\n            hoverSkin=\"dark\"\n            media={\n              <Image\n                src={imageUrl}\n                width=\"100%\"\n                height={MEDIA_HEIGHT}\n                fit=\"cover\"\n              />\n            }\n          >\n            <MediaOverlay.Content placement=\"middle\" visible=\"hover\">\n              <Box gap=\"SP2\">\n                <Tooltip content={t('auto-patterns.fields.replace_video_tooltip')}>\n                  <IconButton\n                    onClick={() => openMedia()}\n                    skin=\"light\"\n                    priority=\"secondary\"\n                    disabled={isMobile}\n                    ariaLabel={t('auto-patterns.fields.replace_video_tooltip')}\n                    dataHook={`video-replace-${field.id}`}\n                  >\n                    <Replace />\n                  </IconButton>\n                </Tooltip>\n                <PopoverMenu\n                  triggerElement={({ toggle }) => (\n                    <Tooltip content={t('auto-patterns.fields.more_actions_tooltip')}>\n                      <IconButton\n                        priority=\"secondary\"\n                        onClick={toggle}\n                        skin=\"light\"\n                        ariaLabel={t('auto-patterns.fields.more_actions_tooltip')}\n                        dataHook={`video-more-${field.id}`}\n                      >\n                        <More />\n                      </IconButton>\n                    </Tooltip>\n                  )}\n                >\n                  <PopoverMenu.MenuItem\n                    prefixIcon={<Maximize />}\n                    text={t('auto-patterns.fields.preview_video')}\n                    onClick={handlePreview}\n                    disabled={!videoUrl}\n                    dataHook={`video-preview-${field.id}`}\n                  />\n                  <PopoverMenu.MenuItem\n                    prefixIcon={<Download />}\n                    text={t('auto-patterns.fields.download_video')}\n                    onClick={handleDownload}\n                    dataHook={`video-download-${field.id}`}\n                  />\n                  <PopoverMenu.Divider />\n                  <PopoverMenu.MenuItem\n                    prefixIcon={<Delete />}\n                    text={t('auto-patterns.fields.remove_video')}\n                    onClick={() => controller.field.onChange(null)}\n                    dataHook={`video-delete-${field.id}`}\n                  />\n                </PopoverMenu>\n              </Box>\n            </MediaOverlay.Content>\n          </MediaOverlay>\n        </Box>\n      ) : (\n        <Box width=\"100%\" maxWidth={MEDIA_MAX_WIDTH}>\n          <ImageViewer\n            dataHook={`video-${field.id}`}\n            onAddImage={isMobile ? undefined : () => openMedia()}\n            addImageInfo={t('auto-patterns.fields.add_video_tooltip')}\n            height={MEDIA_HEIGHT}\n            width=\"100%\"\n          />\n        </Box>\n      )}\n      {isPreviewOpen && (\n        <Modal isOpen={isPreviewOpen} onRequestClose={handleClosePreview}>\n          <CustomModalLayout\n            title={field.displayName}\n            onCloseButtonClick={handleClosePreview}\n            content={\n              <div\n                style={{\n                  display: 'flex',\n                  justifyContent: 'center',\n                  padding: '24px',\n                }}\n              >\n                <video\n                  controls\n                  autoPlay\n                  style={{ maxWidth: '100%', maxHeight: '70vh' }}\n                  poster={imageUrl}\n                >\n                  {videoUrl && <source src={videoUrl} type=\"video/mp4\" />}\n                  Your browser does not support the video tag.\n                </video>\n              </div>\n            }\n          />\n        </Modal>\n      )}\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/VideoViewField.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Box, CustomModalLayout, IconButton, MediaOverlay, Modal, Text, Tooltip } from '@wix/design-system';
+import { Download, Maximize } from '@wix/wix-ui-icons-common';
+import { VideoView } from '../../cms-fields';
+import { useVideoPreview } from './useVideoPreview';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH, MEDIA_BORDER_RADIUS } from './mediaConstants';
+import { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';
+export const VideoViewField = _ref => {
+  let {
+    value,
+    displayName,
+    id
+  } = _ref;
+  const {
+    translate: t
+  } = useAutoPatternsAppContainer();
+  const videoUri = typeof value === 'string' ? value : undefined;
+  const {
+    videoUrl,
+    posterUrl,
+    isPreviewOpen,
+    openPreview,
+    closePreview,
+    handleDownload
+  } = useVideoPreview({
+    videoUri
+  });
+  if (value === null || value === undefined) {
+    return /*#__PURE__*/React.createElement(Text, null, "-");
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    height: MEDIA_HEIGHT,
+    width: "100%",
+    maxWidth: MEDIA_MAX_WIDTH,
+    borderRadius: MEDIA_BORDER_RADIUS,
+    overflow: "hidden"
+  }, /*#__PURE__*/React.createElement(MediaOverlay, {
+    hoverSkin: "dark",
+    media: /*#__PURE__*/React.createElement(VideoView, {
+      data: videoUri,
+      height: "100%",
+      width: "100%",
+      borderRadius: MEDIA_BORDER_RADIUS
+    })
+  }, /*#__PURE__*/React.createElement(MediaOverlay.Content, {
+    placement: "middle",
+    visible: "hover"
+  }, /*#__PURE__*/React.createElement(Box, {
+    gap: "12px"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: t('auto-patterns.fields.preview_video')
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    priority: "secondary",
+    skin: "light",
+    ariaLabel: t('auto-patterns.fields.preview_video'),
+    dataHook: `view-video-preview-${id}`,
+    onClick: openPreview,
+    disabled: !videoUrl
+  }, /*#__PURE__*/React.createElement(Maximize, null))), /*#__PURE__*/React.createElement(Tooltip, {
+    content: t('auto-patterns.fields.download_video')
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    priority: "secondary",
+    skin: "light",
+    ariaLabel: t('auto-patterns.fields.download_video'),
+    dataHook: `view-video-download-${id}`,
+    onClick: handleDownload,
+    disabled: !videoUrl
+  }, /*#__PURE__*/React.createElement(Download, null))))))), isPreviewOpen && /*#__PURE__*/React.createElement(Modal, {
+    isOpen: isPreviewOpen,
+    onRequestClose: closePreview
+  }, /*#__PURE__*/React.createElement(CustomModalLayout, {
+    title: displayName || id,
+    onCloseButtonClick: closePreview,
+    content: /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '24px'
+      }
+    }, /*#__PURE__*/React.createElement("video", {
+      controls: true,
+      autoPlay: true,
+      style: {
+        maxWidth: '100%',
+        maxHeight: '70vh'
+      },
+      poster: posterUrl
+    }, videoUrl && /*#__PURE__*/React.createElement("source", {
+      src: videoUrl,
+      type: "video/mp4"
+    }), "Your browser does not support the video tag."))
+  })));
+};
+//# sourceMappingURL=VideoViewField.js.map

package/dist/esm/components/fields/VideoViewField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","CustomModalLayout","IconButton","MediaOverlay","Modal","Text","Tooltip","Download","Maximize","VideoView","useVideoPreview","MEDIA_HEIGHT","MEDIA_MAX_WIDTH","MEDIA_BORDER_RADIUS","useAutoPatternsAppContainer","VideoViewField","_ref","value","displayName","id","translate","t","videoUri","undefined","videoUrl","posterUrl","isPreviewOpen","openPreview","closePreview","handleDownload","createElement","Fragment","height","width","maxWidth","borderRadius","overflow","hoverSkin","media","data","Content","placement","visible","gap","content","priority","skin","ariaLabel","dataHook","onClick","disabled","isOpen","onRequestClose","title","onCloseButtonClick","style","display","justifyContent","padding","controls","autoPlay","maxHeight","poster","src","type"],"sources":["../../../../src/components/fields/VideoViewField.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Box,\n  CustomModalLayout,\n  IconButton,\n  MediaOverlay,\n  Modal,\n  Text,\n  Tooltip,\n} from '@wix/design-system';\nimport { Download, Maximize } from '@wix/wix-ui-icons-common';\nimport { VideoView } from '../../cms-fields';\nimport { useVideoPreview } from './useVideoPreview';\nimport { MEDIA_HEIGHT, MEDIA_MAX_WIDTH, MEDIA_BORDER_RADIUS } from './mediaConstants';\nimport { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';\n\nexport interface VideoViewFieldProps {\n  value: unknown;\n  displayName: string;\n  id: string;\n}\n\nexport const VideoViewField: React.FC<VideoViewFieldProps> = ({\n  value,\n  displayName,\n  id,\n}) => {\n  const { translate: t } = useAutoPatternsAppContainer();\n  const videoUri = typeof value === 'string' ? value : undefined;\n\n  const {\n    videoUrl,\n    posterUrl,\n    isPreviewOpen,\n    openPreview,\n    closePreview,\n    handleDownload,\n  } = useVideoPreview({ videoUri });\n\n  if (value === null || value === undefined) {\n    return <Text>-</Text>;\n  }\n\n  return (\n    <>\n      <Box\n        height={MEDIA_HEIGHT}\n        width=\"100%\"\n        maxWidth={MEDIA_MAX_WIDTH}\n        borderRadius={MEDIA_BORDER_RADIUS}\n        overflow=\"hidden\"\n      >\n        <MediaOverlay\n          hoverSkin=\"dark\"\n          media={\n            <VideoView\n              data={videoUri}\n              height=\"100%\"\n              width=\"100%\"\n              borderRadius={MEDIA_BORDER_RADIUS}\n            />\n          }\n        >\n          <MediaOverlay.Content placement=\"middle\" visible=\"hover\">\n            <Box gap=\"12px\">\n              <Tooltip content={t('auto-patterns.fields.preview_video')}>\n                <IconButton\n                  priority=\"secondary\"\n                  skin=\"light\"\n                  ariaLabel={t('auto-patterns.fields.preview_video')}\n                  dataHook={`view-video-preview-${id}`}\n                  onClick={openPreview}\n                  disabled={!videoUrl}\n                >\n                  <Maximize />\n                </IconButton>\n              </Tooltip>\n              <Tooltip content={t('auto-patterns.fields.download_video')}>\n                <IconButton\n                  priority=\"secondary\"\n                  skin=\"light\"\n                  ariaLabel={t('auto-patterns.fields.download_video')}\n                  dataHook={`view-video-download-${id}`}\n                  onClick={handleDownload}\n                  disabled={!videoUrl}\n                >\n                  <Download />\n                </IconButton>\n              </Tooltip>\n            </Box>\n          </MediaOverlay.Content>\n        </MediaOverlay>\n      </Box>\n      {isPreviewOpen && (\n        <Modal isOpen={isPreviewOpen} onRequestClose={closePreview}>\n          <CustomModalLayout\n            title={displayName || id}\n            onCloseButtonClick={closePreview}\n            content={\n              <div\n                style={{\n                  display: 'flex',\n                  justifyContent: 'center',\n                  padding: '24px',\n                }}\n              >\n                <video\n                  controls\n                  autoPlay\n                  style={{ maxWidth: '100%', maxHeight: '70vh' }}\n                  poster={posterUrl}\n                >\n                  {videoUrl && <source src={videoUrl} type=\"video/mp4\" />}\n                  Your browser does not support the video tag.\n                </video>\n              </div>\n            }\n          />\n        </Modal>\n      )}\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/index.js

@@ -18,6 +18,10 @@ export { Object } from './Object';
 export { Address } from './Address';
 export { RichContent } from './RichContent';
 export { RichText } from './RichText';
+export { Video } from './Video';
 export { MediaGallery } from './MediaGallery';
+export { ImageViewField } from './ImageViewField';
+export { VideoViewField } from './VideoViewField';
+export { Array } from './Array';
 export * from './types';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/fields/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Audio","Checkbox","Color","Email","DateInput","DateTime","Document","MultiDocument","ImageInput","LongText","Number","Reference","MultiReference","ShortText","Time","Url","Object","Address","RichContent","RichText","MediaGallery"],"sources":["../../../../src/components/fields/index.ts"],"sourcesContent":["export { Audio } from './Audio';\nexport { Checkbox } from './Checkbox';\nexport { Color } from './Color';\nexport { Email } from './Email';\nexport { DateInput } from './DateInput';\nexport { DateTime } from './DateTime';\nexport { Document } from './Document';\nexport { MultiDocument } from './MultiDocument';\nexport { ImageInput } from './ImageInput';\nexport { LongText } from './LongText';\nexport { Number } from './Number';\nexport { Reference } from './Reference';\nexport { MultiReference } from './MultiReference';\nexport { ShortText } from './ShortText';\nexport { Time } from './Time';\nexport { Url } from './Url';\nexport { Object } from './Object';\nexport { Address } from './Address';\nexport { RichContent } from './RichContent';\nexport { RichText } from './RichText';\nexport { MediaGallery } from './MediaGallery';\nexport * from './types';\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,SAAS;AAC/B,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,GAAG,QAAQ,OAAO;AAC3B,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,cAAc,SAAS","ignoreList":[]}
+{"version":3,"names":["Audio","Checkbox","Color","Email","DateInput","DateTime","Document","MultiDocument","ImageInput","LongText","Number","Reference","MultiReference","ShortText","Time","Url","Object","Address","RichContent","RichText","Video","MediaGallery","ImageViewField","VideoViewField","Array"],"sources":["../../../../src/components/fields/index.ts"],"sourcesContent":["export { Audio } from './Audio';\nexport { Checkbox } from './Checkbox';\nexport { Color } from './Color';\nexport { Email } from './Email';\nexport { DateInput } from './DateInput';\nexport { DateTime } from './DateTime';\nexport { Document } from './Document';\nexport { MultiDocument } from './MultiDocument';\nexport { ImageInput } from './ImageInput';\nexport { LongText } from './LongText';\nexport { Number } from './Number';\nexport { Reference } from './Reference';\nexport { MultiReference } from './MultiReference';\nexport { ShortText } from './ShortText';\nexport { Time } from './Time';\nexport { Url } from './Url';\nexport { Object } from './Object';\nexport { Address } from './Address';\nexport { RichContent } from './RichContent';\nexport { RichText } from './RichText';\nexport { Video } from './Video';\nexport { MediaGallery } from './MediaGallery';\nexport { ImageViewField } from './ImageViewField';\nexport { VideoViewField } from './VideoViewField';\nexport { Array } from './Array';\nexport * from './types';\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,SAAS;AAC/B,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,GAAG,QAAQ,OAAO;AAC3B,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,KAAK,QAAQ,SAAS;AAC/B,cAAc,SAAS","ignoreList":[]}

package/dist/esm/components/fields/mediaConstants.js

@@ -0,0 +1,15 @@
+/**
+ * Shared media dimension constants for consistent sizing across form fields.
+ * These values ensure media thumbnails maintain a consistent appearance
+ * in entity page forms, matching CMS-WEB behavior.
+ */
+
+/** Height for media thumbnails in form fields */
+export const MEDIA_HEIGHT = '120px';
+
+/** Maximum width for media thumbnails to prevent oversized display */
+export const MEDIA_MAX_WIDTH = '240px';
+
+/** Border radius for media thumbnails in view mode */
+export const MEDIA_BORDER_RADIUS = '8px';
+//# sourceMappingURL=mediaConstants.js.map

package/dist/esm/components/fields/mediaConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MEDIA_HEIGHT","MEDIA_MAX_WIDTH","MEDIA_BORDER_RADIUS"],"sources":["../../../../src/components/fields/mediaConstants.ts"],"sourcesContent":["/**\n * Shared media dimension constants for consistent sizing across form fields.\n * These values ensure media thumbnails maintain a consistent appearance\n * in entity page forms, matching CMS-WEB behavior.\n */\n\n/** Height for media thumbnails in form fields */\nexport const MEDIA_HEIGHT = '120px';\n\n/** Maximum width for media thumbnails to prevent oversized display */\nexport const MEDIA_MAX_WIDTH = '240px';\n\n/** Border radius for media thumbnails in view mode */\nexport const MEDIA_BORDER_RADIUS = '8px';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,MAAMA,YAAY,GAAG,OAAO;;AAEnC;AACA,OAAO,MAAMC,eAAe,GAAG,OAAO;;AAEtC;AACA,OAAO,MAAMC,mBAAmB,GAAG,KAAK","ignoreList":[]}

package/dist/esm/components/fields/useVideoPreview.js

@@ -0,0 +1,75 @@
+import { useCallback, useMemo, useState } from 'react';
+import { mediaURItoImageURL, mediaURItoVideoURL, ThumbnailSize } from '../../cms-fields/auto-cms-field-types';
+export const useVideoPreview = _ref => {
+  let {
+    videoUri
+  } = _ref;
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const videoUrl = useMemo(() => {
+    if (!videoUri) {
+      return undefined;
+    }
+    try {
+      return mediaURItoVideoURL(videoUri);
+    } catch {
+      return undefined;
+    }
+  }, [videoUri]);
+  const posterUrl = useMemo(() => {
+    if (!videoUri) {
+      return undefined;
+    }
+    try {
+      return mediaURItoImageURL(videoUri, ThumbnailSize.L);
+    } catch {
+      return undefined;
+    }
+  }, [videoUri]);
+  const openPreview = useCallback(() => {
+    if (videoUrl) {
+      setIsPreviewOpen(true);
+    }
+  }, [videoUrl]);
+  const closePreview = useCallback(() => setIsPreviewOpen(false), []);
+  const handleDownload = useCallback(async () => {
+    if (!videoUrl || !videoUri) {
+      return;
+    }
+    try {
+      try {
+        const response = await fetch(videoUrl, {
+          mode: 'cors'
+        });
+        if (response.ok) {
+          var _videoUri$split$pop;
+          const blob = await response.blob();
+          const blobUrl = URL.createObjectURL(blob);
+          const filename = ((_videoUri$split$pop = videoUri.split('/').pop()) == null ? void 0 : _videoUri$split$pop.split('#')[0]) || 'video.mp4';
+          const link = document.createElement('a');
+          link.href = blobUrl;
+          link.download = filename;
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          URL.revokeObjectURL(blobUrl);
+          return;
+        }
+      } catch {
+        // CORS blocked — fall through to window.open fallback
+      }
+      const downloadUrl = videoUrl.includes('?') ? `${videoUrl}&download=true` : `${videoUrl}?download=true`;
+      window.open(downloadUrl, '_blank');
+    } catch (error) {
+      console.error('Error downloading video:', error);
+    }
+  }, [videoUrl, videoUri]);
+  return {
+    videoUrl,
+    posterUrl,
+    isPreviewOpen,
+    openPreview,
+    closePreview,
+    handleDownload
+  };
+};
+//# sourceMappingURL=useVideoPreview.js.map

package/dist/esm/components/fields/useVideoPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useMemo","useState","mediaURItoImageURL","mediaURItoVideoURL","ThumbnailSize","useVideoPreview","_ref","videoUri","isPreviewOpen","setIsPreviewOpen","videoUrl","undefined","posterUrl","L","openPreview","closePreview","handleDownload","response","fetch","mode","ok","_videoUri$split$pop","blob","blobUrl","URL","createObjectURL","filename","split","pop","link","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","downloadUrl","includes","window","open","error","console"],"sources":["../../../../src/components/fields/useVideoPreview.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport {\n  mediaURItoImageURL,\n  mediaURItoVideoURL,\n  ThumbnailSize,\n} from '../../cms-fields/auto-cms-field-types';\n\nexport interface UseVideoPreviewOptions {\n  videoUri: string | undefined | null;\n}\n\nexport const useVideoPreview = ({ videoUri }: UseVideoPreviewOptions) => {\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n\n  const videoUrl = useMemo(() => {\n    if (!videoUri) {\n      return undefined;\n    }\n    try {\n      return mediaURItoVideoURL(videoUri);\n    } catch {\n      return undefined;\n    }\n  }, [videoUri]);\n\n  const posterUrl = useMemo(() => {\n    if (!videoUri) {\n      return undefined;\n    }\n    try {\n      return mediaURItoImageURL(videoUri, ThumbnailSize.L);\n    } catch {\n      return undefined;\n    }\n  }, [videoUri]);\n\n  const openPreview = useCallback(() => {\n    if (videoUrl) {\n      setIsPreviewOpen(true);\n    }\n  }, [videoUrl]);\n\n  const closePreview = useCallback(() => setIsPreviewOpen(false), []);\n\n  const handleDownload = useCallback(async () => {\n    if (!videoUrl || !videoUri) {\n      return;\n    }\n\n    try {\n      try {\n        const response = await fetch(videoUrl, { mode: 'cors' });\n        if (response.ok) {\n          const blob = await response.blob();\n          const blobUrl = URL.createObjectURL(blob);\n          const filename =\n            videoUri.split('/').pop()?.split('#')[0] || 'video.mp4';\n\n          const link = document.createElement('a');\n          link.href = blobUrl;\n          link.download = filename;\n          document.body.appendChild(link);\n          link.click();\n          document.body.removeChild(link);\n\n          URL.revokeObjectURL(blobUrl);\n          return;\n        }\n      } catch {\n        // CORS blocked — fall through to window.open fallback\n      }\n\n      const downloadUrl = videoUrl.includes('?')\n        ? `${videoUrl}&download=true`\n        : `${videoUrl}?download=true`;\n      window.open(downloadUrl, '_blank');\n    } catch (error) {\n      console.error('Error downloading video:', error);\n    }\n  }, [videoUrl, videoUri]);\n\n  return {\n    videoUrl,\n    posterUrl,\n    isPreviewOpen,\n    openPreview,\n    closePreview,\n    handleDownload,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/layouts/ContentCardSkeleton.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Card, Cell, Layout } from '@wix/design-system';
+import { SettingsPage, EntityPage } from '@wix/patterns';
+import { useAutoPatternsOverridesContext } from '../../providers';
+const SkeletonCardLayout = _ref => {
+  var _content$container$ch;
+  let {
+    content,
+    level,
+    sectionId,
+    cardIndex,
+    contentIndex
+  } = _ref;
+  const overrides = useAutoPatternsOverridesContext();
+  switch (content.type) {
+    case 'field':
+      return null;
+    case 'container':
+      if (!((_content$container$ch = content.container.children) != null && _content$container$ch.length)) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(Cell, {
+        span: content.container.span
+      }, /*#__PURE__*/React.createElement(Layout, null, content.container.children.map((child, index) => /*#__PURE__*/React.createElement(SkeletonCardLayout, {
+        key: `${sectionId}-card-${cardIndex}-content-${contentIndex}-level-${level}-child-${index}`,
+        content: child,
+        level: level + 1,
+        sectionId: sectionId,
+        cardIndex: cardIndex,
+        contentIndex: index
+      }))));
+    case 'component':
+      {
+        var _overrides$components;
+        if (!content.component.componentId) {
+          return null;
+        }
+        const Component = overrides == null || (_overrides$components = overrides.components) == null ? void 0 : _overrides$components[content.component.componentId];
+        if (!Component) {
+          return null;
+        }
+        return /*#__PURE__*/React.createElement(Cell, {
+          span: content.component.span
+        }, /*#__PURE__*/React.createElement(Component, {
+          form: undefined,
+          entity: undefined
+        }));
+      }
+    default:
+      return null;
+  }
+};
+export const ContentCardSkeleton = _ref2 => {
+  var _layout$card$subtitle;
+  let {
+    type = 'entity',
+    layout,
+    sectionId,
+    cardIndex
+  } = _ref2;
+  const Component = type === 'settings' ? SettingsPage : EntityPage;
+  switch (layout.type) {
+    case 'card':
+      return /*#__PURE__*/React.createElement(Component.Card, {
+        minHeight: "50px"
+      }, /*#__PURE__*/React.createElement(Card.Header, {
+        title: layout.card.title.text,
+        subtitle: (_layout$card$subtitle = layout.card.subtitle) == null ? void 0 : _layout$card$subtitle.text
+      }), /*#__PURE__*/React.createElement(Card.Divider, null), /*#__PURE__*/React.createElement(Card.Content, null, /*#__PURE__*/React.createElement(Layout, null, layout.card.children.map((child, index) => /*#__PURE__*/React.createElement(SkeletonCardLayout, {
+        key: `${sectionId}-card-${cardIndex}-content-${index}`,
+        content: child,
+        level: 0,
+        sectionId: sectionId,
+        cardIndex: cardIndex,
+        contentIndex: index
+      })))));
+    default:
+      return null;
+  }
+};
+//# sourceMappingURL=ContentCardSkeleton.js.map