@wix/auto-patterns 1.54.0 → 1.56.0

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

@@ -0,0 +1,367 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Video = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _dashboard = require("@wix/dashboard");
+var _patterns = require("@wix/patterns");
+var _form = require("@wix/patterns/form");
+var _mediaConstants = require("./mediaConstants");
+var _useVideoPreview = require("./useVideoPreview");
+var _AutoPatternsAppContainerProvider = require("../AutoPatternsApp/AutoPatternsAppContainerProvider");
+var _validations = require("../../cms-fields/validations/validations");
+var _cmsFields = require("../../cms-fields");
+var videoValidation = _interopRequireWildcard(require("../../cms-fields/validations/video"));
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/components/fields/Video.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** Media descriptor from Wix Media Manager for video files */
+
+/** Media item returned from openMediaManager for video category */
+
+const Video = props => {
+  var _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: t
+  } = (0, _AutoPatternsAppContainerProvider.useAutoPatternsAppContainer)();
+  const {
+    translate: pt,
+    ...container
+  } = (0, _patterns.useWixPatternsContainer)();
+  (0, _patterns.useSelector)(() => container.initTask.status);
+  const isMobile = (0, _patterns.useIsMobile)();
+  const controller = (0, _form.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.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
+  } = (0, _useVideoPreview.useVideoPreview)({
+    videoUri: controller.field.value
+  });
+  return /*#__PURE__*/_react.default.createElement(_designSystem.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: (0, _validations.isDataValidOrNotSet)(controller.field.value, videoValidation) ? undefined : /*#__PURE__*/_react.default.createElement(_cmsFields.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'
+      }),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 115,
+        columnNumber: 11
+      }
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 5
+    }
+  }, controller.field.value ? /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    width: "100%",
+    maxWidth: _mediaConstants.MEDIA_MAX_WIDTH,
+    height: _mediaConstants.MEDIA_HEIGHT,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 136,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.MediaOverlay, {
+    dataHook: `video-${field.id}`,
+    hoverSkin: "dark",
+    media: /*#__PURE__*/_react.default.createElement(_designSystem.Image, {
+      src: imageUrl,
+      width: "100%",
+      height: _mediaConstants.MEDIA_HEIGHT,
+      fit: "cover",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 141,
+        columnNumber: 15
+      }
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 137,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.MediaOverlay.Content, {
+    placement: "middle",
+    visible: "hover",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 149,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    gap: "SP2",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 150,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+    content: t('auto-patterns.fields.replace_video_tooltip'),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 151,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    onClick: () => openMedia(),
+    skin: "light",
+    priority: "secondary",
+    disabled: isMobile,
+    ariaLabel: t('auto-patterns.fields.replace_video_tooltip'),
+    dataHook: `video-replace-${field.id}`,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 152,
+      columnNumber: 19
+    }
+  }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Replace, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 160,
+      columnNumber: 21
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu, {
+    triggerElement: ({
+      toggle
+    }) => /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+      content: t('auto-patterns.fields.more_actions_tooltip'),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 165,
+        columnNumber: 21
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+      priority: "secondary",
+      onClick: toggle,
+      skin: "light",
+      ariaLabel: t('auto-patterns.fields.more_actions_tooltip'),
+      dataHook: `video-more-${field.id}`,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 166,
+        columnNumber: 23
+      }
+    }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.More, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 173,
+        columnNumber: 25
+      }
+    }))),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 163,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Maximize, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 179,
+        columnNumber: 33
+      }
+    }),
+    text: t('auto-patterns.fields.preview_video'),
+    onClick: handlePreview,
+    disabled: !videoUrl,
+    dataHook: `video-preview-${field.id}`,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 178,
+      columnNumber: 19
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Download, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 186,
+        columnNumber: 33
+      }
+    }),
+    text: t('auto-patterns.fields.download_video'),
+    onClick: handleDownload,
+    dataHook: `video-download-${field.id}`,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 185,
+      columnNumber: 19
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.Divider, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 191,
+      columnNumber: 19
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Delete, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 193,
+        columnNumber: 33
+      }
+    }),
+    text: t('auto-patterns.fields.remove_video'),
+    onClick: () => controller.field.onChange(null),
+    dataHook: `video-delete-${field.id}`,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 192,
+      columnNumber: 19
+    }
+  })))))) : /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    width: "100%",
+    maxWidth: _mediaConstants.MEDIA_MAX_WIDTH,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 204,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.ImageViewer, {
+    dataHook: `video-${field.id}`,
+    onAddImage: isMobile ? undefined : () => openMedia(),
+    addImageInfo: t('auto-patterns.fields.add_video_tooltip'),
+    height: _mediaConstants.MEDIA_HEIGHT,
+    width: "100%",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 205,
+      columnNumber: 11
+    }
+  })), isPreviewOpen && /*#__PURE__*/_react.default.createElement(_designSystem.Modal, {
+    isOpen: isPreviewOpen,
+    onRequestClose: handleClosePreview,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 215,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.CustomModalLayout, {
+    title: field.displayName,
+    onCloseButtonClick: handleClosePreview,
+    content: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '24px'
+      },
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 220,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/_react.default.createElement("video", {
+      controls: true,
+      autoPlay: true,
+      style: {
+        maxWidth: '100%',
+        maxHeight: '70vh'
+      },
+      poster: imageUrl,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 227,
+        columnNumber: 17
+      }
+    }, videoUrl && /*#__PURE__*/_react.default.createElement("source", {
+      src: videoUrl,
+      type: "video/mp4",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 233,
+        columnNumber: 32
+      }
+    }), "Your browser does not support the video tag.")),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 216,
+      columnNumber: 11
+    }
+  })));
+};
+exports.Video = Video;
+//# sourceMappingURL=Video.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_wixUiIconsCommon","_dashboard","_patterns","_form","_mediaConstants","_useVideoPreview","_AutoPatternsAppContainerProvider","_validations","_cmsFields","videoValidation","_interopRequireWildcard","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Video","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","useAutoPatternsAppContainer","pt","container","useWixPatternsContainer","useSelector","initTask","status","isMobile","useIsMobile","controller","useController","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","openMedia","_chosenMediaItems$ite","_mediaItem$media","chosenMediaItems","dashboard","openMediaManager","multiSelect","category","mediaItem","items","newVideo","media","video","onChange","error","console","videoUrl","posterUrl","imageUrl","isPreviewOpen","openPreview","handlePreview","closePreview","handleClosePreview","handleDownload","useVideoPreview","videoUri","createElement","FormField","label","displayName","fieldState","statusMessage","message","suffix","isDataValidOrNotSet","TypeMismatchExclamation","typeName","clearButtonText","convertButtonText","onClear","convertDisabledText","fieldName","isConverted","isConverting","convertedValue","tooltipText","__self","__source","fileName","lineNumber","columnNumber","Box","width","maxWidth","MEDIA_MAX_WIDTH","height","MEDIA_HEIGHT","MediaOverlay","hoverSkin","Image","src","fit","Content","placement","visible","gap","Tooltip","content","IconButton","onClick","skin","priority","disabled","ariaLabel","Replace","PopoverMenu","triggerElement","toggle","More","MenuItem","prefixIcon","Maximize","text","Download","Divider","Delete","ImageViewer","onAddImage","addImageInfo","Modal","isOpen","onRequestClose","CustomModalLayout","title","onCloseButtonClick","style","display","justifyContent","padding","controls","autoPlay","maxHeight","poster","type","exports"],"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/cjs/components/fields/VideoViewField.js

