Skip to content

Commit

Permalink
Move to promp drilling
Browse files Browse the repository at this point in the history
  • Loading branch information
mustafaboleken committed Dec 12, 2024
1 parent aae518c commit 320ded2
Show file tree
Hide file tree
Showing 13 changed files with 495 additions and 450 deletions.
111 changes: 54 additions & 57 deletions react/src/Components/Footer/Components/CameraButton.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React, { useContext } from "react";
import React from "react";
import Button from "@mui/material/Button";
import {styled, useTheme} from "@mui/material/styles";
import { styled, useTheme } from "@mui/material/styles";
import { SvgIcon } from "../../SvgIcon";
import { ConferenceContext } from "pages/AntMedia";
import { Tooltip } from "@mui/material";
import { useTranslation } from "react-i18next";
import { useSnackbar } from "notistack";


const CustomizedBtn = styled(Button)(({ theme }) => ({
"&.footer-icon-button": {
height: "100%",
Expand All @@ -22,50 +20,44 @@ const CustomizedBtn = styled(Button)(({ theme }) => ({
},
}));

function CameraButton(props) {
const { rounded, footer } = props;
function CameraButton({
isCamTurnedOff,
cameraButtonDisabled,
onTurnOffCamera,
onTurnOnCamera,
rounded,
footer,
}) {
const { t } = useTranslation();
const { enqueueSnackbar } = useSnackbar();
const conference = useContext(ConferenceContext);
const theme = useTheme();

const handleOff = (e) => {
const handleCameraToggle = (e, isTurningOff) => {
e.stopPropagation();
if (conference.isPlayOnly === null) {
enqueueSnackbar({
message: t('You need to allow camera and microphone permissions turning off your camera'),
variant: 'info',
icon: <SvgIcon size={24} name={'muted-microphone'} color="#fff" />
}, {
autoHideDuration: 1500,
});
return
}
if (conference.publishStreamId) {
conference.checkAndTurnOffLocalCamera(conference.publishStreamId);
conference.handleSendNotificationEvent(
"CAM_TURNED_OFF",
conference.publishStreamId
);
} else {
// if local
conference.checkAndTurnOffLocalCamera("localVideo");
}

};
const handleOn = (e) => {
e.stopPropagation();
if (conference.publishStreamId) {
conference.checkAndTurnOnLocalCamera(conference.publishStreamId);
conference.handleSendNotificationEvent(
"CAM_TURNED_ON",
conference.publishStreamId
);
enqueueSnackbar({
message: isTurningOff
? t("Camera turned off")
: t("Camera turned on"),
variant: "info",
icon: (
<SvgIcon
size={24}
name={isTurningOff ? "camera-off" : "camera"}
color="#fff"
/>
),
}, {
autoHideDuration: 1500,
});

if (isTurningOff) {
onTurnOnCamera();
} else {
// if local
conference.checkAndTurnOnLocalCamera("localVideo");
onTurnOffCamera();
}
};

const roundStyle = {
width: { xs: 36, md: 46 },
height: { xs: 36, md: 46 },
Expand All @@ -77,25 +69,30 @@ function CameraButton(props) {
};

return (
<>
{conference?.isMyCamTurnedOff ? (
<Tooltip title={t('Turn on camera')} placement="top">
<CustomizedBtn
id="camera-button"
className={footer ? 'footer-icon-button' : ''} variant="contained" color="error" sx={rounded ? roundStyle : {}} disabled={conference?.cameraButtonDisabled} onClick={(e) => handleOn(e)}>
<SvgIcon size={40} name={'camera-off'} color={theme.palette?.iconColor?.primary} />
</CustomizedBtn>
</Tooltip>
) : (
<Tooltip title={t('Turn off camera')} placement="top">
<CustomizedBtn
<Tooltip
title={t(isCamTurnedOff ? "Turn on camera" : "Turn off camera")}
placement="top"
>
<CustomizedBtn
id="camera-button"
className={footer ? 'footer-icon-button' : ''} variant="contained" color="primary" sx={rounded ? roundStyle : {}} disabled={conference?.cameraButtonDisabled} onClick={(e) => handleOff(e)}>
<SvgIcon size={40} name={'camera'} color={theme.palette?.darkIconColor?.primary} />
</CustomizedBtn>
</Tooltip>
)}
</>
className={footer ? "footer-icon-button" : ""}
variant="contained"
color={isCamTurnedOff ? "error" : "primary"}
sx={rounded ? roundStyle : {}}
disabled={cameraButtonDisabled}
onClick={(e) => handleCameraToggle(e, isCamTurnedOff)}
>
<SvgIcon
size={40}
name={isCamTurnedOff ? "camera-off" : "camera"}
color={
isCamTurnedOff
? theme.palette?.iconColor?.primary
: theme.palette?.darkIconColor?.primary
}
/>
</CustomizedBtn>
</Tooltip>
);
}

Expand Down
47 changes: 23 additions & 24 deletions react/src/Components/Footer/Components/EndCallButton.js
Original file line number Diff line number Diff line change
@@ -1,40 +1,39 @@
import React, { useContext } from "react";
import React from "react";
import Button from "@mui/material/Button";
import { SvgIcon } from "../../SvgIcon";
// import { AntmediaContext } from "App";
import { Tooltip } from "@mui/material";
import { styled } from '@mui/material/styles';
import { useTranslation } from 'react-i18next';
import { ConferenceContext } from "pages/AntMedia";
import { styled } from "@mui/material/styles";
import { useTranslation } from "react-i18next";

const CustomizedBtn = styled(Button)(({ theme }) => ({
'&.footer-icon-button': {

height: '100%',
[theme.breakpoints.down('sm')]: {
"&.footer-icon-button": {
height: "100%",
[theme.breakpoints.down("sm")]: {
padding: 8,
minWidth: 'unset',
width: '100%',
minWidth: "unset",
width: "100%",
},
'& > svg': {
width: 26
"& > svg": {
width: 26,
},
}
},
}));


function EndCallButton({ footer, ...props }) {
const conference = useContext(ConferenceContext);
function EndCallButton({ footer, onLeaveRoom }) {
const { t } = useTranslation();

return (
<Tooltip title={t('Leave call')} placement="top">
<CustomizedBtn
id="leave-room-button"
onClick={() => conference.setLeftTheRoom(true)} className={footer ? 'footer-icon-button' : ''} variant="contained" color="error">
<SvgIcon size={28} name={"end-call"} />
</CustomizedBtn>
</Tooltip>
<Tooltip title={t("Leave call")} placement="top">
<CustomizedBtn
id="leave-room-button"
onClick={onLeaveRoom}
className={footer ? "footer-icon-button" : ""}
variant="contained"
color="error"
>
<SvgIcon size={28} name={"end-call"} />
</CustomizedBtn>
</Tooltip>
);
}

Expand Down
70 changes: 32 additions & 38 deletions react/src/Components/Footer/Components/FakeParticipantButton.js
Original file line number Diff line number Diff line change
@@ -1,47 +1,41 @@
import React, { useContext } from 'react';
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
import { ConferenceContext } from 'pages/AntMedia';
import { Tooltip } from '@mui/material';
import { useTranslation } from 'react-i18next';
import React from "react";
import Button from "@mui/material/Button";
import { styled } from "@mui/material/styles";
import { Tooltip } from "@mui/material";
import { useTranslation } from "react-i18next";

const CustomizedBtn = styled(Button)(({ theme }) => ({
'&.footer-icon-button':{
height: '100%',
[theme.breakpoints.down('sm')]:{
padding:8,
minWidth: 'unset',
width: '100%',
'& > svg': {
width: 36
},
"&.footer-icon-button": {
height: "100%",
[theme.breakpoints.down("sm")]: {
padding: 8,
minWidth: "unset",
width: "100%",
"& > svg": {
width: 36,
},
},
},
}
}));

function FakeParticipantButton({ footer, increment, ...props }) {
const {t} = useTranslation();
const conference = useContext(ConferenceContext);
return (
<Tooltip title={t((increment?'Add':'Remove')+' Fake Participant')} placement="top">
<CustomizedBtn
onClick={() => {
console.log("add/remove");
if(increment) {
conference?.addFakeParticipant();
}
else {
conference?.removeFakeParticipant();
}
}}
variant="contained"
className={footer ? 'footer-icon-button' : ''}
color='secondary'
function FakeParticipantButton({ footer, increment, onAction }) {
const { t } = useTranslation();

return (
<Tooltip
title={t((increment ? "Add" : "Remove") + " Fake Participant")}
placement="top"
>
{increment ? "+" : "-"}
</CustomizedBtn>
</Tooltip>
);
<CustomizedBtn
onClick={onAction}
variant="contained"
className={footer ? "footer-icon-button" : ""}
color="secondary"
>
{increment ? "+" : "-"}
</CustomizedBtn>
</Tooltip>
);
}

export default FakeParticipantButton;
64 changes: 30 additions & 34 deletions react/src/Components/Footer/Components/FakeReconnectButton.js
Original file line number Diff line number Diff line change
@@ -1,42 +1,38 @@
import React, { useContext } from 'react';
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
import { ConferenceContext } from 'pages/AntMedia';
import { Tooltip } from '@mui/material';
import { useTranslation } from 'react-i18next';
import React from "react";
import Button from "@mui/material/Button";
import { styled } from "@mui/material/styles";
import { Tooltip } from "@mui/material";
import { useTranslation } from "react-i18next";

const CustomizedBtn = styled(Button)(({ theme }) => ({
'&.footer-icon-button':{
height: '100%',
[theme.breakpoints.down('sm')]:{
padding:8,
minWidth: 'unset',
width: '100%',
'& > svg': {
width: 36
},
"&.footer-icon-button": {
height: "100%",
[theme.breakpoints.down("sm")]: {
padding: 8,
minWidth: "unset",
width: "100%",
"& > svg": {
width: 36,
},
},
},
}
}));

function FakeReconnectButton({ footer, increment, ...props }) {
const {t} = useTranslation();
const conference = useContext(ConferenceContext);
return (
<Tooltip title={t('Fake Reconnect')} placement="top">
<CustomizedBtn
onClick={() => {
console.log("fake reconnect");
conference?.fakeReconnect();
}}
variant="contained"
className={footer ? 'footer-icon-button' : ''}
color='secondary'
>
"RC"
</CustomizedBtn>
</Tooltip>
);
function FakeReconnectButton({ footer, onFakeReconnect }) {
const { t } = useTranslation();

return (
<Tooltip title={t("Fake Reconnect")} placement="top">
<CustomizedBtn
onClick={onFakeReconnect}
variant="contained"
className={footer ? "footer-icon-button" : ""}
color="secondary"
>
"RC"
</CustomizedBtn>
</Tooltip>
);
}

export default FakeReconnectButton;
Loading

0 comments on commit 320ded2

Please sign in to comment.