initial commit

Signed-off-by: ale <ale@manalejandro.com>

client/src/components/VideoPlayer.jsx

@@ -1,29 +1,89 @@
 import ReactPlayer from 'react-player';
+import { motion } from 'framer-motion';
+import { User, Mic, MicOff } from 'lucide-react';
 
 const VideoPlayer = ({ stream, isAudioMute, name }) => {
-    const myStream = name === "My Stream" ? true : false;
+    const isMyStream = name === "My Stream";
+    
     return (
-        <div>
-            <div className={`${name === "My Stream" ? "flex flex-col items-center justify-center absolute top-2 right-3 z-10" : "px-2"}`}>
-                <h1 className={`text-sm font-poppins font-semibold md:text-xl mb-1 text-center ${myStream ? "mt-1" : "mt-4"}`}>
-                    {name}
-                </h1>
-                <div className={`relative rounded-[30px] overflow-hidden
-                 ${myStream ? " mxs:w-[80px] mxs:h-[120px] msm:w-[100px] msm:rounded-md msm:h-[140px] mmd:w-[140px] md:w-[200px] lg:w-[280px]"
-                        : "mxs:h-[450px] mss:h-[500px] mmd:h-[600px] md:w-[800px] md:h-[500px]"}`}
-                >
+        <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={isAudioMute}
+                        muted={isMyStream ? true : isAudioMute}
                         height="100%"
                         width="100%"
-                        style={{ transform: 'scaleX(-1)' }}
+                        style={{ 
+                            transform: 'scaleX(-1)',
+                        }}
+                        config={{
+                            file: {
+                                attributes: {
+                                    style: {
+                                        width: '100%',
+                                        height: '100%',
+                                        objectFit: 'cover'
+                                    }
+                                }
+                            }
+                        }}
                     />
-                </div>
+                ) : (
+                    <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>
-        </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;