@@ -0,0 +1,205 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.VideoViewField = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _cmsFields = require("../../cms-fields");
+var _useVideoPreview = require("./useVideoPreview");
+var _mediaConstants = require("./mediaConstants");
+var _AutoPatternsAppContainerProvider = require("../AutoPatternsApp/AutoPatternsAppContainerProvider");
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/components/fields/VideoViewField.tsx";
+const VideoViewField = ({
+  value,
+  displayName,
+  id
+}) => {
+  const {
+    translate: t
+  } = (0, _AutoPatternsAppContainerProvider.useAutoPatternsAppContainer)();
+  const videoUri = typeof value === 'string' ? value : undefined;
+  const {
+    videoUrl,
+    posterUrl,
+    isPreviewOpen,
+    openPreview,
+    closePreview,
+    handleDownload
+  } = (0, _useVideoPreview.useVideoPreview)({
+    videoUri
+  });
+  if (value === null || value === undefined) {
+    return /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 41,
+        columnNumber: 12
+      }
+    }, "-");
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    height: _mediaConstants.MEDIA_HEIGHT,
+    width: "100%",
+    maxWidth: _mediaConstants.MEDIA_MAX_WIDTH,
+    borderRadius: _mediaConstants.MEDIA_BORDER_RADIUS,
+    overflow: "hidden",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 46,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.MediaOverlay, {
+    hoverSkin: "dark",
+    media: /*#__PURE__*/_react.default.createElement(_cmsFields.VideoView, {
+      data: videoUri,
+      height: "100%",
+      width: "100%",
+      borderRadius: _mediaConstants.MEDIA_BORDER_RADIUS,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 56,
+        columnNumber: 13
+      }
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 53,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.MediaOverlay.Content, {
+    placement: "middle",
+    visible: "hover",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 64,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    gap: "12px",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 65,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+    content: t('auto-patterns.fields.preview_video'),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 66,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    priority: "secondary",
+    skin: "light",
+    ariaLabel: t('auto-patterns.fields.preview_video'),
+    dataHook: `view-video-preview-${id}`,
+    onClick: openPreview,
+    disabled: !videoUrl,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 67,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Maximize, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 75,
+      columnNumber: 19
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+    content: t('auto-patterns.fields.download_video'),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 78,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    priority: "secondary",
+    skin: "light",
+    ariaLabel: t('auto-patterns.fields.download_video'),
+    dataHook: `view-video-download-${id}`,
+    onClick: handleDownload,
+    disabled: !videoUrl,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 79,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Download, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 87,
+      columnNumber: 19
+    }
+  }))))))), isPreviewOpen && /*#__PURE__*/_react.default.createElement(_designSystem.Modal, {
+    isOpen: isPreviewOpen,
+    onRequestClose: closePreview,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 95,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.CustomModalLayout, {
+    title: displayName || id,
+    onCloseButtonClick: closePreview,
+    content: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '24px'
+      },
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 100,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/_react.default.createElement("video", {
+      controls: true,
+      autoPlay: true,
+      style: {
+        maxWidth: '100%',
+        maxHeight: '70vh'
+      },
+      poster: posterUrl,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 107,
+        columnNumber: 17
+      }
+    }, videoUrl && /*#__PURE__*/_react.default.createElement("source", {
+      src: videoUrl,
+      type: "video/mp4",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 113,
+        columnNumber: 32
+      }
+    }), "Your browser does not support the video tag.")),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 96,
+      columnNumber: 11
+    }
+  })));
+};
+exports.VideoViewField = VideoViewField;
+//# sourceMappingURL=VideoViewField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_wixUiIconsCommon","_cmsFields","_useVideoPreview","_mediaConstants","_AutoPatternsAppContainerProvider","_jsxFileName","VideoViewField","value","displayName","id","translate","t","useAutoPatternsAppContainer","videoUri","undefined","videoUrl","posterUrl","isPreviewOpen","openPreview","closePreview","handleDownload","useVideoPreview","default","createElement","Text","__self","__source","fileName","lineNumber","columnNumber","Fragment","Box","height","MEDIA_HEIGHT","width","maxWidth","MEDIA_MAX_WIDTH","borderRadius","MEDIA_BORDER_RADIUS","overflow","MediaOverlay","hoverSkin","media","VideoView","data","Content","placement","visible","gap","Tooltip","content","IconButton","priority","skin","ariaLabel","dataHook","onClick","disabled","Maximize","Download","Modal","isOpen","onRequestClose","CustomModalLayout","title","onCloseButtonClick","style","display","justifyContent","padding","controls","autoPlay","maxHeight","poster","src","type","exports"],"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/cjs/components/fields/index.js

