vg-x07df 0.1.0

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

@@ -0,0 +1,262 @@
+import { useState } from 'react';
+import { 
+  useMediaControls, 
+  useDevices, 
+  useParticipants, 
+  useCallActions,
+  useConnection,
+  useCallState
+} from 'vg-x07df';
+import { useCallTimer } from '../../hooks/useCallTimer';
+import './EnhancedControlBar.css';
+
+interface EnhancedControlBarProps {
+  onLeaveCall?: () => void;
+}
+
+export function EnhancedControlBar({ onLeaveCall }: EnhancedControlBarProps) {
+  const [showDevices, setShowDevices] = useState(false);
+  const [showParticipants, setShowParticipants] = useState(false);
+  
+  const { 
+    isAudioEnabled, 
+    isVideoEnabled, 
+    toggleMicrophone, 
+    toggleCamera,
+    isLoading: mediaLoading 
+  } = useMediaControls();
+  
+  const { 
+    mics, 
+    cams, 
+    speakers, 
+    switchMicrophone, 
+    switchCamera, 
+    switchSpeaker 
+  } = useDevices();
+  
+  const { participants } = useParticipants();
+  const { end } = useCallActions();
+  const { quality } = useConnection();
+  const { formattedDuration } = useCallTimer();
+
+  // Get current call ID from SDK state
+  const { id: callId } = useCallState();
+
+  const handleLeaveCall = async () => {
+    if (!callId) {
+      console.error('No active call to leave');
+      return;
+    }
+    
+    try {
+      await end(callId);
+      onLeaveCall?.();
+    } catch (error) {
+      console.error('Failed to leave call:', error);
+    }
+  };
+
+  const participantCount = participants.length;
+
+  return (
+    <div className="enhanced-control-bar">
+      {/* Left section - Call info */}
+      <div className="control-section left">
+        <div className="call-info">
+          <span className="call-duration">{formattedDuration}</span>
+          {quality && (
+            <div className={`connection-indicator ${quality.toLowerCase()}`}>
+              <div className="signal-dots">
+                <div className="dot"></div>
+                <div className="dot"></div>
+                <div className="dot"></div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Center section - Media controls */}
+      <div className="control-section center">
+        <div className="media-controls">
+          {/* Microphone control */}
+          <div className="control-group">
+            <button
+              onClick={toggleMicrophone}
+              disabled={mediaLoading}
+              className={`control-button microphone ${!isAudioEnabled ? 'disabled' : ''}`}
+              title={isAudioEnabled ? 'Mute microphone' : 'Unmute microphone'}
+            >
+              <span className="icon">
+                {isAudioEnabled ? '🎤' : '🔇'}
+              </span>
+            </button>
+            
+            {mics.length > 1 && (
+              <button 
+                className="device-selector-trigger"
+                onClick={() => setShowDevices(!showDevices)}
+                title="Select microphone"
+              >
+                ▼
+              </button>
+            )}
+          </div>
+
+          {/* Camera control */}
+          <div className="control-group">
+            <button
+              onClick={toggleCamera}
+              disabled={mediaLoading}
+              className={`control-button camera ${!isVideoEnabled ? 'disabled' : ''}`}
+              title={isVideoEnabled ? 'Turn off camera' : 'Turn on camera'}
+            >
+              <span className="icon">
+                {isVideoEnabled ? '📹' : '📷'}
+              </span>
+            </button>
+            
+            {cams.length > 1 && (
+              <button 
+                className="device-selector-trigger"
+                onClick={() => setShowDevices(!showDevices)}
+                title="Select camera"
+              >
+                ▼
+              </button>
+            )}
+          </div>
+
+          {/* Screen share control */}
+          <button
+            className="control-button screen-share"
+            title="Share screen"
+            onClick={() => {
+              // TODO: Implement screen sharing
+              console.log('Screen share clicked');
+            }}
+          >
+            <span className="icon">🖥️</span>
+          </button>
+
+          {/* Participants panel */}
+          <button
+            className={`control-button participants ${showParticipants ? 'active' : ''}`}
+            onClick={() => setShowParticipants(!showParticipants)}
+            title="Show participants"
+          >
+            <span className="icon">👥</span>
+            {participantCount > 0 && (
+              <span className="participant-count">{participantCount}</span>
+            )}
+          </button>
+
+          {/* Chat control */}
+          <button
+            className="control-button chat"
+            title="Open chat"
+            onClick={() => {
+              // TODO: Implement chat
+              console.log('Chat clicked');
+            }}
+          >
+            <span className="icon">💬</span>
+          </button>
+
+          {/* More options */}
+          <button
+            className={`control-button more ${showDevices ? 'active' : ''}`}
+            onClick={() => setShowDevices(!showDevices)}
+            title="More options"
+          >
+            <span className="icon">⚙️</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Right section - Call actions */}
+      <div className="control-section right">
+        <button
+          onClick={handleLeaveCall}
+          className="control-button leave-call"
+          title="Leave call"
+        >
+          <span className="icon">📞</span>
+        </button>
+      </div>
+
+      {/* Device selector dropdown */}
+      {showDevices && (
+        <div className="device-selector-panel">
+          <div className="device-section">
+            <h4>Microphone</h4>
+            {mics.map((mic: any) => (
+              <button
+                key={mic.deviceId}
+                onClick={() => switchMicrophone(mic.deviceId)}
+                className="device-option"
+              >
+                {mic.label || `Microphone ${mic.deviceId.slice(0, 8)}`}
+              </button>
+            ))}
+          </div>
+
+          <div className="device-section">
+            <h4>Camera</h4>
+            {cams.map((cam: any) => (
+              <button
+                key={cam.deviceId}
+                onClick={() => switchCamera(cam.deviceId)}
+                className="device-option"
+              >
+                {cam.label || `Camera ${cam.deviceId.slice(0, 8)}`}
+              </button>
+            ))}
+          </div>
+
+          <div className="device-section">
+            <h4>Speaker</h4>
+            {speakers.map((speaker: any) => (
+              <button
+                key={speaker.deviceId}
+                onClick={() => switchSpeaker(speaker.deviceId)}
+                className="device-option"
+              >
+                {speaker.label || `Speaker ${speaker.deviceId.slice(0, 8)}`}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Participants panel */}
+      {showParticipants && (
+        <div className="participants-panel">
+          <h4>Participants ({participantCount})</h4>
+          <div className="participants-list">
+            {participants.map((participant: any) => (
+              <div key={participant.id} className="participant-item">
+                <div className="participant-avatar">
+                  {participant.avatarUrl ? (
+                    <img src={participant.avatarUrl} alt="" />
+                  ) : (
+                    <span>
+                      {(participant.firstName || 'U').charAt(0).toUpperCase()}
+                    </span>
+                  )}
+                </div>
+                <span className="participant-name">
+                  {[participant.firstName, participant.lastName].filter(Boolean).join(' ') || `User ${participant.id}`}
+                </span>
+                {participant.isSpeaking && (
+                  <span className="speaking-indicator">🗣️</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,67 @@
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 0;
+  margin-top: 8px;
+}
+
+.pagination-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(0, 0, 0, 0.3);
+  color: white;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  backdrop-filter: blur(8px);
+}
+
+.pagination-button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  transform: translateY(-1px);
+}
+
+.pagination-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.pagination-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.page-indicator {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+  min-width: 40px;
+  text-align: center;
+  user-select: none;
+}
+
+/* Match the existing UI theme */
+@media (max-width: 768px) {
+  .pagination-controls {
+    gap: 8px;
+    padding: 8px 0;
+  }
+  
+  .pagination-button {
+    width: 28px;
+    height: 28px;
+    font-size: 12px;
+  }
+  
+  .page-indicator {
+    font-size: 13px;
+    min-width: 35px;
+  }
+}

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

@@ -0,0 +1,64 @@
+import { useEffect } from 'react';
+import './PaginationControls.css';
+
+interface PaginationControlsProps {
+  currentPage: number;
+  totalPages: number;
+  onPreviousPage: () => void;
+  onNextPage: () => void;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+}
+
+export function PaginationControls({
+  currentPage,
+  totalPages,
+  onPreviousPage,
+  onNextPage,
+  hasNextPage,
+  hasPreviousPage,
+}: PaginationControlsProps) {
+  // Keyboard navigation support
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'ArrowLeft' && hasPreviousPage) {
+        onPreviousPage();
+      } else if (event.key === 'ArrowRight' && hasNextPage) {
+        onNextPage();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [hasNextPage, hasPreviousPage, onNextPage, onPreviousPage]);
+
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="pagination-controls">
+      <button
+        className="pagination-button prev"
+        onClick={onPreviousPage}
+        disabled={!hasPreviousPage}
+        title="Previous page (←)"
+      >
+        ◀
+      </button>
+      
+      <span className="page-indicator">
+        {currentPage}/{totalPages}
+      </span>
+      
+      <button
+        className="pagination-button next"
+        onClick={onNextPage}
+        disabled={!hasNextPage}
+        title="Next page (→)"
+      >
+        ▶
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,153 @@
+.participant-grid-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: #0f172a;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.participant-grid {
+  display: grid;
+  gap: 8px;
+  flex: 1;
+  padding: 16px 16px 8px 16px;
+}
+
+.participant-grid-container.empty {
+  justify-content: center;
+  align-items: center;
+}
+
+.participant-grid-container.empty .participant-grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.empty-state {
+  text-align: center;
+  color: #64748b;
+  padding: 40px 20px;
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.7;
+}
+
+.empty-state h3 {
+  margin: 0 0 8px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #94a3b8;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: 14px;
+  color: #64748b;
+}
+
+.overflow-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 8px;
+  border: 2px dashed rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(8px);
+}
+
+.overflow-content {
+  text-align: center;
+  color: white;
+}
+
+.overflow-count {
+  display: block;
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.overflow-text {
+  font-size: 12px;
+  opacity: 0.8;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Responsive grid adjustments */
+@media (max-width: 1024px) {
+  .participant-grid {
+    gap: 6px;
+    padding: 12px 12px 8px 12px;
+  }
+}
+
+@media (max-width: 768px) {
+  .participant-grid {
+    gap: 4px;
+    padding: 8px 8px 4px 8px;
+  }
+  
+  /* Force smaller grids on mobile */
+  .participant-grid[style*="repeat(4"] {
+    grid-template-columns: repeat(2, 1fr) !important;
+    grid-template-rows: repeat(2, 1fr) !important;
+  }
+  
+  .participant-grid[style*="repeat(3"] {
+    grid-template-columns: repeat(2, 1fr) !important;
+    grid-template-rows: repeat(2, 1fr) !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .participant-grid {
+    gap: 2px;
+    padding: 4px 4px 2px 4px;
+  }
+  
+  /* Single column on very small screens */
+  .participant-grid[style*="repeat("] {
+    grid-template-columns: 1fr !important;
+    grid-template-rows: repeat(auto-fit, minmax(200px, 1fr)) !important;
+  }
+}
+
+/* Animation for grid changes */
+.participant-grid {
+  transition: grid-template-columns 0.3s ease, grid-template-rows 0.3s ease;
+}
+
+/* Special layout for exactly 2 participants */
+.participant-grid[style*="repeat(2, 1fr)"]:not([style*="rows"]) {
+  grid-template-rows: 1fr;
+}
+
+/* Special layout for exactly 3 participants */
+.participant-grid[style*="repeat(3, 1fr)"][style*="repeat(2, 1fr)"] .participant-tile:last-child {
+  grid-column: 2;
+}
+
+/* Ensure tiles maintain aspect ratio in different grid configurations */
+.participant-grid .participant-tile {
+  min-height: 120px;
+}
+
+@media (min-width: 1200px) {
+  .participant-grid .participant-tile {
+    min-height: 160px;
+  }
+}
+
+@media (min-width: 1600px) {
+  .participant-grid .participant-tile {
+    min-height: 200px;
+  }
+}

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

@@ -0,0 +1,87 @@
+import { useMemo, useState } from 'react';
+import { useParticipants } from 'vg-x07df';
+import { ParticipantTile } from './ParticipantTile';
+import { PaginationControls } from './PaginationControls';
+import './ParticipantGrid.css';
+
+interface ParticipantGridProps {
+  className?: string;
+}
+
+export function ParticipantGrid({ className = '' }: ParticipantGridProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const participantData = useParticipants(undefined, { page: currentPage, pageSize: 8, kind: "active" });
+  
+  const {
+    participants,
+    totalPages,
+    hasNextPage,
+    hasPreviousPage,
+    totalParticipants,
+  } = participantData;
+
+  const gridLayout = useMemo(() => {
+    const count = participants.length;
+    
+    if (count === 0) return { cols: 1, rows: 1 };
+    if (count === 1) return { cols: 1, rows: 1 };
+    if (count === 2) return { cols: 2, rows: 1 };
+    if (count <= 4) return { cols: 2, rows: 2 };
+    if (count <= 6) return { cols: 3, rows: 2 };
+    if (count <= 8) return { cols: 4, rows: 2 };
+    
+    return { cols: 4, rows: 2 };
+  }, [participants.length]);
+
+  const handlePreviousPage = () => {
+    setCurrentPage(prev => Math.max(1, prev - 1));
+  };
+
+  const handleNextPage = () => {
+    setCurrentPage(prev => Math.min(totalPages, prev + 1));
+  };
+
+  if (totalParticipants === 0) {
+    return (
+      <div className={`participant-grid empty ${className}`}>
+        <div className="empty-state">
+          <div className="empty-icon">👥</div>
+          <h3>No participants yet</h3>
+          <p>Waiting for others to join the call...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`participant-grid-container ${className}`}>
+      <div 
+        className="participant-grid"
+        style={{
+          gridTemplateColumns: `repeat(${gridLayout.cols}, 1fr)`,
+          gridTemplateRows: `repeat(${gridLayout.rows}, 1fr)`,
+        }}
+      >
+        {participants.map((participant: any) => (
+          <ParticipantTile
+            key={participant.id}
+            participant={participant}
+            isLocal={participant.id === 'local'}
+            videoTrack={null}
+            isMuted={false}
+            isVideoEnabled={true}
+          />
+        ))}
+      </div>
+      
+      <PaginationControls
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPreviousPage={handlePreviousPage}
+        onNextPage={handleNextPage}
+        hasNextPage={hasNextPage}
+        hasPreviousPage={hasPreviousPage}
+      />
+    </div>
+  );
+}