"use client"; import { useState, useRef, useCallback, useEffect } from "react"; import { motion } from "motion/react"; const VIDEO_SOURCES = [ "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4", ]; const POSTER = "/unsplash/1490750967868-88aa4486c946.webp"; const EASE = [0.23, 1, 0.32, 1] as const; function formatTime(timeInSeconds: number) { if (Number.isNaN(timeInSeconds)) return "۰:۰۰"; const mins = Math.floor(timeInSeconds / 60); const secs = Math.floor(timeInSeconds % 60); const raw = `${mins}:${secs.toString().padStart(2, "0")}`; return raw.replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!); } function CornerPlayer({ title = "تماشای تور استودیو", defaultMuted = true, autoPlay = true, }: { title?: string; defaultMuted?: boolean; autoPlay?: boolean; }) { const [isOpen, setIsOpen] = useState(true); const [isMuted, setIsMuted] = useState(defaultMuted); const [hasSource, setHasSource] = useState(true); const [, setIsPlaying] = useState(true); const [isEnlarged, setIsEnlarged] = useState(false); const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); const [isScrubbing, setIsScrubbing] = useState(false); const [isHovered, setIsHovered] = useState(false); const [isBarHovered, setIsBarHovered] = useState(false); const videoRef = useRef(null); const progressTrackRef = useRef(null); useEffect(() => { const el = videoRef.current; if (!el) return; if (isOpen && autoPlay) el.play().catch(() => {}); }, [autoPlay, isOpen]); const handleTimeUpdate = () => { if (!isScrubbing && videoRef.current) { setCurrentTime(videoRef.current.currentTime); } }; const handleLoadedMetadata = () => { if (videoRef.current?.duration) { setDuration(videoRef.current.duration); setHasSource(true); } }; const togglePlay = (e?: React.MouseEvent) => { e?.stopPropagation(); if (!videoRef.current) return; if (videoRef.current.paused) { videoRef.current.play().catch(() => {}); setIsPlaying(true); } else { videoRef.current.pause(); setIsPlaying(false); } }; const toggleMute = (e: React.MouseEvent) => { e.stopPropagation(); if (!videoRef.current) return; const next = !isMuted; videoRef.current.muted = next; setIsMuted(next); }; const handleClose = (e: React.MouseEvent) => { e.stopPropagation(); videoRef.current?.pause(); setIsOpen(false); }; const handleOpen = () => { setIsOpen(true); }; const handleScrub = useCallback( (clientX: number) => { if (!progressTrackRef.current || !videoRef.current || duration <= 0) return; const rect = progressTrackRef.current.getBoundingClientRect(); const pos = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)); const targetTime = pos * duration; setCurrentTime(targetTime); videoRef.current.currentTime = targetTime; }, [duration], ); const handleMouseDown = (e: React.MouseEvent) => { e.stopPropagation(); setIsScrubbing(true); handleScrub(e.clientX); const onMove = (ev: MouseEvent) => handleScrub(ev.clientX); const onUp = () => { setIsScrubbing(false); window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); }; const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0; const showControls = isHovered || isScrubbing; const openH = isEnlarged ? 498 : 320; const openW = isEnlarged ? 280 : 180; const durationLabel = duration > 0 ? ` (${String(Math.round(duration)).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!)}ث)` : ""; return (

{/* One continuous shell — video stays mounted so minimize never blanks */} setIsHovered(true)} onMouseLeave={() => { setIsHovered(false); setIsBarHovered(false); }} > {hasSource ? (

) : (

پیش‌نمایش در دسترس نیست

)}

setIsBarHovered(true)} onMouseLeave={() => setIsBarHovered(false)} onMouseDown={handleMouseDown} className="absolute end-0 bottom-0 start-0 z-10 flex h-8 cursor-pointer touch-none flex-col justify-end" >

{formatTime(currentTime)} {formatTime(duration)}

{title} {durationLabel}

); } export default function CornerVideo() { return (

); }