@tellescope/react-components 1.246.2 → 1.248.0

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,

package/src/state.tsx

@@ -2637,6 +2637,43 @@ export const useIntegrations = (options={} as HookOptions<Integration>) => {
   )
 }
 
+export const useRedactedIntegrations = () => {
+  const session = useSession()
+  const [loadingState, setLoadingState] = useState<LoadedData<Integration[]>>({ status: LoadingStatus.Fetching, value: [] as any })
+  const fetchedRef = useRef(false)
+
+  useEffect(() => {
+    if (fetchedRef.current) return
+    fetchedRef.current = true
+
+    let cancelled = false
+    session.api.integrations.load_redacted({})
+      .then((result: any) => {
+        if (!cancelled) setLoadingState({ status: LoadingStatus.Loaded, value: result.integrations })
+      })
+      .catch((err: any) => {
+        if (!cancelled) setLoadingState({ status: LoadingStatus.Error, value: err })
+      })
+    return () => { cancelled = true }
+  }, [session])
+
+  const updateIntegration = useCallback(async (id: string, updates: Partial<Integration>) => {
+    const result: any = await session.api.integrations.update_settings({ id, updates })
+    setLoadingState((prev: LoadedData<Integration[]>) => {
+      if (prev.status !== LoadingStatus.Loaded) return prev
+      return {
+        ...prev,
+        value: prev.value.map((i: Integration) => i.id === id ? { ...i, ...result.integration } : i),
+      }
+    })
+  }, [session])
+
+  return [
+    loadingState,
+    { updateIntegration },
+  ] as const
+}
+
 export const usePortalCustomizations = (options={} as HookOptions<PortalCustomization>) => {
   const session = useResolvedSession()
   return useListStateHook(