雨霖铃
121 lines
3.3 KiB
TypeScript
121 lines
3.3 KiB
TypeScript
import { useEffect, useState, useMemo } from 'react';
|
|
import { AppState } from '../types';
|
|
import { sendMessage, onMessage } from '@/utils/messages';
|
|
import { Button, Container, Stack, Typography, Alert } from '@mui/material';
|
|
import { CircularProgress } from '@mui/material';
|
|
|
|
const RecordReplayPage = () => {
|
|
const [status, setStatus] = useState<AppState>(AppState.READ);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const isRecording = useMemo(() => status === AppState.RECORDING, [status]);
|
|
|
|
useEffect(() => {
|
|
const unlistenStarted = onMessage('popup:started', () => {
|
|
console.log('[popup] Received started message');
|
|
setStatus(AppState.RECORDING);
|
|
setIsLoading(false);
|
|
setError(null);
|
|
});
|
|
|
|
const unlistenStopped = onMessage('popup:stopped', () => {
|
|
setStatus(AppState.READ);
|
|
setIsLoading(false);
|
|
setError(null);
|
|
});
|
|
|
|
const unlistenReady = onMessage('popup:ready', () => {
|
|
setStatus(AppState.READ);
|
|
setIsLoading(false);
|
|
setError(null);
|
|
});
|
|
|
|
sendMessage('popup:check-status', undefined)
|
|
.then((res) => {
|
|
if (res?.active) {
|
|
setStatus(AppState.RECORDING);
|
|
} else {
|
|
setStatus(AppState.READ);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
setError('检查录制状态失败');
|
|
});
|
|
|
|
return () => {
|
|
unlistenStarted();
|
|
unlistenStopped();
|
|
unlistenReady();
|
|
};
|
|
}, []);
|
|
|
|
const toggleRecording = async () => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
try {
|
|
if (isRecording) {
|
|
const result = await sendMessage('popup:stop', undefined);
|
|
if (!result?.ok) {
|
|
setError(result?.error || '停止录制失败');
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
} else {
|
|
const result = await sendMessage('popup:start', undefined);
|
|
if (!result?.ok) {
|
|
setError(result?.error || '开始录制失败');
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error toggling recording:', error);
|
|
setError('操作失败，请重试');
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Container maxWidth={false} sx={{ py: 2.5 }}>
|
|
<Stack direction="column" spacing={2} sx={{ mb: 2.5 }}>
|
|
{error && (
|
|
<Alert severity="error" sx={{ fontSize: '0.875rem' }}>
|
|
{error}
|
|
</Alert>
|
|
)}
|
|
|
|
<Stack direction="row" spacing={1.25} justifyContent="center">
|
|
<Button
|
|
variant="contained"
|
|
size="medium"
|
|
color={isRecording ? 'error' : 'primary'}
|
|
onClick={toggleRecording}
|
|
disabled={isLoading}
|
|
sx={{ minWidth: 120 }}
|
|
>
|
|
{isLoading ? (
|
|
<CircularProgress size={20} color="inherit" />
|
|
) : isRecording ? (
|
|
'停止录制'
|
|
) : (
|
|
'开始录制'
|
|
)}
|
|
</Button>
|
|
</Stack>
|
|
|
|
<Typography
|
|
variant="body2"
|
|
color="text.secondary"
|
|
textAlign="center"
|
|
sx={{ mt: 1 }}
|
|
>
|
|
{isRecording ? '正在录制用户操作...' : '点击开始录制用户操作'}
|
|
</Typography>
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default RecordReplayPage;
|