282c8fa415
* feat: add rrweb web-extension package * refactor: make the extension suitable for manifest v3 * update tsconfig.json * use version_name rather than recorder_version in manifest.json * update manifest.json * enable to keep recording after changing tabs * enable to record between tabs and urls * fix CI error * try to fix CI error * feat: add pause and resume buttons * feat: add a link to new session after recording * improve session list * refactor: migrate session storage from chrome local storage to indexedDB * feat: add pagination to session list * fix: multiple recorders are started after pausing and resuming process * fix: can't stop recording on firefox browser * update type import of 'eventWithTime' * fix CI error * doc: add readme * Apply suggestions from Justin's code review Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com> * refactor: make use of webNavigation API to implement recording consistent during page navigation * fix firefox compatibility issue and add title to pages * add mouseleave listener to enhance the recording liability * fix firefox compatibility issue and improve the experience of recording resume after closing tabs * update tsconfig * upgrade vite-plugin-web-extension config to fix some bugs on facebook web page * update import links * refactor: cross tab recording mechanism apply Justin's suggestion * refactor: slipt util/index.ts into multiple files * implement cross-origin iframe recording * fix: regression of issue: ShadowHost can't be a string (issue 941) * refactor shadow dom recording to make tests cover key code * Apply formatting changes * increase the node memory limitation to avoid CI failure * Create lovely-pears-cross.md * Apply formatting changes * Update packages/web-extension/package.json * Update .changeset/lovely-pears-cross.md * update change logs * delete duplicated property --------- Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
26 lines
637 B
TypeScript
26 lines
637 B
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Stat, StatNumber } from '@chakra-ui/react';
|
|
import { formatTime } from '~/utils';
|
|
|
|
export function Timer({
|
|
startTime,
|
|
ticking,
|
|
}: {
|
|
startTime: number;
|
|
ticking: boolean;
|
|
}) {
|
|
const [time, setTime] = useState(Date.now() - startTime);
|
|
useEffect(() => {
|
|
if (!ticking) return;
|
|
const interval = setInterval(() => {
|
|
setTime(Date.now() - startTime);
|
|
}, 100);
|
|
return () => clearInterval(interval);
|
|
}, [startTime, ticking]);
|
|
return (
|
|
<Stat textAlign="center" mt={4}>
|
|
<StatNumber fontSize="3xl">{formatTime(time)}</StatNumber>
|
|
</Stat>
|
|
);
|
|
}
|