@tellescope/react-components 1.240.0 → 1.242.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.240.0",
+  "version": "1.242.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -42,18 +42,18 @@
   },
   "dependencies": {
     "@emotion/css": "11.10.5",
-    "@mui/icons-material": "5.10.15",
-    "@mui/material": "5.10.15",
+    "@mui/icons-material": "5.15.0",
+    "@mui/material": "5.15.0",
     "@reduxjs/toolkit": "1.9.0",
     "@stripe/react-stripe-js": "2.9.0",
     "@stripe/stripe-js": "1.52.1",
-    "@tellescope/constants": "1.240.0",
-    "@tellescope/sdk": "1.240.0",
-    "@tellescope/types-client": "1.240.0",
-    "@tellescope/types-models": "1.240.0",
-    "@tellescope/types-utilities": "1.240.0",
-    "@tellescope/utilities": "1.240.0",
-    "@tellescope/validation": "1.240.0",
+    "@tellescope/constants": "1.242.0",
+    "@tellescope/sdk": "1.242.0",
+    "@tellescope/types-client": "1.242.0",
+    "@tellescope/types-models": "1.242.0",
+    "@tellescope/types-utilities": "1.242.0",
+    "@tellescope/utilities": "1.242.0",
+    "@tellescope/validation": "1.242.0",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "css-to-react-native": "3.0.0",
@@ -76,6 +76,7 @@
     "react-native-video": "5.2.1",
     "react-redux": "7.2.9",
     "react-window": "1.8.9",
+    "twilio-video": "^2.28.1",
     "yup": "0.32.11"
   },
   "peerDependencies": {
@@ -83,7 +84,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "16b2b3499eb36e6b1715c6ede6d07832b7376917",
+  "gitHead": "f2880f8663e523e8c99ded28e67c071f94921265",
   "publishConfig": {
     "access": "public"
   }

package/src/TwilioVideo/TwilioControls.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import { Box, IconButton, Button } from '@mui/material'
+import {
+  Mic as MicIcon,
+  MicOff as MicOffIcon,
+  Videocam as VideocamIcon,
+  VideocamOff as VideocamOffIcon,
+  CallEnd as CallEndIcon,
+} from '@mui/icons-material'
+import { useTwilioVideo } from './TwilioVideoContext'
+
+export interface TwilioControlBarProps {
+  onLeave?: () => void
+  onEndForAll?: () => void
+  style?: React.CSSProperties
+}
+
+export const TwilioControlBar: React.FC<TwilioControlBarProps> = ({
+  onLeave,
+  onEndForAll,
+  style,
+}) => {
+  const {
+    isVideoEnabled,
+    isAudioEnabled,
+    toggleVideo,
+    toggleAudio,
+    disconnect,
+    isHost,
+  } = useTwilioVideo()
+
+  const handleLeave = () => {
+    disconnect()
+    onLeave?.()
+  }
+
+  const handleEndForAll = () => {
+    onEndForAll?.()
+    disconnect()
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 2,
+        backgroundColor: '#1a1a1a',
+        padding: '12px 24px',
+        ...style,
+      }}
+    >
+      <IconButton
+        onClick={toggleAudio}
+        sx={{
+          color: isAudioEnabled ? 'white' : '#ff4444',
+          '&:hover': {
+            backgroundColor: 'rgba(255,255,255,0.1)',
+          },
+        }}
+      >
+        {isAudioEnabled ? <MicIcon /> : <MicOffIcon />}
+      </IconButton>
+
+      <IconButton
+        onClick={toggleVideo}
+        sx={{
+          color: isVideoEnabled ? 'white' : '#ff4444',
+          '&:hover': {
+            backgroundColor: 'rgba(255,255,255,0.1)',
+          },
+        }}
+      >
+        {isVideoEnabled ? <VideocamIcon /> : <VideocamOffIcon />}
+      </IconButton>
+
+      <IconButton
+        onClick={handleLeave}
+        sx={{
+          backgroundColor: '#ff4444',
+          color: 'white',
+          '&:hover': {
+            backgroundColor: '#cc3333',
+          },
+        }}
+      >
+        <CallEndIcon />
+      </IconButton>
+
+      {isHost && onEndForAll && (
+        <Button
+          variant="outlined"
+          onClick={handleEndForAll}
+          sx={{
+            color: 'white',
+            borderColor: 'white',
+            marginLeft: 2,
+            '&:hover': {
+              borderColor: '#ff4444',
+              color: '#ff4444',
+            },
+          }}
+        >
+          End For All
+        </Button>
+      )}
+    </Box>
+  )
+}

