fix: report when player state is error

frontend/src/lib/utils/eventUsageLogic.ts

@@ -441,8 +441,6 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         reportRecordingsListPropertiesFetched: (loadTime: number) => ({ loadTime }),
         reportRecordingsListFilterAdded: (filterType: SessionRecordingFilterType) => ({ filterType }),
         reportRecordingPlayerSeekbarEventHovered: true,
-        reportRecordingPlayerSpeedChanged: (newSpeed: number) => ({ newSpeed }),
-        reportRecordingPlayerSkipInactivityToggled: (skipInactivity: boolean) => ({ skipInactivity }),
         reportRecordingInspectorItemExpanded: (tab: InspectorListItemType, index: number) => ({ tab, index }),
         reportRecordingInspectorMiniFilterViewed: (minifilterKey: MiniFilterKey, enabled: boolean) => ({
             minifilterKey,
@@ -948,12 +946,6 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         reportRecordingPlayerSeekbarEventHovered: () => {
             posthog.capture('recording player seekbar event hovered')
         },
-        reportRecordingPlayerSpeedChanged: ({ newSpeed }) => {
-            posthog.capture('recording player speed changed', { new_speed: newSpeed })
-        },
-        reportRecordingPlayerSkipInactivityToggled: ({ skipInactivity }) => {
-            posthog.capture('recording player skip inactivity toggled', { skip_inactivity: skipInactivity })
-        },
         reportRecordingInspectorItemExpanded: ({ tab, index }) => {
             posthog.capture('recording inspector item expanded', { tab: 'replay-4000', type: tab, index })
         },

frontend/src/scenes/session-recordings/player/PlayerMeta.tsx

@@ -1,6 +1,6 @@
 import './PlayerMeta.scss'
 
-import { LemonBanner, LemonSelect, LemonSelectOption, Link } from '@posthog/lemon-ui'
+import { LemonSelect, LemonSelectOption, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
@@ -59,26 +59,6 @@ function URLOrScreen({ lastUrl }: { lastUrl: string | undefined }): JSX.Element
     )
 }
 
-function PlayerWarningsRow(): JSX.Element | null {
-    const { messageTooLargeWarnings } = useValues(sessionRecordingPlayerLogic)
-
-    return messageTooLargeWarnings.length ? (
-        <div>
-            <LemonBanner
-                type="error"
-                action={{
-                    children: 'Learn more',
-                    to: 'https://posthog.com/docs/session-replay/troubleshooting#message-too-large-warning',
-                    targetBlank: true,
-                }}
-            >
-                This session recording had recording data that was too large and could not be captured. This will mean
-                playback is not 100% accurate.{' '}
-            </LemonBanner>
-        </div>
-    ) : null
-}
-
 export function PlayerMeta({ iconsOnly }: { iconsOnly: boolean }): JSX.Element {
     const { logicProps, isFullScreen } = useValues(sessionRecordingPlayerLogic)
 
@@ -206,7 +186,6 @@ export function PlayerMeta({ iconsOnly }: { iconsOnly: boolean }): JSX.Element {
                     <PlayerMetaLinks iconsOnly={iconsOnly} />
                     {resolutionView}
                 </div>
-                <PlayerWarningsRow />
             </div>
         </DraggableToNotebook>
     )

frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx

@@ -57,6 +57,7 @@ function PinToPlaylistButton({
         />
     ) : (
         <PlaylistPopoverButton
+            tooltip={tooltip}
             setPinnedInCurrentPlaylist={logicProps.setPinned}
             icon={logicProps.pinned ? <IconPinFilled /> : <IconPin />}
             {...buttonProps}
@@ -135,7 +136,7 @@ export function PlayerMetaLinks({ iconsOnly }: { iconsOnly: boolean }): JSX.Elem
                         {buttonContent('Comment')}
                     </NotebookSelectButton>
 
-                    <LemonButton icon={<IconShare />} onClick={onShare} {...commonProps}>
+                    <LemonButton icon={<IconShare />} onClick={onShare} {...commonProps} tooltip="Share this recording">
                         {buttonContent('Share')}
                     </LemonButton>
 
@@ -149,6 +150,7 @@ export function PlayerMetaLinks({ iconsOnly }: { iconsOnly: boolean }): JSX.Elem
                                     attrs: { id: sessionRecordingId },
                                 })
                             }}
+                            tooltip="Comment in a notebook"
                         />
                     ) : null}
 

frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx

@@ -82,7 +82,7 @@ function ShowMouseTail(): JSX.Element {
 
     return (
         <SettingsToggle
-            title="Show mouse tail"
+            title="Show a tail following the cursor to make it easier to see"
             label="Show mouse tail"
             active={showMouseTail}
             data-attr="show-mouse-tail"
@@ -97,7 +97,7 @@ function SkipInactivity(): JSX.Element {
 
     return (
         <SettingsToggle
-            title="Skip inactivity"
+            title="Skip inactivite parts of the recording"
             label="Skip inactivity"
             active={skipInactivitySetting}
             data-attr="skip-inactivity"
@@ -106,6 +106,36 @@ function SkipInactivity(): JSX.Element {
     )
 }
 
+function SetTimeFormat(): JSX.Element {
+    const { timestampFormat } = useValues(playerSettingsLogic)
+    const { setTimestampFormat } = useActions(playerSettingsLogic)
+
+    return (
+        <SettingsMenu
+            highlightWhenActive={false}
+            items={[
+                {
+                    label: 'UTC',
+                    onClick: () => setTimestampFormat(TimestampFormat.UTC),
+                    active: timestampFormat === TimestampFormat.UTC,
+                },
+                {
+                    label: 'Device',
+                    onClick: () => setTimestampFormat(TimestampFormat.Device),
+                    active: timestampFormat === TimestampFormat.Device,
+                },
+                {
+                    label: 'Relative',
+                    onClick: () => setTimestampFormat(TimestampFormat.Relative),
+                    active: timestampFormat === TimestampFormat.Relative,
+                },
+            ]}
+            icon={<IconClock />}
+            label={TimestampFormatToLabel[timestampFormat]}
+        />
+    )
+}
+
 function InspectDOM(): JSX.Element {
     const { sessionPlayerMetaData } = useValues(sessionRecordingPlayerLogic)
     const { openExplorer } = useActions(sessionRecordingPlayerLogic)
@@ -125,39 +155,15 @@ function InspectDOM(): JSX.Element {
 }
 
 function PlayerBottomSettings(): JSX.Element {
-    const { timestampFormat } = useValues(playerSettingsLogic)
-    const { setTimestampFormat } = useActions(playerSettingsLogic)
-
     return (
         <SettingsBar border="top" className="justify-between">
             <div className="flex flex-row gap-0.5">
                 <SkipInactivity />
                 <ShowMouseTail />
                 <SetPlaybackSpeed />
-                <SettingsMenu
-                    highlightWhenActive={false}
-                    items={[
-                        {
-                            label: 'UTC',
-                            onClick: () => setTimestampFormat(TimestampFormat.UTC),
-                            active: timestampFormat === TimestampFormat.UTC,
-                        },
-                        {
-                            label: 'Device',
-                            onClick: () => setTimestampFormat(TimestampFormat.Device),
-                            active: timestampFormat === TimestampFormat.Device,
-                        },
-                        {
-                            label: 'Relative',
-                            onClick: () => setTimestampFormat(TimestampFormat.Relative),
-                            active: timestampFormat === TimestampFormat.Relative,
-                        },
-                    ]}
-                    icon={<IconClock />}
-                    label={TimestampFormatToLabel[timestampFormat]}
-                />
-                <InspectDOM />
+                <SetTimeFormat />
             </div>
+            <InspectDOM />
         </SettingsBar>
     )
 }

frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts

@@ -1,4 +1,5 @@
-import { actions, connect, kea, path, reducers, selectors } from 'kea'
+import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
+import posthog from 'posthog-js'
 import { teamLogic } from 'scenes/teamLogic'
 
 import { AutoplayDirection, SessionRecordingSidebarStacking } from '~/types'
@@ -122,4 +123,13 @@ export const playerSettingsLogic = kea<playerSettingsLogicType>([
             (preferredSidebarStacking) => preferredSidebarStacking === SessionRecordingSidebarStacking.Vertical,
         ],
     }),
+
+    listeners({
+        setSpeed: ({ speed }) => {
+            posthog.capture('recording player speed changed', { new_speed: speed })
+        },
+        setSkipInactivitySetting: ({ skipInactivitySetting }) => {
+            posthog.capture('recording player skip inactivity toggled', { skip_inactivity: skipInactivitySetting })
+        },
+    }),
 ])

frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.test.ts

@@ -141,15 +141,15 @@ describe('sessionRecordingPlayerLogic', () => {
                     sessionRecordingDataLogic({ sessionRecordingId: '2' }).actionTypes.loadSnapshotSourcesFailure,
                 ])
                 .toFinishAllListeners()
-                .toDispatchActions(['setErrorPlayerState'])
+                .toDispatchActions(['setPlayerError'])
 
             expect(logic.values).toMatchObject({
                 sessionPlayerData: {
                     person: recordingMetaJson.person,
                     snapshotsByWindowId: {},
                     bufferedToTime: 0,
                 },
-                isErrored: true,
+                playerError: 'loadSnapshotSourcesFailure',
             })
             resumeKeaLoadersErrors()
         })