@wix/patterns-fields 1.0.0

package/src/components/media-gallery/media-gallery-item-thumbnail.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { getImageDimensions } from '../../auto-field-types';
+
+import type { MediaImageProps } from '../media-image';
+import { MediaImage } from '../media-image';
+
+export interface MediaGalleryItemThumbnailProps extends MediaImageProps {
+  src: string;
+}
+
+export const MediaGalleryItemThumbnail: React.FC<
+  MediaGalleryItemThumbnailProps
+> = ({ width, height = 30, ...props }) => {
+  const dimensions = (() => {
+    try {
+      return getImageDimensions(props.src);
+    } catch (e) {
+      console.error(e);
+      return { width: 0, height: 0 };
+    }
+  })();
+
+  const actualHeight = parseInt(height.toString(), 10);
+  const actualWidth = Math.ceil(
+    (dimensions.width * actualHeight) / dimensions.height,
+  );
+
+  return (
+    <MediaImage
+      suspended
+      transparent
+      borderRadius={1}
+      width={`${actualWidth}px`}
+      height={`${actualHeight}px`}
+      size={MediaImage.Size.S}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type { WixCodeGalleryItem } from '../../auto-field-types';
+import { Box } from '@wix/design-system';
+
+import { MediaGalleryItemThumbnail } from './media-gallery-item-thumbnail';
+
+export interface MediaGalleryViewProps {
+  data?: WixCodeGalleryItem[];
+}
+
+export function MediaGalleryView({ data }: MediaGalleryViewProps) {
+  const items: WixCodeGalleryItem[] = data ?? [];
+  return (
+    <Box gap="SP1" maxWidth="100%" overflow="hidden">
+      {items.map(({ src }, index) => (
+        <MediaGalleryItemThumbnail key={`${src}:${index}`} src={src} />
+      ))}
+    </Box>
+  );
+}
+
+MediaGalleryView.displayName = 'MediaGalleryView';

package/src/components/media-gallery/media-preview-modal.tsx

@@ -0,0 +1,218 @@
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import type { NextButtonProps, PrevButtonProps } from '@wix/design-system';
+import {
+  Box,
+  Button,
+  IconButton,
+  Image,
+  Loader,
+  Modal,
+  ModalPreviewLayout,
+  TextButton,
+  Tooltip,
+} from '@wix/design-system';
+import {
+  Replace,
+  DownloadImport as Download,
+  Delete,
+} from '@wix/wix-ui-icons-common';
+import {
+  getMediaTitle,
+  isMediaVideoURI,
+  mediaURItoImageURL,
+} from '../../auto-field-types';
+import { useTranslations } from '../../hooks';
+import type { TranslationsKeys } from '../../services/translations';
+
+import { classes } from './form-media-gallery-field.st.css.js';
+import { convertMediaURIToPreviewVideoURL } from './media-gallery-dialog/utils';
+
+export interface MediaPreviewLayoutTextKeys {
+  replace: TranslationsKeys;
+  download: TranslationsKeys;
+  delete: TranslationsKeys;
+}
+
+export interface MediaPreviewProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onRequestMedia: () => void;
+  onClearMedia?: () => void;
+  onDownloadMedia: (value?: string) => void;
+  textKeys: MediaPreviewLayoutTextKeys;
+  value?: string | string[];
+  readOnly?: boolean;
+}
+
+export const MediaPreviewModal: React.FC<MediaPreviewProps> = ({
+  isOpen,
+  onClose,
+  value,
+  onRequestMedia,
+  onClearMedia,
+  onDownloadMedia,
+  textKeys,
+  readOnly,
+}) => {
+  if (!isOpen || !value) {
+    return null;
+  }
+
+  return (
+    <Modal isOpen screen="full">
+      <MediaPreviewLayout
+        src={value}
+        onClose={onClose}
+        textKeys={textKeys}
+        onDownload={onDownloadMedia}
+        onClear={onClearMedia}
+        onReplace={onRequestMedia}
+        readOnly={readOnly}
+      />
+    </Modal>
+  );
+};
+
+interface MediaPreviewLayoutProps {
+  src: string[] | string;
+  onClose: () => void;
+  textKeys: MediaPreviewLayoutTextKeys;
+  onReplace?: () => void;
+  onClear?: () => void;
+  onDownload?: (src?: string) => void;
+  readOnly?: boolean;
+}
+
+const MediaPreviewLayout: React.FC<MediaPreviewLayoutProps> = ({
+  src,
+  onClose,
+  textKeys,
+  onDownload,
+  onReplace,
+  onClear,
+  readOnly,
+}) => {
+  const { t } = useTranslations();
+  const sources = useMemo(() => (Array.isArray(src) ? src : [src]), [src]);
+  const [current, setCurrent] = useState(sources[0]);
+  const title = getMediaTitle(current);
+
+  const handleDownload = useCallback(() => {
+    if (sources.length > 1) {
+      onDownload?.(current);
+    } else {
+      onDownload?.();
+    }
+  }, [sources, onDownload, current]);
+
+  const prevButtonProps = {
+    tooltipText: t('CMS.mediaGallery.preview.previousItem'),
+    onClick: (prevIndex: number) => setCurrent(sources[prevIndex]),
+  } as PrevButtonProps;
+
+  const nextButtonProps = {
+    tooltipText: t('CMS.mediaGallery.preview.nextItem'),
+    onClick: (nextIndex: number) => setCurrent(sources[nextIndex]),
+  } as NextButtonProps;
+
+  const handleClear = useCallback(() => {
+    onClear?.();
+    onClose();
+  }, [onClear, onClose]);
+
+  return (
+    <ModalPreviewLayout
+      title={title}
+      prevButtonProps={prevButtonProps}
+      nextButtonProps={nextButtonProps}
+      actions={
+        <Box verticalAlign="middle">
+          <Box marginRight={2}>
+            <TextButton
+              size="small"
+              skin="light"
+              prefixIcon={<Download />}
+              onClick={handleDownload}
+            >
+              {t(textKeys.download)}
+            </TextButton>
+          </Box>
+          <Box marginRight={2}>
+            <Button
+              priority="secondary"
+              size="small"
+              skin="light"
+              prefixIcon={<Replace />}
+              onClick={onReplace}
+              disabled={readOnly}
+            >
+              {t(textKeys.replace)}
+            </Button>
+          </Box>
+          {onClear && (
+            <Box marginRight={2}>
+              <Tooltip content={t(textKeys.delete)}>
+                <IconButton
+                  priority="secondary"
+                  size="small"
+                  skin="light"
+                  onClick={handleClear}
+                  disabled={readOnly}
+                >
+                  <Delete />
+                </IconButton>
+              </Tooltip>
+            </Box>
+          )}
+        </Box>
+      }
+      onClose={onClose}
+    >
+      {sources.map((mediaSrc: string, i) => (
+        <MediaPreviewItem key={i} src={mediaSrc} />
+      ))}
+    </ModalPreviewLayout>
+  );
+};
+
+const MediaPreviewItem: React.FC<{ src: string }> = ({ src }) => {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => setLoading(true), [src]);
+  const onLoad = useCallback(() => setLoading(false), []);
+
+  if (!src) return null;
+
+  const previewURL = mediaURItoImageURL(src, window.innerWidth);
+
+  return (
+    <>
+      {loading && (
+        <Box align="center" verticalAlign="middle" width="100%" height="100%">
+          <Loader size="small" />
+        </Box>
+      )}
+      {isMediaVideoURI(src) ? (
+        <video
+          style={{ display: loading ? 'none' : 'initial' }}
+          poster={previewURL}
+          onLoadedData={onLoad}
+          controls
+          className={classes.previewVideo}
+          autoPlay
+          loop
+          muted
+        >
+          <source src={convertMediaURIToPreviewVideoURL(src)} />
+        </video>
+      ) : (
+        <Image
+          style={{ display: loading ? 'none' : 'initial' }}
+          className={classes.previewImage}
+          onLoad={onLoad}
+          src={previewURL}
+        />
+      )}
+    </>
+  );
+};