package/src/TwilioVideo/TwilioLocalPreview.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useRef, useState } from 'react'
+import Video, { LocalVideoTrack } from 'twilio-video'
+import { Box, Typography, CircularProgress, FormControl, InputLabel, Select, MenuItem } from '@mui/material'
+
+export interface TwilioLocalPreviewProps {
+  style?: React.CSSProperties
+}
+
+export const TwilioLocalPreview: React.FC<TwilioLocalPreviewProps> = ({ style }) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const trackRef = useRef<LocalVideoTrack | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [devices, setDevices] = useState<MediaDeviceInfo[]>([])
+  const [selectedDeviceId, setSelectedDeviceId] = useState<string>('')
+
+  // Enumerate video devices
+  useEffect(() => {
+    const getDevices = async () => {
+      try {
+        // Request permission first to get device labels, then immediately stop
+        const stream = await navigator.mediaDevices.getUserMedia({ video: true })
+        stream.getTracks().forEach(track => track.stop())
+
+        const allDevices = await navigator.mediaDevices.enumerateDevices()
+        const videoDevices = allDevices.filter(d => d.kind === 'videoinput')
+        setDevices(videoDevices)
+        if (videoDevices.length > 0 && !selectedDeviceId) {
+          setSelectedDeviceId(videoDevices[0].deviceId)
+        }
+      } catch (err: any) {
+        setError(err?.message || 'Failed to enumerate devices')
+        setLoading(false)
+      }
+    }
+    getDevices()
+  }, [])
+
+  // Create video track when device is selected
+  useEffect(() => {
+    if (!selectedDeviceId) return
+
+    let mounted = true
+
+    const getVideoTrack = async () => {
+      // Stop existing track
+      if (trackRef.current) {
+        trackRef.current.stop()
+        trackRef.current = null
+      }
+      // Clear container
+      if (containerRef.current) {
+        containerRef.current.innerHTML = ''
+      }
+
+      setLoading(true)
+      setError(null)
+
+      try {
+        const track = await Video.createLocalVideoTrack({
+          deviceId: { exact: selectedDeviceId },
+          width: 640,
+          height: 480,
+        })
+        if (mounted && containerRef.current) {
+          trackRef.current = track
+          const videoElement = track.attach()
+          videoElement.style.width = '100%'
+          videoElement.style.height = '100%'
+          videoElement.style.objectFit = 'cover'
+          videoElement.style.transform = 'scaleX(-1)'
+          containerRef.current.appendChild(videoElement)
+          setLoading(false)
+        } else if (!mounted) {
+          track.stop()
+        }
+      } catch (err: any) {
+        if (mounted) {
+          setError(err?.message || 'Failed to access camera')
+          setLoading(false)
+        }
+      }
+    }
+
+    getVideoTrack()
+
+    return () => {
+      mounted = false
+      if (trackRef.current) {
+        trackRef.current.stop()
+        trackRef.current = null
+      }
+      if (containerRef.current) {
+        containerRef.current.innerHTML = ''
+      }
+    }
+  }, [selectedDeviceId])
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
+      {/* Camera selector */}
+      {devices.length > 0 && (
+        <FormControl size="small" sx={{ minWidth: 320 }}>
+          <InputLabel id="camera-select-label">Camera</InputLabel>
+          <Select
+            labelId="camera-select-label"
+            value={selectedDeviceId}
+            label="Camera"
+            onChange={(e) => setSelectedDeviceId(e.target.value)}
+          >
+            {devices.map((device) => (
+              <MenuItem key={device.deviceId} value={device.deviceId}>
+                {device.label || `Camera ${devices.indexOf(device) + 1}`}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      )}
+
+      {/* Video preview */}
+      <Box
+        sx={{
+          width: 320,
+          height: 240,
+          backgroundColor: '#1a1a1a',
+          borderRadius: 1,
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          ...style,
+        }}
+      >
+        {loading && <CircularProgress size={24} sx={{ color: 'white' }} />}
+        {error && (
+          <Typography color="error" variant="body2" textAlign="center" sx={{ p: 2 }}>
+            {error}
+          </Typography>
+        )}
+        <Box
+          ref={containerRef}
+          sx={{
+            width: '100%',
+            height: '100%',
+            display: loading || error ? 'none' : 'block',
+          }}
+        />
+      </Box>
+    </Box>
+  )
+}

package/src/TwilioVideo/TwilioParticipant.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  RemoteParticipant,
+  LocalParticipant,
+  VideoTrack,
+  AudioTrack,
+  RemoteTrackPublication,
+  LocalTrackPublication,
+} from 'twilio-video'
+import { Box, Typography } from '@mui/material'
+
+export interface TwilioParticipantProps {
+  participant: RemoteParticipant | LocalParticipant
+  isLocal?: boolean
+  style?: React.CSSProperties
+  /** Resolve participant identity to a display label. Defaults to empty string. */
+  resolveIdentity?: (identity: string) => string
+}
+
+export const TwilioParticipant: React.FC<TwilioParticipantProps> = ({
+  participant,
+  isLocal = false,
+  style,
+  resolveIdentity = () => '',
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const [videoTrack, setVideoTrack] = useState<VideoTrack | null>(null)
+  const [audioTrack, setAudioTrack] = useState<AudioTrack | null>(null)
+
+  useEffect(() => {
+    const handleTrackSubscribed = (track: VideoTrack | AudioTrack) => {
+      if (track.kind === 'video') {
+        setVideoTrack(track as VideoTrack)
+      } else if (track.kind === 'audio') {
+        setAudioTrack(track as AudioTrack)
+      }
+    }
+
+    const handleTrackUnsubscribed = (track: VideoTrack | AudioTrack) => {
+      if (track.kind === 'video') {
+        setVideoTrack(null)
+      } else if (track.kind === 'audio') {
+        setAudioTrack(null)
+      }
+    }
+
+    // Get existing tracks
+    participant.tracks.forEach((publication: RemoteTrackPublication | LocalTrackPublication) => {
+      if (publication.track) {
+        handleTrackSubscribed(publication.track as VideoTrack | AudioTrack)
+      }
+    })
+
+    // For remote participants, listen for track subscriptions
+    if ('on' in participant) {
+      participant.on('trackSubscribed', handleTrackSubscribed)
+      participant.on('trackUnsubscribed', handleTrackUnsubscribed)
+    }
+
+    return () => {
+      if ('off' in participant) {
+        participant.off('trackSubscribed', handleTrackSubscribed)
+        participant.off('trackUnsubscribed', handleTrackUnsubscribed)
+      }
+    }
+  }, [participant])
+
+  // Attach video track
+  useEffect(() => {
+    if (videoTrack && videoRef.current) {
+      videoTrack.attach(videoRef.current)
+      return () => {
+        videoTrack.detach()
+      }
+    }
+  }, [videoTrack])
+
+  // Attach audio track (not for local participant to avoid echo)
+  useEffect(() => {
+    if (audioTrack && audioRef.current && !isLocal) {
+      audioTrack.attach(audioRef.current)
+      return () => {
+        audioTrack.detach()
+      }
+    }
+  }, [audioTrack, isLocal])
+
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#1a1a1a',
+        borderRadius: 1,
+        overflow: 'hidden',
+        ...style,
+      }}
+    >
+      <video
+        ref={videoRef}
+        autoPlay
+        muted={isLocal}
+        playsInline
+        style={{
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover',
+          transform: isLocal ? 'scaleX(-1)' : 'none',
+        }}
+      />
+      {!isLocal && <audio ref={audioRef} autoPlay />}
+      {(() => {
+        const label = resolveIdentity(participant.identity)
+        if (!label && !isLocal) return null
+        return (
+          <Typography
+            variant="caption"
+            sx={{
+              position: 'absolute',
+              bottom: 8,
+              left: 8,
+              color: 'white',
+              backgroundColor: 'rgba(0,0,0,0.5)',
+              padding: '2px 8px',
+              borderRadius: 1,
+            }}
+          >
+            {label}{isLocal && (label ? ' (You)' : '(You)')}
+          </Typography>
+        )
+      })()}
+    </Box>
+  )
+}

