@orangelogic/orange-dam-content-browser-sdk 1.0.1-test

package/src/components/ControlBar/Facet/Facet.tsx

@@ -0,0 +1,113 @@
+import _capitalize from 'lodash-es/capitalize';
+import { FC } from 'react';
+
+type Props = {
+  facet: Record<string, number>;
+  type: string;
+  displayName: string;
+  collections: string[];
+  capitalize?: boolean;
+  loading?: boolean;
+};
+
+const Facet: FC<Props> = ({
+  facet,
+  type,
+  displayName,
+  collections,
+  capitalize = true,
+  loading = false,
+}) => {
+  if (!facet || Object.values(facet).length === 0) {
+    return null;
+  }
+
+  /* 
+    The current facet value is flat. If a facet includes the ">>" character, it means it's a subtype, and the parent type is the value before ">>". We need to group them.
+    For example, "contact >> email", "contact >> phone", and "contact >> address" should be grouped as "contact" => { email: 10, phone: 5, address: 3 }
+    The "all" key will contain the total count of all subtypes for that parent type.
+    Sometimes there are some asset belongs to the parent type but not to any subtype. In that case, we need to add the parent type to the result as well.
+    For example, "contact" => { all: 12, email: 5, phone: 3 } means that 5 of them are emails, 3 are phones, and 2 are just contacts that are directly of the parent's type.
+  */
+
+  const mappedSubtypes = Object.entries(facet).reduce((acc, [key, value]) => {
+    const [parent, subtype] = key.split('>>');
+    
+    if (!acc[parent] || typeof acc[parent] !== 'object') {
+      if (acc[parent]) {
+        acc[parent] = {
+          'all': acc[parent],
+        };
+      } else {
+        acc[parent] = {};
+      }
+    }
+    if (subtype) {
+      acc[parent][subtype] = value;
+    }
+    acc[parent].all =  (acc[parent].all || 0) + value;
+
+    return acc;
+  }, {} as Record<string, Record<string, number> | number>);
+  
+  return (
+    <cx-details open className="filter-details">
+      <cx-space
+        slot="summary"
+        align-items="center"
+        spacing="x-small"
+        wrap="nowrap"
+      >
+        <span>{displayName}</span>
+        {loading && <cx-spinner></cx-spinner>}
+      </cx-space>
+      <cx-space direction="vertical">
+        <cx-tree selection="multiple" data-facet={type}>
+          {Object.entries(mappedSubtypes).map(([key, value]) => {
+            if (typeof value === 'object') {
+              const selected = collections.includes(key);
+
+              const { all, ...rest } = value;
+
+              return (
+                <cx-tree-item
+                  key={key}
+                  data-value={key}
+                  data-type={type}
+                  readonly={loading}
+                  selected={selected}
+                >
+                  {capitalize ? _capitalize(key) : key} {!!all && `(${all})`}
+                  {Object.entries(rest).map(([subtype, count]) => (
+                    <cx-tree-item
+                      key={subtype}
+                      data-value={`${key}>>${subtype}`}
+                      data-type={type}
+                      readonly={loading}
+                      selected={collections.includes(`${key}>>${subtype}`)}
+                    >
+                      {capitalize ? _capitalize(subtype) : subtype} ({count})
+                    </cx-tree-item>
+                  ))}
+                </cx-tree-item>
+              );
+            }
+            return (
+              <cx-tree-item
+                key={key}
+                data-value={key}
+                data-type={type}
+                readonly={loading}
+                selected={collections.includes(key)}
+              >
+                {capitalize ? _capitalize(key) : key} ({value})
+              </cx-tree-item>
+            );
+          })}
+        </cx-tree>
+      </cx-space>
+    </cx-details>
+  );
+};
+
+export default Facet;

package/src/components/ControlBar/Facet/index.ts

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

package/src/components/ControlBar/index.ts

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

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/src/components/FormatDialog/CropPreviewer/index.ts

@@ -0,0 +1,3 @@
+import { CropPreviewerHandle } from './CropPreviewer';
+export { default } from './CropPreviewer';
+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';