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

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

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

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

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

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

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