129 lines
4.2 KiB
TypeScript
129 lines
4.2 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react';
|
|
import { IconButton, Button, Box, LinearProgress, Tooltip } from "@mui/material";
|
|
import { GenericModal } from "../atoms/GenericModal";
|
|
import { stopRecording } from "../../api/recording";
|
|
import { useGlobalInfoStore } from "../../context/globalInfo";
|
|
import { useSocketStore } from "../../context/socket";
|
|
import { TextField, Typography } from "@mui/material";
|
|
import { WarningText } from "../atoms/texts";
|
|
import NotificationImportantIcon from "@mui/icons-material/NotificationImportant";
|
|
import FlagIcon from '@mui/icons-material/Flag';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
interface SaveRecordingProps {
|
|
fileName: string;
|
|
}
|
|
|
|
export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
|
|
|
|
const [openModal, setOpenModal] = useState<boolean>(false);
|
|
const [needConfirm, setNeedConfirm] = useState<boolean>(false);
|
|
const [recordingName, setRecordingName] = useState<string>(fileName);
|
|
const [waitingForSave, setWaitingForSave] = useState<boolean>(false);
|
|
|
|
const { browserId, setBrowserId, notify, recordings } = useGlobalInfoStore();
|
|
const { socket } = useSocketStore();
|
|
const navigate = useNavigate();
|
|
|
|
const handleChangeOfTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { value } = event.target;
|
|
if (needConfirm) {
|
|
setNeedConfirm(false);
|
|
}
|
|
setRecordingName(value);
|
|
}
|
|
|
|
const handleSaveRecording = async (event: React.SyntheticEvent) => {
|
|
event.preventDefault();
|
|
if (recordings.includes(recordingName)) {
|
|
if (needConfirm) { return; }
|
|
setNeedConfirm(true);
|
|
} else {
|
|
await saveRecording();
|
|
}
|
|
};
|
|
|
|
const exitRecording = useCallback(async () => {
|
|
notify('success', 'Recording saved successfully');
|
|
if (browserId) {
|
|
await stopRecording(browserId);
|
|
}
|
|
setBrowserId(null);
|
|
navigate('/');
|
|
}, [setBrowserId, browserId, notify]);
|
|
|
|
// notifies backed to save the recording in progress,
|
|
// releases resources and changes the view for main page by clearing the global browserId
|
|
const saveRecording = async () => {
|
|
socket?.emit('save', recordingName)
|
|
setWaitingForSave(true);
|
|
}
|
|
|
|
useEffect(() => {
|
|
socket?.on('fileSaved', exitRecording);
|
|
return () => {
|
|
socket?.off('fileSaved', exitRecording);
|
|
}
|
|
}, [socket, exitRecording]);
|
|
|
|
return (
|
|
<div>
|
|
<Button sx={{
|
|
width: '100px',
|
|
background: 'white',
|
|
color: 'rgba(0,128,0,0.7)',
|
|
'&:hover': { background: 'white', color: 'green' },
|
|
padding: '11px',
|
|
marginRight: '10px',
|
|
}} onClick={() => setOpenModal(true)}>
|
|
<FlagIcon sx={{ marginRight: '3px' }} /> FINISH
|
|
</Button>
|
|
|
|
<GenericModal isOpen={openModal} onClose={() => setOpenModal(false)} modalStyle={modalStyle}>
|
|
<form onSubmit={handleSaveRecording} style={{ paddingTop: '50px', display: 'flex', flexDirection: 'column' }} >
|
|
<Typography>Save the recording as:</Typography>
|
|
<TextField
|
|
required
|
|
sx={{ width: '250px', paddingBottom: '10px', margin: '15px 0px' }}
|
|
onChange={handleChangeOfTitle}
|
|
id="title"
|
|
label="Recording title"
|
|
variant="outlined"
|
|
defaultValue={recordingName ? recordingName : null}
|
|
/>
|
|
{needConfirm
|
|
?
|
|
(<React.Fragment>
|
|
<Button color="error" variant="contained" onClick={saveRecording}>Confirm</Button>
|
|
<WarningText>
|
|
<NotificationImportantIcon color="warning" />
|
|
Recording already exists, please confirm the recording's overwrite.
|
|
</WarningText>
|
|
</React.Fragment>)
|
|
: <Button type="submit" variant="contained">Save</Button>
|
|
}
|
|
{waitingForSave &&
|
|
<Tooltip title='Optimizing and saving the workflow' placement={"bottom"}>
|
|
<Box sx={{ width: '100%' }}>
|
|
<LinearProgress />
|
|
</Box>
|
|
</Tooltip>
|
|
}
|
|
</form>
|
|
</GenericModal>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const modalStyle = {
|
|
top: '25%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
width: '20%',
|
|
backgroundColor: 'background.paper',
|
|
p: 4,
|
|
height: 'fit-content',
|
|
display: 'block',
|
|
padding: '20px',
|
|
};
|