@wix/patterns-fields 1.0.0

package/src/components/media-gallery/media-gallery-dialog/media-gallery-dialog.tsx

@@ -0,0 +1,205 @@
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import { usePersistedState } from '../../../hooks/usePersistedState';
+import {
+  OrganizeMedia,
+  ADD_ITEMS_DIRECTION,
+  NAME_NEW_ITEMS,
+} from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-organize-media';
+import '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-organize-media/dist/esm/index.global.css';
+import type { WixCodeGalleryItem } from '../../../auto-field-types';
+import { useTranslations } from '../../../hooks';
+import isEqual from 'lodash/isEqual';
+
+import type {
+  MediaGalleryDialogProps,
+  OrganizeMediaItem,
+  OrganizeMediaItemChange,
+  OrganizeMediaItemLink,
+} from './types';
+import {
+  applyOrganizeMediaItemsChanges,
+  convertOrganizeMediaItemToWixCodeGalleryItem,
+  convertWixCodeGalleryItemToOrganizeMediaItem,
+  setItemsEmptyTitles,
+} from './utils';
+import { useContentKeys } from './hooks';
+import { AddMediaButton } from './add-media-button';
+import { NoItemsView } from './no-items-view';
+import { ItemActions } from './item-actions';
+import { AddLinkModal } from './add-link-modal';
+import { useAddLinkModal } from './use-add-link-modal';
+
+const ITEM_EDITING_OPTION = {
+  link: false,
+  title: true,
+  description: true,
+  focalPoint: true,
+  alt: true,
+  externalLink: true,
+} as const;
+
+const toOrganizeMediaItems = (items: WixCodeGalleryItem[]) =>
+  items
+    .map(convertWixCodeGalleryItemToOrganizeMediaItem)
+    .filter(Boolean) as OrganizeMediaItem[];
+
+const fromOrganizeMediaItems = (organizeMediaItems: OrganizeMediaItem[]) =>
+  organizeMediaItems
+    .map(convertOrganizeMediaItemToWixCodeGalleryItem)
+    .filter(Boolean) as WixCodeGalleryItem[];
+
+export const MediaGalleryDialog: React.FC<MediaGalleryDialogProps> = ({
+  isOpen,
+  items,
+  onClose,
+  onChange,
+}) => {
+  const { t } = useTranslations();
+
+  const [organizeMediaItems, setOrganizeMediaItems] = useState(
+    toOrganizeMediaItems(items),
+  );
+
+  const [imageAddDirection, setImageAddDirection] = usePersistedState(
+    'patterns-fields:media-gallery-dialog-image-add-direction',
+    ADD_ITEMS_DIRECTION.GALLERY_END,
+  );
+  const [defaultNewItemName, setDefaultNewItemName] = usePersistedState(
+    'patterns-fields:media-gallery-dialog-default-new-item-name',
+    NAME_NEW_ITEMS.FILE_NAME,
+  );
+
+  const organizeMediaContentKeys = useContentKeys(organizeMediaItems);
+
+  const prevItemsRef = useRef(items);
+  useEffect(() => {
+    if (!isEqual(items, prevItemsRef.current)) {
+      setOrganizeMediaItems(toOrganizeMediaItems(items));
+    }
+    prevItemsRef.current = items;
+  }, [items]);
+
+  const onAddMedia = useCallback(
+    (newItems: OrganizeMediaItem[]) => {
+      const itemsToAdd =
+        defaultNewItemName === NAME_NEW_ITEMS.EMPTY
+          ? setItemsEmptyTitles(newItems)
+          : newItems;
+
+      setOrganizeMediaItems((currentItems) => {
+        const merged =
+          imageAddDirection === ADD_ITEMS_DIRECTION.GALLERY_START
+            ? [...itemsToAdd, ...currentItems]
+            : [...currentItems, ...itemsToAdd];
+        return merged.map((item, orderIndex) => ({
+          ...item,
+          orderIndex,
+        }));
+      });
+    },
+    [defaultNewItemName, imageAddDirection],
+  );
+
+  const onDeleteImages = useCallback((itemIds: string[]) => {
+    setOrganizeMediaItems((currentItems) =>
+      currentItems
+        .filter(({ id }) => !itemIds.includes(id ?? ''))
+        .map((item, orderIndex) => ({ ...item, orderIndex })),
+    );
+  }, []);
+
+  const onItemsOrderIndexUpdated = useCallback(
+    (changes: OrganizeMediaItemChange[]) => {
+      setOrganizeMediaItems((currentItems) =>
+        applyOrganizeMediaItemsChanges(currentItems, changes),
+      );
+    },
+    [],
+  );
+
+  const onItemUpdated = useCallback((change: OrganizeMediaItemChange) => {
+    setOrganizeMediaItems((currentItems) =>
+      applyOrganizeMediaItemsChanges(currentItems, [change]),
+    );
+  }, []);
+
+  const onItemReplaced = useCallback(
+    ({ itemId, data }: OrganizeMediaItemChange) => {
+      setOrganizeMediaItems((currentItems) => {
+        const itemToReplace = currentItems.find(({ id }) => id === itemId);
+        const orderIndex = itemToReplace?.orderIndex ?? data.orderIndex;
+        const change = { itemId, data: { ...data, orderIndex } };
+        return applyOrganizeMediaItemsChanges(currentItems, [change]);
+      });
+    },
+    [],
+  );
+
+  const onCloseOrganizeMedia = useCallback(() => {
+    onChange?.(fromOrganizeMediaItems(organizeMediaItems));
+    onClose?.();
+  }, [onChange, onClose, organizeMediaItems]);
+
+  // Link editing: OrganizeMedia fires onLinkButtonClicked, we show AddLinkModal
+  const onUpdateLink = useCallback(
+    (itemId?: string, link?: OrganizeMediaItemLink) => {
+      setOrganizeMediaItems((currentItems) =>
+        currentItems.map((item) =>
+          item.id === itemId ? { ...item, link } : item,
+        ),
+      );
+    },
+    [],
+  );
+  const { onLinkButtonClicked, ...addLinkModalProps } =
+    useAddLinkModal(onUpdateLink);
+
+  const noItemsViewRenderer = useCallback(
+    () => <NoItemsView onAddMedia={onAddMedia} />,
+    [onAddMedia],
+  );
+
+  const uploadMediaRenderer = useCallback(
+    () => <AddMediaButton onAddMedia={onAddMedia} />,
+    [onAddMedia],
+  );
+
+  const itemActionsRenderer = useCallback(
+    ({ item }: { item: OrganizeMediaItem }) => (
+      <ItemActions item={item} onReplace={onItemReplaced} />
+    ),
+    [onItemReplaced],
+  );
+
+  return (
+    <>
+      <OrganizeMedia
+        t={t}
+        contentKeys={organizeMediaContentKeys}
+        isOpen={isOpen}
+        items={organizeMediaItems}
+        baseUrl=""
+        usePaging
+        shouldVerifySorting={false}
+        shouldShowPhotoRightsNotification={false}
+        showItemNameInSettings={false}
+        noItemsViewRenderer={noItemsViewRenderer}
+        uploadMediaRenderer={uploadMediaRenderer}
+        itemActionsRenderer={itemActionsRenderer}
+        itemEditingOption={ITEM_EDITING_OPTION}
+        imageAddDirection={imageAddDirection}
+        defaultNewItemName={defaultNewItemName}
+        onImageAddDirectionChange={setImageAddDirection}
+        onDefaultNewItemNameChange={setDefaultNewItemName}
+        onDeleteImages={onDeleteImages}
+        onItemUpdated={onItemUpdated}
+        onItemsOrderIndexUpdated={onItemsOrderIndexUpdated}
+        onClose={onCloseOrganizeMedia}
+        onLinkButtonClicked={onLinkButtonClicked}
+      />
+      <AddLinkModal {...addLinkModalProps} />
+    </>
+  );
+};
+
+MediaGalleryDialog.displayName = 'MediaGalleryDialog';

