@orangelogic/orange-dam-content-browser-sdk 2.1.52 → 2.1.54

package/src/components/FormatDialog/CropPreviewer/CropPreviewer.tsx

@@ -0,0 +1,224 @@
+import _debounce from 'lodash-es/debounce';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import Cropper, { Area, Point } from 'react-easy-crop';
+
+import { Unit } from '@/types/assets';
+import { FORMAT_DIALOG_PREVIEW_SIZE } from '@/utils/constants';
+import { calculateAspectRatioFit, cropImage, resizeImage, rotateImage } from '@/utils/image';
+
+import { Container } from '../Previewer/Previewer.styled';
+
+type Props = {
+  disabled: boolean;
+  loadable: boolean;
+  image: {
+    url: string;
+    originalUrl: string;
+    extension: string;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    rotation: number;
+  };
+  selectedProxy: string;
+  resizer: {
+    width: number;
+    height: number;
+  };
+  cropper: {
+    width: number;
+    height: number;
+    percentageWidth: number;
+    percentageHeight: number;
+    x: number;
+    y: number;
+    unit: Unit;
+  };
+  rotation: number;
+  onCropComplete: (croppedArea: Area, croppedAreaPixels: Area) => void;
+  onLoadingChange: (loading: boolean) => void;
+};
+
+export type CropPreviewerHandle = {
+  applyResize: () => Promise<string>;
+  applyCrop: () => Promise<string>;
+  applyRotation: () => Promise<string>;
+  setZoom: (zoom: number) => void;
+};
+
+const CropPreviewer = forwardRef<CropPreviewerHandle, Props>(({
+  disabled,
+  loadable,
+  image,
+  resizer,
+  cropper,
+  rotation,
+  selectedProxy,
+  onCropComplete,
+  onLoadingChange,
+}, ref) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [resizedImage, setResizedImage] = useState<string>(image?.url ?? '');
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const { url, originalUrl, extension } = image;
+    const { width, height } = resizer;
+    const resize = async () => {
+      if (loadable) {
+        onLoadingChange(true);
+        const { width: newWidth, height: newHeight } = calculateAspectRatioFit(image.width, image.height, width, height);
+        const { url: imageUrl } = await resizeImage(url,
+          newWidth,
+          newHeight,
+          containerRef.current?.clientWidth ?? window.innerWidth, FORMAT_DIALOG_PREVIEW_SIZE,
+        );
+        setResizedImage(extension === 'gif' ? originalUrl : imageUrl);
+        onLoadingChange(false);
+      } else {
+        setResizedImage(url);
+      }
+    };
+    const debounceResize = _debounce(resize, 300, { leading: true });
+    debounceResize();
+  }, [image, loadable, onLoadingChange, resizer, selectedProxy]);
+
+  const applyResize = useCallback(async () => {
+    return resizedImage;
+  }, [resizedImage]);
+
+  const applyCrop = useCallback(async () => {
+    const { width, height, x, y, unit } = cropper;
+    const options = { x, y, width, height };
+    options.x = (x / 100) * image.width;
+    options.y = (y / 100) * image.height;
+    if (loadable) {
+      onLoadingChange(true);
+      if (unit === Unit.AspectRatio) {
+        const { width: newWidth, height: newHeight } = calculateAspectRatioFit(image.width, image.height, width, height);
+        options.width = newWidth / zoom;
+        options.height = newHeight  / zoom;
+      }
+      const result = await cropImage(
+        {
+          url: image.url,
+          width: image.width,
+          height: image.height,
+        },
+        options,
+      );
+      onLoadingChange(false);
+      return result;
+    } else {
+      return Promise.resolve(image.url);
+    }
+  }, [cropper, image.width, image.height, image.url, loadable, onLoadingChange, zoom]);
+
+  const applyRotation = useCallback(async () => {
+    if (loadable) {
+      onLoadingChange(true);
+      const result = await rotateImage(
+        {
+          url: image.url,
+          width: image.width,
+          height: image.height,
+        },
+        rotation,
+      );
+      onLoadingChange(false);
+      return result;
+    } else {
+      return Promise.resolve(image.url);
+    }
+  }, [image.height, image.url, image.width, loadable, onLoadingChange, rotation]);
+
+  useImperativeHandle(ref, () => ({
+    applyResize,
+    applyCrop,
+    applyRotation,
+    setZoom,
+  }));
+
+  const resetCropper = useCallback(() => {
+    setCrop({ x: 0, y: 0 });
+    setZoom(1);
+  }, []);
+
+  const onCropChange = useCallback(
+    (location: Point) => {
+      if (disabled) {
+        return;
+      }
+      setCrop(location);
+    },
+    [disabled],
+  );
+
+  const onMediaLoaded = useCallback(() => {
+    setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    resetCropper();
+  }, [disabled, resetCropper]);
+
+
+  const objectFit = useMemo(() => {
+    const container = containerRef.current;
+    if (!container || isLoading) {
+      return 'contain';
+    }
+    const imgAspect = resizer.width / resizer.height;
+
+    const containerAspect = container.clientHeight ?  (container.clientWidth) / (container.clientHeight) : 0;
+
+    return imgAspect > containerAspect ? 'horizontal-cover' : 'vertical-cover';
+  }, [isLoading, resizer]);
+
+  return (
+    <Container
+      ref={containerRef}
+      style={{
+        height: `${FORMAT_DIALOG_PREVIEW_SIZE}px`,
+      }}
+    >
+      {loadable && (
+        <Cropper
+          image={resizedImage}
+          crop={crop}
+          zoom={zoom}
+          aspect={cropper.width / cropper.height}
+          rotation={rotation}
+          objectFit={objectFit}
+          onCropChange={onCropChange}
+          onCropComplete={onCropComplete}
+          onMediaLoaded={onMediaLoaded}
+          onZoomChange={setZoom}
+          zoomWithScroll={cropper.unit === Unit.AspectRatio}
+          style={{
+            containerStyle: {
+              cursor: disabled ? 'default' : 'move',
+              pointerEvents: disabled ? 'none' : 'auto',
+            },
+            cropAreaStyle: {
+              display: disabled ? 'none' : 'block',
+            },
+            mediaStyle: {
+              opacity: isLoading ? 0 : 1,
+            },
+          }}
+        />
+      )}
+      {isLoading && (
+        <div className="loading">
+          <cx-skeleton className="loading__skeleton"></cx-skeleton>
+          <cx-spinner className="loading__spinner"></cx-spinner>
+        </div>
+      )}
+    </Container>
+  );
+});
+
+export default CropPreviewer;

