diff --git a/example/src/screens/ConferenceScreen/ConferenceScreen.tsx b/example/src/screens/ConferenceScreen/ConferenceScreen.tsx index ba8ab943..3ef341f5 100644 --- a/example/src/screens/ConferenceScreen/ConferenceScreen.tsx +++ b/example/src/screens/ConferenceScreen/ConferenceScreen.tsx @@ -38,6 +38,8 @@ const ConferenceScreen: FunctionComponent = () => { const [scaleType, setScaleType] = useState<'fill' | 'fit'>('fill'); const [isMessageModalActive, setIsMessageModalActive] = useState(false); + const [isVideoOn, setIsVideoOn] = useState(false); + const [isMuted, setIsMuted] = useState(false); const connectedParticipants = useMemo(() => { return participants.filter( @@ -50,6 +52,24 @@ const ConferenceScreen: FunctionComponent = () => { return ; } + const onPressVideoButton = () => { + if (isVideoOn) { + stopLocalVideo(); + } else { + startLocalVideo(); + } + setIsVideoOn(!isVideoOn); + }; + + const onPressMuteButton = () => { + if (isMuted) { + unmute(me); + } else { + mute(me); + } + setIsMuted(!isMuted); + }; + return ( @@ -95,78 +115,6 @@ const ConferenceScreen: FunctionComponent = () => { ) : null} - - - - - setIsMessageModalActive(true)} - > - - SEND MSG - - - - - { - mute(me); - }} - > - - MUTE ME - - - - - { - unmute(me); - }} - > - - UNMUTE ME - - - - - startLocalVideo()} - > - - START VIDEO - - - - - stopLocalVideo()} - > - - STOP VIDEO - - - - - { - setScaleType(scaleType === 'fill' ? 'fit' : 'fill'); - }} - > - - FILL/FIT - - - - - - { + + + + onPressMuteButton()} + > + + {isMuted ? 'UNMUTE ME' : 'MUTE ME'} + + + + + onPressVideoButton()} + > + + {isVideoOn ? 'STOP VIDEO' : 'START VIDEO'} + + + + + { + setScaleType(scaleType === 'fill' ? 'fit' : 'fill'); + }} + > + + FILL/FIT + + + + + {isBottomSheetVisible ? () : null}