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

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

@@ -0,0 +1,249 @@
+import _debounce from 'lodash-es/debounce';
+import { FC, FormEvent, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Unit } from '@/types/assets';
+import { calculateAspectRatioFit } from '@/utils/image';
+import { CxChangeEvent, CxInput, CxSelect } from '@/web-component';
+
+import { cropModes, INPUT_DEBOUNCE_DELAY } from '../CustomRendition.constants';
+type Props = {
+  open: boolean;
+  width: number;
+  height: number;
+  disabledCropApply: boolean;
+  lastAppliedSetting: Record<Unit, {
+    width: number;
+    height: number;
+    percentageWidth: number;
+    percentageHeight: number;
+    x: number;
+    y: number;
+    unit: Unit;
+  }>;
+  maxWidth: number;
+  maxHeight: number;
+  percentageWidth: number;
+  percentageHeight: number;
+  unit: Unit;
+  onChange: (
+    width: number,
+    height: number,
+    unit: Unit,
+  ) => void;
+  onApply: () => void;
+};
+
+const Crop: FC<Props> = ({
+  open,
+  width,
+  height,
+  disabledCropApply,
+  maxWidth,
+  maxHeight,
+  percentageHeight,
+  percentageWidth,
+  unit,
+  lastAppliedSetting,
+  onChange,
+  onApply,
+}) => {
+  const [isDefined, setIsDefined] = useState(false);
+  const [mode, setMode] = useState<string>('free');
+  const [keepAspectRatio, setKeepAspectRatio] = useState(true);
+  const [invalidHeight, setInvalidHeight] = useState(false);
+  const [invalidWidth, setInvalidWidth] = useState(false);
+
+  const unitSelectRef = useRef<CxSelect>(null);
+  const formatSelectRef = useRef<CxSelect>(null);
+  const heightInputRef = useRef<CxInput>(null);
+  const widthInputRef = useRef<CxInput>(null);
+
+  useEffect(() => {
+    setMode('free');
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) {
+      if (heightInputRef.current) {
+        heightInputRef.current.value = height.toString();
+      }
+      if (widthInputRef.current) {
+        widthInputRef.current.value = width.toString();
+      }
+    }
+  }, [height, open, width]);
+
+  useEffect(() => {
+    Promise.all([
+      customElements.whenDefined('cx-input'),
+      customElements.whenDefined('cx-select'),
+    ]).then(() => {
+      setIsDefined(true);
+    });
+  }, []);
+
+  useEffect(() => {
+    const unitSelect = unitSelectRef.current;
+    if (!unitSelect || !isDefined) {
+      return;
+    }
+    const onUnitChange = (e: CxChangeEvent) => {
+      if ((e.target as HTMLOptionElement).value === Unit.AspectRatio) {
+        onChange(lastAppliedSetting[Unit.AspectRatio].width, lastAppliedSetting[Unit.AspectRatio].height, Unit.AspectRatio);
+      } else {
+        onChange(lastAppliedSetting[Unit.Pixel].width, lastAppliedSetting[Unit.Pixel].height, Unit.Pixel);
+      }
+      setMode('free');
+    };
+    unitSelect.addEventListener('cx-change', onUnitChange);
+
+    return () => {
+      unitSelect.removeEventListener('cx-change', onUnitChange);
+    };
+  }, [isDefined, width, height, onChange, maxWidth, maxHeight, percentageWidth, percentageHeight, lastAppliedSetting]);
+
+  useEffect(() => {
+    const formatSelect = formatSelectRef.current;
+    if (!formatSelect || !isDefined) {
+      return;
+    }
+    const onModeChange = (e: CxChangeEvent) => {
+      const value = (e.target as HTMLOptionElement).value;
+      if (value === 'free') {
+        setKeepAspectRatio(false);
+      } else {
+        setKeepAspectRatio(true);
+        const [widthRatio, heightRatio] = value.split(':').map(Number);
+        if (unit === Unit.Pixel) {
+          // If image size is 1024x1024 and user selects 16:9, the new size should be 1024x576
+          const { width: newWidth, height: newHeight } = calculateAspectRatioFit(maxWidth, maxHeight, widthRatio, heightRatio);
+          onChange(newWidth, newHeight, unit);
+        } else {
+          onChange(widthRatio, heightRatio, unit);
+        }
+      }
+      setMode((e.target as HTMLOptionElement).value);
+    };
+    formatSelect.addEventListener('cx-change', onModeChange);
+
+    return () => {
+      formatSelect.removeEventListener('cx-change', onModeChange);
+    };
+  }, [isDefined, maxWidth, maxHeight, unit, onChange]);
+
+  const aspectRatio = useMemo(() => {
+    return maxWidth / maxHeight;
+  }, [maxWidth, maxHeight]);
+
+
+  const handleWidthChange = _debounce((e: FormEvent<CxInput>) => {
+    if (!(e.target as HTMLInputElement).value) {
+      setInvalidWidth(true);
+      return;
+    }
+    setInvalidWidth(false);
+    const newWidth = Math.max(Math.min(Number((e.target as HTMLInputElement).value), maxWidth), 1);
+    (e.target as HTMLInputElement).value = newWidth.toString();
+    let newHeight = height;
+    if (keepAspectRatio) {
+      newHeight = Math.min(Math.round(newWidth / aspectRatio), maxHeight);
+      setInvalidHeight(false);
+    }
+    onChange(newWidth, newHeight, unit);
+  }, INPUT_DEBOUNCE_DELAY);
+
+  const handleHeightChange = _debounce((e: FormEvent<CxInput>) => {
+    if (!(e.target as HTMLInputElement).value) {
+      setInvalidHeight(true);
+      return;
+    }
+    setInvalidHeight(false);
+    const newHeight = Math.max(Math.min(Number((e.target as HTMLInputElement).value), maxHeight), 1);
+    (e.target as HTMLInputElement).value = newHeight.toString();
+    let newWidth = width;
+    if (keepAspectRatio) {
+      newWidth = Math.min(Math.round(newHeight * aspectRatio), maxWidth);
+      setInvalidWidth(false);
+    }
+    onChange(newWidth, newHeight, unit);
+  }, INPUT_DEBOUNCE_DELAY);
+
+  return (
+    <cx-details open={open} data-value="crop">
+      <cx-space slot="summary" align-items='center'>
+        <div className="details__summary__icon">
+          <cx-icon name="crop"></cx-icon>
+        </div>
+        <cx-typography variant="body2">Crop</cx-typography>
+      </cx-space>
+      <cx-space direction="vertical" spacing="small">
+        <cx-select
+          ref={formatSelectRef}
+          value={isDefined ? mode : ''}
+          hoist
+          style={{
+            width: '100%',
+          }}
+        >
+          {cropModes.map(({ value, label }) => (
+            <cx-option key={value} value={value}>{label}</cx-option>
+          ))}
+        </cx-select>
+        <cx-space spacing="small">
+          <div className="resize__input-group">
+            <cx-input
+              ref={widthInputRef}
+              placeholder="Width"
+              type="number"
+              step="1"
+              value={isDefined ? width.toString() : ''}
+              onInput={handleWidthChange}
+              required
+            >
+              <cx-typography slot="prefix" variant="body3" className="details__summary__input-label">W</cx-typography>
+            </cx-input>
+            <cx-icon-button
+              name={keepAspectRatio ? 'insert_link' : 'link_off'}
+              onClick={() => {
+                if (keepAspectRatio) {
+                  setMode('free');
+                }
+                setKeepAspectRatio(!keepAspectRatio);
+              }}
+              style={{
+                color: keepAspectRatio ? 'var(--cx-color-primary)' : undefined,
+              }}
+            ></cx-icon-button>
+            <cx-input
+              ref={heightInputRef}
+              placeholder="Height"
+              type="number"
+              step="1"
+              value={isDefined ? height.toString() : ''}
+              onInput={handleHeightChange}
+              required
+            >
+              <cx-typography slot="prefix" variant="body3" className="details__summary__input-label">H</cx-typography>
+            </cx-input>
+          </div>
+          <cx-select value={isDefined ? unit : ''} ref={unitSelectRef} hoist className="resize__unit-select">
+            <cx-option value="pixels">Pixels</cx-option>
+            <cx-option value="aspect-ratio">Aspect ratio</cx-option>
+          </cx-select>
+        </cx-space>
+        <cx-button
+          variant="primary"
+          disabled={disabledCropApply || invalidHeight || invalidWidth}
+          style={{
+            marginLeft: 'auto',
+          }}
+          onClick={onApply}
+        >
+          Apply
+        </cx-button>
+      </cx-space>
+    </cx-details>
+  );
+};
+
+export default Crop;

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

