89 líneas
3.6 KiB
JavaScript
89 líneas
3.6 KiB
JavaScript
import ReactPlayer from 'react-player';
|
|
import { motion } from 'framer-motion';
|
|
import { User, Mic, MicOff } from 'lucide-react';
|
|
|
|
const VideoPlayer = ({ stream, isAudioMute, name }) => {
|
|
const isMyStream = name === "My Stream";
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className={`relative ${isMyStream
|
|
? "absolute top-4 right-4 z-20 w-32 md:w-48 lg:w-64"
|
|
: "w-full max-w-4xl mx-auto"
|
|
}`}
|
|
>
|
|
{/* Name Badge */}
|
|
<div className={`absolute top-2 left-2 z-30 flex items-center space-x-2 px-3 py-1 rounded-full bg-black/50 backdrop-blur-sm text-white text-xs font-medium ${
|
|
isMyStream ? "scale-75" : ""
|
|
}`}>
|
|
<User className="h-3 w-3" />
|
|
<span>{name}</span>
|
|
{isAudioMute ? (
|
|
<MicOff className="h-3 w-3 text-red-400" />
|
|
) : (
|
|
<Mic className="h-3 w-3 text-green-400" />
|
|
)}
|
|
</div>
|
|
|
|
{/* Video Container */}
|
|
<div className={`relative overflow-hidden rounded-2xl shadow-2xl border-2 border-white/20 ${
|
|
isMyStream
|
|
? "aspect-[3/4] bg-gradient-to-br from-gray-900 to-gray-800"
|
|
: "aspect-video bg-gradient-to-br from-gray-900 to-gray-800"
|
|
}`}>
|
|
{stream ? (
|
|
<ReactPlayer
|
|
url={stream}
|
|
playing
|
|
muted={isMyStream ? true : isAudioMute}
|
|
height="100%"
|
|
width="100%"
|
|
style={{
|
|
transform: 'scaleX(-1)',
|
|
}}
|
|
config={{
|
|
file: {
|
|
attributes: {
|
|
style: {
|
|
width: '100%',
|
|
height: '100%',
|
|
objectFit: 'cover'
|
|
}
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<div className="text-center text-white/60">
|
|
<User className="h-16 w-16 mx-auto mb-2 opacity-40" />
|
|
<p className="text-sm">Camera not available</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Overlay for connection status */}
|
|
{!stream && (
|
|
<div className="absolute inset-0 bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center">
|
|
<div className="text-center text-white">
|
|
<div className="animate-pulse">
|
|
<User className="h-12 w-12 mx-auto mb-2" />
|
|
<p className="text-sm font-medium">Connecting...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Glow effect for my stream */}
|
|
{isMyStream && (
|
|
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-indigo-400 to-purple-400 opacity-20 blur-xl -z-10"></div>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default VideoPlayer; |