From dc3e8381f21e82e78fa8eafaf9ccb8ade1bc244d Mon Sep 17 00:00:00 2001
From: Ben White <ben@posthog.com>
Date: Mon, 18 Mar 2024 14:59:28 +0100
Subject: [PATCH 1/2] Fix select

---
 .../player/playerSettingsLogic.ts             |  6 ++--
 .../SessionRecordingsPlaylistSettings.tsx     | 34 +++++++------------
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts b/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts
index 22fe284c3a504..bf59f450be440 100644
--- a/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts
+++ b/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts
@@ -175,7 +175,7 @@ export const playerSettingsLogic = kea<playerSettingsLogicType>([
         setSpeed: (speed: number) => ({ speed }),
         setShowOnlyMatching: (showOnlyMatching: boolean) => ({ showOnlyMatching }),
         setHideViewedRecordings: (hideViewedRecordings: boolean) => ({ hideViewedRecordings }),
-        toggleAutoplayDirection: true,
+        setAutoplayDirection: (autoplayDirection: AutoplayDirection) => ({ autoplayDirection }),
         setTab: (tab: SessionRecordingPlayerTab) => ({ tab }),
         setTimestampMode: (mode: 'absolute' | 'relative') => ({ mode }),
         setMiniFilter: (key: string, enabled: boolean) => ({ key, enabled }),
@@ -246,9 +246,7 @@ export const playerSettingsLogic = kea<playerSettingsLogicType>([
             'older' as AutoplayDirection,
             { persist: true },
             {
-                toggleAutoplayDirection: (state) => {
-                    return !state ? 'older' : state === 'older' ? 'newer' : null
-                },
+                setAutoplayDirection: (_, { autoplayDirection }) => autoplayDirection,
             },
         ],
         hideViewedRecordings: [
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
index 801cb3bf61472..46b0bd3719128 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
@@ -1,8 +1,5 @@
-import { IconPlay } from '@posthog/icons'
-import { LemonSwitch } from '@posthog/lemon-ui'
-import clsx from 'clsx'
+import { LemonSelect, LemonSwitch } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { IconPause } from 'lib/lemon-ui/icons'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { DurationTypeSelect } from 'scenes/session-recordings/filters/DurationTypeSelect'
 
@@ -11,7 +8,7 @@ import { sessionRecordingsPlaylistLogic } from './sessionRecordingsPlaylistLogic
 
 export function SessionRecordingsPlaylistSettings(): JSX.Element {
     const { autoplayDirection, durationTypeToShow, hideViewedRecordings } = useValues(playerSettingsLogic)
-    const { toggleAutoplayDirection, setDurationTypeToShow, setHideViewedRecordings } = useActions(playerSettingsLogic)
+    const { setAutoplayDirection, setDurationTypeToShow, setHideViewedRecordings } = useActions(playerSettingsLogic)
     const { orderBy } = useValues(sessionRecordingsPlaylistLogic)
 
     return (
@@ -22,27 +19,22 @@ export function SessionRecordingsPlaylistSettings(): JSX.Element {
                     title={
                         <div className="text-center">
                             Autoplay next recording
-                            <br />({!autoplayDirection ? 'disabled' : autoplayDirection})
+                            <br />({!autoplayDirection ? 'off' : autoplayDirection})
                         </div>
                     }
                     placement="bottom"
                 >
-                    <LemonSwitch
+                    <LemonSelect
+                        value={autoplayDirection}
                         aria-label="Autoplay next recording"
-                        checked={!!autoplayDirection}
-                        onChange={toggleAutoplayDirection}
-                        handleContent={
-                            <span
-                                className={clsx(
-                                    'transition-all flex items-center',
-                                    !autoplayDirection && 'text-border text-sm',
-                                    !!autoplayDirection && 'text-white text-xs pl-px',
-                                    autoplayDirection === 'newer' && 'rotate-180'
-                                )}
-                            >
-                                {autoplayDirection ? <IconPlay /> : <IconPause />}
-                            </span>
-                        }
+                        onChange={setAutoplayDirection}
+                        dropdownMatchSelectWidth={false}
+                        options={[
+                            { value: null, label: 'off' },
+                            { value: 'newer', label: 'newer recordings' },
+                            { value: 'older', label: 'older recordings' },
+                        ]}
+                        size="small"
                     />
                 </Tooltip>
             </div>

From 2c87bbf792e3f5899de947017074c1de4258d20b Mon Sep 17 00:00:00 2001
From: Ben White <ben@posthog.com>
Date: Mon, 18 Mar 2024 15:00:22 +0100
Subject: [PATCH 2/2] Fixes

---
 .../SessionRecordingsPlaylistSettings.tsx     | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
index 46b0bd3719128..7f1e25df34b84 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
@@ -13,17 +13,18 @@ export function SessionRecordingsPlaylistSettings(): JSX.Element {
 
     return (
         <div className="relative flex flex-col gap-2 p-3 bg-side border-b">
-            <div className="flex flex-row items-center justify-between space-x-2">
-                <span className="text-black font-medium">Autoplay</span>
-                <Tooltip
-                    title={
-                        <div className="text-center">
-                            Autoplay next recording
-                            <br />({!autoplayDirection ? 'off' : autoplayDirection})
-                        </div>
-                    }
-                    placement="bottom"
-                >
+            <Tooltip
+                title={
+                    <div className="text-center">
+                        Autoplay next recording
+                        <br />({!autoplayDirection ? 'off' : autoplayDirection})
+                    </div>
+                }
+                placement="right"
+            >
+                <div className="flex flex-row items-center justify-between space-x-2">
+                    <span className="text-black font-medium">Autoplay</span>
+
                     <LemonSelect
                         value={autoplayDirection}
                         aria-label="Autoplay next recording"
@@ -36,8 +37,8 @@ export function SessionRecordingsPlaylistSettings(): JSX.Element {
                         ]}
                         size="small"
                     />
-                </Tooltip>
-            </div>
+                </div>
+            </Tooltip>
             <div className="flex flex-row items-center justify-between space-x-2">
                 <span className="text-black font-medium">Hide viewed</span>
                 <LemonSwitch