@@ -0,0 +1,54 @@
+import { CxSelect, CxChangeEvent } from '@/web-component';
+import { useState, useRef, useEffect, FC } from 'react';
+
+type Props = { 
+  extension: string, 
+  extensions: { displayName: string; value: string }[],
+  onChange: (extension: string) => void;
+};
+
+const Extension: FC<Props> = ({ 
+  extension,
+  extensions,
+  onChange,
+}) => {
+  const [isDefined, setIsDefined] = useState(false);
+  const extensionSelectRef = useRef<CxSelect>(null);
+
+  useEffect(() => {
+    Promise.all([
+      customElements.whenDefined('cx-select'),
+    ]).then(() => {
+      setIsDefined(true);
+    });
+  }, []);
+
+  useEffect(() => {
+    const extensionSelect = extensionSelectRef.current;
+    if (!extensionSelect || !isDefined) {
+      return;
+    }
+    const onExtensionChange = (e: CxChangeEvent) => {
+      const newExtension = (e.target as HTMLOptionElement).value;
+      onChange(newExtension);
+    };
+
+    extensionSelect.addEventListener('cx-change', onExtensionChange);
+    return () => {
+      extensionSelect.removeEventListener('cx-change', onExtensionChange);
+    };
+  }, [isDefined, onChange]);
+
+  return (
+    <cx-space direction="vertical" spacing="small" className="extension">
+      <cx-typography variant="body2">Extension</cx-typography>
+      <cx-select value={isDefined ? extension : ''} ref={extensionSelectRef} hoist>
+        {extensions.map((item) => (
+          <cx-option key={item.value} value={item.value}>{item.displayName}</cx-option>
+        ))}
+      </cx-select>
+    </cx-space>
+  );
+};
+
+export default Extension;

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

