mirrors/posthog
0
0
Fork 0
mirror of https://github.com/PostHog/posthog.git synced 2024-12-01 12:21:02 +01:00
Code Issues Releases Activity

fix(recordings): playlist scroll behavior (#11752)

Browse Source
This commit is contained in:
Rick Marron 2022-09-09 03:22:50 -07:00 committed by GitHub
parent 1dc9705ff3
commit 31d651a666
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/scenes/session-recordings/SessionRecordingsPlaylist.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { useRef } from 'react'
import { useActions, useValues } from 'kea'
import { colonDelimitedDuration } from '~/lib/utils'
import { SessionRecordingType } from '~/types'
@ -22,6 +22,7 @@ export function SessionRecordingsPlaylist({ personUUID }: SessionRecordingsTable
const { sessionRecordings, sessionRecordingsResponseLoading, hasNext, hasPrev, activeSessionRecordingId, offset } =
useValues(sessionRecordingsTableLogicInstance)
const { openSessionPlayer, loadNext, loadPrev } = useActions(sessionRecordingsTableLogicInstance)
const playlistRef = useRef<HTMLDivElement>(null)
const columns: LemonTableColumns<SessionRecordingType> = [
{
@ -47,7 +48,7 @@ export function SessionRecordingsPlaylist({ personUUID }: SessionRecordingsTable
},
]
return (
<div className="SessionRecordingPlaylist" data-attr="session-recordings-playlist">
<div ref={playlistRef} className="SessionRecordingPlaylist" data-attr="session-recordings-playlist">
<div className="SessionRecordingPlaylist__left-column mr-4">
<LemonTable
dataSource={sessionRecordings}
@ -58,6 +59,11 @@ export function SessionRecordingsPlaylist({ personUUID }: SessionRecordingsTable
// Lets the link to the person open the person's page and not the session recording
if (!(e.target as HTMLElement).closest('a')) {
openSessionPlayer(sessionRecording.id)
window.scrollTo({
left: 0,
top: playlistRef?.current?.offsetTop ? playlistRef.current.offsetTop - 8 : 0,
behavior: 'smooth',
})
}
},
})}