雨霖铃
63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
// import {sendRecordCommand} from '../services/bridge'
|
|
// import {storage} from "../services/storage";
|
|
import {useRecorder} from "../hooks/useRecorder";
|
|
import {downloadHtml} from '../utils/recordUtils';
|
|
|
|
const RecordeReplayPage = () => {
|
|
// const [isRecording, setIsRecording] = useState(false);
|
|
|
|
const {startRecord, stopRecord, getEvents, isRecording} = useRecorder();
|
|
|
|
const handleStart = async () => {
|
|
try {
|
|
// await sendRecordCommand("START_RECORD");
|
|
if (!isRecording) {
|
|
await startRecord();
|
|
} else {
|
|
stopRecord();
|
|
}
|
|
// await storage.set({isRecording: true, recordingStartTime: Date.now()});
|
|
// console.log('events', events);
|
|
} catch (e) {
|
|
console.error("Error starting recording:", e);
|
|
}
|
|
}
|
|
|
|
const handleStop = async () => {
|
|
try {
|
|
// await sendRecordCommand("STOP_RECORD");
|
|
// const events =useRecorder().getEvents();
|
|
// console.log('events', events);
|
|
// setIsRecording(false);
|
|
// await storage.remove('isRecording');
|
|
stopRecord();
|
|
downloadHtml(getEvents());
|
|
// console.log('events', getEvents());
|
|
} catch (e) {
|
|
console.error("Error stopping recording:", e)
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{width: "300px", padding: "16px"}}>
|
|
<h3>RRWeb Recorder</h3>
|
|
|
|
{/* 3. 选择标签页逻辑：默认为当前页，如果需要跨页，需先列出 chrome.tabs.query */}
|
|
|
|
<div style={{display: "flex", gap: "10px", marginBottom: "20px"}}>
|
|
{!isRecording ? (
|
|
<button onClick={handleStart} className={"action-btn"}>
|
|
开始录制
|
|
</button>
|
|
) : (
|
|
<button className={"action-btn stop-btn"}
|
|
onClick={handleStop}>停止录制</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RecordeReplayPage;
|