@@ -0,0 +1,86 @@
+import { CxSelect, CxChangeEvent } from '@/web-component';
+import { useState, useRef, useEffect, FC } from 'react';
+import { Proxy } from '@/types/search';
+
+type Props = {
+  format: string;
+  formats: Proxy[];
+  open: boolean;
+  onApply: (format: Proxy) => void;
+};
+
+const Extension: FC<Props> = ({ format, formats, open, onApply }) => {
+  const [value, setValue] = useState(format);
+  const [isDefined, setIsDefined] = useState(false);
+  const extensionSelectRef = useRef<CxSelect>(null);
+
+  useEffect(() => {
+    Promise.all([customElements.whenDefined('cx-select')]).then(() => {
+      setIsDefined(true);
+    });
+  }, []);
+
+  useEffect(() => {
+    const extensionSelect = extensionSelectRef.current;
+    if (!extensionSelect || !isDefined) {
+      return;
+    }
+    const onExtensionChange = (e: CxChangeEvent) => {
+      const newFormatId = (e.target as HTMLOptionElement).value;
+      setValue(newFormatId);
+    };
+
+    extensionSelect.addEventListener('cx-change', onExtensionChange);
+    return () => {
+      extensionSelect.removeEventListener('cx-change', onExtensionChange);
+    };
+  }, [formats, isDefined]);
+
+  useEffect(( ) => {
+    if (open) {
+      setValue(format);
+    }
+  }, [format, open]);
+
+  return (
+    <cx-details open={open} data-value="format" className="format">
+      <cx-space slot="summary" align-items="center">
+        <div className="details__summary__icon">
+          <cx-icon name="aspect_ratio"></cx-icon>
+        </div>
+        <cx-typography variant="body2">Format</cx-typography>
+      </cx-space>
+      <cx-space direction="vertical" spacing="small" className="format">
+        <cx-typography variant="body2">Format</cx-typography>
+        <cx-select
+          value={isDefined ? value : ''}
+          ref={extensionSelectRef}
+          hoist
+        >
+          {formats.map((item) => (
+            <cx-option key={item.id} value={item.id}>
+              {item.proxyLabel}
+            </cx-option>
+          ))}
+        </cx-select>
+        <cx-button
+          variant="primary"
+          style={{
+            marginLeft: 'auto',
+          }}
+          onClick={() => {
+            const selectedProxy = formats.find((item) => item.id === value);
+            if (selectedProxy) {
+              onApply(selectedProxy);
+            }
+          }}
+          disabled={value === format}
+        >
+          Apply
+        </cx-button>
+      </cx-space>
+    </cx-details>
+  );
+};
+
+export default Extension;

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

