-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react-native): add CallContent component with customization of i…
…nner components (#933) This PR primarily focuses on the introduction of the CallContent component which is also the root component of the customization of inner components. This PR also removes the `fullscreen` mode from `LocalParticipantView`.
- Loading branch information
Showing
15 changed files
with
395 additions
and
318 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
135 changes: 135 additions & 0 deletions
135
packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import React, { useEffect, useRef } from 'react'; | ||
| import { StyleSheet, View } from 'react-native'; | ||
| import { | ||
| CallTopView as DefaultCallTopView, | ||
| ParticipantsInfoBadge as DefaultParticipantsInfoBadge, | ||
| CallTopViewProps, | ||
| } from '../CallTopView'; | ||
| import { | ||
| CallParticipantsGrid, | ||
| CallParticipantsGridProps, | ||
| CallParticipantsSpotlight, | ||
| } from '../CallLayout'; | ||
| import { | ||
| CallControls as DefaultCallControls, | ||
| CallControlProps, | ||
| } from '../CallControls'; | ||
| import { CallParticipantsList as DefaultCallParticipantsList } from '../CallParticipantsList'; | ||
| import { | ||
| useCall, | ||
| useHasOngoingScreenShare, | ||
| } from '@stream-io/video-react-bindings'; | ||
| import { | ||
| ParticipantNetworkQualityIndicator as DefaultParticipantNetworkQualityIndicator, | ||
| ParticipantReaction as DefaultParticipantReaction, | ||
| ParticipantLabel as DefaultParticipantLabel, | ||
| ParticipantVideoFallback as DefaultParticipantVideoFallback, | ||
| VideoRenderer as DefaultVideoRenderer, | ||
| ParticipantView as DefaultParticipantView, | ||
| LocalParticipantView as DefaultLocalParticipantView, | ||
| } from '../../Participant'; | ||
| import { CallingState } from '@stream-io/video-client'; | ||
| import { useIncallManager } from '../../../hooks'; | ||
|
|
||
| export type CallParticipantsComponentProps = Pick< | ||
| CallParticipantsGridProps, | ||
| | 'CallParticipantsList' | ||
| | 'LocalParticipantView' | ||
| | 'ParticipantLabel' | ||
| | 'ParticipantNetworkQualityIndicator' | ||
| | 'ParticipantReaction' | ||
| | 'ParticipantVideoFallback' | ||
| | 'ParticipantView' | ||
| | 'VideoRenderer' | ||
| > & { | ||
| /** | ||
| * Component to customize the CallTopView component. | ||
| */ | ||
| CallTopView?: React.ComponentType<CallTopViewProps>; | ||
| /** | ||
| * Component to customize the CallControls component. | ||
| */ | ||
| CallControls?: React.ComponentType<CallControlProps>; | ||
| }; | ||
|
|
||
| export type CallContentProps = Pick<CallControlProps, 'onHangupCallHandler'> & | ||
| Pick< | ||
| CallTopViewProps, | ||
| 'onBackPressed' | 'onParticipantInfoPress' | 'ParticipantsInfoBadge' | ||
| > & | ||
| CallParticipantsComponentProps & { | ||
| /** | ||
| * This switches the participant's layout between the grid and the spotlight mode. | ||
| */ | ||
| layout?: 'grid' | 'spotlight'; | ||
| }; | ||
|
|
||
| export const CallContent = ({ | ||
| onBackPressed, | ||
| onParticipantInfoPress, | ||
| onHangupCallHandler, | ||
| CallParticipantsList = DefaultCallParticipantsList, | ||
| LocalParticipantView = DefaultLocalParticipantView, | ||
| ParticipantLabel = DefaultParticipantLabel, | ||
| ParticipantNetworkQualityIndicator = DefaultParticipantNetworkQualityIndicator, | ||
| ParticipantReaction = DefaultParticipantReaction, | ||
| ParticipantVideoFallback = DefaultParticipantVideoFallback, | ||
| ParticipantView = DefaultParticipantView, | ||
| ParticipantsInfoBadge = DefaultParticipantsInfoBadge, | ||
| VideoRenderer = DefaultVideoRenderer, | ||
| CallTopView = DefaultCallTopView, | ||
| CallControls = DefaultCallControls, | ||
| layout, | ||
| }: CallContentProps) => { | ||
| const hasScreenShare = useHasOngoingScreenShare(); | ||
| const showSpotlightLayout = hasScreenShare || layout === 'spotlight'; | ||
| /** | ||
| * This hook is used to handle IncallManager specs of the application. | ||
| */ | ||
| useIncallManager({ media: 'video', auto: true }); | ||
|
|
||
| const call = useCall(); | ||
| const activeCallRef = useRef(call); | ||
| activeCallRef.current = call; | ||
|
|
||
| useEffect(() => { | ||
| return () => { | ||
| if (activeCallRef.current?.state.callingState !== CallingState.LEFT) { | ||
| activeCallRef.current?.leave(); | ||
| } | ||
| }; | ||
| }, []); | ||
|
|
||
| const participantViewProps: CallParticipantsComponentProps = { | ||
| CallParticipantsList, | ||
| LocalParticipantView, | ||
| ParticipantLabel, | ||
| ParticipantNetworkQualityIndicator, | ||
| ParticipantReaction, | ||
| ParticipantVideoFallback, | ||
| ParticipantView, | ||
| VideoRenderer, | ||
| }; | ||
|
|
||
| return ( | ||
| <View style={styles.container}> | ||
| <View style={styles.container}> | ||
| <CallTopView | ||
| onBackPressed={onBackPressed} | ||
| onParticipantInfoPress={onParticipantInfoPress} | ||
| ParticipantsInfoBadge={ParticipantsInfoBadge} | ||
| /> | ||
| {showSpotlightLayout ? ( | ||
| <CallParticipantsSpotlight {...participantViewProps} /> | ||
| ) : ( | ||
| <CallParticipantsGrid {...participantViewProps} /> | ||
| )} | ||
| </View> | ||
| <CallControls onHangupCallHandler={onHangupCallHandler} /> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { flex: 1 }, | ||
| }); |
1 change: 1 addition & 0 deletions
1
packages/react-native-sdk/src/components/Call/CallContent/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './CallContent'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.