@tellescope/react-components 1.246.2 → 1.247.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.246.2",
+  "version": "1.247.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -51,13 +51,13 @@
     "@reduxjs/toolkit": "1.9.0",
     "@stripe/react-stripe-js": "2.9.0",
     "@stripe/stripe-js": "1.52.1",
-    "@tellescope/constants": "1.246.2",
-    "@tellescope/sdk": "1.246.2",
-    "@tellescope/types-client": "1.246.2",
-    "@tellescope/types-models": "1.246.2",
-    "@tellescope/types-utilities": "1.246.2",
-    "@tellescope/utilities": "1.246.2",
-    "@tellescope/validation": "1.246.2",
+    "@tellescope/constants": "1.247.0",
+    "@tellescope/sdk": "1.247.0",
+    "@tellescope/types-client": "1.247.0",
+    "@tellescope/types-models": "1.247.0",
+    "@tellescope/types-utilities": "1.247.0",
+    "@tellescope/utilities": "1.247.0",
+    "@tellescope/validation": "1.247.0",
     "css-to-react-native": "3.0.0",
     "draft-js": "0.11.7",
     "draftjs-to-html": "0.9.1",
@@ -84,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": "a9167f6d732de999cf012ffba3004f0d62ae8c14",
+  "gitHead": "408421d578d9c63493ff94464da6e4317aa3af20",
   "publishConfig": {
     "access": "public"
   }

package/src/TwilioVideo/TwilioControls.tsx

@@ -6,6 +6,8 @@ import {
   Videocam as VideocamIcon,
   VideocamOff as VideocamOffIcon,
   CallEnd as CallEndIcon,
+  ScreenShare as ScreenShareIcon,
+  StopScreenShare as StopScreenShareIcon,
 } from '@mui/icons-material'
 import { useTwilioVideo } from './TwilioVideoContext'
 
