|
@@ -3,7 +3,6 @@ import {useRef, useState} from 'react';
|
|
|
import styled from '@emotion/styled';
|
|
|
|
|
|
import {Button, LinkButton} from 'sentry/components/button';
|
|
|
-import ButtonBar from 'sentry/components/buttonBar';
|
|
|
import ErrorBoundary from 'sentry/components/errorBoundary';
|
|
|
import Panel from 'sentry/components/panels/panel';
|
|
|
import {useReplayContext} from 'sentry/components/replays/replayContext';
|
|
@@ -77,7 +76,7 @@ function ReplayPreviewPlayer({
|
|
|
|
|
|
return (
|
|
|
<PlayerPanel>
|
|
|
- {replayRecord && (
|
|
|
+ <HeaderWrapper>
|
|
|
<StyledReplayCell
|
|
|
key="session"
|
|
|
replay={replayRecord}
|
|
@@ -85,7 +84,10 @@ function ReplayPreviewPlayer({
|
|
|
organization={organization}
|
|
|
referrer="issue-details-replay-header"
|
|
|
/>
|
|
|
- )}
|
|
|
+ <LinkButton size="sm" to={fullReplayUrl} {...fullReplayButtonProps}>
|
|
|
+ {t('See Full Replay')}
|
|
|
+ </LinkButton>
|
|
|
+ </HeaderWrapper>
|
|
|
<PreviewPlayerContainer ref={fullscreenRef} isSidebarOpen={isSidebarOpen}>
|
|
|
<PlayerBreadcrumbContainer>
|
|
|
<PlayerContextContainer>
|
|
@@ -138,12 +140,7 @@ function ReplayPreviewPlayer({
|
|
|
<Container>
|
|
|
<TimeAndScrubberGrid />
|
|
|
</Container>
|
|
|
- <ButtonBar gap={1}>
|
|
|
- <LinkButton size="sm" to={fullReplayUrl} {...fullReplayButtonProps}>
|
|
|
- {t('See Full Replay')}
|
|
|
- </LinkButton>
|
|
|
- <ReplayFullscreenButton toggleFullscreen={toggleFullscreen} />
|
|
|
- </ButtonBar>
|
|
|
+ <ReplayFullscreenButton toggleFullscreen={toggleFullscreen} />
|
|
|
</ButtonGrid>
|
|
|
</ErrorBoundary>
|
|
|
</PreviewPlayerContainer>
|
|
@@ -219,4 +216,11 @@ const StyledReplayCell = styled(ReplayCell)`
|
|
|
padding: 0 0 ${space(1)};
|
|
|
`;
|
|
|
|
|
|
+const HeaderWrapper = styled('div')`
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: ${space(1)};
|
|
|
+`;
|
|
|
+
|
|
|
export default ReplayPreviewPlayer;
|