"use client" import { useState, useEffect, useRef } from "react" import { motion } from "framer-motion" interface Frame { id: number video: string defaultPos: { x: number; y: number; w: number; h: number } corner: string edgeHorizontal: string edgeVertical: string mediaSize: number borderThickness: number borderSize: number isHovered: boolean } interface FrameComponentProps { video: string width: number | string height: number | string className?: string corner: string edgeHorizontal: string edgeVertical: string mediaSize: number borderThickness: number borderSize: number showFrame: boolean isHovered: boolean } function FrameComponent({ video, width, height, className = "", corner, edgeHorizontal, edgeVertical, mediaSize, borderThickness, borderSize, showFrame, isHovered, }: FrameComponentProps) { const videoRef = useRef(null) useEffect(() => { if (isHovered) { videoRef.current?.play() } else { videoRef.current?.pause() } }, [isHovered]) return (

{showFrame && (

)}

) } interface DynamicFrameLayoutProps { frames: Frame[] className?: string showFrames?: boolean hoverSize?: number gapSize?: number } export function DynamicFrameLayout({ frames: initialFrames, className, showFrames = false, hoverSize = 6, gapSize = 4 }: DynamicFrameLayoutProps) { const [frames] = useState(initialFrames) const [hovered, setHovered] = useState<{ row: number; col: number } | null>(null) const getRowSizes = () => { if (hovered === null) return "4fr 4fr 4fr" const { row } = hovered const nonHoveredSize = (12 - hoverSize) / 2 return [0, 1, 2].map((r) => (r === row ? `${hoverSize}fr` : `${nonHoveredSize}fr`)).join(" ") } const getColSizes = () => { if (hovered === null) return "4fr 4fr 4fr" const { col } = hovered const nonHoveredSize = (12 - hoverSize) / 2 return [0, 1, 2].map((c) => (c === col ? `${hoverSize}fr` : `${nonHoveredSize}fr`)).join(" ") } const getTransformOrigin = (x: number, y: number) => { const vertical = y === 0 ? "top" : y === 4 ? "center" : "bottom" const horizontal = x === 0 ? "left" : x === 4 ? "center" : "right" return `${vertical} ${horizontal}` } return (

{frames.map((frame) => { const row = Math.floor(frame.defaultPos.y / 4) const col = Math.floor(frame.defaultPos.x / 4) const transformOrigin = getTransformOrigin(frame.defaultPos.x, frame.defaultPos.y) return ( setHovered({ row, col })} onMouseLeave={() => setHovered(null)} > ) })}

) }