@@ -22,9 +22,13 @@ var _exportNames = {
   Address: true,
   RichContent: true,
   RichText: true,
-  MediaGallery: true
+  Video: true,
+  MediaGallery: true,
+  ImageViewField: true,
+  VideoViewField: true,
+  Array: true
 };
-exports.Url = exports.Time = exports.ShortText = exports.RichText = exports.RichContent = exports.Reference = exports.Object = exports.Number = exports.MultiReference = exports.MultiDocument = exports.MediaGallery = exports.LongText = exports.ImageInput = exports.Email = exports.Document = exports.DateTime = exports.DateInput = exports.Color = exports.Checkbox = exports.Audio = exports.Address = void 0;
+exports.VideoViewField = exports.Video = exports.Url = exports.Time = exports.ShortText = exports.RichText = exports.RichContent = exports.Reference = exports.Object = exports.Number = exports.MultiReference = exports.MultiDocument = exports.MediaGallery = exports.LongText = exports.ImageViewField = exports.ImageInput = exports.Email = exports.Document = exports.DateTime = exports.DateInput = exports.Color = exports.Checkbox = exports.Audio = exports.Array = exports.Address = void 0;
 var _Audio = require("./Audio");
 exports.Audio = _Audio.Audio;
 var _Checkbox = require("./Checkbox");
@@ -65,8 +69,16 @@ var _RichContent = require("./RichContent");
 exports.RichContent = _RichContent.RichContent;
 var _RichText = require("./RichText");
 exports.RichText = _RichText.RichText;
+var _Video = require("./Video");
+exports.Video = _Video.Video;
 var _MediaGallery = require("./MediaGallery");
 exports.MediaGallery = _MediaGallery.MediaGallery;
+var _ImageViewField = require("./ImageViewField");
+exports.ImageViewField = _ImageViewField.ImageViewField;
+var _VideoViewField = require("./VideoViewField");
+exports.VideoViewField = _VideoViewField.VideoViewField;
+var _Array = require("./Array");
+exports.Array = _Array.Array;
 var _types = require("./types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;