Thumbnail.tsx - master - F1lya/Modal_Window

Thumbnail.tsx
106 строк3 KB
F1lya
upload files
20 окт 2025, 14:17
20 окт 2025, 14:17f9aac0b
import React, { useEffect, useState } from 'react';
import { Frame, ContainerSize } from '../../types';
import { generateThumbnail } from '../../utils/canvasUtils';
import './Thumbnail.css';

interface ThumbnailProps {
  image: HTMLImageElement | null;
  frame: Frame;
  containerSize: ContainerSize;
  imageUrl: string;
  className?: string;
}

export const Thumbnail: React.FC<ThumbnailProps> = ({
  image,
  frame,
  containerSize,
  imageUrl,
  className = ''
}) => {
  const [thumbnailUrl, setThumbnailUrl] = useState<string>('');
  const [isGenerating, setIsGenerating] = useState(false);

  useEffect(() => {
    if (!image || !imageUrl) {
      setThumbnailUrl('');
      return;
    }

    const updateThumbnail = () => {
      setIsGenerating(true);
      
      // Use requestAnimationFrame for smooth performance
      requestAnimationFrame(() => {
        try {
          const newThumbnailUrl = generateThumbnail(image, frame, containerSize);
          setThumbnailUrl(newThumbnailUrl);
        } catch (error) {
          console.error('Failed to generate thumbnail:', error);
        } finally {
          setIsGenerating(false);
        }
      });
    };

    // Debounce thumbnail updates for better performance
    const timeoutId = setTimeout(updateThumbnail, 100);
    return () => clearTimeout(timeoutId);
  }, [image, frame, containerSize, imageUrl]);

  if (!imageUrl) {
    return null;
  }

  return (
    <div className={`thumbnail ${className}`}>
      <div className="thumbnail__header">
        <h3 className="thumbnail__title">Live Preview</h3>
        <div className="thumbnail__dimensions">
          {Math.round(frame.width)} × {Math.round(frame.height)}
        </div>
      </div>
      
      <div className="thumbnail__preview">
        {thumbnailUrl ? (
          <img 
            src={thumbnailUrl} 
            alt="Cropped preview" 
            className="thumbnail__image"
            loading="lazy"
          />
        ) : (
          <div className="thumbnail__placeholder">
            {isGenerating ? (
              <div className="thumbnail__loading">
                <div className="thumbnail__spinner"></div>
                <span>Generating preview...</span>
              </div>
            ) : (
              <>
                <svg 
                  className="thumbnail__placeholder-icon" 
                  viewBox="0 0 24 24" 
                  fill="none" 
                  stroke="currentColor" 
                  strokeWidth="1.5"
                >
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                  <circle cx="8.5" cy="8.5" r="1.5" />
                  <polyline points="21 15 16 10 5 21" />
                </svg>
                <span>Move the frame to see preview</span>
              </>
            )}
          </div>
        )}
      </div>
      
      <div className="thumbnail__footer">
        <div className="thumbnail__info">
          Real-time preview updates as you adjust the crop area
        </div>
      </div>
    </div>
  );
};