package/src/components/media-gallery/media-gallery-dialog/no-items-view.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { EmptyState, Box, TextButton, Loader } from '@wix/design-system';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { useTranslations } from '../../../hooks';
+import { useAddMediaControl } from './hooks';
+import type { OrganizeMediaItem } from './types';
+
+export interface NoItemsViewProps {
+  onAddMedia: (items: OrganizeMediaItem[]) => void;
+}
+
+export const NoItemsView: React.FC<NoItemsViewProps> = ({ onAddMedia }) => {
+  const { t } = useTranslations();
+  const { onOpen, isLoading } = useAddMediaControl(onAddMedia);
+
+  return (
+    <Box
+      align="center"
+      verticalAlign="middle"
+      padding="SP5"
+      direction="vertical"
+    >
+      <EmptyState
+        theme="section"
+        title={t('CMS.mediaGallery.noItems.title')}
+        subtitle={t('CMS.mediaGallery.noItems.subtitle')}
+      >
+        <TextButton
+          prefixIcon={isLoading ? undefined : <AddIcon />}
+          onClick={onOpen}
+          dataHook="media-gallery-add-media-button"
+        >
+          {isLoading ? (
+            <Loader size="tiny" />
+          ) : (
+            t('CMS.mediaGallery.noItems.addMedia')
+          )}
+        </TextButton>
+      </EmptyState>
+    </Box>
+  );
+};

