diff options
| author | Kha Nguyen <hi@khanguyen.com> | 2025-07-24 17:04:27 -0500 |
|---|---|---|
| committer | Kha Nguyen <hi@khanguyen.com> | 2025-07-24 17:04:27 -0500 |
| commit | 8e737d87e0accbf1d433f4c8b1e8e0f125849799 (patch) | |
| tree | 386560ac1449991da1ab6d43637e82046a725e71 /apps/web/src/components/ui/image-timeline-treatment.tsx | |
| parent | 1ccacf6bb5db579cf6f343d9de57bce92d296f5f (diff) | |
| download | opencut-8e737d87e0accbf1d433f4c8b1e8e0f125849799.tar.gz | |
Revert "merge main"
This reverts commit 1ccacf6bb5db579cf6f343d9de57bce92d296f5f.
Diffstat (limited to 'apps/web/src/components/ui/image-timeline-treatment.tsx')
| -rw-r--r-- | apps/web/src/components/ui/image-timeline-treatment.tsx | 204 |
1 files changed, 102 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 index 7a64be18..31847df5 100644 --- a/apps/web/src/components/ui/image-timeline-treatment.tsx +++ b/apps/web/src/components/ui/image-timeline-treatment.tsx @@ -1,102 +1,102 @@ -"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> - ); -} +"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>
+ );
+}
|