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

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

@@ -1,224 +0,0 @@
-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/src/components/FormatDialog/CustomRendition/CustomRendition.constants.ts

@@ -1,24 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,178 +0,0 @@
-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

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