@@ -13,20 +15,26 @@ export interface TwilioControlBarProps {
   onLeave?: () => void
   onEndForAll?: () => void
   style?: React.CSSProperties
+  /** Whether to show the screen share button. Defaults to true. */
+  showScreenShare?: boolean
 }
 
 export const TwilioControlBar: React.FC<TwilioControlBarProps> = ({
   onLeave,
   onEndForAll,
   style,
+  showScreenShare: showScreenShareProp = true,
 }) => {
   const {
     isVideoEnabled,
     isAudioEnabled,
+    isScreenSharing,
     toggleVideo,
     toggleAudio,
+    toggleScreenShare,
     disconnect,
     isHost,
+    room,
   } = useTwilioVideo()
 
   const handleLeave = () => {
@@ -39,6 +47,10 @@ export const TwilioControlBar: React.FC<TwilioControlBarProps> = ({
     disconnect()
   }
 
+  const supportsScreenShare = typeof navigator !== 'undefined'
+    && navigator.mediaDevices
+    && typeof navigator.mediaDevices.getDisplayMedia === 'function'
+
   return (
     <Box
       sx={{
@@ -75,6 +87,24 @@ export const TwilioControlBar: React.FC<TwilioControlBarProps> = ({
         {isVideoEnabled ? <VideocamIcon /> : <VideocamOffIcon />}
       </IconButton>
 
+      {showScreenShareProp && supportsScreenShare && (
+        <IconButton
+          onClick={toggleScreenShare}
+          disabled={!room}
+          sx={{
+            color: isScreenSharing ? '#4caf50' : 'white',
+            '&:hover': {
+              backgroundColor: 'rgba(255,255,255,0.1)',
+            },
+            '&.Mui-disabled': {
+              color: 'rgba(255,255,255,0.3)',
+            },
+          }}
+        >
+          {isScreenSharing ? <StopScreenShareIcon /> : <ScreenShareIcon />}
+        </IconButton>
+      )}
+
       <IconButton
         onClick={handleLeave}
         sx={{

package/src/TwilioVideo/TwilioParticipant.tsx

@@ -8,6 +8,7 @@ import {
   LocalTrackPublication,
 } from 'twilio-video'
 import { Box, Typography } from '@mui/material'
+import { SCREEN_SHARE_TRACK_NAME } from './TwilioVideoContext'
 
 export interface TwilioParticipantProps {
   participant: RemoteParticipant | LocalParticipant
@@ -15,6 +16,8 @@ export interface TwilioParticipantProps {
   style?: React.CSSProperties
   /** Resolve participant identity to a display label. Defaults to empty string. */
   resolveIdentity?: (identity: string) => string
+  /** When true, render the screen share track instead of the camera track */
+  showScreenShare?: boolean
 }
 
 export const TwilioParticipant: React.FC<TwilioParticipantProps> = ({
@@ -22,16 +25,22 @@ export const TwilioParticipant: React.FC<TwilioParticipantProps> = ({
   isLocal = false,
   style,
   resolveIdentity = () => '',
+  showScreenShare = false,
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const audioRef = useRef<HTMLAudioElement>(null)
-  const [videoTrack, setVideoTrack] = useState<VideoTrack | null>(null)
+  const [cameraTrack, setCameraTrack] = useState<VideoTrack | null>(null)
+  const [screenTrack, setScreenTrack] = 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)
+        if (track.name === SCREEN_SHARE_TRACK_NAME) {
+          setScreenTrack(track as VideoTrack)
+        } else {
+          setCameraTrack(track as VideoTrack)
+        }
       } else if (track.kind === 'audio') {
         setAudioTrack(track as AudioTrack)
       }
@@ -39,7 +48,11 @@ export const TwilioParticipant: React.FC<TwilioParticipantProps> = ({
 
     const handleTrackUnsubscribed = (track: VideoTrack | AudioTrack) => {
       if (track.kind === 'video') {
-        setVideoTrack(null)
+        if (track.name === SCREEN_SHARE_TRACK_NAME) {
+          setScreenTrack(null)
+        } else {
+          setCameraTrack(null)
+        }
       } else if (track.kind === 'audio') {
         setAudioTrack(null)
       }
@@ -52,40 +65,61 @@ export const TwilioParticipant: React.FC<TwilioParticipantProps> = ({
       }
     })
 
-    // For remote participants, listen for track subscriptions
-    if ('on' in participant) {
+    if (isLocal) {
+      // For local participants, listen for track publications (trackSubscribed doesn't fire for local)
+      const handleTrackPublished = (publication: LocalTrackPublication) => {
+        if (publication.track) {
+          handleTrackSubscribed(publication.track as VideoTrack | AudioTrack)
+        }
+      }
+      const handleTrackStopped = (track: VideoTrack | AudioTrack) => {
+        handleTrackUnsubscribed(track)
+      }
+      participant.on('trackPublished', handleTrackPublished)
+      participant.on('trackStopped', handleTrackStopped)
+
+      return () => {
+        participant.off('trackPublished', handleTrackPublished)
+        participant.off('trackStopped', handleTrackStopped)
+      }
+    } else {
+      // For remote participants, listen for track subscriptions
       participant.on('trackSubscribed', handleTrackSubscribed)
       participant.on('trackUnsubscribed', handleTrackUnsubscribed)
-    }
 
-    return () => {
-      if ('off' in participant) {
+      return () => {
         participant.off('trackSubscribed', handleTrackSubscribed)
         participant.off('trackUnsubscribed', handleTrackUnsubscribed)
       }
     }
-  }, [participant])
+  }, [participant, isLocal])
+
+  const activeVideoTrack = showScreenShare ? screenTrack : cameraTrack
 
   // Attach video track
   useEffect(() => {
-    if (videoTrack && videoRef.current) {
-      videoTrack.attach(videoRef.current)
+    if (activeVideoTrack && videoRef.current) {
+      const el = videoRef.current
+      activeVideoTrack.attach(el)
       return () => {
-        videoTrack.detach()
+        activeVideoTrack.detach(el)
       }
     }
-  }, [videoTrack])
+  }, [activeVideoTrack])
 
   // Attach audio track (not for local participant to avoid echo)
   useEffect(() => {
     if (audioTrack && audioRef.current && !isLocal) {
-      audioTrack.attach(audioRef.current)
+      const el = audioRef.current
+      audioTrack.attach(el)
       return () => {
-        audioTrack.detach()
+        audioTrack.detach(el)
       }
     }
   }, [audioTrack, isLocal])
 
+  const shouldMirror = isLocal && !showScreenShare
+
   return (
     <Box
       sx={{
@@ -106,8 +140,8 @@ export const TwilioParticipant: React.FC<TwilioParticipantProps> = ({
         style={{
           width: '100%',
           height: '100%',
-          objectFit: 'cover',
-          transform: isLocal ? 'scaleX(-1)' : 'none',
+          objectFit: showScreenShare ? 'contain' : 'cover',
+          transform: shouldMirror ? 'scaleX(-1)' : 'none',
         }}
       />
       {!isLocal && <audio ref={audioRef} autoPlay />}

package/src/TwilioVideo/TwilioVideoContext.tsx

@@ -9,12 +9,17 @@ import Video, {
   LocalParticipant,
 } from 'twilio-video'
 
+export const SCREEN_SHARE_TRACK_NAME = 'screen-share'
+
 export interface TwilioVideoState {
   room: Room | null
   isConnecting: boolean
   isConnected: boolean
   localVideoTrack: LocalVideoTrack | null
   localAudioTrack: LocalAudioTrack | null
+  localScreenTrack: LocalVideoTrack | null
+  isScreenSharing: boolean
+  screenSharingParticipantSid: string | null
   participants: RemoteParticipant[]
   error: Error | null
   isHost: boolean
@@ -27,6 +32,7 @@ export interface TwilioVideoActions {
   disconnect: () => void
   toggleVideo: () => Promise<void>
   toggleAudio: () => void
+  toggleScreenShare: () => Promise<void>
   setIsHost: (isHost: boolean) => void
 }
 
@@ -56,6 +62,9 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
   const [isHost, setIsHost] = useState(false)
   const [isVideoEnabled, setIsVideoEnabled] = useState(true)
   const [isAudioEnabled, setIsAudioEnabled] = useState(true)
+  const [localScreenTrack, setLocalScreenTrack] = useState<LocalVideoTrack | null>(null)
+  const [isScreenSharing, setIsScreenSharing] = useState(false)
+  const [screenSharingParticipantSid, setScreenSharingParticipantSid] = useState<string | null>(null)
 
   const localTracksRef = useRef<(LocalVideoTrack | LocalAudioTrack)[]>([])
 
@@ -101,6 +110,18 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
         setParticipants(prev => prev.filter(p => p.sid !== participant.sid))
       })
 
+      // Track remote screen sharing for React re-renders
+      newRoom.on('trackSubscribed', (track: RemoteTrack, publication, participant: RemoteParticipant) => {
+        if (track.kind === 'video' && track.name === SCREEN_SHARE_TRACK_NAME) {
+          setScreenSharingParticipantSid(participant.sid)
+        }
+      })
+      newRoom.on('trackUnsubscribed', (track: RemoteTrack, publication, participant: RemoteParticipant) => {
+        if (track.kind === 'video' && track.name === SCREEN_SHARE_TRACK_NAME) {
+          setScreenSharingParticipantSid(null)
+        }
+      })
+
       newRoom.on('disconnected', () => {
         // Stop all local tracks when disconnected
         localTracksRef.current.forEach(track => {
@@ -110,6 +131,9 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
         setRoom(null)
         setLocalVideoTrack(null)
         setLocalAudioTrack(null)
+        setLocalScreenTrack(null)
+        setIsScreenSharing(false)
+        setScreenSharingParticipantSid(null)
         setParticipants([])
       })
 
@@ -135,6 +159,9 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
     setRoom(null)
     setLocalVideoTrack(null)
     setLocalAudioTrack(null)
+    setLocalScreenTrack(null)
+    setIsScreenSharing(false)
+    setScreenSharingParticipantSid(null)
     setParticipants([])
   }, [room])
 
@@ -160,6 +187,53 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
     }
   }, [localAudioTrack, isAudioEnabled])
 
+  const stopScreenShare = useCallback(() => {
+    if (localScreenTrack) {
+      if (room) {
+        room.localParticipant.unpublishTrack(localScreenTrack)
+      }
+      localScreenTrack.stop()
+      localTracksRef.current = localTracksRef.current.filter(t => t !== localScreenTrack)
+      setLocalScreenTrack(null)
+      setIsScreenSharing(false)
+    }
+  }, [localScreenTrack, room])
+
+  const toggleScreenShare = useCallback(async () => {
+    if (isScreenSharing) {
+      stopScreenShare()
+      return
+    }
+
+    try {
+      const stream = await navigator.mediaDevices.getDisplayMedia({ video: true })
+      const mediaStreamTrack = stream.getVideoTracks()[0]
+      const screenTrack = new LocalVideoTrack(mediaStreamTrack, { name: SCREEN_SHARE_TRACK_NAME })
+
+      if (room) {
+        await room.localParticipant.publishTrack(screenTrack)
+      }
+
+      localTracksRef.current.push(screenTrack)
+      setLocalScreenTrack(screenTrack)
+      setIsScreenSharing(true)
+
+      // Handle browser "Stop sharing" button
+      mediaStreamTrack.onended = () => {
+        if (room) {
+          room.localParticipant.unpublishTrack(screenTrack)
+        }
+        screenTrack.stop()
+        localTracksRef.current = localTracksRef.current.filter(t => t !== screenTrack)
+        setLocalScreenTrack(null)
+        setIsScreenSharing(false)
+      }
+    } catch (err) {
+      // User cancelled the screen share picker — not an error
+      console.log('Screen share cancelled or failed:', err)
+    }
+  }, [isScreenSharing, stopScreenShare, room])
+
   // Cleanup on unmount
   useEffect(() => {
     return () => {
@@ -178,6 +252,9 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
     isConnected: !!room,
     localVideoTrack,
     localAudioTrack,
+    localScreenTrack,
+    isScreenSharing,
+    screenSharingParticipantSid,
     participants,
     error,
     isHost,
@@ -187,6 +264,7 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
     disconnect,
     toggleVideo,
     toggleAudio,
+    toggleScreenShare,
     setIsHost,
   }
 

package/src/TwilioVideo/TwilioVideoRoom.tsx

@@ -3,6 +3,7 @@ import { Box, Grid } from '@mui/material'
 import { useTwilioVideo } from './TwilioVideoContext'
 import { TwilioParticipant } from './TwilioParticipant'
 import { TwilioControlBar } from './TwilioControls'
+import { RemoteParticipant, LocalParticipant } from 'twilio-video'
 
 export interface TwilioVideoRoomProps {
   onLeave?: () => void
@@ -10,6 +11,8 @@ export interface TwilioVideoRoomProps {
   style?: React.CSSProperties
   /** Resolve participant identity to a display label. Defaults to empty string. */
   resolveIdentity?: (identity: string) => string
+  /** Whether to show the screen share button. Defaults to true. */
+  showScreenShare?: boolean
 }
 
 export const TwilioVideoRoom: React.FC<TwilioVideoRoomProps> = ({
@@ -17,14 +20,101 @@ export const TwilioVideoRoom: React.FC<TwilioVideoRoomProps> = ({
   onEndForAll,
   style,
   resolveIdentity,
+  showScreenShare: showScreenShareProp = true,
 }) => {
-  const { room, participants } = useTwilioVideo()
+  const { room, participants, isScreenSharing, screenSharingParticipantSid } = useTwilioVideo()
 
   if (!room) return null
 
   const localParticipant = room.localParticipant
   const hasRemoteParticipants = participants.length > 0
 
+  // Find who is sharing their screen (context-driven so React re-renders properly)
+  const screenShareParticipant: RemoteParticipant | LocalParticipant | null = (() => {
+    if (isScreenSharing) return localParticipant
+    if (screenSharingParticipantSid) {
+      return participants.find(p => p.sid === screenSharingParticipantSid) || null
+    }
+    return null
+  })()
+
+  const isScreenShareActive = screenShareParticipant !== null
+
+  // All participants for the camera strip (local + remote)
+  const allParticipants: (RemoteParticipant | LocalParticipant)[] = [
+    localParticipant,
+    ...participants,
+  ]
+
+  if (isScreenShareActive) {
+    // Presentation layout: screen share large on top, camera strip on bottom
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+          width: '100%',
+          backgroundColor: '#1a1a1a',
+          ...style,
+        }}
+      >
+        {/* Screen share - main area */}
+        <Box
+          sx={{
+            flex: 1,
+            overflow: 'hidden',
+            minHeight: 0,
+          }}
+        >
+          <TwilioParticipant
+            participant={screenShareParticipant}
+            isLocal={screenShareParticipant === localParticipant}
+            showScreenShare
+            resolveIdentity={resolveIdentity}
+          />
+        </Box>
+
+        {/* Camera strip */}
+        <Box
+          sx={{
+            height: 120,
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 1,
+            padding: 1,
+            overflowX: 'auto',
+            flexShrink: 0,
+          }}
+        >
+          {allParticipants.map((p) => (
+            <Box
+              key={p.sid}
+              sx={{
+                height: '100%',
+                aspectRatio: '4/3',
+                flexShrink: 0,
+                borderRadius: 1,
+                overflow: 'hidden',
+              }}
+            >
+              <TwilioParticipant
+                participant={p}
+                isLocal={p === localParticipant}
+                showScreenShare={false}
+                resolveIdentity={resolveIdentity}
+              />
+            </Box>
+          ))}
+        </Box>
+
+        {/* Control bar */}
+        <TwilioControlBar onLeave={onLeave} onEndForAll={onEndForAll} showScreenShare={showScreenShareProp} />
+      </Box>
+    )
+  }
+
+  // Normal layout (no screen share active)
   return (
     <Box
       sx={{
@@ -92,7 +182,7 @@ export const TwilioVideoRoom: React.FC<TwilioVideoRoomProps> = ({
       </Box>
 
       {/* Control bar */}
-      <TwilioControlBar onLeave={onLeave} onEndForAll={onEndForAll} />
+      <TwilioControlBar onLeave={onLeave} onEndForAll={onEndForAll} showScreenShare={showScreenShareProp} />
     </Box>
   )
 }

package/src/TwilioVideo/index.ts

@@ -1,6 +1,7 @@
 export {
   TwilioVideoProvider,
   useTwilioVideo,
+  SCREEN_SHARE_TRACK_NAME,
   type TwilioVideoState,
   type TwilioVideoActions,
   type TwilioVideoContextType,