feat: image preview in inspector list (#26378)

PostHog · Nov 25, 2024 · 1c33b13 · 1c33b13
1 parent 1f6d09d
commit 1c33b13
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 4 deletions.
diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx
@@ -14,6 +14,8 @@ import { sessionRecordingPlayerLogic } from '../sessionRecordingPlayerLogic'
 import { PlayerInspectorListItem } from './components/PlayerInspectorListItem'
 import { playerInspectorLogic } from './playerInspectorLogic'
 
+export const DEFAULT_INSPECTOR_ROW_HEIGHT = 40
+
 export function PlayerInspectorList(): JSX.Element {
     const { logicProps, snapshotsLoaded } = useValues(sessionRecordingPlayerLogic)
     const inspectorLogic = playerInspectorLogic(logicProps)
@@ -27,7 +29,7 @@ export function PlayerInspectorList(): JSX.Element {
             new CellMeasurerCache({
                 fixedWidth: true,
                 minHeight: 10,
-                defaultHeight: 40,
+                defaultHeight: DEFAULT_INSPECTOR_ROW_HEIGHT,
             }),
         []
     )

diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ImagePreview.scss b/frontend/src/scenes/session-recordings/player/inspector/components/ImagePreview.scss
@@ -0,0 +1,5 @@
+.ImagePreview__background {
+    background: #eee
+        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"         fill-opacity=".25" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /> </svg>');
+    background-size: 30px 30px;
+}
diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx
@@ -1,4 +1,6 @@
-import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
+import './ImagePreview.scss'
+
+import { LemonButton, LemonDivider, Tooltip } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { ErrorDisplay } from 'lib/components/Errors/ErrorDisplay'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
@@ -10,10 +12,12 @@ import { POSTHOG_EVENT_PROMOTED_PROPERTIES } from 'lib/taxonomy'
 import { autoCaptureEventToDescription, capitalizeFirstLetter, isString } from 'lib/utils'
 import { insightUrlForEvent } from 'scenes/insights/utils'
 import { eventPropertyFilteringLogic } from 'scenes/session-recordings/player/inspector/components/eventPropertyFilteringLogic'
+import { DEFAULT_INSPECTOR_ROW_HEIGHT } from 'scenes/session-recordings/player/inspector/PlayerInspectorList'
+
+import { ElementType } from '~/types'
 
 import { InspectorListItemEvent } from '../playerInspectorLogic'
 import { SimpleKeyValueList } from './SimpleKeyValueList'
-
 export interface ItemEventProps {
     item: InspectorListItemEvent
 }
@@ -50,6 +54,53 @@ function SummarizeWebVitals({ properties }: { properties: Record<string, any> })
     )
 }
 
+function autocaptureToImage(
+    elements: ElementType[]
+): null | { src: string | undefined; width: string | undefined; height: string | undefined } {
+    const find = elements.find((el) => el.tag_name === 'img')
+    const image = {
+        src: find?.attributes?.attr__src,
+        width: find?.attributes?.attr__width,
+        height: find?.attributes?.attr__height,
+    }
+    return image.src ? image : null
+}
+
+function AutocaptureImage({ item }: ItemEventProps): JSX.Element | null {
+    const img = autocaptureToImage(item.data.elements)
+    if (img) {
+        return (
+            <Tooltip
+                title={
+                    <div className="flex bg-bg-3000 items-center justify-center relative border-2">
+                        {/* Transparent grid background */}
+                        <div className="ImagePreview__background absolute h-full w-full" />
+
+                        {/* Image preview */}
+                        <img
+                            className="relative z-10 max-h-100 object-contain"
+                            src={img.src}
+                            alt="Autocapture image src"
+                            height={img.height || 'auto'}
+                            width={img.width || 'auto'}
+                        />
+                    </div>
+                }
+            >
+                <img
+                    className="max-h-10"
+                    src={img.src}
+                    alt="Autocapture image src"
+                    height={DEFAULT_INSPECTOR_ROW_HEIGHT}
+                    width="auto"
+                />
+            </Tooltip>
+        )
+    }
+
+    return null
+}
+
 export function ItemEvent({ item }: ItemEventProps): JSX.Element {
     const subValue =
         item.data.event === '$pageview' ? (
@@ -58,7 +109,9 @@ export function ItemEvent({ item }: ItemEventProps): JSX.Element {
             item.data.properties.$screen_name
         ) : item.data.event === '$web_vitals' ? (
             <SummarizeWebVitals properties={item.data.properties} />
-        ) : undefined
+        ) : item.data.elements.length ? (
+            <AutocaptureImage item={item} />
+        ) : null
 
     return (
         <div data-attr="item-event" className="font-light w-full">