package/src/components/media-gallery/media-gallery-dialog/types.ts

@@ -0,0 +1,91 @@
+import type { WixCodeGalleryItem } from '../../../auto-field-types';
+
+export interface MediaGalleryDialogProps {
+  isOpen: boolean;
+  items: WixCodeGalleryItem[];
+  onClose?: () => void;
+  onChange?: (items: WixCodeGalleryItem[]) => void;
+}
+
+export interface OrganizeMediaItemFocalPoint {
+  x: number;
+  y: number;
+}
+
+export interface OrganizeMediaItemPhotoMetadata {
+  width: number;
+  height: number;
+  focalPoint?: OrganizeMediaItemFocalPoint;
+}
+
+export interface OrganizeMediaItemLink {
+  url: string;
+  text?: string;
+  target: '_blank' | '_self';
+}
+
+export interface OrganizeMediaItemMetadata {
+  title?: string;
+  description?: string;
+  link?: OrganizeMediaItemLink;
+  height?: number;
+  width?: number;
+  fileName?: string;
+  name?: string;
+}
+
+export interface OrganizeMediaItemPhoto {
+  dataType: 'Photo';
+  id?: string;
+  mediaUrl?: string;
+  fileName?: string;
+  name?: string;
+  orderIndex?: number;
+  sortOrder?: number;
+  isSecure?: boolean;
+  photoMetadata?: OrganizeMediaItemPhotoMetadata;
+  title?: string;
+  description?: string;
+  token?: string;
+  alt?: string;
+  link?: OrganizeMediaItemLink;
+  metaData?: OrganizeMediaItemMetadata;
+}
+
+export interface OrganizeMediaItemVideoPoster {
+  url: string;
+  width?: number;
+  height?: number;
+}
+
+export interface OrganizeMediaItemVideoMetadata {
+  width: number;
+  height: number;
+  duration: number;
+  posters: OrganizeMediaItemVideoPoster[];
+  focalPoint?: OrganizeMediaItemFocalPoint;
+}
+
+export interface OrganizeMediaItemVideo {
+  dataType: 'Video';
+  id?: string;
+  mediaUrl?: string;
+  fileName?: string;
+  name?: string;
+  orderIndex?: number;
+  sortOrder?: number;
+  thumbnail?: string;
+  videoMetadata?: OrganizeMediaItemVideoMetadata;
+  title?: string;
+  description?: string;
+  alt?: string;
+  link?: OrganizeMediaItemLink;
+  metaData?: OrganizeMediaItemMetadata;
+}
+
+export type OrganizeMediaItem = OrganizeMediaItemPhoto | OrganizeMediaItemVideo;
+
+export interface OrganizeMediaItemChange {
+  itemId: string;
+  data: Partial<Omit<OrganizeMediaItem, 'id'>>;
+}

package/src/components/media-gallery/media-gallery-dialog/use-add-link-modal.ts

@@ -0,0 +1,31 @@
+import { useCallback, useState } from 'react';
+import type { OrganizeMediaItem, OrganizeMediaItemLink } from './types';
+
+export const useAddLinkModal = (
+  onUpdateLink: (itemId?: string, link?: OrganizeMediaItemLink) => void,
+) => {
+  const [mediaItem, setMediaItem] = useState<OrganizeMediaItem>();
+  const onClose = useCallback(() => setMediaItem(undefined), []);
+
+  const onLinkButtonClicked = useCallback(
+    (item: OrganizeMediaItem) => setMediaItem(item),
+    [],
+  );
+
+  const onSave = useCallback(
+    (link?: OrganizeMediaItemLink) => {
+      onUpdateLink(mediaItem?.id, link);
+      onClose();
+    },
+    [mediaItem?.id, onUpdateLink, onClose],
+  );
+
+  return {
+    onLinkButtonClicked,
+    mediaType: mediaItem?.dataType,
+    link: mediaItem?.link,
+    isOpen: Boolean(mediaItem),
+    onClose,
+    onSave,
+  };
+};

package/src/components/media-gallery/media-gallery-dialog/utils.ts