package/src/components/media-image/index.ts

@@ -0,0 +1 @@
+export * from './media-image';

package/src/components/media-image/media-image.st.css

@@ -0,0 +1,30 @@
+@property st-global(--wds-color-red-200);
+@property st-global(--wsr-color-R20);
+@property st-global(--wds-color-black-550);
+@property st-global(--wsr-color-D55);
+
+.root {
+  -st-states: error, loading;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.root:error {
+  --from: calc(50% - 0.5px);
+  --to: calc(50% + 0.5px);
+
+  background-image: linear-gradient(
+    to bottom right,
+    transparent var(--from),
+    var(--wds-color-red-200, var(--wsr-color-R20)) var(--from),
+    var(--wds-color-red-200, var(--wsr-color-R20)) var(--to),
+    transparent var(--to)
+  );
+}
+
+.root:error > * {
+  opacity: 0;
+}

package/src/components/media-image/media-image.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "mediaimage1096824462";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"mediaimage1096824462__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage1096824462-from","to":"--mediaimage1096824462-to"}; 
+
+
+
+

package/src/components/media-image/media-image.tsx

@@ -0,0 +1,151 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+import type { ImageProps } from '@wix/design-system';
+import { Image } from '@wix/design-system';
+import { mediaURItoImageURL, ThumbnailSize } from '../../auto-field-types';
+
+import { classes, st } from './media-image.st.css.js';
+import { useRequestIdleCallback } from '../../hooks';
+
+export interface MediaImageProps
+  extends Omit<ImageProps, 'onLoad' | 'onError'> {
+  size?: ThumbnailSize | number;
+  suspended?: boolean;
+  overlay?: React.ReactNode;
+  onLoad?: () => void;
+  onError?: () => void;
+}
+
+type MediaImageFC = React.FC<MediaImageProps> & {
+  Size: typeof ThumbnailSize;
+  loadedImages: Set<string>;
+  brokenImages: Set<string>;
+  resetBrokenImagesCache: () => void;
+};
+
+export const MediaImage: MediaImageFC = ({
+  size = ThumbnailSize.L,
+  fit = 'cover',
+  suspended = false,
+  overlay,
+  src,
+  onLoad,
+  onError,
+  width = '100%',
+  height = '100%',
+  borderRadius,
+  onMouseEnter,
+  onMouseLeave,
+  className,
+  dataHook,
+  ...props
+}) => {
+  const [allowLoading, setAllowLoading] = useState(
+    !suspended || isLoadedImage(src),
+  );
+  useEffect(
+    () => setAllowLoading(!suspended || isLoadedImage(src)),
+    [src, suspended],
+  );
+
+  const [loading, setLoading] = useState(allowLoading);
+
+  const [error, setError] = useState(isBrokenImage(src));
+  useEffect(() => {
+    const isBroken = isBrokenImage(src);
+    setError(isBroken);
+    isBroken && onError?.();
+  }, [src, onError]);
+
+  const requestFrameCallback = useRequestIdleCallback();
+  useEffect(() => {
+    if (!allowLoading) {
+      requestFrameCallback(() => {
+        setAllowLoading(true);
+        setLoading(true);
+      });
+    }
+  }, [allowLoading, requestFrameCallback]);
+
+  const onImageLoad = useCallback(() => {
+    if (allowLoading && src) {
+      imageLoaded(src);
+      setLoading(false);
+      setError(false);
+    }
+
+    onLoad?.();
+  }, [allowLoading, onLoad, src]);
+
+  const onImageError = useCallback(() => {
+    if (allowLoading && src) {
+      imageBroken(src);
+      setLoading(false);
+      setError(true);
+    }
+
+    onError?.();
+  }, [allowLoading, onError, src]);
+
+  return (
+    <picture
+      data-hook={dataHook}
+      style={{ width, height, borderRadius }}
+      className={st(classes.root, { error, loading }, className)}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {!error && (
+        <Image
+          {...props}
+          fit={fit}
+          src={allowLoading && src ? mediaURItoImageURL(src, size) : ''}
+          width={width}
+          height={height}
+          borderRadius={borderRadius}
+          onLoad={onImageLoad}
+          dataHook="media-image-image"
+          onError={onImageError}
+        />
+      )}
+      {overlay}
+    </picture>
+  );
+};
+
+MediaImage.displayName = 'MediaImage';
+
+MediaImage.Size = ThumbnailSize;
+
+MediaImage.loadedImages = new Set();
+MediaImage.brokenImages = new Set();
+
+MediaImage.resetBrokenImagesCache = () => {
+  MediaImage.brokenImages.clear();
+};
+
+export const useResetMediaImagesCacheEffect = () => {
+  useEffect(
+    () => () => {
+      MediaImage.resetBrokenImagesCache();
+    },
+    [],
+  );
+};
+
+function imageLoaded(src: string) {
+  MediaImage.loadedImages.add(src);
+  MediaImage.brokenImages.delete(src);
+}
+
+function isLoadedImage(src?: string) {
+  return src ? MediaImage.loadedImages.has(src) : false;
+}
+
+function imageBroken(src: string) {
+  MediaImage.brokenImages.add(src);
+}
+
+function isBrokenImage(src?: string) {
+  return src ? MediaImage.brokenImages.has(src) : false;
+}

