diff options
| author | Maze <167211895+mazeincoding@users.noreply.github.com> | 2026-01-31 00:20:04 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2026-01-31 00:20:04 +0100 |
| commit | 7bf0984698e43b9aa2dd879f65951318ed410390 (patch) | |
| tree | ccf2cd590a47d550152afc07129cb55c71a9ec35 /apps/web/src/components/ui/image-timeline-treatment.tsx | |
| parent | 0173db99448d1c4c6415dcf15272e17551b48b04 (diff) | |
| download | opencut-7bf0984698e43b9aa2dd879f65951318ed410390.tar.gz | |
codebase overhaul (#697)
Diffstat (limited to 'apps/web/src/components/ui/image-timeline-treatment.tsx')
| -rw-r--r-- | apps/web/src/components/ui/image-timeline-treatment.tsx | 102 |
1 files changed, 0 insertions, 102 deletions
diff --git a/apps/web/src/components/ui/image-timeline-treatment.tsx b/apps/web/src/components/ui/image-timeline-treatment.tsx deleted file mode 100644 index 7a64be18..00000000 --- a/apps/web/src/components/ui/image-timeline-treatment.tsx +++ /dev/null @@ -1,102 +0,0 @@ -"use client"; - -import { useState } from "react"; -import { cn } from "@/lib/utils"; -import type { BackgroundType } from "@/types/editor"; - -interface ImageTimelineTreatmentProps { - src: string; - alt: string; - targetAspectRatio?: number; // Default to 16:9 for video - className?: string; - backgroundType?: BackgroundType; - backgroundColor?: string; -} - -export function ImageTimelineTreatment({ - src, - alt, - targetAspectRatio = 16 / 9, - className, - backgroundType = "blur", - backgroundColor = "#000000", -}: ImageTimelineTreatmentProps) { - const [imageLoaded, setImageLoaded] = useState(false); - const [imageDimensions, setImageDimensions] = useState<{ - width: number; - height: number; - } | null>(null); - - const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => { - const img = e.currentTarget; - setImageDimensions({ - width: img.naturalWidth, - height: img.naturalHeight, - }); - setImageLoaded(true); - }; - - const imageAspectRatio = imageDimensions - ? imageDimensions.width / imageDimensions.height - : 1; - - const needsAspectRatioTreatment = imageAspectRatio !== targetAspectRatio; - - return ( - <div - className={cn("relative overflow-hidden", className)} - style={{ aspectRatio: targetAspectRatio }} - > - {/* Background Layer */} - {needsAspectRatioTreatment && imageLoaded && ( - <> - {backgroundType === "blur" && ( - <div className="absolute inset-0"> - <img - src={src} - alt="" - className="w-full h-full object-cover filter blur-xl scale-110 opacity-60" - aria-hidden="true" - /> - <div className="absolute inset-0 bg-black/20" /> - </div> - )} - - {backgroundType === "mirror" && ( - <div className="absolute inset-0"> - <img - src={src} - alt="" - className="w-full h-full object-cover opacity-30" - aria-hidden="true" - /> - </div> - )} - - {backgroundType === "color" && ( - <div className="absolute inset-0" style={{ backgroundColor }} /> - )} - </> - )} - - {/* Main Image Layer */} - <div className="absolute inset-0"> - <img - src={src} - alt={alt} - className="w-full h-full object-cover" - onLoad={handleImageLoad} - /> - </div> - - {/* Loading state */} - {!imageLoaded && ( - <div className="absolute inset-0 flex items-center justify-center bg-muted/30"> - <div className="animate-pulse text-xs text-muted-foreground"> - Loading... - </div> - </div> - )} - </div> - ); -} |
