@wix/patterns-fields 1.36.0 → 1.37.0

package/src/components/time-input/index.ts

@@ -1,4 +1,5 @@
 export * from './time-input';
 export * from './cell-time-input';
+export * from './form-time';
 export * from './form-time-input';
 export * from './hooks';

package/src/components/url/form-url.driver.ts

@@ -1,3 +1,4 @@
+import type { Field } from '@wix/bex-core';
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
   FormFieldUniDriver,
@@ -6,9 +7,9 @@ import {
 
 import { baseUniDriverFactory } from '../../testkit/base-driver';
 
-export function FormUrlDriver(base: UniDriver, body: UniDriver) {
+export function FormUrlDriver(base: UniDriver, body: UniDriver, field: Field) {
   const formField = FormFieldUniDriver(base, body);
-  const inputBase = base.$(`[data-hook^="url-"]`);
+  const inputBase = base.$(`[data-hook="url-${field.id}"]`);
   const input = InputUniDriver(inputBase, body);
 
   return {

package/src/components/video/form-video.driver.ts

@@ -0,0 +1,48 @@
+import type { Field } from '@wix/bex-core';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  FormFieldUniDriver,
+  ImageViewerUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FormVideoDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const imageViewerBase = base.$(`[data-hook="video-${field.id}"]`);
+  const imageViewer = ImageViewerUniDriver(imageViewerBase, body);
+
+  const replaceButton = base.$(`[data-hook="video-replace-${field.id}"]`);
+  const moreButton = base.$(`[data-hook="video-more-${field.id}"]`);
+  const previewAction = body.$(`[data-hook="video-preview-${field.id}"]`);
+  const downloadAction = body.$(`[data-hook="video-download-${field.id}"]`);
+  const deleteAction = body.$(`[data-hook="video-delete-${field.id}"]`);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: async () => {
+      const labelEl = await formField.getLabel();
+      return labelEl?.textContent ?? '';
+    },
+    getImageUrl: () => imageViewer.getImageUrl(),
+    isAddItemVisible: () => imageViewer.isAddItemVisible(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+    hasSuffix: async () => (await formField.getSuffix()) !== null,
+    hasReplaceButton: () => replaceButton.exists(),
+    hasMoreButton: () => moreButton.exists(),
+    clickMore: () => moreButton.click(),
+    clickReplace: () => replaceButton.click(),
+    isPreviewActionVisible: () => previewAction.exists(),
+    isDownloadActionVisible: () => downloadAction.exists(),
+    isDeleteActionVisible: () => deleteAction.exists(),
+    clickPreview: () => previewAction.click(),
+    clickDownload: () => downloadAction.click(),
+    clickDelete: () => deleteAction.click(),
+  };
+}

package/src/components/video/form-video.tsx

@@ -0,0 +1,244 @@
+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 { observer } from 'mobx-react-lite';
+import { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+import { BaseInputProps } from '../../types/base-input';
+import { useTranslations } from '../../hooks';
+import { isEmpty } from '../../validations/string';
+import { isDataValidOrNotSet } from '../../validations/validations';
+import * as videoValidation from '../../validations/video';
+import { TypeMismatchExclamation } from '../exclamation/type-mismatch-exclamation';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
+import { useVideoPreview } from './use-video-preview';
+
+interface VideoMediaDescriptor {
+  video?: string;
+}
+
+interface MediaManagerVideoItem {
+  _id?: string;
+  displayName?: string;
+  mediaType?: string;
+  media?: VideoMediaDescriptor;
+}
+
+export interface FormVideoProps extends BaseInputProps<string> {}
+
+const _FormVideo = (props: FormVideoProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: pt, openMediaManager } = useWixPatternsContainer();
+  const { t } = useTranslations();
+  const isMobile = useIsMobile();
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  async function openMedia() {
+    if (!openMediaManager) return;
+    try {
+      const chosenMediaItems = await openMediaManager({
+        multiSelect: false,
+        category: 'VIDEO',
+      });
+
+      const mediaItem = chosenMediaItems?.items?.[0] as
+        | MediaManagerVideoItem
+        | undefined;
+      const newVideo = 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 (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+      suffix={
+        isDataValidOrNotSet(
+          controller.field.value,
+          videoValidation,
+        ) ? undefined : (
+          <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 ? (
+        <Box width="100%" maxWidth={MEDIA_MAX_WIDTH} height={MEDIA_HEIGHT}>
+          <MediaOverlay
+            dataHook={`video-${field.id}`}
+            hoverSkin="dark"
+            media={
+              <Image
+                src={imageUrl}
+                width="100%"
+                height={MEDIA_HEIGHT}
+                fit="cover"
+              />
+            }
+          >
+            <MediaOverlay.Content placement="middle" visible="hover">
+              <Box gap="SP2">
+                <Tooltip
+                  content={t('auto-patterns.fields.replace_video_tooltip')}
+                >
+                  <IconButton
+                    onClick={() => openMedia()}
+                    skin="light"
+                    priority="secondary"
+                    disabled={isMobile}
+                    ariaLabel={t('auto-patterns.fields.replace_video_tooltip')}
+                    dataHook={`video-replace-${field.id}`}
+                  >
+                    <Replace />
+                  </IconButton>
+                </Tooltip>
+                <PopoverMenu
+                  triggerElement={({ toggle }) => (
+                    <Tooltip
+                      content={t('auto-patterns.fields.more_actions_tooltip')}
+                    >
+                      <IconButton
+                        priority="secondary"
+                        onClick={toggle}
+                        skin="light"
+                        ariaLabel={t(
+                          'auto-patterns.fields.more_actions_tooltip',
+                        )}
+                        dataHook={`video-more-${field.id}`}
+                      >
+                        <More />
+                      </IconButton>
+                    </Tooltip>
+                  )}
+                >
+                  <PopoverMenu.MenuItem
+                    prefixIcon={<Maximize />}
+                    text={t('auto-patterns.fields.preview_video')}
+                    onClick={handlePreview}
+                    disabled={!videoUrl}
+                    dataHook={`video-preview-${field.id}`}
+                  />
+                  <PopoverMenu.MenuItem
+                    prefixIcon={<Download />}
+                    text={t('auto-patterns.fields.download_video')}
+                    onClick={handleDownload}
+                    dataHook={`video-download-${field.id}`}
+                  />
+                  <PopoverMenu.Divider />
+                  <PopoverMenu.MenuItem
+                    prefixIcon={<Delete />}
+                    text={t('auto-patterns.fields.remove_video')}
+                    onClick={() => controller.field.onChange(null)}
+                    dataHook={`video-delete-${field.id}`}
+                  />
+                </PopoverMenu>
+              </Box>
+            </MediaOverlay.Content>
+          </MediaOverlay>
+        </Box>
+      ) : (
+        <Box width="100%" maxWidth={MEDIA_MAX_WIDTH}>
+          <ImageViewer
+            dataHook={`video-${field.id}`}
+            onAddImage={isMobile ? undefined : () => openMedia()}
+            addImageInfo={t('auto-patterns.fields.add_video_tooltip')}
+            height={MEDIA_HEIGHT}
+            width="100%"
+          />
+        </Box>
+      )}
+      {isPreviewOpen && (
+        <Modal isOpen={isPreviewOpen} onRequestClose={handleClosePreview}>
+          <CustomModalLayout
+            title={field.displayName}
+            onCloseButtonClick={handleClosePreview}
+            content={
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  padding: '24px',
+                }}
+              >
+                <video
+                  controls
+                  autoPlay
+                  style={{ maxWidth: '100%', maxHeight: '70vh' }}
+                  poster={imageUrl}
+                >
+                  {videoUrl && <source src={videoUrl} type="video/mp4" />}
+                  Your browser does not support the video tag.
+                </video>
+              </div>
+            }
+          />
+        </Modal>
+      )}
+    </FormField>
+  );
+};
+
+export const FormVideo = observer(_FormVideo);

package/src/components/video/index.ts

@@ -1,4 +1,10 @@
 export { VideoView } from './video-view';
 export type { VideoViewProps } from './video-view';
+export { VideoViewField } from './video-view-field';
+export type { VideoViewFieldProps } from './video-view-field';
 export { CellVideoEdit } from './cell-video-edit';
 export type { CellVideoEditProps } from './cell-video-edit';
+export { FormVideo } from './form-video';
+export type { FormVideoProps } from './form-video';
+export { useVideoPreview } from './use-video-preview';
+export type { UseVideoPreviewOptions } from './use-video-preview';

package/src/components/video/use-video-preview.ts

@@ -0,0 +1,78 @@
+import { useCallback, useMemo, useState } from 'react';
+import {
+  mediaURItoImageURL,
+  mediaURItoVideoURL,
+  ThumbnailSize,
+} from '../../auto-field-types';
+
+export interface UseVideoPreviewOptions {
+  videoUri: string | undefined | null;
+}
+
+export const useVideoPreview = ({ videoUri }: UseVideoPreviewOptions) => {
+  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) {
+          const blob = await response.blob();
+          const blobUrl = URL.createObjectURL(blob);
+          const filename =
+            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 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,
+  };
+};

package/src/components/video/video-view-field.tsx

@@ -0,0 +1,127 @@
+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 { useTranslations } from '../../hooks';
+import {
+  MEDIA_HEIGHT,
+  MEDIA_MAX_WIDTH,
+  MEDIA_BORDER_RADIUS,
+} from '../../utils/media-constants';
+import { VideoView } from './video-view';
+import { useVideoPreview } from './use-video-preview';
+
+export interface VideoViewFieldProps {
+  value: unknown;
+  displayName: string;
+  id: string;
+}
+
+export const VideoViewField: React.FC<VideoViewFieldProps> = ({
+  value,
+  displayName,
+  id,
+}) => {
+  const { t } = useTranslations();
+  const videoUri = typeof value === 'string' ? value : undefined;
+
+  const {
+    videoUrl,
+    posterUrl,
+    isPreviewOpen,
+    openPreview,
+    closePreview,
+    handleDownload,
+  } = useVideoPreview({ videoUri });
+
+  if (value === null || value === undefined) {
+    return <Text>-</Text>;
+  }
+
+  return (
+    <>
+      <Box
+        height={MEDIA_HEIGHT}
+        width="100%"
+        maxWidth={MEDIA_MAX_WIDTH}
+        borderRadius={MEDIA_BORDER_RADIUS}
+        overflow="hidden"
+      >
+        <MediaOverlay
+          hoverSkin="dark"
+          media={
+            <VideoView
+              data={videoUri}
+              height="100%"
+              width="100%"
+              borderRadius={MEDIA_BORDER_RADIUS}
+            />
+          }
+        >
+          <MediaOverlay.Content placement="middle" visible="hover">
+            <Box gap="12px">
+              <Tooltip content={t('auto-patterns.fields.preview_video')}>
+                <IconButton
+                  priority="secondary"
+                  skin="light"
+                  ariaLabel={t('auto-patterns.fields.preview_video')}
+                  dataHook={`view-video-preview-${id}`}
+                  onClick={openPreview}
+                  disabled={!videoUrl}
+                >
+                  <Maximize />
+                </IconButton>
+              </Tooltip>
+              <Tooltip content={t('auto-patterns.fields.download_video')}>
+                <IconButton
+                  priority="secondary"
+                  skin="light"
+                  ariaLabel={t('auto-patterns.fields.download_video')}
+                  dataHook={`view-video-download-${id}`}
+                  onClick={handleDownload}
+                  disabled={!videoUrl}
+                >
+                  <Download />
+                </IconButton>
+              </Tooltip>
+            </Box>
+          </MediaOverlay.Content>
+        </MediaOverlay>
+      </Box>
+      {isPreviewOpen && (
+        <Modal isOpen={isPreviewOpen} onRequestClose={closePreview}>
+          <CustomModalLayout
+            title={displayName || id}
+            onCloseButtonClick={closePreview}
+            content={
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  padding: '24px',
+                }}
+              >
+                <video
+                  controls
+                  autoPlay
+                  style={{ maxWidth: '100%', maxHeight: '70vh' }}
+                  poster={posterUrl}
+                >
+                  {videoUrl && <source src={videoUrl} type="video/mp4" />}
+                  Your browser does not support the video tag.
+                </video>
+              </div>
+            }
+          />
+        </Modal>
+      )}
+    </>
+  );
+};

package/src/exports/form-document-field.ts

@@ -1 +1,2 @@
+export { FormDocument } from '../components/document/form-document';
 export { FormDocumentField } from '../components/document/form-document-field';

package/src/exports/form-media-gallery-field.ts

@@ -1 +1,3 @@
 export { FormMediaGalleryField } from '../components/media-gallery/form-media-gallery-field';
+export { FormMediaGallery } from '../components/media-gallery/form-media-gallery';
+export type { FormMediaGalleryProps } from '../components/media-gallery/form-media-gallery';

package/src/exports/form-rich-content-input.ts

@@ -1 +1,3 @@
 export { FormRichContentInput } from '../components/rich-content/rich-content-input/form-input/form-input';
+export { FormRichContent } from '../components/rich-content/form-rich-content';
+export type { FormRichContentProps } from '../components/rich-content/form-rich-content';