Skip to content

Commit

Permalink
Refactor props
Browse files Browse the repository at this point in the history
  • Loading branch information
@mustafaboleken
mustafaboleken committed Dec 17, 2024
1 parent 68904ba commit 4098f3a
Show file tree
Hide file tree
Showing 13 changed files with 618 additions and 807 deletions.
1,266 changes: 542 additions & 724 deletions react/package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion react/src/Components/Cards/VideoCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ function VideoCard(props) {
);
};

const PinButton = ({ }) => (
const PinButton = () => (
<OverlayButton
title={`${props.pinned ? t("unpin") : t("pin")} ${props.name}`}
icon={props.pinned ? "unpin" : "pin"}
Expand Down
21 changes: 11 additions & 10 deletions react/src/Components/Footer/Components/CameraButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,26 +28,27 @@ function CameraButton(props) {
const handleCameraToggle = (e, isTurningOff) => {
e.stopPropagation();

enqueueSnackbar({
message: isTurningOff
? t("Camera turned off")
: t("Camera turned on"),
variant: "info",
icon: (
// Combine message and icon into a React Node
const notificationContent = (
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<SvgIcon
size={24}
name={isTurningOff ? "camera-off" : "camera"}
color="#fff"
/>
),
}, {
{isTurningOff ? t("Camera turned off") : t("Camera turned on")}
</div>
);

enqueueSnackbar(notificationContent, {
variant: "info",
autoHideDuration: 1500,
});

if (isTurningOff) {
props?.onTurnOnCamera();
props?.onTurnOnCamera();
} else {
props?.onTurnOffCamera();
props?.onTurnOffCamera();
}
};

Expand Down
12 changes: 6 additions & 6 deletions react/src/Components/Footer/Components/InfoButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ function InfoButton(props) {
const { width, height } = document.getElementById('localVideo').srcObject.getVideoTracks()[0].getSettings();
return width + ' x ' + height;
} catch (e) {
return "";
return '';
}
}, []);

Expand Down Expand Up @@ -83,20 +83,21 @@ function InfoButton(props) {
{t('Meeting link')}
</Typography>
<StyledMenuItem>
<StyledListItemText>{meetingLink.replace(/^https?:\/\//, '').split('?')[0]}</StyledListItemText>
<StyledListItemText>
{meetingLink.replace(/^https?:\/\//, '').split('?')[0]}
</StyledListItemText>
<ListItemIcon sx={{ pl: 1, cursor: 'pointer' }}>
<Tooltip title={t('Copy meeting link')} placement="top">
<Button
sx={{ minWidth: 'unset', px: 1.5, py: 0.5 }}
variant="text"
onClick={() => {
navigator.clipboard.writeText(meetingLink);

enqueueSnackbar(
t('Link copied'), // Pass message directly as a string
{
message: t('Link copied'),
variant: 'info',
},
{
autoHideDuration: 1500,
}
);
Expand All @@ -122,7 +123,6 @@ function InfoButton(props) {
{t('You are in play only mode')}
</Typography>
)}

</Menu>
</>
);
Expand Down
16 changes: 10 additions & 6 deletions react/src/Components/Footer/Components/MicButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,23 @@ function MicButton(props) {

const handleMicToggle = (e, mute) => {
e.stopPropagation();
enqueueSnackbar({
message: mute ? t('Microphone off') : t('Microphone on'),
variant: 'info',
icon: (

const notificationContent = (
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<SvgIcon
size={24}
name={mute ? 'muted-microphone' : 'microphone'}
color="#fff"
/>
),
}, {
{mute ? t('Microphone off') : t('Microphone on')}
</div>
);

enqueueSnackbar(notificationContent, {
variant: 'info',
autoHideDuration: 1500,
});

props?.toggleMic(!mute);
};

Expand Down
2 changes: 1 addition & 1 deletion react/src/Components/Footer/Components/MoreOptionsButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ function MoreOptionsButton(props) {
onClose={handleLayoutDialogClose}
globals={props?.globals}
allParticipants={props?.allParticipants}
pinVideo={props?.pinVideo}
pinVideo={(streamId) => props?.pinVideo(streamId)}
handleSetDesiredTileCount={props?.handleSetDesiredTileCount}
/>
<GeneralSettingsDialog
Expand Down
2 changes: 1 addition & 1 deletion react/src/Components/Footer/Components/OptionButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ function OptionButton(props) {
selectFocus={selectFocus}
globals={props?.globals}
allParticipants={props?.allParticipants}
pinVideo={props?.pinVideo}
pinVideo={(streamId)=>props?.pinVideo(streamId)}
handleSetDesiredTileCount={props?.handleSetDesiredTileCount}
/>
<GeneralSettingsDialog
Expand Down
17 changes: 14 additions & 3 deletions react/src/Components/Footer/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ function Footer(props) {
footer={true}
globals={props?.globals}
allParticipants={props?.allParticipants}
pinVideo={props?.pinVideo}
pinVideo={(streamId) => props?.pinVideo(streamId)}
handleSetDesiredTileCount={props?.handleSetDesiredTileCount}
isAdmin={props?.isAdmin}
isRecordPluginActive={props?.isRecordPluginActive}
Expand All @@ -119,6 +119,16 @@ function Footer(props) {
isPlayOnly={props?.isPlayOnly}
effectsDrawerOpen={props?.effectsDrawerOpen}
handleEffectsOpen={props?.handleEffectsOpen}
handleBackgroundReplacement={props.handleBackgroundReplacement}
microphoneSelected={(mic) => props?.microphoneSelected(mic)}
devices={props?.devices}
selectedCamera={props?.selectedCamera}
cameraSelected={(camera) => props?.cameraSelected(camera)}
selectedMicrophone={props?.selectedMicrophone}
selectedBackgroundMode={props?.selectedBackgroundMode}
setSelectedBackgroundMode={(mode) => props?.setSelectedBackgroundMode(mode)}
videoSendResolution={props?.videoSendResolution}
setVideoSendResolution={(resolution) => props?.setVideoSendResolution(resolution)}
/>
</Grid>
: null}
Expand Down Expand Up @@ -155,8 +165,8 @@ function Footer(props) {
<ShareScreenButton
footer={true}
isScreenShared={props?.isScreenShared}
handleStartScreenShare={()=>props?.handleStartScreenShare}
handleStopScreenShare={()=>props?.handleStopScreenShare}
handleStartScreenShare={()=>props?.handleStartScreenShare()}
handleStopScreenShare={()=>props?.handleStopScreenShare()}
/>
</Grid>
: null}
Expand Down Expand Up @@ -283,6 +293,7 @@ function Footer(props) {
videoSendResolution={props?.videoSendResolution}
setVideoSendResolution={(resolution) => props?.setVideoSendResolution(resolution)}
globals={props?.globals}
handleParticipantListOpen={(open)=>props?.handleParticipantListOpen(open)}
/>
</Grid>
) : null}
Expand Down
6 changes: 3 additions & 3 deletions react/src/Components/MessageDrawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,15 @@ return (
<Grid item container justifyContent="space-between" alignItems="center" style={{ flex: '1 1 auto', overflowY: 'hidden' }}>
<TabPanel value={value} index={0}>
<TabGrid container sx={{ pb: 0 }} direction={'column'}>
<MessagesTab messages={props.messages}/>
<MessagesTab messages={props?.messages}/>
</TabGrid>
</TabPanel>
</Grid>

{/*props.isPlayOnly === false &&*/ value === 0 ?
<MessageInput
handleSendMessage={(message) => props.sendMessage(message)}
handleSetMessages={(messages) => props.handleSetMessages(messages)}
handleSendMessage={(message) => props?.sendMessage(message)}
handleSetMessages={(messages) => props?.handleSetMessages(messages)}
/>
: <Typography variant="body2" sx={{px: 1.5, py: 0.5, fontSize: 12, fontWeight: 700}} color="#fff">
{t('You cannot send message in play only mode')}
Expand Down
69 changes: 23 additions & 46 deletions react/src/Components/ParticipantListDrawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,65 +24,42 @@ const TabGrid = styled(Grid)(({ theme }) => ({
flexWrap: 'nowrap',
}));

const ParticipantListDrawer = React.memo(({
globals,
isAdmin,
pinVideo,
makeListenerAgain,
videoTrackAssignments,
presenterButtonStreamIdInProcess,
presenterButtonDisabled,
makeParticipantPresenter,
makeParticipantUndoPresenter,
participantCount,
isMyMicMuted,
publishStreamId,
muteLocalMic,
turnOffYourMicNotification,
setParticipantIdMuted,
pagedParticipants,
updateAllParticipantsPagination,
participantListDrawerOpen,
handleMessageDrawerOpen,
handleParticipantListOpen,
handleEffectsOpen,
setPublisherRequestListDrawerOpen
}) => {
const ParticipantListDrawer = React.memo((props) => {
const { t } = useTranslation();


return (
<AntDrawer transitionDuration={200} anchor={'right'} id="message-drawer" open={participantListDrawerOpen} variant="persistent">
<AntDrawer transitionDuration={200} anchor={'right'} id="message-drawer" open={props?.participantListDrawerOpen} variant="persistent">
<ParticipantListGrid container direction="column" style={{ flexWrap: 'nowrap', height: '100%', overflow: 'hidden' }}>
<Grid item container justifyContent="space-between" alignItems="center">
{t('PARTICIPANTS')}
<CloseDrawerButton
handleMessageDrawerOpen={handleMessageDrawerOpen}
handleParticipantListOpen={handleParticipantListOpen}
handleEffectsOpen={handleEffectsOpen}
setPublisherRequestListDrawerOpen={setPublisherRequestListDrawerOpen}
handleMessageDrawerOpen={(open)=>props?.handleMessageDrawerOpen(open)}
handleParticipantListOpen={(open)=>props?.handleParticipantListOpen(open)}
handleEffectsOpen={(open)=>props?.handleEffectsOpen(open)}
setPublisherRequestListDrawerOpen={(open)=>props?.setPublisherRequestListDrawerOpen(open)}
/>
</Grid>
<Grid item container justifyContent="space-between" alignItems="center" style={{ flex: '1 1 auto', overflowY: 'hidden' }}>
<TabGrid container sx={{ pb: 0 }} direction={'column'}>
<ParticipantTab
globals={globals}
isAdmin={isAdmin}
pinVideo={(streamId) => pinVideo(streamId)}
makeListenerAgain={(streamId) => makeListenerAgain(streamId)}
videoTrackAssignments={videoTrackAssignments}
presenterButtonStreamIdInProcess={presenterButtonStreamIdInProcess}
presenterButtonDisabled={presenterButtonDisabled}
makeParticipantPresenter={(streamId) => makeParticipantPresenter(streamId)}
makeParticipantUndoPresenter={(streamId) => makeParticipantUndoPresenter(streamId)}
participantCount={participantCount}
isMyMicMuted={isMyMicMuted}
publishStreamId={publishStreamId}
muteLocalMic={()=>muteLocalMic()}
turnOffYourMicNotification={(streamId) => turnOffYourMicNotification(streamId)}
setParticipantIdMuted={(participant) => setParticipantIdMuted(participant)}
pagedParticipants={pagedParticipants}
updateAllParticipantsPagination={(value) => updateAllParticipantsPagination(value)}
globals={props?.globals}
isAdmin={props?.isAdmin}
pinVideo={(streamId) => props?.pinVideo(streamId)}
makeListenerAgain={(streamId) => props?.makeListenerAgain(streamId)}
videoTrackAssignments={props?.videoTrackAssignments}
presenterButtonStreamIdInProcess={props?.presenterButtonStreamIdInProcess}
presenterButtonDisabled={props?.presenterButtonDisabled}
makeParticipantPresenter={(streamId) => props?.makeParticipantPresenter(streamId)}
makeParticipantUndoPresenter={(streamId) => props?.makeParticipantUndoPresenter(streamId)}
participantCount={props?.participantCount}
isMyMicMuted={props?.isMyMicMuted}
publishStreamId={props?.publishStreamId}
muteLocalMic={()=>props?.muteLocalMic()}
turnOffYourMicNotification={(streamId) => props?.turnOffYourMicNotification(streamId)}
setParticipantIdMuted={(participant) => props?.setParticipantIdMuted(participant)}
pagedParticipants={props?.pagedParticipants}
updateAllParticipantsPagination={(value) => props?.updateAllParticipantsPagination(value)}
/>
</TabGrid>
</Grid>
Expand Down
4 changes: 2 additions & 2 deletions react/src/Components/ParticipantTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ function ParticipantTab({
<PinBtn
id={"unpin-" + streamId}
sx={{minWidth: "unset", pt: 1, pb: 1}}
onClick={() => {
onClick={(e) => {
pinVideo(streamId);
}}
>
Expand All @@ -170,7 +170,7 @@ function ParticipantTab({
<PinBtn
id={"pin-" + streamId}
sx={{minWidth: "unset", pt: 1, pb: 1}}
onClick={() => {
onClick={(e) => {
pinVideo(streamId);
}}
>
Expand Down
2 changes: 1 addition & 1 deletion react/src/pages/AntMedia.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3235,7 +3235,7 @@ function AntMedia(props) {
/>
<MessageDrawer
messages={messages}
sendMessage={(message) => sendMessage(message)}
sendMessage={(message) => handleSendMessage(message)}
handleSetMessages={(messages) => handleSetMessages(messages)}
messageDrawerOpen={messageDrawerOpen}
handleMessageDrawerOpen={(open) => handleMessageDrawerOpen(open)}
Expand Down
6 changes: 3 additions & 3 deletions react/src/pages/MeetingRoom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ const MeetingRoom = React.memo((props) => {
height={gallerySize.h}
globals={props?.globals}
publishStreamId={props?.publishStreamId}
pinVideo={props?.pinVideo}
pinVideo={(streamId)=>props?.pinVideo(streamId)}
allParticipants={props?.allParticipants}
videoTrackAssignments={props?.videoTrackAssignments}
updateMaxVideoTrackCount={props?.updateMaxVideoTrackCount}
Expand Down Expand Up @@ -197,7 +197,7 @@ const MeetingRoom = React.memo((props) => {
turnOnYourMicNotification={props?.turnOnYourMicNotification}
turnOffYourMicNotification={props?.turnOffYourMicNotification}
turnOffYourCamNotification={props?.turnOffYourCamNotification}
pinVideo={props?.pinVideo}
pinVideo={(streamId)=>props?.pinVideo(streamId)}
isAdmin={props?.isAdmin}
localVideo={props?.localVideo}
localVideoCreate={props?.localVideoCreate}
Expand Down Expand Up @@ -253,7 +253,7 @@ const MeetingRoom = React.memo((props) => {
isBroadcasting={props?.isBroadcasting}
handleSetDesiredTileCount={props?.handleSetDesiredTileCount}
allParticipants={props?.allParticipants}
pinVideo={props?.pinVideo}
pinVideo={(streamId)=>props?.pinVideo(streamId)}
handleBackgroundReplacement={props?.handleBackgroundReplacement}
microphoneSelected={(mic) => props?.microphoneSelected(mic)}
devices={props?.devices}
Expand Down

0 comments on commit 4098f3a

Please sign in to comment.