@wazobiatech/wazui 0.0.12 → 0.0.14

package/src/utils/images.ts

@@ -1,279 +0,0 @@
-import {
-  ImageTransformation,
-  DeviceCoordinates,
-  ParsedConfig,
-  ImageUrlResult,
-} from '../types/image.types';
-import { Coordinates } from 'react-advanced-cropper';
-import { env } from '../env';
-// Constants
-const TRANSFORMATION_KEYS = {
-  width: 'w',
-  height: 'h',
-  quality: 'q',
-  format: 'f',
-  coordinates: 'cr',
-  rotation: 'rt',
-  blur: 'bl',
-} as const;
-
-const DEVICE_BREAKPOINTS = {
-  desktop: '1100w',
-  tablet: '750w',
-  mobile: '450w',
-} as const;
-
-/**
- * Builds transformation parameters string from ImageTransformation object
- */
-const buildTransformationParams = (transformations: ImageTransformation): string => {
-  const params: string[] = [];
-
-  Object.entries(transformations).forEach(([key, value]) => {
-    if (value === undefined || value === null) return;
-
-    const transformKey = TRANSFORMATION_KEYS[key as keyof typeof TRANSFORMATION_KEYS];
-    if (!transformKey) {
-      console.warn(`Unknown transformation key: ${key}`);
-      return;
-    }
-
-    if (key === 'coordinates') {
-      const { width, top, left, height } = value as Coordinates;
-      params.push(`${transformKey}-${top}.${left}.${height}.${width}`);
-    } else {
-      params.push(`${transformKey}-${value}`);
-    }
-  });
-
-  return params.join(',');
-};
-
-/**
- * Parses base64 encoded config from URL
- */
-const parseConfig = (config: string | null): ParsedConfig | null => {
-  if (!config) return null;
-
-  try {
-    const decodedConfig = atob(config);
-    return JSON.parse(decodeURIComponent(decodedConfig));
-  } catch (error) {
-    console.error('Error parsing config:', error);
-    return null;
-  }
-};
-
-/**
- * Builds crop parameters for a device configuration
- */
-const buildDeviceCrop = (
-  deviceConfig: (DeviceCoordinates & { rotation?: number }) | undefined
-): string => {
-  if (!deviceConfig) return '';
-
-  const { left, top, right, bottom, rotation } = deviceConfig;
-  const hasAllValues = [left, top, right, bottom, rotation].every(
-    v => v !== null && v !== undefined
-  );
-
-  if (!hasAllValues) return '';
-
-  return `cr-${left}.${top}.${right}.${bottom},rt-${rotation || 0}`;
-};
-
-const createTransformationUrl = (
-  baseImageUrl: string,
-  transformationParams: string,
-  deviceCrop: string = '',
-  config: string = ''
-): string => {
-  // Remove w- and h- parameters from transformationParams
-  const cleanedParams = transformationParams
-    .split(',')
-    .filter(p => !/^w-\d+/.test(p) && !/^h-\d+/.test(p))
-    .join(',');
-
-  const url = new URL(baseImageUrl);
-  const combinedParams = [cleanedParams, deviceCrop].filter(Boolean).join(',');
-
-  url.searchParams.set('tr', combinedParams);
-  if (config) {
-    url.searchParams.set('config', config);
-  }
-
-  return url.toString();
-};
-
-/**
- * Generates srcset string for responsive images
- */
-const generateSrcset = (
-  baseImageUrl: string,
-  transformationParams: string,
-  deviceCrops: { desktop: string; tablet: string; mobile: string },
-  config: string,
-  isBackground: boolean
-) => {
-  const desktopUrl = decodeURIComponent(
-    createTransformationUrl(baseImageUrl, transformationParams, deviceCrops.desktop, config)
-  );
-  const tabletUrl = decodeURIComponent(
-    createTransformationUrl(baseImageUrl, transformationParams, deviceCrops.tablet)
-  );
-  const mobileUrl = decodeURIComponent(
-    createTransformationUrl(baseImageUrl, transformationParams, deviceCrops.mobile)
-  );
-
-  const srcset = isBackground
-    ? `url("${mobileUrl}") 1x, url("${tabletUrl}") 2x, url("${desktopUrl}") 3x`
-    : `${desktopUrl} ${DEVICE_BREAKPOINTS.desktop}, ${tabletUrl} ${DEVICE_BREAKPOINTS.tablet}, ${mobileUrl} ${DEVICE_BREAKPOINTS.mobile} `;
-
-  return {
-    desktop: decodeURIComponent(desktopUrl.toString()),
-    tablet: decodeURIComponent(tabletUrl.toString()),
-    mobile: decodeURIComponent(mobileUrl.toString()),
-    srcset,
-  };
-};
-
-/**
- * Main function to generate image transformation URLs with responsive srcset
- */
-export const getImageTransformationsUrl = ({
-  url = '',
-  transformationsUrl,
-  transformations,
-  isBackground = false,
-}: {
-  url: string;
-  transformationsUrl?: string;
-  transformations?: ImageTransformation;
-  isBackground?: boolean;
-}): ImageUrlResult => {
-  // Early return for empty URL
-  if (!url) {
-    console.warn('getImageTransformationsUrl: No URL provided');
-    return { url: '', srcset: '', desktop: '', tablet: '', mobile: '' };
-  }
-
-  if (typeof url !== 'string' || url.trim() === '') {
-    console.warn('getImageTransformationsUrl: Invalid URL format:', url);
-    return { url: '', srcset: '', desktop: '', tablet: '', mobile: '' };
-  }
-
-  const trimmedUrl = url.trim();
-  if (!trimmedUrl.startsWith('http://') && !trimmedUrl.startsWith('https://') && !trimmedUrl.startsWith('/')) {
-    console.warn('getImageTransformationsUrl: URL must be absolute (http/https) or relative path:', url);
-    return { url: '', srcset: '', desktop: '', tablet: '', mobile: '' };
-  }
-
-  try {
-    const parsedUrl = trimmedUrl.startsWith('/') 
-      ? new URL(trimmedUrl, 'https://placeholder.com') 
-      : new URL(trimmedUrl);
-    const config = parsedUrl.searchParams.get('config') || '';
-
-    // Build base transformation URL
-    const imageTransformUrl =
-      transformationsUrl || (env.VITE_DOLOS_TRANSFORMATION_ENDPOINT as string) || 'images';
-        const shouldSkipHostname = parsedUrl.hostname === 'img.wazobia.tech';
-    const baseImageUrl = shouldSkipHostname 
-      ? `${imageTransformUrl}${parsedUrl.pathname}`
-      : `${imageTransformUrl}${imageTransformUrl.endsWith('/') ? '' : '/'}${parsedUrl.hostname}${parsedUrl.pathname}`;
-
-    // Build transformation parameters
-    const transformationParams = transformations ? buildTransformationParams(transformations) : '';
-
-    // Parse config for device-specific crops
-    const parsedConfig = parseConfig(config);
-    const deviceCrops = {
-      desktop: buildDeviceCrop(parsedConfig?.coordinates?.desktop),
-      tablet:
-        buildDeviceCrop(parsedConfig?.coordinates?.tablet) ||
-        buildDeviceCrop(parsedConfig?.coordinates?.desktop),
-      mobile:
-        buildDeviceCrop(parsedConfig?.coordinates?.mobile) ||
-        buildDeviceCrop(parsedConfig?.coordinates?.desktop),
-    };
-
-    // Create base URL and srcset
-    const baseUrl = createTransformationUrl(baseImageUrl, transformationParams, '', config);
-    const { desktop, srcset, mobile, tablet } = generateSrcset(
-      baseImageUrl,
-      transformationParams,
-      deviceCrops,
-      config,
-      isBackground
-    );
-
-    return {
-      url: desktop || baseUrl.toString(),
-      srcset,
-      mobile,
-      tablet,
-      desktop,
-    };
-  } catch (error) {
-    console.error('Error generating image transformation URL:', error);
-    return { url, srcset: url, mobile: '', desktop: '', tablet: '' }; // Fallback to original URL
-  }
-};
-
-/**
- * Simplified function to get image with specific dimensions
- */
-export const getImageWithDimensions = ({
-  url,
-  transformationsUrl,
-  width,
-  height,
-  blur,
-  quality = 70,
-}: {
-  url: string;
-  transformationsUrl?: string;
-  width?: number;
-  height?: number;
-  blur?: number;
-  quality?: number;
-}): ImageUrlResult => {
-  return getImageTransformationsUrl({
-    url,
-    transformationsUrl,
-    transformations: {
-      width,
-      height,
-      format: 'WEBP',
-      quality,
-      blur,
-    },
-  });
-};
-
-/**
- * Calculate crop coordinates string from coordinate object
- */
-export const calculateCropCoordinates = (
-  coordinates?: Record<'left' | 'top' | 'right' | 'bottom', number>
-): string => {
-  if (!coordinates) return '';
-  const { left, top, right, bottom } = coordinates;
-  return `${left}.${top}.${right}.${bottom}`;
-};
-
-/**
- * Default sizes attribute for responsive images
- */
-export const imageSizes = '(min-width: 1024px) 1100px, (min-width: 500px) 750px, 450px';
-
-export const removeConfigParam = (url: string): string => {
-  try {
-    const parsedUrl = new URL(url);
-    parsedUrl.searchParams.delete('config');
-    return parsedUrl.toString();
-  } catch (error) {
-    console.error('Error removing config param:', error);
-    return url;
-  }
-};