chore: prep replay components for new ui (#26676)

PostHog · Dec 5, 2024 · 259c3a3 · 259c3a3
1 parent fea5382
commit 259c3a3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/frontend/src/lib/components/Playlist/Playlist.tsx b/frontend/src/lib/components/Playlist/Playlist.tsx
@@ -26,7 +26,7 @@ export type PlaylistSection<T> = {
 export type PlaylistProps<T> = {
     sections: PlaylistSection<T>[]
     listEmptyState: JSX.Element
-    content: ({ activeItem }: { activeItem: T | null }) => JSX.Element
+    content: (({ activeItem }: { activeItem: T | null }) => JSX.Element) | null
     title?: string
     notebooksHref?: string
     embedded?: boolean
@@ -149,7 +149,7 @@ export function Playlist<
                     onDoubleClick={() => setListCollapsed(!listCollapsed)}
                 />
             </div>
-            <div className="Playlist__main">{content({ activeItem })}</div>
+            {content && <div className="Playlist__main">{content({ activeItem })}</div>}
         </div>
     )
 }

diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
@@ -26,7 +26,10 @@ import {
 } from './SessionRecordingsPlaylistSettings'
 import { SessionRecordingsPlaylistTroubleshooting } from './SessionRecordingsPlaylistTroubleshooting'
 
-export function SessionRecordingsPlaylist(props: SessionRecordingPlaylistLogicProps): JSX.Element {
+export function SessionRecordingsPlaylist({
+    showContent = true,
+    ...props
+}: SessionRecordingPlaylistLogicProps & { showContent?: boolean }): JSX.Element {
     const logicProps: SessionRecordingPlaylistLogicProps = {
         ...props,
         autoPlay: props.autoPlay ?? true,
@@ -122,7 +125,7 @@ export function SessionRecordingsPlaylist(props: SessionRecordingPlaylistLogicPr
                     onSelect={(item) => setSelectedRecordingId(item.id)}
                     activeItemId={activeSessionRecordingId}
                     content={({ activeItem }) =>
-                        activeItem ? (
+                        showContent && activeItem ? (
                             <SessionRecordingPlayer
                                 playerKey={props.logicKey ?? 'playlist'}
                                 sessionRecordingId={activeItem.id}