4fd55c0669
* fix: remove the permission not needed and update the player style link * fix: change the way of importing worker script * improve the extension version * build: add process env to disable inline worker import * improve style file * upgrade svelte2tsx * disable eslint check for that line * merge the extension-release action into release action --------- Co-authored-by: YunFeng0817 <YunFeng0817@users.noreply.github.com>
72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
/// <reference types="chrome"/>
|
|
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 manifest = chrome.runtime.getManifest();
|
|
const rrwebPlayerVersion = manifest.version_name || manifest.version;
|
|
const linkEl = document.createElement('link');
|
|
linkEl.href = `https://cdn.jsdelivr.net/npm/rrweb-player@${rrwebPlayerVersion}/dist/style.min.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 () => {
|
|
// eslint-disable-next-line
|
|
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>
|
|
</>
|
|
);
|
|
}
|