@@ -0,0 +1,176 @@
+import _debounce from 'lodash-es/debounce';
+import { FC, FormEvent, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Unit } from '@/types/assets';
+import { CxChangeEvent, CxInput, CxSelect } from '@/web-component';
+import { INPUT_DEBOUNCE_DELAY } from '../CustomRendition.constants';
+
+type Props = {
+  open: boolean;
+  width: number;
+  height: number;
+  lastAppliedSetting: Record<Unit, {
+    width: number;
+    height: number;
+  }>;
+  maxWidth: number;
+  maxHeight: number;
+  unit: Unit;
+  onChange: (
+    width: number,
+    height: number,
+    unit: Unit
+  ) => void;
+  onApply: () => void;
+};
+
+const Resize: FC<Props> = ({ open, width, height, lastAppliedSetting, maxWidth, maxHeight, unit, onChange, onApply }) => {
+  const [isDefined, setIsDefined] = useState(false);
+  const [invalidHeight, setInvalidHeight] = useState(false);
+  const [invalidWidth, setInvalidWidth] = useState(false);
+  const [keepAspectRatio, setKeepAspectRatio] = useState(true);
+  const unitSelectRef = useRef<CxSelect>(null);
+  const heightInputRef = useRef<CxInput>(null);
+  const widthInputRef = useRef<CxInput>(null);
+
+  useEffect(() => {
+    if (!open) {
+      if (heightInputRef.current) {
+        heightInputRef.current.value = height.toString();
+      }
+      if (widthInputRef.current) {
+        widthInputRef.current.value = width.toString();
+      }
+    }
+  }, [height, open, width]);
+
+  useEffect(() => {
+    Promise.all([
+      customElements.whenDefined('cx-input'),
+      customElements.whenDefined('cx-select'),
+    ]).then(() => {
+      setIsDefined(true);
+    });
+  }, []);
+
+  useEffect(() => {
+    const unitSelect = unitSelectRef.current;
+    if (!unitSelect || !isDefined) {
+      return;
+    }
+    const onUnitChange = (e: CxChangeEvent) => {
+      if ((e.target as HTMLOptionElement).value === Unit.AspectRatio) {
+        onChange(lastAppliedSetting[Unit.AspectRatio].width, lastAppliedSetting[Unit.AspectRatio].height, Unit.AspectRatio);
+      } else {
+        onChange(lastAppliedSetting[Unit.Pixel].width, lastAppliedSetting[Unit.Pixel].height, Unit.Pixel);
+      }
+    };
+    unitSelect.addEventListener('cx-change', onUnitChange);
+
+    return () => {
+      unitSelect.removeEventListener('cx-change', onUnitChange);
+    };
+  }, [isDefined, width, height, onChange, lastAppliedSetting, unit]);
+
+  const aspectRatio = useMemo(() => {
+    return maxWidth / maxHeight;
+  }, [maxWidth, maxHeight]);
+
+  const disabledApplyButton = useMemo(() => {
+    return (lastAppliedSetting[unit].width === width && lastAppliedSetting[unit].height === height);
+  }, [lastAppliedSetting, unit, width, height]);
+
+  const handleWidthChange = _debounce((e: FormEvent<CxInput>) => {
+    if (!(e.target as HTMLInputElement).value) {
+      setInvalidWidth(true);
+      return;
+    }
+    setInvalidWidth(false);
+    const newWidth = Math.max(Number((e.target as HTMLInputElement).value), 1);
+    (e.target as HTMLInputElement).value = newWidth.toString();
+    let newHeight = height;
+    if (keepAspectRatio) {
+      newHeight = Math.round(newWidth / aspectRatio);
+      setInvalidHeight(false);
+    }
+    onChange(newWidth, newHeight, unit);
+  }, INPUT_DEBOUNCE_DELAY);
+
+  const handleHeightChange = _debounce((e: FormEvent<CxInput>) => {
+    if (!(e.target as HTMLInputElement).value) {
+      setInvalidHeight(true);
+      return;
+    }
+    setInvalidHeight(false);
+    const newHeight = Math.max(Number((e.target as HTMLInputElement).value), 1);
+    (e.target as HTMLInputElement).value = newHeight.toString();
+    let newWidth = width;
+    if (keepAspectRatio) {
+      newWidth = Math.round(newHeight * aspectRatio);
+      setInvalidWidth(false);
+    }
+    onChange(newWidth, newHeight, unit);
+  }, INPUT_DEBOUNCE_DELAY);
+
+  return (
+    <cx-details open={open} data-value="resize" className="resize">
+      <cx-space slot="summary" align-items='center'>
+        <div className="details__summary__icon">
+          <cx-icon name="aspect_ratio"></cx-icon>
+        </div>
+        <cx-typography variant="body2">Resize</cx-typography>
+      </cx-space>
+      <cx-space direction="vertical" spacing="small">
+        <cx-space spacing="small">
+          <div className="resize__input-group">
+            <cx-input
+              ref={widthInputRef}
+              placeholder="Width"
+              type="number"
+              step="1"
+              value={isDefined ? width.toString() : ''}
+              onInput={handleWidthChange}
+              required
+            >
+              <cx-typography slot="prefix" variant="body3" className="details__summary__input-label">W</cx-typography>
+            </cx-input>
+            <cx-icon-button
+              name={keepAspectRatio ? 'insert_link' : 'link_off'}
+              onClick={() => setKeepAspectRatio(prevState => !prevState)}
+              style={{
+                color: keepAspectRatio ? 'var(--cx-color-primary)' : undefined,
+              }}
+            ></cx-icon-button>
+            <cx-input
+              ref={heightInputRef}
+              placeholder="Height"
+              type="number"
+              step="1"
+              value={isDefined ? height.toString() : ''}
+              onInput={handleHeightChange}
+              required
+            >
+              <cx-typography slot="prefix" variant="body3" className="details__summary__input-label">H</cx-typography>
+            </cx-input>
+          </div>
+          <cx-select value={isDefined ? unit : ''} ref={unitSelectRef} hoist className="resize__unit-select">
+            <cx-option value="pixels">Pixels</cx-option>
+            <cx-option value="aspect-ratio">Aspect ratio</cx-option>
+          </cx-select>
+        </cx-space>
+        <cx-button
+          variant="primary"
+          disabled={disabledApplyButton || invalidHeight || invalidWidth}
+          style={{
+            marginLeft: 'auto',
+          }}
+          onClick={onApply}
+        >
+          Apply
+        </cx-button>
+      </cx-space>
+    </cx-details>
+  );
+};
+
+export default Resize;

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

