@wazobiatech/wazui 0.0.10 → 0.0.12

package/src/utils/imageProcessing.ts

@@ -0,0 +1,399 @@
+import { Coordinates } from 'react-advanced-cropper';
+import { Transformation, TransformationState } from '../components/wazui/WazUiGqlMediaLibrary/types';
+
+export interface ImageTransformOptions {
+  rotation?: number;
+  flipHorizontal?: boolean;
+  flipVertical?: boolean;
+  coordinates?: Coordinates;
+  quality?: number;
+  format?: 'image/jpeg' | 'image/png' | 'image/webp';
+}
+
+/**
+ * Apply transformations to an image file and return a new processed file
+ */
+export const applyImageTransformations = async (
+  file: File,
+  transformations: ImageTransformOptions
+): Promise<File> => {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    if (!ctx) {
+      reject(new Error('Canvas context not available'));
+      return;
+    }
+
+    img.onload = () => {
+      try {
+        const {
+          rotation = 0,
+          flipHorizontal = false,
+          flipVertical = false,
+          coordinates,
+          quality = 0.9,
+          format = 'image/jpeg',
+        } = transformations;
+
+        // First, handle rotation and flips
+        let canvasWidth = img.width;
+        let canvasHeight = img.height;
+
+        if (rotation === 90 || rotation === 270) {
+          canvasWidth = img.height;
+          canvasHeight = img.width;
+        }
+
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
+
+        // Clear canvas
+        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
+        // Save context state
+        ctx.save();
+
+        // Move to center for rotation/flip operations
+        ctx.translate(canvasWidth / 2, canvasHeight / 2);
+
+        // Apply rotation
+        if (rotation) {
+          ctx.rotate((rotation * Math.PI) / 180);
+        }
+
+        // Apply flips
+        const scaleX = flipHorizontal ? -1 : 1;
+        const scaleY = flipVertical ? -1 : 1;
+        ctx.scale(scaleX, scaleY);
+
+        // Draw the image centered
+        const drawWidth = rotation === 90 || rotation === 270 ? img.height : img.width;
+        const drawHeight = rotation === 90 || rotation === 270 ? img.width : img.height;
+
+        ctx.drawImage(img, -drawWidth / 2, -drawHeight / 2, drawWidth, drawHeight);
+
+        // Restore context state
+        ctx.restore();
+
+        // Handle cropping if specified
+        if (coordinates && coordinates.width > 0 && coordinates.height > 0) {
+          const cropCanvas = document.createElement('canvas');
+          const cropCtx = cropCanvas.getContext('2d');
+
+          if (!cropCtx) {
+            reject(new Error('Crop canvas context not available'));
+            return;
+          }
+
+          // Ensure crop coordinates are within canvas bounds
+          const cropX = Math.max(0, Math.min(coordinates.left, canvasWidth));
+          const cropY = Math.max(0, Math.min(coordinates.top, canvasHeight));
+          const cropWidth = Math.min(coordinates.width, canvasWidth - cropX);
+          const cropHeight = Math.min(coordinates.height, canvasHeight - cropY);
+
+          cropCanvas.width = cropWidth;
+          cropCanvas.height = cropHeight;
+
+          // Draw the cropped portion
+          cropCtx.drawImage(
+            canvas,
+            cropX,
+            cropY,
+            cropWidth,
+            cropHeight,
+            0,
+            0,
+            cropWidth,
+            cropHeight
+          );
+
+          // Convert cropped canvas to blob
+          cropCanvas.toBlob(
+            blob => {
+              if (blob) {
+                const processedFile = new File([blob], file.name, {
+                  type: format,
+                  lastModified: Date.now(),
+                });
+                resolve(processedFile);
+              } else {
+                reject(new Error('Failed to create blob from cropped canvas'));
+              }
+            },
+            format,
+            quality
+          );
+        } else {
+          // Convert main canvas to blob
+          canvas.toBlob(
+            blob => {
+              if (blob) {
+                const processedFile = new File([blob], file.name, {
+                  type: format,
+                  lastModified: Date.now(),
+                });
+                resolve(processedFile);
+              } else {
+                reject(new Error('Failed to create blob from canvas'));
+              }
+            },
+            format,
+            quality
+          );
+        }
+      } catch (error) {
+        reject(error);
+      }
+    };
+
+    img.onerror = () => {
+      reject(new Error('Failed to load image'));
+    };
+
+    // Create object URL for the file
+    const url = URL.createObjectURL(file);
+    img.src = url;
+
+    // Clean up object URL after image loads or errors
+    const cleanup = () => URL.revokeObjectURL(url);
+    img.addEventListener('load', cleanup, { once: true });
+    img.addEventListener('error', cleanup, { once: true });
+  });
+};
+
+/**
+ * Apply transformations from all screen sizes and return processed files
+ */
+export const applyTransformationsForAllScreens = async (
+  file: File,
+  transformations: TransformationState
+): Promise<{
+  desktop?: File;
+  tablet?: File;
+  mobile?: File;
+  original: File;
+}> => {
+  const results: {
+    desktop?: File;
+    tablet?: File;
+    mobile?: File;
+    original: File;
+  } = {
+    original: file,
+  };
+
+  try {
+    // Helper function to check if transformations are meaningful
+    const hasTransformations = (transform: Transformation) => {
+      return (
+        (transform.coordinates &&
+          transform.coordinates.width > 0 &&
+          transform.coordinates.height > 0) ||
+        (transform.rotation && transform.rotation !== 0) ||
+        transform.flipHorizontal ||
+        transform.flipVertical
+      );
+    };
+
+    // Process desktop transformations
+    if (hasTransformations(transformations.desktop)) {
+      try {
+        results.desktop = await applyImageTransformations(file, {
+          rotation: transformations.desktop.rotation,
+          flipHorizontal: transformations.desktop.flipHorizontal,
+          flipVertical: transformations.desktop.flipVertical,
+          coordinates: transformations.desktop.coordinates,
+        });
+      } catch (error) {
+        console.warn('Desktop transformation failed:', error);
+      }
+    }
+
+    // Process tablet transformations
+    if (hasTransformations(transformations.tablet)) {
+      try {
+        results.tablet = await applyImageTransformations(file, {
+          rotation: transformations.tablet.rotation,
+          flipHorizontal: transformations.tablet.flipHorizontal,
+          flipVertical: transformations.tablet.flipVertical,
+          coordinates: transformations.tablet.coordinates,
+        });
+      } catch (error) {
+        console.warn('Tablet transformation failed:', error);
+      }
+    }
+
+    // Process mobile transformations
+    if (hasTransformations(transformations.mobile)) {
+      try {
+        results.mobile = await applyImageTransformations(file, {
+          rotation: transformations.mobile.rotation,
+          flipHorizontal: transformations.mobile.flipHorizontal,
+          flipVertical: transformations.mobile.flipVertical,
+          coordinates: transformations.mobile.coordinates,
+        });
+      } catch (error) {
+        console.warn('Mobile transformation failed:', error);
+      }
+    }
+
+    return results;
+  } catch (error) {
+    console.error('Error applying transformations:', error);
+    throw error;
+  }
+};
+
+/**
+ * Get the most appropriate processed file from transformation results
+ */
+export const getBestProcessedFile = (processedFiles: {
+  desktop?: File;
+  tablet?: File;
+  mobile?: File;
+  original: File;
+}): File => {
+  // Return the first available processed file, prioritizing desktop > tablet > mobile > original
+  return (
+    processedFiles.desktop ||
+    processedFiles.tablet ||
+    processedFiles.mobile ||
+    processedFiles.original
+  );
+};
+
+/**
+ * Check if a file needs processing based on transformations
+ */
+export const needsProcessing = (transformations: TransformationState): boolean => {
+  return Object.values(transformations).some(
+    transform =>
+      (transform.coordinates &&
+        transform.coordinates.width > 0 &&
+        transform.coordinates.height > 0) ||
+      (transform.rotation && transform.rotation !== 0) ||
+      transform.flipHorizontal ||
+      transform.flipVertical
+  );
+};
+
+/**
+ * Helper function to resize image while maintaining aspect ratio
+ */
+export const resizeImage = async (
+  file: File,
+  maxWidth: number,
+  maxHeight: number,
+  quality: number = 0.9
+): Promise<File> => {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    if (!ctx) {
+      reject(new Error('Canvas context not available'));
+      return;
+    }
+
+    img.onload = () => {
+      // Calculate new dimensions while maintaining aspect ratio
+      let { width, height } = img;
+
+      if (width > height) {
+        if (width > maxWidth) {
+          height = (height * maxWidth) / width;
+          width = maxWidth;
+        }
+      } else {
+        if (height > maxHeight) {
+          width = (width * maxHeight) / height;
+          height = maxHeight;
+        }
+      }
+
+      canvas.width = width;
+      canvas.height = height;
+
+      // Draw resized image
+      ctx.drawImage(img, 0, 0, width, height);
+
+      canvas.toBlob(
+        blob => {
+          if (blob) {
+            const resizedFile = new File([blob], file.name, {
+              type: file.type,
+              lastModified: Date.now(),
+            });
+            resolve(resizedFile);
+          } else {
+            reject(new Error('Failed to create resized image blob'));
+          }
+        },
+        file.type,
+        quality
+      );
+    };
+
+    img.onerror = () => {
+      reject(new Error('Failed to load image for resizing'));
+    };
+
+    const url = URL.createObjectURL(file);
+    img.src = url;
+
+    // Clean up object URL after image loads or errors
+    const cleanup = () => URL.revokeObjectURL(url);
+    img.addEventListener('load', cleanup, { once: true });
+    img.addEventListener('error', cleanup, { once: true });
+  });
+};
+
+/**
+ * Convert image to different format
+ */
+export const convertImageFormat = async (
+  file: File,
+  targetFormat: 'image/jpeg' | 'image/png' | 'image/webp',
+  quality: number = 0.9
+): Promise<File> => {
+  return applyImageTransformations(file, {
+    format: targetFormat,
+    quality,
+  });
+};
+
+/**
+ * Process multiple files with transformations
+ */
+export const processMultipleFiles = async (
+  files: File[],
+  transformations: TransformationState,
+  onProgress?: (current: number, total: number) => void
+): Promise<File[]> => {
+  const processedFiles: File[] = [];
+
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+    onProgress?.(i + 1, files.length);
+
+    try {
+      if (needsProcessing(transformations)) {
+        const processedResults = await applyTransformationsForAllScreens(file, transformations);
+        const bestProcessedFile = getBestProcessedFile(processedResults);
+        processedFiles.push(bestProcessedFile);
+      } else {
+        processedFiles.push(file);
+      }
+    } catch (error) {
+      console.warn(`Failed to process file ${file.name}:`, error);
+      // Use original file if processing fails
+      processedFiles.push(file);
+    }
+  }
+
+  return processedFiles;
+};

package/src/utils/images.ts

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