Revert "feat(replays): Replay layout add breadcrumbs to fullscreen mode (#58466)"

This reverts commit b793ef6.

Co-authored-by: asottile-sentry <[email protected]>

Author: getsentry-bot

Diff for: static/app/components/replays/replayView.tsx

@@ -1,17 +1,12 @@
-import {Fragment, useState} from 'react';
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import {Button} from 'sentry/components/button';
-import {useReplayContext} from 'sentry/components/replays/replayContext';
 import ReplayController from 'sentry/components/replays/replayController';
 import ReplayCurrentUrl from 'sentry/components/replays/replayCurrentUrl';
 import ReplayPlayer from 'sentry/components/replays/replayPlayer';
-import {IconChevron} from 'sentry/icons';
-import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useOrganization from 'sentry/utils/useOrganization';
 import useIsFullscreen from 'sentry/utils/window/useIsFullscreen';
-import Breadcrumbs from 'sentry/views/replays/detail/breadcrumbs';
 import BrowserOSIcons from 'sentry/views/replays/detail/browserOSIcons';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 
@@ -23,39 +18,16 @@ function ReplayView({toggleFullscreen}: Props) {
   const organization = useOrganization();
   const hasNewTimeline = organization.features.includes('session-replay-new-timeline');
   const isFullscreen = useIsFullscreen();
-  const {replay} = useReplayContext();
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   return (
     <Fragment>
-      <PlayerBreadcrumbContainer>
-        <PlayerContainer>
-          <ContextContainer>
-            <ReplayCurrentUrl />
-            <BrowserOSIcons />
-            {isFullscreen ? (
-              <Button
-                size="sm"
-                onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                icon={<IconChevron direction={isSidebarOpen ? 'right' : 'left'} />}
-              >
-                {isSidebarOpen ? t('Collapse Sidebar') : t('Open Sidebar')}
-              </Button>
-            ) : null}
-          </ContextContainer>
-          <Panel>
-            <ReplayPlayer />
-          </Panel>
-        </PlayerContainer>
-        {isFullscreen && isSidebarOpen ? (
-          <BreadcrumbContainer>
-            <Breadcrumbs
-              frames={replay?.getChapterFrames()}
-              startTimestampMs={replay?.getReplay()?.started_at?.getTime() || 0}
-            />
-          </BreadcrumbContainer>
-        ) : null}
-      </PlayerBreadcrumbContainer>
+      <ContextContainer>
+        <ReplayCurrentUrl />
+        <BrowserOSIcons />
+      </ContextContainer>
+      <Panel>
+        <ReplayPlayer />
+      </Panel>
       {isFullscreen || !hasNewTimeline ? (
         <ReplayController toggleFullscreen={toggleFullscreen} />
       ) : null}
@@ -78,23 +50,4 @@ const ContextContainer = styled('div')`
   gap: ${space(1)};
 `;
 
-const PlayerContainer = styled('div')`
-  display: grid;
-  grid-auto-flow: row;
-  grid-template-rows: auto 1fr;
-  gap: ${space(1)};
-  flex-grow: 1;
-`;
-
-const BreadcrumbContainer = styled('div')`
-  width: 25%;
-`;
-
-const PlayerBreadcrumbContainer = styled('div')`
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  gap: ${space(1)};
-`;
-
 export default ReplayView;

Diff for: static/app/utils/window/useIsFullscreen.tsx

@@ -8,7 +8,7 @@ import screenfull from 'screenfull';
  * as part of your component render method.
  */
 export default function useIsFullscreen() {
-  const [isFullscreen, setIsFullscreen] = useState(screenfull.isFullscreen);
+  const [isFullscreen, setIsFullscreen] = useState(false);
 
   useEffect(() => {
     if (!screenfull.isEnabled) {