vg-x07df 0.1.0

package/examples/demo/src/components/conference/ParticipantTile.css

@@ -0,0 +1,210 @@
+.participant-tile {
+  position: relative;
+  background: #1f2937;
+  border-radius: 8px;
+  overflow: hidden;
+  aspect-ratio: 16/9;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+.participant-tile.local {
+  border: 2px solid #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.participant-tile:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.video-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.participant-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: #1f2937;
+}
+
+.video-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
+}
+
+.participant-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+}
+
+.avatar-fallback {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 28px;
+  font-weight: 600;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+}
+
+.participant-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.participant-name {
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  max-width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.participant-indicators {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.indicator.muted {
+  background: rgba(239, 68, 68, 0.9);
+  color: white;
+}
+
+.indicator.video-off {
+  background: rgba(107, 114, 128, 0.9);
+  color: white;
+}
+
+.indicator.speaking {
+  background: rgba(34, 197, 94, 0.9);
+  color: white;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+}
+
+.indicator.connection-quality {
+  background: rgba(0, 0, 0, 0.5);
+  padding: 2px;
+}
+
+.signal-bars {
+  display: flex;
+  gap: 1px;
+  align-items: flex-end;
+  height: 12px;
+}
+
+.signal-bars .bar {
+  width: 2px;
+  background: white;
+  border-radius: 1px;
+  transition: all 0.2s;
+}
+
+.signal-bars .bar:nth-child(1) {
+  height: 4px;
+}
+
+.signal-bars .bar:nth-child(2) {
+  height: 8px;
+}
+
+.signal-bars .bar:nth-child(3) {
+  height: 12px;
+}
+
+/* Connection quality states */
+.connection-quality.excellent .bar {
+  background: #10b981;
+}
+
+.connection-quality.good .bar:nth-child(1),
+.connection-quality.good .bar:nth-child(2) {
+  background: #f59e0b;
+}
+
+.connection-quality.good .bar:nth-child(3) {
+  background: #10b981;
+}
+
+.connection-quality.poor .bar:nth-child(1) {
+  background: #ef4444;
+}
+
+.connection-quality.poor .bar:nth-child(2),
+.connection-quality.poor .bar:nth-child(3) {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.connection-quality.unknown .bar {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .participant-avatar,
+  .avatar-fallback {
+    width: 60px;
+    height: 60px;
+    font-size: 20px;
+  }
+  
+  .participant-name {
+    font-size: 12px;
+  }
+  
+  .indicator {
+    width: 20px;
+    height: 20px;
+    font-size: 10px;
+  }
+}

package/examples/demo/src/components/conference/ParticipantTile.tsx

@@ -0,0 +1,114 @@
+import { useRef, useEffect } from 'react';
+import type { Participant } from 'vg-x07df';
+import './ParticipantTile.css';
+
+interface ParticipantTileProps {
+  participant: Participant;
+  isLocal?: boolean;
+  videoTrack?: MediaStreamTrack | null;
+  isMuted?: boolean;
+  isVideoEnabled?: boolean;
+  className?: string;
+}
+
+export function ParticipantTile({ 
+  participant, 
+  isLocal = false,
+  videoTrack,
+  isMuted = false,
+  isVideoEnabled = true,
+  className = ''
+}: ParticipantTileProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // Handle video track
+  useEffect(() => {
+    if (!videoRef.current || !videoTrack) return;
+
+    const videoElement = videoRef.current;
+    const stream = new MediaStream([videoTrack]);
+    videoElement.srcObject = stream;
+
+    return () => {
+      videoElement.srcObject = null;
+    };
+  }, [videoTrack]);
+
+  const displayName = [participant.firstName, participant.lastName]
+    .filter(Boolean)
+    .join(' ') || `User ${participant.id}`;
+
+  const getAvatarFallback = () => {
+    if (participant.firstName && participant.lastName) {
+      return `${participant.firstName.charAt(0)}${participant.lastName.charAt(0)}`.toUpperCase();
+    }
+    if (participant.firstName) {
+      return participant.firstName.charAt(0).toUpperCase();
+    }
+    return displayName.charAt(0).toUpperCase();
+  };
+
+  return (
+    <div className={`participant-tile ${isLocal ? 'local' : ''} ${className}`}>
+      <div className="video-container">
+        {isVideoEnabled && videoTrack ? (
+          <video
+            ref={videoRef}
+            autoPlay
+            playsInline
+            muted={isLocal} // Always mute local video to prevent feedback
+            className="participant-video"
+          />
+        ) : (
+          <div className="video-placeholder">
+            {participant.avatarUrl ? (
+              <img src={participant.avatarUrl} alt={displayName} className="participant-avatar" />
+            ) : (
+              <div className="avatar-fallback">
+                {getAvatarFallback()}
+              </div>
+            )}
+          </div>
+        )}
+        
+        {/* Overlay indicators */}
+        <div className="participant-overlay">
+          <div className="participant-name">
+            {displayName}
+            {isLocal && ' (You)'}
+          </div>
+          
+          <div className="participant-indicators">
+            {isMuted && (
+              <div className="indicator muted">
+                <span className="icon">🔇</span>
+              </div>
+            )}
+            
+            {!isVideoEnabled && (
+              <div className="indicator video-off">
+                <span className="icon">📹</span>
+              </div>
+            )}
+            
+            {participant.isSpeaking && (
+              <div className="indicator speaking">
+                <span className="icon">🗣️</span>
+              </div>
+            )}
+            
+            {participant.connectionQuality && (
+              <div className={`indicator connection-quality ${participant.connectionQuality.toLowerCase()}`}>
+                <div className="signal-bars">
+                  <div className="bar"></div>
+                  <div className="bar"></div>
+                  <div className="bar"></div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/examples/demo/src/components/conference/VideoConference.css

@@ -0,0 +1,214 @@
+.video-conference {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  overflow: hidden;
+}
+
+.conference-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.video-area {
+  flex: 1;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.call-connecting {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(20px);
+}
+
+.connecting-content {
+  text-align: center;
+  color: white;
+  max-width: 400px;
+  padding: 40px 20px;
+}
+
+.connecting-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 120px;
+  margin-bottom: 32px;
+}
+
+.pulse-ring {
+  position: absolute;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  animation: pulse-ring 2s cubic-bezier(0.25, 0, 0, 1) infinite;
+}
+
+.pulse-ring.delay-1 {
+  animation-delay: 0.4s;
+}
+
+.pulse-ring.delay-2 {
+  animation-delay: 0.8s;
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+
+.call-icon {
+  position: relative;
+  font-size: 48px;
+  z-index: 1;
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.connecting-content h2 {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 0 12px 0;
+  color: white;
+}
+
+.connecting-content p {
+  font-size: 16px;
+  margin: 0 0 24px 0;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.5;
+}
+
+.connecting-dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.connecting-dots .dot {
+  width: 8px;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 50%;
+  animation: bounce-dots 1.4s ease-in-out infinite both;
+}
+
+.connecting-dots .dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.connecting-dots .dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes bounce-dots {
+  0%, 80%, 100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .video-area {
+    padding: 8px;
+  }
+  
+  .connecting-content {
+    padding: 20px;
+  }
+  
+  .connecting-icon {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 24px;
+  }
+  
+  .call-icon {
+    font-size: 32px;
+  }
+  
+  .connecting-content h2 {
+    font-size: 20px;
+  }
+  
+  .connecting-content p {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 480px) {
+  .video-area {
+    padding: 4px;
+  }
+  
+  .connecting-content {
+    padding: 16px;
+  }
+  
+  .connecting-icon {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 16px;
+  }
+  
+  .call-icon {
+    font-size: 24px;
+  }
+  
+  .connecting-content h2 {
+    font-size: 18px;
+  }
+  
+  .connecting-content p {
+    font-size: 13px;
+  }
+}
+
+/* Fullscreen mode adjustments */
+.video-conference:fullscreen {
+  background: #000;
+}
+
+.video-conference:fullscreen .conference-header {
+  display: none;
+}
+
+.video-conference:fullscreen .video-area {
+  padding: 0;
+}
+
+.video-conference:fullscreen .participant-grid {
+  border-radius: 0;
+  background: #000;
+}

package/examples/demo/src/components/conference/VideoConference.tsx

@@ -0,0 +1,93 @@
+import { useCallState, useAutoJoinForCurrentUser, useSdk } from 'vg-x07df';
+import { ConferenceHeader } from './ConferenceHeader';
+import { ParticipantGrid } from './ParticipantGrid';
+import { EnhancedControlBar } from './EnhancedControlBar';
+import './VideoConference.css';
+
+interface VideoConferenceProps {
+  onLeaveCall?: () => void;
+  onMinimize?: () => void;
+}
+
+export function VideoConference({ onLeaveCall, onMinimize }: VideoConferenceProps) {
+  const { status } = useCallState();
+  const sdk = useSdk();
+  const autoJoinState = sdk.store((state) => state.autoJoin);
+  const userAutoJoin = useAutoJoinForCurrentUser();
+
+  const handleMinimize = () => {
+    onMinimize?.();
+  };
+
+  const handleFullscreen = () => {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      document.documentElement.requestFullscreen();
+    }
+  };
+
+  const handleLeaveCall = () => {
+    onLeaveCall?.();
+  };
+
+  if (status === 'IDLE' || status === 'ENDED') {
+    return null;
+  }
+
+  return (
+    <div className="video-conference">
+      <ConferenceHeader
+        onMinimize={handleMinimize}
+        onFullscreen={handleFullscreen}
+      />
+      
+      <div className="conference-content">
+        {status === 'CALLING' || status === 'RINGING' || status === 'ACCEPTED' || status === 'AWAITING_JOIN_INFO' || status === 'READY_TO_JOIN' || status === 'CONNECTING' ? (
+          <div className="call-connecting">
+            <div className="connecting-content">
+              <div className="connecting-icon">
+                <div className="pulse-ring"></div>
+                <div className="pulse-ring delay-1"></div>
+                <div className="pulse-ring delay-2"></div>
+                <span className="call-icon">📞</span>
+              </div>
+              <h2>Connecting to call...</h2>
+              <p>
+                {status === 'CALLING' && 'Calling participants...'}
+                {status === 'RINGING' && 'Ringing participants...'}
+                {status === 'ACCEPTED' && 'Call accepted, joining room...'}
+                {status === 'AWAITING_JOIN_INFO' && 'Getting room information...'}
+                {status === 'READY_TO_JOIN' && 'Preparing to join...'}
+                {status === 'CONNECTING' && 'Joining media session...'}
+              </p>
+              
+              {/* Show current auto-join status */}
+              {userAutoJoin.shouldAutoJoin && autoJoinState.status !== 'idle' && (
+                <div className="mt-4 text-sm opacity-75">
+                  {autoJoinState.status === 'pending' && '⏳ Auto-joining...'}
+                  {autoJoinState.status === 'retrying' && `🔄 Retrying... (${autoJoinState.attempt}/${autoJoinState.maxAttempts})`}
+                  {autoJoinState.status === 'failed' && '⚠️ Auto-join failed'}
+                </div>
+              )}
+              
+              <div className="connecting-dots">
+                <span className="dot"></span>
+                <span className="dot"></span>
+                <span className="dot"></span>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="video-area">
+            <ParticipantGrid />
+          </div>
+        )}
+      </div>
+
+      {status === 'ACTIVE' && (
+        <EnhancedControlBar onLeaveCall={handleLeaveCall} />
+      )}
+    </div>
+  );
+}