fix: format

This commit is contained in:
karishmas6
2024-09-10 02:43:44 +05:30
parent 83ea37680e
commit e4b4148594

View File

@@ -13,14 +13,14 @@ interface SaveRecordingProps {
fileName: string; fileName: string;
} }
export const SaveRecording = ({fileName}: SaveRecordingProps) => { export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
const [openModal, setOpenModal] = useState<boolean>(false); const [openModal, setOpenModal] = useState<boolean>(false);
const [needConfirm, setNeedConfirm] = useState<boolean>(false); const [needConfirm, setNeedConfirm] = useState<boolean>(false);
const [recordingName, setRecordingName] = useState<string>(fileName); const [recordingName, setRecordingName] = useState<string>(fileName);
const [waitingForSave, setWaitingForSave] = useState<boolean>(false); const [waitingForSave, setWaitingForSave] = useState<boolean>(false);
const { browserId, setBrowserId, notify, recordings } = useGlobalInfoStore(); const { browserId, setBrowserId, notify, recordings } = useGlobalInfoStore();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const handleChangeOfTitle = (event: React.ChangeEvent<HTMLInputElement>) => { const handleChangeOfTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -41,7 +41,7 @@ export const SaveRecording = ({fileName}: SaveRecordingProps) => {
} }
}; };
const exitRecording = useCallback(async() => { const exitRecording = useCallback(async () => {
notify('success', 'Recording saved successfully'); notify('success', 'Recording saved successfully');
if (browserId) { if (browserId) {
await stopRecording(browserId); await stopRecording(browserId);
@@ -66,45 +66,45 @@ export const SaveRecording = ({fileName}: SaveRecordingProps) => {
return ( return (
<div> <div>
<Button sx={{ <Button sx={{
width:'100px', width: '100px',
background: 'white', background: 'white',
color: 'rgba(0,128,0,0.7)', color: 'rgba(0,128,0,0.7)',
'&:hover': {background: 'white', color: 'green'}, '&:hover': { background: 'white', color: 'green' },
padding: '11px', padding: '11px',
marginRight: '10px', marginRight: '10px',
}} onClick={() => setOpenModal(true)}> }} onClick={() => setOpenModal(true)}>
<FlagIcon sx={{marginRight:'3px'}}/> FINISH <FlagIcon sx={{ marginRight: '3px' }} /> FINISH
</Button> </Button>
<GenericModal isOpen={openModal} onClose={() => setOpenModal(false)} modalStyle={modalStyle}> <GenericModal isOpen={openModal} onClose={() => setOpenModal(false)} modalStyle={modalStyle}>
<form onSubmit={handleSaveRecording} style={{paddingTop:'50px', display: 'flex', flexDirection: 'column'}} > <form onSubmit={handleSaveRecording} style={{ paddingTop: '50px', display: 'flex', flexDirection: 'column' }} >
<Typography>Save the recording as:</Typography> <Typography>Save the recording as:</Typography>
<TextField <TextField
required required
sx={{width: '250px', paddingBottom: '10px', margin: '15px 0px'}} sx={{ width: '250px', paddingBottom: '10px', margin: '15px 0px' }}
onChange={handleChangeOfTitle} onChange={handleChangeOfTitle}
id="title" id="title"
label="Recording title" label="Recording title"
variant="outlined" variant="outlined"
defaultValue={recordingName ? recordingName : null} defaultValue={recordingName ? recordingName : null}
/> />
{ needConfirm {needConfirm
? ?
(<React.Fragment> (<React.Fragment>
<Button color="error" variant="contained" onClick={saveRecording}>Confirm</Button> <Button color="error" variant="contained" onClick={saveRecording}>Confirm</Button>
<WarningText> <WarningText>
<NotificationImportantIcon color="warning"/> <NotificationImportantIcon color="warning" />
Recording already exists, please confirm the recording's overwrite. Recording already exists, please confirm the recording's overwrite.
</WarningText> </WarningText>
</React.Fragment>) </React.Fragment>)
: <Button type="submit" variant="contained">Save</Button> : <Button type="submit" variant="contained">Save</Button>
} }
{ waitingForSave && {waitingForSave &&
<Tooltip title='Optimizing and saving the workflow' placement={"bottom"}> <Tooltip title='Optimizing and saving the workflow' placement={"bottom"}>
<Box sx={{ width: '100%' }}> <Box sx={{ width: '100%' }}>
<LinearProgress/> <LinearProgress />
</Box> </Box>
</Tooltip> </Tooltip>
} }
</form> </form>
</GenericModal> </GenericModal>
@@ -119,7 +119,7 @@ const modalStyle = {
width: '20%', width: '20%',
backgroundColor: 'background.paper', backgroundColor: 'background.paper',
p: 4, p: 4,
height:'fit-content', height: 'fit-content',
display:'block', display: 'block',
padding: '20px', padding: '20px',
}; };