package/src/TwilioVideo/TwilioVideoContext.tsx

@@ -0,0 +1,198 @@
+import React, { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react'
+import Video, {
+  Room,
+  LocalVideoTrack,
+  LocalAudioTrack,
+  RemoteParticipant,
+  LocalTrack,
+  RemoteTrack,
+  LocalParticipant,
+} from 'twilio-video'
+
+export interface TwilioVideoState {
+  room: Room | null
+  isConnecting: boolean
+  isConnected: boolean
+  localVideoTrack: LocalVideoTrack | null
+  localAudioTrack: LocalAudioTrack | null
+  participants: RemoteParticipant[]
+  error: Error | null
+  isHost: boolean
+  isVideoEnabled: boolean
+  isAudioEnabled: boolean
+}
+
+export interface TwilioVideoActions {
+  connect: (token: string, roomName: string) => Promise<void>
+  disconnect: () => void
+  toggleVideo: () => Promise<void>
+  toggleAudio: () => void
+  setIsHost: (isHost: boolean) => void
+}
+
+export type TwilioVideoContextType = TwilioVideoState & TwilioVideoActions
+
+const TwilioVideoContext = createContext<TwilioVideoContextType | null>(null)
+
+export const useTwilioVideo = (): TwilioVideoContextType => {
+  const context = useContext(TwilioVideoContext)
+  if (!context) {
+    throw new Error('useTwilioVideo must be used within TwilioVideoProvider')
+  }
+  return context
+}
+
+export interface TwilioVideoProviderProps {
+  children: React.ReactNode
+}
+
+export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ children }) => {
+  const [room, setRoom] = useState<Room | null>(null)
+  const [isConnecting, setIsConnecting] = useState(false)
+  const [localVideoTrack, setLocalVideoTrack] = useState<LocalVideoTrack | null>(null)
+  const [localAudioTrack, setLocalAudioTrack] = useState<LocalAudioTrack | null>(null)
+  const [participants, setParticipants] = useState<RemoteParticipant[]>([])
+  const [error, setError] = useState<Error | null>(null)
+  const [isHost, setIsHost] = useState(false)
+  const [isVideoEnabled, setIsVideoEnabled] = useState(true)
+  const [isAudioEnabled, setIsAudioEnabled] = useState(true)
+
+  const localTracksRef = useRef<(LocalVideoTrack | LocalAudioTrack)[]>([])
+
+  const connect = useCallback(async (token: string, roomName: string) => {
+    setIsConnecting(true)
+    setError(null)
+
+    try {
+      // Create local tracks
+      const tracks = await Video.createLocalTracks({
+        audio: true,
+        video: { width: 640 },
+      })
+
+      localTracksRef.current = tracks as (LocalVideoTrack | LocalAudioTrack)[]
+
+      const videoTrack = tracks.find((track: LocalTrack) => track.kind === 'video') as LocalVideoTrack | undefined
+      const audioTrack = tracks.find((track: LocalTrack) => track.kind === 'audio') as LocalAudioTrack | undefined
+
+      if (videoTrack) setLocalVideoTrack(videoTrack)
+      if (audioTrack) setLocalAudioTrack(audioTrack)
+
+      // Connect to room
+      const newRoom = await Video.connect(token, {
+        name: roomName,
+        tracks,
+        dominantSpeaker: true,
+        networkQuality: { local: 1, remote: 1 },
+      })
+
+      setRoom(newRoom)
+
+      // Handle existing participants
+      const existingParticipants = Array.from(newRoom.participants.values())
+      setParticipants(existingParticipants)
+
+      // Listen for new participants
+      newRoom.on('participantConnected', (participant: RemoteParticipant) => {
+        setParticipants(prev => [...prev, participant])
+      })
+
+      newRoom.on('participantDisconnected', (participant: RemoteParticipant) => {
+        setParticipants(prev => prev.filter(p => p.sid !== participant.sid))
+      })
+
+      newRoom.on('disconnected', () => {
+        // Stop all local tracks when disconnected
+        localTracksRef.current.forEach(track => {
+          track.stop()
+        })
+        localTracksRef.current = []
+        setRoom(null)
+        setLocalVideoTrack(null)
+        setLocalAudioTrack(null)
+        setParticipants([])
+      })
+
+    } catch (err) {
+      setError(err as Error)
+      console.error('Failed to connect to Twilio Video:', err)
+    } finally {
+      setIsConnecting(false)
+    }
+  }, [])
+
+  const disconnect = useCallback(() => {
+    if (room) {
+      room.disconnect()
+    }
+
+    // Stop local tracks
+    localTracksRef.current.forEach(track => {
+      track.stop()
+    })
+    localTracksRef.current = []
+
+    setRoom(null)
+    setLocalVideoTrack(null)
+    setLocalAudioTrack(null)
+    setParticipants([])
+  }, [room])
+
+  const toggleVideo = useCallback(async () => {
+    if (localVideoTrack) {
+      if (isVideoEnabled) {
+        localVideoTrack.disable()
+      } else {
+        localVideoTrack.enable()
+      }
+      setIsVideoEnabled(!isVideoEnabled)
+    }
+  }, [localVideoTrack, isVideoEnabled])
+
+  const toggleAudio = useCallback(() => {
+    if (localAudioTrack) {
+      if (isAudioEnabled) {
+        localAudioTrack.disable()
+      } else {
+        localAudioTrack.enable()
+      }
+      setIsAudioEnabled(!isAudioEnabled)
+    }
+  }, [localAudioTrack, isAudioEnabled])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (room) {
+        room.disconnect()
+      }
+      localTracksRef.current.forEach(track => {
+        track.stop()
+      })
+    }
+  }, [])
+
+  const value: TwilioVideoContextType = {
+    room,
+    isConnecting,
+    isConnected: !!room,
+    localVideoTrack,
+    localAudioTrack,
+    participants,
+    error,
+    isHost,
+    isVideoEnabled,
+    isAudioEnabled,
+    connect,
+    disconnect,
+    toggleVideo,
+    toggleAudio,
+    setIsHost,
+  }
+
+  return (
+    <TwilioVideoContext.Provider value={value}>
+      {children}
+    </TwilioVideoContext.Provider>
+  )
+}