[V0_FILE]png:file="public/placeholder-eh2rr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-pjp63.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]typescriptreact:file="components/sculpt-manager.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Trash2, RefreshCw, UploadIcon } from "lucide-react" import { UploadZone } from "./upload-zone" interface Sculpt { id: string url: string filename: string type: string uploadedAt: string size: number } export function SculptManager() { const [sculpts, setSculpts] = useState([]) const [loading, setLoading] = useState(true) const [showUpload, setShowUpload] = useState(false) const fetchSculpts = async () => { try { setLoading(true) const response = await fetch("/api/sculpts") const data = await response.json() setSculpts(data.sculpts || []) } catch (error) { console.error("Failed to fetch sculpts:", error) } finally { setLoading(false) } } const deleteSculpt = async (sculptId: string) => { try { const response = await fetch(`/api/sculpts/${encodeURIComponent(sculptId)}`, { method: "DELETE", }) if (response.ok) { setSculpts((prev) => prev.filter((s) => s.id !== sculptId)) } } catch (error) { console.error("Failed to delete sculpt:", error) } } const handleUploadComplete = (uploadedFiles: any[]) => { const newSculpts: Sculpt[] = uploadedFiles.map((uploadedFile) => ({ id: uploadedFile.url, url: uploadedFile.url, filename: uploadedFile.filename, type: uploadedFile.type, uploadedAt: uploadedFile.uploadedAt, size: uploadedFile.size, })) setSculpts((prev) => [...newSculpts, ...prev]) setShowUpload(false) } const formatFileSize = (bytes: number) => { if (bytes === 0) return "0 Bytes" const k = 1024 const sizes = ["Bytes", "KB", "MB", "GB"] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i] } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) } useEffect(() => { fetchSculpts() }, []) return (

Sculpt Library

{showUpload && }

{sculpts.map((sculpt) => (

{sculpt.filename}

{sculpt.type.startsWith("video/") ? (

{sculpt.type.split("/")[1].toUpperCase()} {formatFileSize(sculpt.size)}

{formatDate(sculpt.uploadedAt)}

))}

{sculpts.length === 0 && !loading && (

No sculpts uploaded yet.

)}

) } [V0_FILE]typescriptreact:file="components/upload-zone.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Upload, CheckCircle, AlertCircle } from "lucide-react" interface UploadedFile { url: string filename: string size: number type: string uploadedAt: string } interface UploadZoneProps { onUploadComplete?: (files: UploadedFile[]) => void // Changed to accept multiple files } export function UploadZone({ onUploadComplete }: UploadZoneProps) { const [isDragging, setIsDragging] = useState(false) const [uploading, setUploading] = useState(false) const [uploadProgress, setUploadProgress] = useState(0) const [uploadStatus, setUploadStatus] = useState<"idle" | "success" | "error">("idle") const [errorMessage, setErrorMessage] = useState("") const [uploadCount, setUploadCount] = useState({ current: 0, total: 0 }) // Track multiple file progress const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragging(true) }, []) const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragging(false) }, []) const uploadFiles = async (files: File[]) => { setUploading(true) setUploadProgress(0) setUploadStatus("idle") setErrorMessage("") setUploadCount({ current: 0, total: files.length }) const uploadedFiles: UploadedFile[] = [] try { for (let i = 0; i < files.length; i++) { const file = files[i] setUploadCount({ current: i + 1, total: files.length }) const formData = new FormData() formData.append("file", file) const response = await fetch("/api/upload", { method: "POST", body: formData, }) if (!response.ok) { let errorMessage = `Upload failed for ${file.name}` try { // Try to parse as JSON first const errorData = await response.json() errorMessage = errorData.error || errorMessage } catch { // If JSON parsing fails, get the plain text response const textResponse = await response.text() if (textResponse.includes("Request Entity Too Large") || textResponse.includes("413")) { errorMessage = `File "${file.name}" is too large. Please use a smaller file.` } else if (textResponse.includes("Too Many Requests") || textResponse.includes("429")) { errorMessage = `Rate limit exceeded. Please wait a moment and try again.` } else { errorMessage = textResponse || errorMessage } } throw new Error(errorMessage) } const result = await response.json() uploadedFiles.push(result) // Update progress setUploadProgress(((i + 1) / files.length) * 100) } setUploadStatus("success") onUploadComplete?.(uploadedFiles) // Reset after success setTimeout(() => { setUploadStatus("idle") setUploadProgress(0) setUploadCount({ current: 0, total: 0 }) }, 2000) } catch (error) { setUploadStatus("error") setErrorMessage(error instanceof Error ? error.message : "Upload failed") } finally { setUploading(false) } } const handleDrop = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragging(false) const files = Array.from(e.dataTransfer.files) if (files.length > 0) { uploadFiles(files) // Upload all dropped files } }, []) const handleFileSelect = (e: React.ChangeEvent) => { const files = e.target.files if (files && files.length > 0) { uploadFiles(Array.from(files)) // Upload all selected files } } return (

{uploading ? (

Uploading {uploadCount.current} of {uploadCount.total} files... {/* Show multi-file progress */}

{Math.round(uploadProgress)}%

) : uploadStatus === "success" ? (

{uploadCount.total > 1 ? `${uploadCount.total} files uploaded!` : "Upload successful!"}{" "} {/* Multi-file success message */}

) : uploadStatus === "error" ? (

Upload failed

{errorMessage}

) : (

Drop your WebM files here

or click to browse (multiple files supported)

Best: WebM/MP4 for turntable scrubbing • Also supports WebP, GIF

)}

) } [V0_FILE]typescriptreact:file="components/frame-scrubber.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState, useCallback } from "react" interface FrameScrubberProps { src: string } export default function FrameScrubber({ src }: FrameScrubberProps) { const videoRef = useRef(null) const containerRef = useRef(null) const [isDragging, setIsDragging] = useState(false) const [velocity, setVelocity] = useState(0) const [lastX, setLastX] = useState(0) const [lastTime, setLastTime] = useState(0) const [duration, setDuration] = useState(0) const animationRef = useRef() const handleStart = useCallback((clientX: number) => { setIsDragging(true) setLastX(clientX) setLastTime(Date.now()) setVelocity(0) if (animationRef.current) { cancelAnimationFrame(animationRef.current) } }, []) const handleMove = useCallback( (clientX: number) => { if (!isDragging || !videoRef.current) return const deltaX = clientX - lastX const deltaTime = Date.now() - lastTime if (deltaTime > 0) { const newVelocity = deltaX / deltaTime setVelocity(newVelocity) } setLastX(clientX) setLastTime(Date.now()) const container = containerRef.current if (container && duration > 0) { const sensitivity = duration / (container.offsetWidth * 0.5) // 2x more sensitive const timeChange = deltaX * sensitivity let newTime = videoRef.current.currentTime + timeChange if (newTime < 0) { newTime = duration + newTime // Loop to end } else if (newTime > duration) { newTime = newTime - duration // Loop to start } videoRef.current.currentTime = newTime } }, [isDragging, lastX, lastTime, duration], ) const handleEnd = useCallback(() => { setIsDragging(false) const animate = () => { setVelocity((prev) => { const friction = window.innerWidth < 768 ? 0.85 : 0.92 // More friction on mobile const newVelocity = prev * friction if (Math.abs(newVelocity) < 0.1) { return 0 } const container = containerRef.current if (container && videoRef.current && duration > 0) { const sensitivity = duration / (container.offsetWidth * 0.5) const timeChange = newVelocity * sensitivity * 2 let newTime = videoRef.current.currentTime + timeChange if (newTime < 0) { newTime = duration + newTime } else if (newTime > duration) { newTime = newTime - duration } videoRef.current.currentTime = newTime } animationRef.current = requestAnimationFrame(animate) return newVelocity }) } if (Math.abs(velocity) > 0.1) { animate() } }, [velocity, duration]) const handleWheel = useCallback( (e: WheelEvent) => { e.preventDefault() if (!videoRef.current || duration === 0) return const sensitivity = 0.02 // 2x more sensitive const timeChange = (e.deltaX + e.deltaY) * sensitivity let newTime = videoRef.current.currentTime + timeChange if (newTime < 0) { newTime = duration + newTime } else if (newTime > duration) { newTime = newTime - duration } videoRef.current.currentTime = newTime }, [duration], ) // Mouse events const handleMouseDown = (e: React.MouseEvent) => { e.preventDefault() handleStart(e.clientX) } // Touch events - Improved for iPhone const handleTouchStart = (e: React.TouchEvent) => { e.preventDefault() if (e.touches.length === 1) { // Only single touch handleStart(e.touches[0].clientX) } } const handleTouchMove = (e: React.TouchEvent) => { e.preventDefault() if (e.touches.length === 1) { // Only single touch handleMove(e.touches[0].clientX) } } const handleTouchEnd = (e: React.TouchEvent) => { e.preventDefault() handleEnd() } useEffect(() => { const container = containerRef.current if (!container) return container.addEventListener("wheel", handleWheel, { passive: false }) return () => container.removeEventListener("wheel", handleWheel) }, [handleWheel]) useEffect(() => { if (!isDragging) return const handleGlobalMouseMove = (e: MouseEvent) => { handleMove(e.clientX) } const handleGlobalMouseUp = () => { handleEnd() } document.addEventListener("mousemove", handleGlobalMouseMove) document.addEventListener("mouseup", handleGlobalMouseUp) return () => { document.removeEventListener("mousemove", handleGlobalMouseMove) document.removeEventListener("mouseup", handleGlobalMouseUp) } }, [isDragging, handleMove, handleEnd]) const handleLoadedMetadata = () => { if (videoRef.current) { setDuration(videoRef.current.duration) } } // Cleanup useEffect(() => { return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, []) return (