package/src/components/media-image/overlays/index.ts

@@ -0,0 +1,2 @@
+export { VideoIndicatorOverlay } from './video-indicator-overlay';
+export type { IconOverlayProps, IconOverlaySize, IconOverlayPlacement, MediaImageOverlayProps } from './types';

package/src/components/media-image/overlays/overlay.st.css

@@ -0,0 +1,41 @@
+@property st-global(--wds-color-white);
+
+:vars {
+    iconShadow: drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6));
+}
+
+.iconOverlay {
+    -st-states:
+        size(enum(small, medium, large)),
+        placement(enum(topLeft, bottomLeft));
+
+    position: absolute;
+
+    color: var(--wds-color-white, var(--wsr-color-D80, #FFFFFF));
+    background-color: transparent;
+
+    filter: value(iconShadow);
+    -webkit-filter: value(iconShadow);
+}
+
+.iconOverlay:size(small) {
+    width: 20px;
+    height: 20px;
+}
+.iconOverlay:size(medium) {
+    width: 24px;
+    height: 24px;
+}
+.iconOverlay:size(large) {
+    width: 28px;
+    height: 28px;
+}
+
+.iconOverlay:placement(topLeft) {
+    top: 2px;
+    left: 2px;
+}
+.iconOverlay:placement(bottomLeft) {
+    bottom: 2px;
+    left: 2px;
+}

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "overlay1012308888";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"overlay1012308888__root","iconOverlay":"overlay1012308888__iconOverlay"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {"iconShadow":"drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6))"}; 
+export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay1012308888-wsr-color-D80"}; 
+
+
+
+

package/src/components/media-image/overlays/types.ts

@@ -0,0 +1,11 @@
+export type IconOverlaySize = 'small' | 'medium' | 'large';
+export type IconOverlayPlacement = 'topLeft' | 'bottomLeft';
+
+export interface MediaImageOverlayProps {
+  src?: string;
+}
+
+export interface IconOverlayProps extends MediaImageOverlayProps {
+  size?: IconOverlaySize;
+  placement?: IconOverlayPlacement;
+}

package/src/components/media-image/overlays/video-indicator-overlay.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { VideoCameraSmall } from '@wix/wix-ui-icons-common';
+
+import { st, classes } from './overlay.st.css.js';
+import type { IconOverlayProps } from './types';
+
+export const VideoIndicatorOverlay: React.FC<IconOverlayProps> = ({
+  src,
+  size = 'small',
+  placement = 'bottomLeft',
+}) => {
+  return src ? (
+    <VideoCameraSmall
+      className={st(classes.iconOverlay, { size, placement })}
+    />
+  ) : null;
+};
+
+VideoIndicatorOverlay.displayName = 'VideoIndicatorOverlay';

package/src/components/media-loader/index.ts

@@ -0,0 +1 @@
+export * from './media-loader';

package/src/components/media-loader/media-loader.st.css

@@ -0,0 +1,20 @@
+@property st-global(--wds-color-blue-300);
+@property st-global(--wsr-color-B30);
+
+:vars {
+    loaderBorderRadius: 6px;
+    blue300: var(--wds-color-blue-300, var(--wsr-color-B30));
+}
+
+.loader {
+    -st-states: isDashed, isSolid;
+    border-radius: value(loaderBorderRadius);
+}
+
+.loader:isDashed {
+    border: dashed 1px value(blue300);
+}
+
+.loader:isSolid {
+    border: solid 1px value(blue300);
+}

package/src/components/media-loader/media-loader.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "medialoader3802590149";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"medialoader3802590149__root","loader":"medialoader3802590149__loader"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {"loaderBorderRadius":"6px","blue300":"var(--wds-color-blue-300, var(--wsr-color-B30))"}; 
+export var vars = {"wds-color-blue-300":"--wds-color-blue-300","wsr-color-B30":"--wsr-color-B30"}; 
+
+
+
+

package/src/components/media-loader/media-loader.tsx

@@ -0,0 +1,30 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { Box, Loader } from '@wix/design-system';
+
+import { style, classes } from './media-loader.st.css.js';
+
+export interface MediaLoaderProps {
+  borderStyle?: 'solid' | 'dashed';
+  className?: string;
+}
+
+export const MediaLoader: FC<MediaLoaderProps> = ({
+  borderStyle,
+  className,
+}) => (
+  <Box
+    align="center"
+    verticalAlign="middle"
+    children={<Loader size="tiny" />}
+    className={style(
+      classes.loader,
+      {
+        isSolid: borderStyle === 'solid',
+        isDashed: borderStyle === 'dashed',
+      },
+      className,
+    )}
+  />
+);