@@ -0,0 +1,101 @@
+import _debounce from 'lodash-es/debounce';
+import { FormEvent, useEffect, useState } from 'react';
+
+import { CxInput } from '@/web-component';
+import { INPUT_DEBOUNCE_DELAY } from '../CustomRendition.constants';
+
+type Props = {
+  open: boolean;
+  rotation: number;
+  onChange: (rotation: number) => void;
+  onApply: () => void;
+};
+
+const sanitizeRotation = (rotation: number) => {
+  if (rotation > 360) {
+    return 360;
+  } else if (rotation < 0) {
+    return 0;
+  }
+  return rotation;
+};
+
+const Rotate = ({ open, rotation, onChange, onApply }: Props) => {
+  const [isDefined, setIsDefined] = useState(false);
+  const [invalidRotation, setInvalidRotation] = useState(false);
+
+  useEffect(() => {
+    Promise.all([
+      customElements.whenDefined('cx-input'),
+    ]).then(() => {
+      setIsDefined(true);
+    });
+  }, []);
+
+  const handleRotationChange = _debounce((e: FormEvent<CxInput>) => {
+    const value = (e.target as HTMLInputElement).value;
+    const newRotation = Number(value);
+    if (!value) {
+      setInvalidRotation(true);
+    } else {
+      setInvalidRotation(false);
+    }
+
+    // When the user change the value to a number >= 360 for the second time in a row, 
+    // The input won't update the value back to 359, so we need to do it manually
+    const sanitizedRotation = sanitizeRotation(newRotation);
+    if (newRotation > 360 || newRotation < 0) {
+      (e.target as HTMLInputElement).value = sanitizedRotation.toString();
+    }
+    onChange(sanitizedRotation);
+  }, INPUT_DEBOUNCE_DELAY);
+
+  return (
+    <cx-details open={open} data-value="rotate">
+      <cx-space slot="summary" align-items='center'>
+        <div className="details__summary__icon">
+          <cx-icon name="rotate_90_degrees_cw"></cx-icon>
+        </div>
+        <cx-typography variant="body2">Rotate</cx-typography>
+      </cx-space>
+      <cx-space spacing="small">
+        <cx-button-group label="History">
+          <cx-button
+            outline
+            onClick={() => onChange(sanitizeRotation(rotation - 90))}
+          >
+            <cx-icon name="rotate_90_degrees_ccw" label="Undo"></cx-icon>
+          </cx-button>
+          <cx-button
+            outline
+            onClick={() => onChange(sanitizeRotation(rotation + 90))}
+          >
+            <cx-icon name="rotate_90_degrees_cw" label="Redo"></cx-icon>
+          </cx-button>
+        </cx-button-group>
+        <cx-input
+          value={isDefined && !invalidRotation ? rotation.toString() : ''}
+          placeholder="0"
+          type="number"
+          min="0"
+          max="360"
+          style={{
+            width: '80px',
+            flex: 'none',
+          }}
+          onInput={handleRotationChange}
+          step='1'
+        ></cx-input>
+        <cx-button
+          variant="primary"
+          disabled={rotation === 0 || rotation === 360 || invalidRotation}
+          onClick={onApply}
+        >
+          Apply
+        </cx-button>
+      </cx-space>
+    </cx-details>
+  );
+};
+
+export default Rotate;

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

@@ -0,0 +1,5 @@
+export { default as Crop } from './Crop';
+export { default as Extension } from './Extension';
+export { default as Resize } from './Resize';
+export { default as Rotate } from './Rotate';
+export { default as Format } from './Format';