From 298092b37606fb6fdf848a0bfef178958b3ff6f5 Mon Sep 17 00:00:00 2001 From: Mustafa BOLEKEN Date: Tue, 17 Dec 2024 21:06:27 +0300 Subject: [PATCH] Reduce function renders --- react/src/pages/AntMedia.js | 94 +++++++++++++++++++++------------ react/src/pages/LayoutPinned.js | 24 ++++----- react/src/pages/LayoutTiled.js | 12 ++--- react/src/pages/MeetingRoom.js | 12 ++--- react/src/pages/WaitingRoom.js | 12 ++--- 5 files changed, 89 insertions(+), 65 deletions(-) diff --git a/react/src/pages/AntMedia.js b/react/src/pages/AntMedia.js index 3025ce8a..ec6ac7aa 100644 --- a/react/src/pages/AntMedia.js +++ b/react/src/pages/AntMedia.js @@ -3005,6 +3005,30 @@ function AntMedia(props) { } window.makeFullScreen = makeFullScreen; + const handleMuteParticipant = React.useCallback((participant) => { + setParticipantIdMuted(participant); + }, []); + + const handleTurnOnYourMicNotification = React.useCallback((participant) => { + turnOnYourMicNotification(participant); + }, []); + + const handleTurnOffYourMicNotification = React.useCallback((participant) => { + turnOffYourMicNotification(participant); + }, []); + + const handleTurnOffYourCamNotification = React.useCallback((participant) => { + turnOffYourCamNotification(participant); + }, []); + + const handlePinVideo = React.useCallback((streamId) => { + pinVideo(streamId); + }, []); + + const handleLocalVideoCreate = React.useCallback((tempLocalVideo) => { + localVideoCreate(tempLocalVideo); + }, []); + return (!initialized ? <> setAudioLevelListener(listener, period)} - setParticipantIdMuted={(participant) => setParticipantIdMuted(participant)} - turnOnYourMicNotification={(streamId) => turnOnYourMicNotification(streamId)} - turnOffYourMicNotification={(streamId) => turnOffYourMicNotification(streamId)} - turnOffYourCamNotification={(streamId) => turnOffYourCamNotification(streamId)} - pinVideo={(streamId) => pinVideo(streamId)} + setParticipantIdMuted={(participant) => handleMuteParticipant(participant)} + turnOnYourMicNotification={(streamId) => handleTurnOnYourMicNotification(streamId)} + turnOffYourMicNotification={(streamId) => handleTurnOffYourMicNotification(streamId)} + turnOffYourCamNotification={(streamId) => handleTurnOffYourCamNotification(streamId)} + pinVideo={(streamId) => handlePinVideo(streamId)} isAdmin={isAdmin} publishStreamId={publishStreamId} /> @@ -3139,16 +3163,15 @@ function AntMedia(props) { effectsDrawerOpen={effectsDrawerOpen} publisherRequestListDrawerOpen={publisherRequestListDrawerOpen} showEmojis={showEmojis} - sendReactions={sendReactions} - setShowEmojis={setShowEmojis} + sendReactions={(reaction) => sendReactions(reaction)} + setShowEmojis={(show) => setShowEmojis(show)} globals={globals} audioTracks={audioTracks} participantIdMuted={participantIdMuted} isMuteParticipantDialogOpen={isMuteParticipantDialogOpen} - turnOffYourMicNotification={(streamId) => turnOffYourMicNotification(streamId)} - setMuteParticipantDialogOpen={setMuteParticipantDialogOpen} + setMuteParticipantDialogOpen={(open) => setMuteParticipantDialogOpen(open)} publishStreamId={publishStreamId} - pinVideo={(streamId) => pinVideo(streamId)} + pinVideo={(streamId) => handlePinVideo(streamId)} allParticipants={allParticipants} participantUpdated={participantUpdated} videoTrackAssignments={videoTrackAssignments} @@ -3159,38 +3182,39 @@ function AntMedia(props) { isPlayOnly={isPlayOnly} isMyMicMuted={isMyMicMuted} isMyCamTurnedOff={isMyCamTurnedOff} - setAudioLevelListener={setAudioLevelListener} - setParticipantIdMuted={setParticipantIdMuted} - turnOnYourMicNotification={turnOnYourMicNotification} - turnOffYourCamNotification={turnOffYourCamNotification} + setAudioLevelListener={(listener, period) => setAudioLevelListener(listener, period)} + setParticipantIdMuted={(participant) => handleMuteParticipant(participant)} + turnOnYourMicNotification={(streamId) => handleTurnOnYourMicNotification(streamId)} + turnOffYourMicNotification={(streamId) => handleTurnOffYourMicNotification(streamId)} + turnOffYourCamNotification={(streamId) => handleTurnOffYourCamNotification(streamId)} isAdmin={isAdmin} localVideo={localVideo} - localVideoCreate={localVideoCreate} + localVideoCreate={(tempLocalVideo) => localVideoCreate(tempLocalVideo)} isRecordPluginActive={isRecordPluginActive} isEnterDirectly={isEnterDirectly} cameraButtonDisabled={cameraButtonDisabled} - checkAndTurnOffLocalCamera={checkAndTurnOffLocalCamera} - checkAndTurnOnLocalCamera={checkAndTurnOnLocalCamera} - toggleMic={toggleMic} + checkAndTurnOffLocalCamera={(streamId) => checkAndTurnOffLocalCamera(streamId)} + checkAndTurnOnLocalCamera={(streamId) => checkAndTurnOnLocalCamera(streamId)} + toggleMic={(mute) => toggleMic(mute)} microphoneButtonDisabled={microphoneButtonDisabled} isScreenShared={isScreenShared} - handleStartScreenShare={handleStartScreenShare} - handleStopScreenShare={handleStopScreenShare} + handleStartScreenShare={()=>handleStartScreenShare()} + handleStopScreenShare={()=>handleStopScreenShare()} numberOfUnReadMessages={numberOfUnReadMessages} - toggleSetNumberOfUnreadMessages={toggleSetNumberOfUnreadMessages} - handleMessageDrawerOpen={handleMessageDrawerOpen} + toggleSetNumberOfUnreadMessages={(value) => toggleSetNumberOfUnreadMessages(value)} + handleMessageDrawerOpen={(open) => handleMessageDrawerOpen(open)} participantCount={participantCount} - handleParticipantListOpen={handleParticipantListOpen} + handleParticipantListOpen={(open) => handleParticipantListOpen(open)} requestSpeakerList={requestSpeakerList} - handlePublisherRequestListOpen={handlePublisherRequestListOpen} + handlePublisherRequestListOpen={(open) => setPublisherRequestListDrawerOpen(open)} handlePublisherRequest={()=>{}} - setLeftTheRoom={setLeftTheRoom} - addFakeParticipant={addFakeParticipant} - removeFakeParticipant={removeFakeParticipant} - fakeReconnect={fakeReconnect} + setLeftTheRoom={(left) => setLeftTheRoom(left)} + addFakeParticipant={() => addFakeParticipant()} + removeFakeParticipant={() => removeFakeParticipant()} + fakeReconnect={() => fakeReconnect()} isBroadcasting={isBroadcasting} - handleSetDesiredTileCount={handleSetDesiredTileCount} - handleBackgroundReplacement={handleBackgroundReplacement} + handleSetDesiredTileCount={(count) => handleSetDesiredTileCount(count)} + handleBackgroundReplacement={(mode)=>handleBackgroundReplacement(mode)} microphoneSelected={(mic) => microphoneSelected(mic)} devices={devices} selectedCamera={selectedCamera} @@ -3201,9 +3225,9 @@ function AntMedia(props) { videoSendResolution={videoSendResolution} setVideoSendResolution={(resolution) => setVideoSendResolution(resolution)} isRecordPluginInstalled={isRecordPluginInstalled} - startRecord={startRecord} - stopRecord={stopRecord} - handleEffectsOpen={handleEffectsOpen} + startRecord={()=>startRecord()} + stopRecord={()=>stopRecord()} + handleEffectsOpen={(open) => handleEffectsOpen(open)} /> pinVideo(streamId)} + pinVideo={(streamId) => handlePinVideo(streamId)} makeListenerAgain={(streamId) => {}} videoTrackAssignments={videoTrackAssignments} presenterButtonStreamIdInProcess={presenterButtonStreamIdInProcess} @@ -3230,7 +3254,7 @@ function AntMedia(props) { publishStreamId={publishStreamId} muteLocalMic={()=>muteLocalMic()} turnOffYourMicNotification={(streamId) => turnOffYourMicNotification(streamId)} - setParticipantIdMuted={(participant) => setParticipantIdMuted(participant)} + setParticipantIdMuted={(participant) => handleMuteParticipant(participant)} pagedParticipants={pagedParticipants} updateAllParticipantsPagination={(value) => updateAllParticipantsPagination(value)} participantListDrawerOpen={participantListDrawerOpen} diff --git a/react/src/pages/LayoutPinned.js b/react/src/pages/LayoutPinned.js index 401fe937..747ec5e4 100644 --- a/react/src/pages/LayoutPinned.js +++ b/react/src/pages/LayoutPinned.js @@ -60,15 +60,15 @@ function LayoutPinned (props) { isMyMicMuted={props?.isMyMicMuted} isMyCamTurnedOff={props?.isMyCamTurnedOff} allParticipants={props?.allParticipants} - setParticipantIdMuted={props?.setParticipantIdMuted} - turnOnYourMicNotification={props?.turnOnYourMicNotification} - turnOffYourMicNotification={props?.turnOffYourMicNotification} - turnOffYourCamNotification={props?.turnOffYourCamNotification} - pinVideo={props?.pinVideo} + setParticipantIdMuted={(participant) => props?.setParticipantIdMuted(participant)} + turnOnYourMicNotification={(streamId) =>props?.turnOnYourMicNotification(streamId)} + turnOffYourMicNotification={(streamId) =>props?.turnOffYourMicNotification(streamId)} + turnOffYourCamNotification={(streamId) =>props?.turnOffYourCamNotification(streamId)} + pinVideo={(streamId)=>props?.pinVideo(streamId)} isAdmin={props?.isAdmin} publishStreamId={props?.publishStreamId} localVideo={props?.localVideo} - localVideoCreate={props?.localVideoCreate} + localVideoCreate={(tempLocalVideo) => props?.localVideoCreate(tempLocalVideo)} /> @@ -122,15 +122,15 @@ function LayoutPinned (props) { isMyMicMuted={props?.isMyMicMuted} isMyCamTurnedOff={props?.isMyCamTurnedOff} allParticipants={props?.allParticipants} - setParticipantIdMuted={props?.setParticipantIdMuted} - turnOnYourMicNotification={props?.turnOnYourMicNotification} - turnOffYourMicNotification={props?.turnOffYourMicNotification} - turnOffYourCamNotification={props?.turnOffYourCamNotification} - pinVideo={props?.pinVideo} + setParticipantIdMuted={(participant) => props?.setParticipantIdMuted(participant)} + turnOnYourMicNotification={(streamId) =>props?.turnOnYourMicNotification(streamId)} + turnOffYourMicNotification={(streamId) =>props?.turnOffYourMicNotification(streamId)} + turnOffYourCamNotification={(streamId) =>props?.turnOffYourCamNotification(streamId)} + pinVideo={(streamId)=>props?.pinVideo(streamId)} isAdmin={props?.isAdmin} publishStreamId={props?.publishStreamId} localVideo={props?.localVideo} - localVideoCreate={props?.localVideoCreate} + localVideoCreate={(tempLocalVideo) => props?.localVideoCreate(tempLocalVideo)} /> diff --git a/react/src/pages/LayoutTiled.js b/react/src/pages/LayoutTiled.js index 721e9f66..04201541 100644 --- a/react/src/pages/LayoutTiled.js +++ b/react/src/pages/LayoutTiled.js @@ -121,15 +121,15 @@ function LayoutTiled(props) { isMyMicMuted={props?.isMyMicMuted} isMyCamTurnedOff={props?.isMyCamTurnedOff} allParticipants={props?.allParticipants} - setParticipantIdMuted={props?.setParticipantIdMuted} - turnOnYourMicNotification={props?.turnOnYourMicNotification} - turnOffYourMicNotification={props?.turnOffYourMicNotification} - turnOffYourCamNotification={props?.turnOffYourCamNotification} - pinVideo={props?.pinVideo} + setParticipantIdMuted={(participant) => props?.setParticipantIdMuted(participant)} + turnOnYourMicNotification={(streamId) =>props?.turnOnYourMicNotification(streamId)} + turnOffYourMicNotification={(streamId) =>props?.turnOffYourMicNotification(streamId)} + turnOffYourCamNotification={(streamId) =>props?.turnOffYourCamNotification(streamId)} + pinVideo={(streamId)=>props?.pinVideo(streamId)} isAdmin={props?.isAdmin} publishStreamId={props?.publishStreamId} localVideo={props?.localVideo} - localVideoCreate={props?.localVideoCreate} + localVideoCreate={(tempLocalVideo) => props?.localVideoCreate(tempLocalVideo)} /> diff --git a/react/src/pages/MeetingRoom.js b/react/src/pages/MeetingRoom.js index 84bad743..ca2c57b8 100644 --- a/react/src/pages/MeetingRoom.js +++ b/react/src/pages/MeetingRoom.js @@ -137,15 +137,15 @@ const MeetingRoom = React.memo((props) => { isMyMicMuted={props?.isMyMicMuted} isMyCamTurnedOff={props?.isMyCamTurnedOff} allParticipants={props?.allParticipants} - setParticipantIdMuted={props?.setParticipantIdMuted} - turnOnYourMicNotification={props?.turnOnYourMicNotification} - turnOffYourMicNotification={props?.turnOffYourMicNotification} - turnOffYourCamNotification={props?.turnOffYourCamNotification} - pinVideo={props?.pinVideo} + setParticipantIdMuted={(participant) => props?.setParticipantIdMuted(participant)} + turnOnYourMicNotification={(streamId) =>props?.turnOnYourMicNotification(streamId)} + turnOffYourMicNotification={(streamId) =>props?.turnOffYourMicNotification(streamId)} + turnOffYourCamNotification={(streamId) =>props?.turnOffYourCamNotification(streamId)} + pinVideo={(streamId)=>props?.pinVideo(streamId)} isAdmin={props?.isAdmin} publishStreamId={props?.publishStreamId} localVideo={props?.localVideo} - localVideoCreate={props?.localVideoCreate} + localVideoCreate={(tempLocalVideo) => props?.localVideoCreate(tempLocalVideo)} /> ))} diff --git a/react/src/pages/WaitingRoom.js b/react/src/pages/WaitingRoom.js index d90c100b..563c72bc 100755 --- a/react/src/pages/WaitingRoom.js +++ b/react/src/pages/WaitingRoom.js @@ -332,15 +332,15 @@ function WaitingRoom(props) { isMyMicMuted={props?.isMyMicMuted} isMyCamTurnedOff={props?.isMyCamTurnedOff} allParticipants={props?.allParticipants} - setParticipantIdMuted={props?.setParticipantIdMuted} - turnOnYourMicNotification={props?.turnOnYourMicNotification} - turnOffYourMicNotification={props?.turnOffYourMicNotification} - turnOffYourCamNotification={props?.turnOffYourCamNotification} - pinVideo={props?.pinVideo} + setParticipantIdMuted={(participant) => props?.setParticipantIdMuted(participant)} + turnOnYourMicNotification={(streamId) =>props?.turnOnYourMicNotification(streamId)} + turnOffYourMicNotification={(streamId) =>props?.turnOffYourMicNotification(streamId)} + turnOffYourCamNotification={(streamId) =>props?.turnOffYourCamNotification(streamId)} + pinVideo={(streamId)=>props?.pinVideo(streamId)} isAdmin={props?.isAdmin} publishStreamId={props?.publishStreamId} localVideo={props?.localVideo} - localVideoCreate={props?.localVideoCreate} + localVideoCreate={(tempLocalVideo) => props?.localVideoCreate(tempLocalVideo)} />