feat(replays): Event Details Replay Section Player
diff --git a/static/app/components/events/eventEntries.tsx b/static/app/components/events/eventEntries.tsx
index d9e1fe5503f31..ad7d8fb96f6e1 100644
--- a/static/app/components/events/eventEntries.tsx
+++ b/static/app/components/events/eventEntries.tsx
@@ -24,6 +24,7 @@ import RRWebIntegration from 'sentry/components/events/rrwebIntegration';
 import EventSdkUpdates from 'sentry/components/events/sdkUpdates';
 import {DataSection} from 'sentry/components/events/styles';
 import EventUserFeedback from 'sentry/components/events/userFeedback';
+import LazyLoad from 'sentry/components/lazyLoad';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -100,6 +101,7 @@ const EventEntries = memo(
     const orgFeatures = organization?.features ?? [];
 
     const hasEventAttachmentsFeature = orgFeatures.includes('event-attachments');
+    const replayId = event?.tags?.find(({key}) => key === 'replayId')?.value;
 
     useEffect(() => {
       checkProGuardError();
@@ -431,7 +433,7 @@ const EventEntries = memo(
             showGroupingConfig={orgFeatures.includes('set-grouping-config')}
           />
         )}
-        {!isShare && hasEventAttachmentsFeature && (
+        {!isShare && !replayId && hasEventAttachmentsFeature && (
           <RRWebIntegration
             event={event}
             orgId={orgSlug}
@@ -443,6 +445,14 @@ const EventEntries = memo(
             )}
           />
         )}
+        {!isShare && replayId && orgFeatures.includes('session-replay') && (
+          <LazyLoad
+            component={() => import('./eventReplay')}
+            replayId={replayId}
+            orgSlug={orgSlug}
+            projectSlug={projectSlug}
+          />
+        )}
       </div>
     );
   }
diff --git a/static/app/components/events/eventReplay.tsx b/static/app/components/events/eventReplay.tsx
new file mode 100644
index 0000000000000..3e7cf0ef00231
--- /dev/null
+++ b/static/app/components/events/eventReplay.tsx
@@ -0,0 +1,54 @@
+import styled from '@emotion/styled';
+
+import EventDataSection from 'sentry/components/events/eventDataSection';
+import Link from 'sentry/components/links/link';
+import Placeholder from 'sentry/components/placeholder';
+import {Provider as ReplayContextProvider} from 'sentry/components/replays/replayContext';
+import ReplayView from 'sentry/components/replays/replayView';
+import {t} from 'sentry/locale';
+import space from 'sentry/styles/space';
+import useFullscreen from 'sentry/utils/replays/hooks/useFullscreen';
+import useReplayData from 'sentry/utils/replays/hooks/useReplayData';
+
+type Props = {
+  orgSlug: string;
+  projectSlug: string;
+  replayId: string;
+};
+
+export default function EventReplay({replayId, orgSlug, projectSlug}: Props) {
+  const {fetching, replay} = useReplayData({
+    eventSlug: `${projectSlug}:${replayId}`,
+    orgId: orgSlug,
+  });
+
+  const {ref: fullscreenRef, isFullscreen, toggle: toggleFullscreen} = useFullscreen();
+
+  return (
+    <EventDataSection type="replay" title={t('Replay')}>
+      <Link to={`/organizations/${orgSlug}/replays/${projectSlug}:${replayId}`}>
+        {replayId}
+      </Link>
+
+      <ReplayContextProvider replay={replay} initialTimeOffset={0}>
+        <PlayerContainer ref={fullscreenRef}>
+          {fetching ? (
+            <Placeholder height="350px" width="100%" />
+          ) : (
+            replay && (
+              <ReplayView
+                toggleFullscreen={toggleFullscreen}
+                isFullscreen={isFullscreen}
+              />
+            )
+          )}
+        </PlayerContainer>
+      </ReplayContextProvider>
+    </EventDataSection>
+  );
+}
+
+const PlayerContainer = styled('div')`
+  max-width: 420px;
+  margin-top: ${space(2)};
+`;

### Changes
- Adds EventReplay component that contains the new Replay section
- Adds ReplayView to add the replay player for the EventReplay section

### Notes
The options dropdown bug strikes again but this time not in full-screen mode. When I click the option button on the player in this view it triggers a scroll and therefore never opens the menu. 

There isn't a mock or detail so I just added the player to the section with a max-width defined. Please feel free to let me know if there's something else that can be added or improved. The player works here as well without any changes or additional data fetching added. 

![Screen Shot 2022-07-19 at 3 32 55 PM](https://user-images.githubusercontent.com/3721977/179833476-1d93012d-3eb4-4903-8faf-8e32dad171af.png)

Closes #36589 

### Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.
