From 8ba0bf52150c680c8bc459799fe314f4ac790d87 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Thu, 23 Jan 2025 21:36:44 +0000
Subject: [PATCH] feat: remember filters in replay home (#27839)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../scenes/session-recordings/player/PlayerMeta.tsx | 13 ++++++-------
 .../session-recordings/player/playerMetaLogic.tsx   |  2 +-
 .../playlist/sessionRecordingsPlaylistLogic.ts      |  4 +++-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx b/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
index 139255c2a646e..8dfbc46e63393 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
+++ b/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
@@ -65,7 +65,7 @@ function URLOrScreen({ lastUrl }: { lastUrl: string | undefined }): JSX.Element
     )
 }
 
-function ResolutionView({ isCompact }: { isCompact: boolean }): JSX.Element {
+function ResolutionView(): JSX.Element {
     const { logicProps } = useValues(sessionRecordingPlayerLogic)
 
     const { resolutionDisplay, scaleDisplay, loading } = useValues(playerMetaLogic(logicProps))
@@ -84,9 +84,8 @@ function ResolutionView({ isCompact }: { isCompact: boolean }): JSX.Element {
             }
         >
             <span className="text-muted-alt text-xs">
-                <>
-                    {resolutionDisplay} {!isCompact && `(${scaleDisplay})`}
-                </>
+                <span className="hidden @[30rem]:inline-block">{resolutionDisplay} </span>
+                <span>({scaleDisplay})</span>
             </span>
         </Tooltip>
     )
@@ -125,7 +124,7 @@ export function PlayerMeta({ iconsOnly }: { iconsOnly: boolean }): JSX.Element {
                             </Link>
                         </Tooltip>
                     ) : null}
-                    <ResolutionView isCompact={isSmallPlayer} />
+                    <ResolutionView />
                 </div>
             </div>
         )
@@ -158,7 +157,7 @@ export function PlayerMeta({ iconsOnly }: { iconsOnly: boolean }): JSX.Element {
                     'PlayerMeta--fullscreen': isFullScreen,
                 })}
             >
-                <div className="flex items-center justify-between gap-1 whitespace-nowrap overflow-hidden px-1 py-0.5 text-xs">
+                <div className="flex items-center justify-between gap-1 whitespace-nowrap overflow-hidden px-1 py-0.5 text-xs @container">
                     {loading ? (
                         <LemonSkeleton className="w-1/3 h-4 my-1" />
                     ) : (
@@ -184,7 +183,7 @@ export function PlayerMeta({ iconsOnly }: { iconsOnly: boolean }): JSX.Element {
                     )}
                     <div className={clsx('flex-1', isSmallPlayer ? 'min-w-[1rem]' : 'min-w-[5rem]')} />
                     <PlayerMetaLinks iconsOnly={iconsOnly} />
-                    <ResolutionView isCompact={isSmallPlayer} />
+                    <ResolutionView />
                 </div>
             </div>
         </DraggableToNotebook>
diff --git a/frontend/src/scenes/session-recordings/player/playerMetaLogic.tsx b/frontend/src/scenes/session-recordings/player/playerMetaLogic.tsx
index 6256503be5b22..0e1cc456cc157 100644
--- a/frontend/src/scenes/session-recordings/player/playerMetaLogic.tsx
+++ b/frontend/src/scenes/session-recordings/player/playerMetaLogic.tsx
@@ -150,7 +150,7 @@ export const playerMetaLogic = kea<playerMetaLogicType>([
         resolutionDisplay: [
             (s) => [s.resolution],
             (resolution) => {
-                return `${resolution?.width || '??'} x ${resolution?.height || '??'}`
+                return `${resolution?.width || '--'} x ${resolution?.height || '--'}`
             },
         ],
         scaleDisplay: [
diff --git a/frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts b/frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts
index a909b3ab61600..772ac08149e7a 100644
--- a/frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts
+++ b/frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts
@@ -16,6 +16,7 @@ import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { objectClean, objectsEqual } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { getCurrentTeamId } from 'lib/utils/getAppContext'
 
 import { NodeKind, RecordingOrder, RecordingsQuery, RecordingsQueryResponse } from '~/queries/schema/schema-general'
 import {
@@ -401,7 +402,7 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
             },
         ],
     })),
-    reducers(({ props }) => ({
+    reducers(({ props, key }) => ({
         unusableEventsInFilter: [
             [] as string[],
             {
@@ -414,6 +415,7 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
         ],
         filters: [
             props.filters ?? getDefaultFilters(props.personUUID),
+            { persist: true, prefix: `${getCurrentTeamId()}__${key}` },
             {
                 setFilters: (state, { filters }) => {
                     return {