Elgato_dark/hyperdx
1
0
Fork 0
mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Add skip forward/back 15s buttons on session replay (#346)

Browse source
This commit is contained in:
Mike Shi 2024-03-21 16:25:31 -07:00 committed by GitHub
parent 9083aeeb88
commit ec95ef0004
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 45 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/popular-llamas-change.md Normal file
View file

@ -0,0 +1,5 @@
---
'@hyperdx/app': patch
---
Add skip forward/back 15s buttons on session replay

47
packages/app/src/Playbar.tsx
View file

@ -4,6 +4,7 @@ import throttle from 'lodash/throttle';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import Button from 'react-bootstrap/Button';
import ReactSlider from 'react-slider';
import { Group } from '@mantine/core';
import Checkbox from './Checkbox';
import { useSessionEvents } from './sessionUtils';
@ -219,25 +220,57 @@ export default function Playbar({
false,
);
const skipBackward = () => {
setFocus({
ts: Math.max((focus?.ts ?? minTs) - 15000, minTs),
setBy: 'skip-backward',
});
};
const skipForward = () => {
setFocus({
ts: Math.min((focus?.ts ?? minTs) + 15000, maxTs),
setBy: 'skip-forward',
});
};
return (
<div className="d-flex align-items-center">
{playerState === 'playing' ? (
<Group gap="xs" wrap="nowrap">
{playerState === 'playing' ? (
<div
className=""
role="button"
onClick={() => setPlayerState('paused')}
>
<i className="mt-3 fs-6 bi bi-pause-fill" />
</div>
) : (
<div
className=""
role="button"
onClick={() => setPlayerState('playing')}
>
<i className="fs-6 bi bi-play-fill" />
</div>
)}
<div
className=""
role="button"
onClick={() => setPlayerState('paused')}
title="Skip Backward 15s"
onClick={skipBackward}
>
<i className="mt-3 fs-6 bi bi-pause-fill" />
<i className="mt-3 fs-7 bi bi-skip-backward-fill" />
</div>
) : (
<div
className=""
role="button"
onClick={() => setPlayerState('playing')}
title="Skip Forward 15s"
onClick={skipForward}
>
<i className="fs-6 bi bi-play-fill" />
<i className="mt-3 fs-7 bi bi-skip-forward-fill" />
</div>
)}
</Group>
<div
className="mx-2 fs-8 text-muted-hover cursor-pointer text-nowrap"
title="Click to toggle between relative time and clock"