feat(replays): Move player controller to bottom of screen (#58166)

Moves the player controller to the bottom of screen. Change is under
feature flag "session-replay-new-timeline"

Before:
<img width="1497" alt="image"
src="https://github.com/getsentry/sentry/assets/55311782/238d192a-64cd-489f-8879-c503d222a3de">

After:
<img width="1497" alt="image"
src="https://github.com/getsentry/sentry/assets/55311782/7190d9d6-3b47-4027-8263-876bd061fcbb">

Relates to https://github.com/getsentry/team-replay/issues/198

---------

Co-authored-by: Ryan Albrecht <[email protected]>

Author: c298lee

static/app/components/replays/replayView.tsx

@@ -5,6 +5,7 @@ import ReplayController from 'sentry/components/replays/replayController';
 import ReplayCurrentUrl from 'sentry/components/replays/replayCurrentUrl';
 import ReplayPlayer from 'sentry/components/replays/replayPlayer';
 import {space} from 'sentry/styles/space';
+import useOrganization from 'sentry/utils/useOrganization';
 import BrowserOSIcons from 'sentry/views/replays/detail/browserOSIcons';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 
@@ -13,6 +14,8 @@ type Props = {
 };
 
 function ReplayView({toggleFullscreen}: Props) {
+  const organization = useOrganization();
+  const hasNewTimeline = organization.features.includes('session-replay-new-timeline');
   return (
     <Fragment>
       <ContextContainer>
@@ -22,7 +25,7 @@ function ReplayView({toggleFullscreen}: Props) {
       <Panel>
         <ReplayPlayer />
       </Panel>
-      <ReplayController toggleFullscreen={toggleFullscreen} />
+      {hasNewTimeline ? null : <ReplayController toggleFullscreen={toggleFullscreen} />}
     </Fragment>
   );
 }

static/app/views/replays/detail/layout/index.tsx

@@ -3,10 +3,12 @@ import styled from '@emotion/styled';
 
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import ReplayTimeline from 'sentry/components/replays/breadcrumbs/replayTimeline';
+import ReplayController from 'sentry/components/replays/replayController';
 import ReplayView from 'sentry/components/replays/replayView';
 import {space} from 'sentry/styles/space';
 import {LayoutKey} from 'sentry/utils/replays/hooks/useReplayLayout';
 import {useDimensions} from 'sentry/utils/useDimensions';
+import useOrganization from 'sentry/utils/useOrganization';
 import useFullscreen from 'sentry/utils/window/useFullscreen';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 import FluidPanel from 'sentry/views/replays/detail/layout/fluidPanel';
@@ -34,6 +36,9 @@ function ReplayLayout({layout = LayoutKey.TOPBAR}: Props) {
   const measureRef = useRef<HTMLDivElement>(null);
   const {width, height} = useDimensions({elementRef: measureRef});
 
+  const organization = useOrganization();
+  const hasNewTimeline = organization.features.includes('session-replay-new-timeline');
+
   const timeline = (
     <ErrorBoundary mini>
       <ReplayTimeline />
@@ -48,11 +53,18 @@ function ReplayLayout({layout = LayoutKey.TOPBAR}: Props) {
     </VideoSection>
   );
 
+  const controller = hasNewTimeline ? (
+    <ErrorBoundary>
+      <ReplayController toggleFullscreen={toggleFullscreen} />
+    </ErrorBoundary>
+  ) : null;
+
   if (layout === LayoutKey.VIDEO_ONLY) {
     return (
       <BodyContent>
         {timeline}
         {video}
+        {controller}
       </BodyContent>
     );
   }
@@ -97,6 +109,7 @@ function ReplayLayout({layout = LayoutKey.TOPBAR}: Props) {
             />
           ) : null}
         </FluidHeight>
+        {controller}
       </BodyContent>
     );
   }
@@ -120,6 +133,7 @@ function ReplayLayout({layout = LayoutKey.TOPBAR}: Props) {
           />
         ) : null}
       </FluidHeight>
+      {controller}
     </BodyContent>
   );
 }