package/{build/components/FormatDialog/CropPreviewer/index.d.ts → src/components/FormatDialog/CropPreviewer/index.ts}

@@ -1,3 +1,3 @@
 import { CropPreviewerHandle } from './CropPreviewer';
 export { default } from './CropPreviewer';
-export type { CropPreviewerHandle };
+export type { CropPreviewerHandle };

package/src/components/FormatDialog/CustomRendition/CustomRendition.constants.ts

@@ -0,0 +1,24 @@
+export const cropModes = [{
+  value: 'free',
+  label: 'Freeform',
+}, {
+  value: '16:9',
+  label: 'Widescreen (16:9)',
+}, {
+  value: '9:16',
+  label: 'Phone (9:16)',
+}, {
+  value: '4:3',
+  label: 'Presentation (4:3)',
+}, {
+  value: '1:1',
+  label: 'Square (1:1)',
+}, {
+  value: '3:2',
+  label: 'Landscape (3:2)',
+}, {
+  value: '2:3',
+  label: 'Portrait (2:3)',
+}];
+
+export const INPUT_DEBOUNCE_DELAY = 1000;

package/src/components/FormatDialog/CustomRendition/CustomRendition.styled.ts

@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  .details__summary__icon {
+    width: var(--cx-font-size-3x-large);
+    height: var(--cx-font-size-3x-large);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--cx-color-neutral-100);
+    border-radius: var(--cx-border-radius-large);
+    color: var(--cx-color-neutral-600);
+    font-size: var(--cx-font-size-large);
+  }
+
+  .details__summary__input-label {
+    color: var(--cx-color-neutral-400);
+    margin-inline-start: var(--cx-spacing-small);
+  }
+
+  cx-input::part(input) {
+    padding-left: var(--cx-spacing-small);
+    padding-right: var(--cx-spacing-small);
+  }
+
+  cx-space {
+    width: 100%;
+
+    cx-input {
+      flex: 1;
+    }
+  }
+
+  .resize__unit-select {
+    width: 120px;
+  }
+
+  .resize__input-group {
+    display: flex;
+    flex: 1;
+  }
+
+  .extension {
+    padding: var(--cx-spacing-small) var(--cx-spacing-medium);
+    border: solid 1px var(--cx-color-neutral-200);
+    background-color: var(--cx-color-neutral-0);
+
+    cx-select{
+      flex: 1;
+      width: 100%;
+    }
+  }
+
+  cx-details:not(:last-child)::part(base) {
+    border-bottom-width: 0;
+  }
+`;

package/src/components/FormatDialog/CustomRendition/CustomRendition.tsx

@@ -0,0 +1,178 @@
+import _isEqualWith from 'lodash-es/isEqualWith';
+import { FC, useEffect, useMemo, useRef } from 'react';
+
+import { Unit } from '@/types/assets';
+import { CxHideEvent, CxShowEvent } from '@/web-component';
+
+import { Container } from './CustomRendition.styled';
+import { Crop, Extension, Format, Resize, Rotate } from './transformations';
+import { Proxy } from '@/types/search';
+
+type Props = {
+  activeSetting: string;
+  extensions: { displayName: string; value: string }[];
+  availableProxies: Proxy[];
+  imageSize: {
+    width: number;
+    height: number;
+  }
+  resize: {
+    width: number;
+    height: number;
+    unit: Unit;
+  };
+  crop: {
+    width: number;
+    height: number;
+    unit: Unit;
+    percentageWidth: number;
+    percentageHeight: number;
+  };
+  extension: string;
+  lastAppliedResize: Record<Unit, {
+    width: number;
+    height: number;
+    unit: Unit;
+  }>;
+  lastAppliedCrop: Record<Unit, {
+    width: number;
+    height: number;
+    percentageWidth: number;
+    percentageHeight: number;
+    x: number;
+    y: number;
+    unit: Unit;
+  }>;
+  proxy: string;
+  rotation: number;
+  onCropChange: (
+    width: number,
+    height: number,
+    unit: Unit,
+    shouldApply: boolean
+  ) => void;
+  onExtensionChange: (extension: string) => void;
+  onFormatChange: (format: Proxy) => void;
+  onResizeChange: (
+    width: number,
+    height: number,
+    unit: Unit,
+    shouldApply: boolean
+  ) => void;
+  onRotateChange: (rotation: number, shouldApply: boolean) => void;
+  onViewChange: (view: string) => void;
+};
+
+const CustomRendition: FC<Props> = ({
+  activeSetting,
+  extensions,
+  availableProxies,
+  imageSize,
+  resize,
+  crop,
+  extension,
+  lastAppliedCrop,
+  lastAppliedResize,
+  proxy,
+  rotation,
+  onCropChange,
+  onExtensionChange,
+  onFormatChange,
+  onResizeChange,
+  onRotateChange,
+  onViewChange,
+}: Props) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) { return; }
+
+    const onDetailsShow = (e: CxShowEvent) => {
+      if ((e.target as HTMLElement).localName === 'cx-details') {
+        onViewChange((e.target as HTMLElement).dataset.value ?? '');
+      }
+    };
+    const onDetailsHide = (e: CxHideEvent) => {
+      const allDetails = container?.querySelectorAll('cx-details');
+
+      if ((e.target as HTMLElement).localName === 'cx-details') {
+        const allDetailsClosed = Array.from(allDetails).every((details) => {
+          if (details.open) {
+            return false;
+          }
+          return true;
+        });
+
+        if (allDetailsClosed) {
+          onViewChange('');
+        }
+      }
+    };
+    container.addEventListener('cx-show', onDetailsShow);
+    container.addEventListener('cx-hide', onDetailsHide);
+
+    return () => {
+      container.removeEventListener('cx-show', onDetailsShow);
+      container.removeEventListener('cx-hide', onDetailsHide);
+    };
+  }, [onViewChange]);
+
+  const disabledCropApply = useMemo(() => {
+    return _isEqualWith(crop, lastAppliedCrop[crop.unit], (a, b) => {
+      if (!isNaN(a) && !isNaN(b)) {
+        return Math.round(a) === Math.round(b);
+      }
+      return undefined;
+    });
+  }, [crop, lastAppliedCrop]);
+
+  const formats = useMemo(() => {
+    return availableProxies.filter(item => !item.cdnName);
+  }, [availableProxies]);
+  
+  return (
+    <Container ref={containerRef}>
+      <Format
+        open={activeSetting === 'format'}
+        format={proxy}
+        formats={formats}
+        onApply={onFormatChange}
+      />
+      <Crop
+        open={activeSetting === 'crop'}
+        width={crop.width}
+        height={crop.height}
+        percentageWidth={crop.percentageWidth}
+        percentageHeight={crop.percentageHeight}
+        disabledCropApply={disabledCropApply}
+        lastAppliedSetting={lastAppliedCrop}
+        maxWidth={resize.width}
+        maxHeight={resize.height}
+        unit={crop.unit}
+        onChange={(width, height, unit) => onCropChange(width, height, unit, false)}
+        onApply={() => onCropChange(crop.width, crop.height, crop.unit, true)}
+      />
+      <Resize
+        open={activeSetting === 'resize'}
+        width={resize.width}
+        height={resize.height}
+        lastAppliedSetting={lastAppliedResize}
+        maxWidth={imageSize.width}
+        maxHeight={imageSize.height}
+        unit={resize.unit}
+        onChange={(width, height, unit) => onResizeChange(width, height, unit, false)}
+        onApply={() => onResizeChange(resize.width, resize.height, resize.unit, true)}
+      />
+      <Rotate
+        open={activeSetting === 'rotate'}
+        rotation={rotation}
+        onChange={(newRotation) => onRotateChange(newRotation, false)}
+        onApply={() => onRotateChange(rotation, true)}
+      />
+      <Extension extension={extension} extensions={extensions} onChange={onExtensionChange} />
+    </Container>
+  );
+};
+
+export default CustomRendition;

package/src/components/FormatDialog/CustomRendition/index.ts

@@ -0,0 +1 @@
+export { default } from './CustomRendition';