replayPlayPauseButton.tsx 954 B

12345678910111213141516171819202122232425262728293031
  1. import type {BaseButtonProps} from 'sentry/components/button';
  2. import {Button} from 'sentry/components/button';
  3. import {useReplayContext} from 'sentry/components/replays/replayContext';
  4. import {IconPause, IconPlay, IconRefresh} from 'sentry/icons';
  5. import {t} from 'sentry/locale';
  6. function ReplayPlayPauseButton(props: BaseButtonProps) {
  7. const {isFinished, isPlaying, restart, togglePlayPause} = useReplayContext();
  8. return isFinished ? (
  9. <Button
  10. title={t('Restart Replay')}
  11. icon={<IconRefresh />}
  12. onClick={restart}
  13. aria-label={t('Restart Replay')}
  14. priority="primary"
  15. {...props}
  16. />
  17. ) : (
  18. <Button
  19. title={isPlaying ? t('Pause') : t('Play')}
  20. icon={isPlaying ? <IconPause /> : <IconPlay />}
  21. onClick={() => togglePlayPause(!isPlaying)}
  22. aria-label={isPlaying ? t('Pause') : t('Play')}
  23. priority="primary"
  24. {...props}
  25. />
  26. );
  27. }
  28. export default ReplayPlayPauseButton;