@@ -0,0 +1,312 @@
+import type {
+  WixCodeGalleryItem,
+  WixCodeGalleryItemLink,
+  WixCodeGalleryItemTarget,
+} from '../../../auto-field-types';
+import { mediaURItoVideoURL } from '../../../auto-field-types';
+import {
+  parseMediaItemUri,
+  createMediaItemUri,
+  isMediaItemError,
+} from '../../../utils/media-item-utils';
+import type {
+  OrganizeMediaItem,
+  OrganizeMediaItemChange,
+  OrganizeMediaItemLink,
+} from './types';
+
+/** Convert a wix:video:// URI to a playable 480p MP4 URL for preview */
+export const convertMediaURIToPreviewVideoURL = (uri: string): string => {
+  const videoURL = mediaURItoVideoURL(uri);
+  return videoURL.replace(/\/file$/, '/480p/mp4/file.mp4');
+};
+
+const generateId = () => crypto.randomUUID();
+
+const isEmptyString = (value?: string | null): boolean =>
+  value === undefined || value === null || value.trim() === '';
+
+export const applyOrganizeMediaItemsChanges = (
+  items: OrganizeMediaItem[],
+  changes: OrganizeMediaItemChange[],
+): OrganizeMediaItem[] =>
+  items
+    .map((item) => {
+      const itemChange = changes.find(({ itemId }) => item.id === itemId);
+      return { ...item, ...itemChange?.data };
+    })
+    .sort(({ orderIndex: a }, { orderIndex: b }) => Number(a) - Number(b))
+    .map(({ sortOrder, ...item }, orderIndex) => ({
+      ...item,
+      orderIndex,
+    }));
+
+/**
+ * Converts WixCodeGalleryItem link (object or string) + target
+ * to OrganizeMediaItemLink. Handles both link formats.
+ * Ported from cms-web's convertWixCodeGalleryItemLinkToOrganizeMediaItemLink.
+ */
+export const convertWixCodeGalleryItemLinkToOrganizeMediaItemLink = (
+  link?: WixCodeGalleryItemLink | null,
+  target?: WixCodeGalleryItemTarget,
+): OrganizeMediaItemLink | undefined => {
+  if (link === null || link === undefined) {
+    return undefined;
+  }
+
+  switch (typeof link) {
+    case 'object': {
+      if (!link.url || isEmptyString(link.url)) {
+        return undefined;
+      }
+      return {
+        url: link.url,
+        text: link.url,
+        target: link.target || target || '_blank',
+      };
+    }
+    case 'string': {
+      if (isEmptyString(link)) {
+        return undefined;
+      }
+      return {
+        url: link,
+        text: link,
+        target: target || '_blank',
+      };
+    }
+    default:
+      return undefined;
+  }
+};
+
+export const convertWixCodeGalleryItemToOrganizeMediaItem = (
+  item: WixCodeGalleryItem,
+  orderIndex: number,
+): OrganizeMediaItem | null => {
+  const {
+    src,
+    alt,
+    description,
+    title: itemTitle = '',
+    fileName,
+    settings,
+    link: itemLink,
+    target,
+  } = item;
+
+  const parsed = parseMediaItemUri(src);
+  if (isMediaItemError(parsed)) {
+    return null;
+  }
+
+  const focalPoint = {
+    x: settings?.focalPoint?.[0] ?? 0.5,
+    y: settings?.focalPoint?.[1] ?? 0.5,
+  };
+
+  const title = itemTitle.length > 0 ? itemTitle : parsed.title || '';
+  const link = convertWixCodeGalleryItemLinkToOrganizeMediaItemLink(
+    itemLink,
+    target,
+  );
+
+  if (parsed.type === 'image') {
+    return {
+      dataType: 'Photo',
+      id: generateId(),
+      mediaUrl: parsed.mediaId,
+      fileName: parsed.mediaId,
+      name: title,
+      orderIndex,
+      isSecure: false,
+      photoMetadata: {
+        width: parsed.width,
+        height: parsed.height,
+        focalPoint,
+      },
+      title,
+      alt,
+      description,
+      link,
+      metaData: {
+        title,
+        description,
+        link,
+        height: parsed.height,
+        width: parsed.width,
+        fileName,
+        name: title,
+      },
+    };
+  }
+
+  if (parsed.type === 'video') {
+    return {
+      dataType: 'Video',
+      id: generateId(),
+      mediaUrl: convertMediaURIToPreviewVideoURL(src),
+      fileName: parsed.mediaId,
+      name: title,
+      orderIndex,
+      thumbnail: parsed.mediaId,
+      videoMetadata: {
+        width: parsed.width,
+        height: parsed.height,
+        duration: 0,
+        posters: parsed.posterId ? [{ url: parsed.posterId }] : [],
+        focalPoint,
+      },
+      title,
+      alt,
+      description,
+      link,
+      metaData: {
+        title,
+        description,
+        link,
+        height: parsed.height,
+        width: parsed.width,
+        fileName,
+        name: title,
+      },
+    };
+  }
+
+  return null;
+};
+
+/**
+ * Converts a media URI string (from media manager) to an OrganizeMediaItem.
+ * Always sets name to mediaId. The dialog's onAddMedia handles the EMPTY
+ * naming preference by calling setItemsEmptyTitles.
+ */
+export const convertMediaControlItemToOrganizeMediaItem = (
+  mediaUri: string,
+): OrganizeMediaItem | null => {
+  const parsed = parseMediaItemUri(mediaUri);
+  if (isMediaItemError(parsed)) {
+    return null;
+  }
+
+  const title = parsed.title || '';
+
+  if (parsed.type === 'image') {
+    return {
+      dataType: 'Photo',
+      id: generateId(),
+      mediaUrl: parsed.mediaId,
+      fileName: parsed.mediaId,
+      name: parsed.mediaId,
+      isSecure: false,
+      photoMetadata: {
+        width: parsed.width,
+        height: parsed.height,
+        focalPoint: { x: 0.5, y: 0.5 },
+      },
+      title,
+      metaData: {
+        title,
+        height: parsed.height,
+        width: parsed.width,
+        fileName: title,
+        name: title,
+      },
+    };
+  }
+
+  if (parsed.type === 'video') {
+    return {
+      dataType: 'Video',
+      id: generateId(),
+      mediaUrl: convertMediaURIToPreviewVideoURL(mediaUri),
+      fileName: parsed.mediaId,
+      name: parsed.mediaId,
+      thumbnail: parsed.mediaId,
+      videoMetadata: {
+        width: parsed.width,
+        height: parsed.height,
+        duration: 0,
+        posters: parsed.posterId ? [{ url: parsed.posterId }] : [],
+        focalPoint: { x: 0.5, y: 0.5 },
+      },
+      title,
+      metaData: {
+        title,
+        height: parsed.height,
+        width: parsed.width,
+        fileName: title,
+        name: title,
+      },
+    };
+  }
+
+  return null;
+};
+
+/** Reset titles to empty — used when defaultNewItemName is EMPTY.
+ *  Only clears `title`, not `name` (matches cms-web behavior). */
+export const setItemsEmptyTitles = (
+  items: OrganizeMediaItem[],
+): OrganizeMediaItem[] => items.map((item) => ({ ...item, title: '' }));
+
+export const convertOrganizeMediaItemToWixCodeGalleryItem = (
+  item: OrganizeMediaItem,
+): WixCodeGalleryItem | null => {
+  const {
+    dataType,
+    mediaUrl = '',
+    fileName = '',
+    title = '',
+    description = '',
+    alt = '',
+    link,
+    metaData,
+  } = item;
+
+  const settings =
+    dataType === 'Photo' ? item.photoMetadata : item.videoMetadata;
+
+  const createParams =
+    dataType === 'Photo'
+      ? {
+          type: 'image' as const,
+          mediaId: fileName,
+          title: encodeURIComponent(title),
+          width: item.photoMetadata?.width ?? 0,
+          height: item.photoMetadata?.height ?? 0,
+        }
+      : {
+          type: 'video' as const,
+          mediaId: fileName,
+          title: encodeURIComponent(title),
+          width: item.videoMetadata?.width ?? 0,
+          height: item.videoMetadata?.height ?? 0,
+          posterId: item.videoMetadata?.posters?.[0]?.url ?? '',
+        };
+
+  const media = createMediaItemUri(createParams);
+  if (isMediaItemError(media)) {
+    return null;
+  }
+
+  return {
+    type: dataType === 'Photo' ? 'image' : 'video',
+    slug: mediaUrl,
+    src: media.item,
+    title,
+    description,
+    alt,
+    fileName: metaData?.fileName ?? '',
+    settings: {
+      ...settings,
+      focalPoint: [
+        settings?.focalPoint?.x ?? 0.5,
+        settings?.focalPoint?.y ?? 0.5,
+      ],
+    },
+    ...(link?.url && !isEmptyString(link.url)
+      ? { link: link.url, target: link.target || '_blank' }
+      : {}),
+  };
+};