e.preventDefault()} // Disable right-click >

) } [V0_FILE]typescriptreact:file="components/gif-scrubber.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState, useCallback } from "react" interface GifScrubberProps { src: string thumbnail?: string } export default function GifScrubber({ src, thumbnail }: GifScrubberProps) { const canvasRef = useRef(null) const containerRef = useRef(null) const [frames, setFrames] = useState([]) const [currentFrame, setCurrentFrame] = useState(0) const [isDragging, setIsDragging] = useState(false) const [velocity, setVelocity] = useState(0) const [lastX, setLastX] = useState(0) const [lastTime, setLastTime] = useState(0) const [isLoaded, setIsLoaded] = useState(false) const [showThumbnail, setShowThumbnail] = useState(!!thumbnail) const animationRef = useRef() const extractFrames = useCallback(async () => { try { const response = await fetch(src) const blob = await response.blob() // Create video element to extract frames from GIF const video = document.createElement("video") video.src = URL.createObjectURL(blob) video.muted = true video.playsInline = true await new Promise((resolve) => { video.addEventListener("loadedmetadata", resolve, { once: true }) }) const canvas = document.createElement("canvas") const ctx = canvas.getContext("2d")! canvas.width = video.videoWidth canvas.height = video.videoHeight const extractedFrames: ImageBitmap[] = [] const frameCount = Math.min(36, Math.floor(video.duration * 12)) // 12 FPS, max 36 frames for (let i = 0; i < frameCount; i++) { video.currentTime = (i / frameCount) * video.duration await new Promise((resolve) => { video.addEventListener("seeked", resolve, { once: true }) }) ctx.drawImage(video, 0, 0) const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height) const bitmap = await createImageBitmap(imageData) extractedFrames.push(bitmap) } setFrames(extractedFrames) setIsLoaded(true) URL.revokeObjectURL(video.src) } catch (error) { console.error("[v0] GIF frame extraction failed:", error) } }, [src]) const renderFrame = useCallback(() => { const canvas = canvasRef.current if (!canvas || frames.length === 0) return const ctx = canvas.getContext("2d")! const frame = frames[currentFrame] if (frame) { canvas.width = frame.width canvas.height = frame.height ctx.drawImage(frame, 0, 0) } }, [frames, currentFrame]) const handleStart = useCallback((clientX: number) => { setIsDragging(true) setLastX(clientX) setLastTime(Date.now()) setVelocity(0) setShowThumbnail(false) if (animationRef.current) { cancelAnimationFrame(animationRef.current) } }, []) const handleMove = useCallback( (clientX: number) => { if (!isDragging || frames.length === 0) return const deltaX = clientX - lastX const deltaTime = Date.now() - lastTime if (deltaTime > 0) { const newVelocity = deltaX / deltaTime setVelocity(newVelocity) } setLastX(clientX) setLastTime(Date.now()) const container = containerRef.current if (container) { const sensitivity = frames.length / (container.offsetWidth * 0.125) // 8x more sensitive const frameChange = deltaX * sensitivity let newFrame = currentFrame + frameChange while (newFrame < 0) newFrame += frames.length while (newFrame >= frames.length) newFrame -= frames.length setCurrentFrame(Math.floor(newFrame)) } }, [isDragging, lastX, lastTime, frames.length, currentFrame], ) const handleEnd = useCallback(() => { setIsDragging(false) const animate = () => { setVelocity((prev) => { const friction = window.innerWidth < 768 ? 0.8 : 0.9 const newVelocity = prev * friction if (Math.abs(newVelocity) < 0.1) { return 0 } const container = containerRef.current if (container && frames.length > 0) { const sensitivity = frames.length / (container.offsetWidth * 0.125) const frameChange = newVelocity * sensitivity * 3 setCurrentFrame((prev) => { let newFrame = prev + frameChange while (newFrame < 0) newFrame += frames.length while (newFrame >= frames.length) newFrame -= frames.length return Math.floor(newFrame) }) } animationRef.current = requestAnimationFrame(animate) return newVelocity }) } if (Math.abs(velocity) > 0.1) { animate() } }, [velocity, frames.length]) // Touch events - optimized for iPhone const handleTouchStart = (e: React.TouchEvent) => { e.preventDefault() if (e.touches.length === 1) { handleStart(e.touches[0].clientX) } } const handleTouchMove = (e: React.TouchEvent) => { e.preventDefault() if (e.touches.length === 1) { handleMove(e.touches[0].clientX) } } const handleTouchEnd = (e: React.TouchEvent) => { e.preventDefault() handleEnd() } const handleMouseDown = (e: React.MouseEvent) => { e.preventDefault() handleStart(e.clientX) } // Global mouse events useEffect(() => { if (!isDragging) return const handleGlobalMouseMove = (e: MouseEvent) => { handleMove(e.clientX) } const handleGlobalMouseUp = () => { handleEnd() } document.addEventListener("mousemove", handleGlobalMouseMove) document.addEventListener("mouseup", handleGlobalMouseUp) return () => { document.removeEventListener("mousemove", handleGlobalMouseMove) document.removeEventListener("mouseup", handleGlobalMouseUp) } }, [isDragging, handleMove, handleEnd]) useEffect(() => { extractFrames() }, [extractFrames]) useEffect(() => { renderFrame() }, [renderFrame]) useEffect(() => { return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, []) return (

e.preventDefault()} onMouseDown={handleMouseDown} onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd} > {thumbnail && showThumbnail && (

)}

Sculpt Library

{sculpt.name.toUpperCase()}

{sculpt.name}

THE SCULPTS

{mobileFullscreen.name.toUpperCase()}

{getDisplayName(currentItem.name, language)}

{translations[language].specifications}

About

Tags

Share

About

Tags

Share

More from iverfinne

About

Tags

Share

About

Tags

Share

More from iverfinne