vg-x07df 0.1.0

package/examples/demo/src/components/calling/IncomingCallModal.css

@@ -0,0 +1,192 @@
+.incoming-call-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.incoming-call-modal {
+  background: white;
+  border-radius: 20px;
+  padding: 2rem;
+  min-width: 350px;
+  max-width: 400px;
+  text-align: center;
+  position: relative;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  animation: slideUp 0.3s ease-out;
+}
+
+.incoming-call-content {
+  position: relative;
+  z-index: 2;
+}
+
+.caller-avatar {
+  margin: 0 auto 1.5rem;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 4px solid #007bff;
+  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
+}
+
+.caller-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #007bff, #0056b3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  font-weight: bold;
+  color: white;
+}
+
+.call-details h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  color: #333;
+  font-weight: 600;
+}
+
+.call-details p {
+  margin: 0 0 2rem;
+  color: #666;
+  font-size: 1rem;
+}
+
+.call-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.call-actions button {
+  padding: 1rem 2rem;
+  border: none;
+  border-radius: 50px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 120px;
+  justify-content: center;
+}
+
+.accept-button {
+  background: linear-gradient(135deg, #28a745, #20c997);
+  color: white;
+}
+
+.accept-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(40, 167, 69, 0.4);
+}
+
+.decline-button {
+  background: linear-gradient(135deg, #dc3545, #c82333);
+  color: white;
+}
+
+.decline-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(220, 53, 69, 0.4);
+}
+
+.call-actions button .icon {
+  font-size: 1.2rem;
+}
+
+.incoming-call-animation {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.pulse-ring {
+  position: absolute;
+  border: 2px solid rgba(0, 123, 255, 0.3);
+  border-radius: 50%;
+  width: 200px;
+  height: 200px;
+  top: -100px;
+  left: -100px;
+  animation: pulse 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
+}
+
+.pulse-ring.delay-1 {
+  animation-delay: 0.5s;
+}
+
+.pulse-ring.delay-2 {
+  animation-delay: 1s;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.33);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Responsive design */
+@media (max-width: 480px) {
+  .incoming-call-modal {
+    margin: 1rem;
+    padding: 1.5rem;
+    min-width: auto;
+    width: calc(100% - 2rem);
+  }
+  
+  .call-actions {
+    flex-direction: column;
+  }
+  
+  .call-actions button {
+    width: 100%;
+  }
+}

package/examples/demo/src/components/calling/IncomingCallModal.tsx

@@ -0,0 +1,78 @@
+import { useCallState, useCallActions } from 'vg-x07df';
+import './IncomingCallModal.css';
+
+export function IncomingCallModal() {
+  const { incomingCall } = useCallState();
+  const { accept, decline } = useCallActions();
+
+  const handleAccept = async () => {
+    if (!incomingCall) return;
+    
+    try {
+      await accept(incomingCall.callId);
+    } catch (error) {
+      console.error('Failed to accept call:', error);
+    }
+  };
+
+  const handleDecline = async () => {
+    if (!incomingCall) return;
+    
+    try {
+      await decline(incomingCall.callId);
+    } catch (error) {
+      console.error('Failed to decline call:', error);
+    }
+  };
+
+  if (!incomingCall) return null;
+
+  return (
+    <div className="incoming-call-modal-overlay">
+      <div className="incoming-call-modal">
+        <div className="incoming-call-content">
+          <div className="caller-avatar">
+            {incomingCall.caller.avatarUrl ? (
+              <img src={incomingCall.caller.avatarUrl} alt={incomingCall.caller.name} />
+            ) : (
+              <div className="avatar-placeholder">
+                {incomingCall.caller.name.charAt(0).toUpperCase()}
+              </div>
+            )}
+          </div>
+          
+          <div className="call-details">
+            <h2>{incomingCall.caller.name}</h2>
+            <p>Incoming {incomingCall.type.toLowerCase()} call</p>
+          </div>
+
+          <div className="call-actions">
+            <button 
+              className="decline-button"
+              onClick={handleDecline}
+              title="Decline call"
+            >
+              <span className="icon">📞</span>
+              Decline
+            </button>
+            
+            <button 
+              className="accept-button"
+              onClick={handleAccept}
+              title="Accept call"
+            >
+              <span className="icon">📞</span>
+              Accept
+            </button>
+          </div>
+        </div>
+
+        <div className="incoming-call-animation">
+          <div className="pulse-ring"></div>
+          <div className="pulse-ring delay-1"></div>
+          <div className="pulse-ring delay-2"></div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/examples/demo/src/components/calling/MinimizedCall.css

@@ -0,0 +1,156 @@
+.minimized-call {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: #1f2937;
+  border-radius: 12px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  min-width: 280px;
+  max-width: 400px;
+  z-index: 1000;
+  border: 1px solid #374151;
+  animation: slideInUp 0.3s ease-out;
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.minimized-call-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 8px;
+  transition: background-color 0.2s;
+}
+
+.minimized-call-content:hover {
+  background: rgba(55, 65, 81, 0.5);
+}
+
+.call-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.call-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+.status-indicator.active {
+  background: #10b981;
+}
+
+.status-indicator.connecting {
+  background: #f59e0b;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.status-text {
+  color: #e5e7eb;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.participant-info {
+  display: flex;
+  align-items: center;
+}
+
+.participant-text {
+  color: #9ca3af;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.call-icon {
+  font-size: 20px;
+  opacity: 0.8;
+}
+
+.minimized-call-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.control-button {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 6px;
+  background: #374151;
+  color: #e5e7eb;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.control-button:hover {
+  background: #4b5563;
+  transform: translateY(-1px);
+}
+
+.control-button.restore {
+  background: #059669;
+}
+
+.control-button.restore:hover {
+  background: #10b981;
+}
+
+.control-button.end-call {
+  background: #dc2626;
+}
+
+.control-button.end-call:hover {
+  background: #ef4444;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .minimized-call {
+    bottom: 10px;
+    right: 10px;
+    left: 10px;
+    min-width: auto;
+    max-width: none;
+  }
+}

package/examples/demo/src/components/calling/MinimizedCall.tsx

@@ -0,0 +1,78 @@
+import { useCallState, useParticipants } from 'vg-x07df';
+import { useCallTimer } from '../../hooks/useCallTimer';
+import './MinimizedCall.css';
+
+interface MinimizedCallProps {
+  onRestore: () => void;
+  onLeaveCall: () => void;
+}
+
+export function MinimizedCall({ onRestore, onLeaveCall }: MinimizedCallProps) {
+  const { status } = useCallState();
+  const participants = useParticipants();
+  const { formattedDuration, isActive } = useCallTimer();
+
+  const participantCount = participants.length;
+  const participantNames = participants
+    .slice(0, 2)
+    .map(p => p.firstName || 'Unknown')
+    .join(', ');
+
+  const getStatusText = () => {
+    switch (status) {
+      case 'RINGING':
+        return 'Ringing...';
+      case 'ACCEPTED':
+      case 'AWAITING_JOIN_INFO':
+        return 'Connecting...';
+      case 'ACTIVE':
+        return formattedDuration;
+      default:
+        return 'In call';
+    }
+  };
+
+  const getParticipantText = () => {
+    if (participantCount === 0) return 'No participants';
+    if (participantCount === 1) return participantNames;
+    if (participantCount === 2) return participantNames;
+    return `${participantNames} +${participantCount - 2} more`;
+  };
+
+  return (
+    <div className="minimized-call">
+      <div className="minimized-call-content" onClick={onRestore}>
+        <div className="call-info">
+          <div className="call-status">
+            <div className={`status-indicator ${isActive ? 'active' : 'connecting'}`}></div>
+            <span className="status-text">{getStatusText()}</span>
+          </div>
+          <div className="participant-info">
+            <span className="participant-text">{getParticipantText()}</span>
+          </div>
+        </div>
+        
+        <div className="call-icon">
+          <span>📞</span>
+        </div>
+      </div>
+      
+      <div className="minimized-call-controls">
+        <button 
+          className="control-button restore"
+          onClick={onRestore}
+          title="Restore call"
+        >
+          ⬆
+        </button>
+        <button 
+          className="control-button end-call"
+          onClick={onLeaveCall}
+          title="End call"
+        >
+          📞
+        </button>
+      </div>
+    </div>
+  );
+}