69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { useRef, useEffect, useState } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
import Replayer from 'rrweb-player';
|
|
import {
|
|
Box,
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
Center,
|
|
} from '@chakra-ui/react';
|
|
import { getEvents, getSession } from '~/utils/storage';
|
|
|
|
export default function Player() {
|
|
const playerElRef = useRef<HTMLDivElement>(null);
|
|
const playerRef = useRef<Replayer | null>(null);
|
|
const { sessionId } = useParams();
|
|
const [sessionName, setSessionName] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (!sessionId) return;
|
|
getSession(sessionId)
|
|
.then((session) => {
|
|
setSessionName(session.name);
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
});
|
|
getEvents(sessionId)
|
|
.then((events) => {
|
|
if (!playerElRef.current) return;
|
|
|
|
const linkEl = document.createElement('link');
|
|
linkEl.href =
|
|
'https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css';
|
|
linkEl.rel = 'stylesheet';
|
|
document.head.appendChild(linkEl);
|
|
playerRef.current = new Replayer({
|
|
target: playerElRef.current as HTMLElement,
|
|
props: {
|
|
events,
|
|
autoPlay: true,
|
|
},
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
});
|
|
return () => {
|
|
playerRef.current?.pause();
|
|
};
|
|
}, [sessionId]);
|
|
|
|
return (
|
|
<>
|
|
<Breadcrumb mb={5} fontSize="md">
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink href="#">Sessions</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink>{sessionName}</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
</Breadcrumb>
|
|
<Center>
|
|
<Box ref={playerElRef}></Box>
|
|
</Center>
|
|
</>
|
|
);
|
|
}
|