diff --git a/ui/src/pages/occurrences/occurrence-columns.tsx b/ui/src/pages/occurrences/occurrence-columns.tsx index cd344bdca..e69b2b069 100644 --- a/ui/src/pages/occurrences/occurrence-columns.tsx +++ b/ui/src/pages/occurrences/occurrence-columns.tsx @@ -81,7 +81,7 @@ export const columns: (projectId: string) => TableColumn[] = ( name: translate(STRING.FIELD_LABEL_SESSION), sortField: 'event', renderCell: (item: Occurrence) => ( - + ), diff --git a/ui/src/pages/session-details/playback/playback-controls/playback-controls.tsx b/ui/src/pages/session-details/playback/playback-controls/playback-controls.tsx index d07ba9622..4740bc192 100644 --- a/ui/src/pages/session-details/playback/playback-controls/playback-controls.tsx +++ b/ui/src/pages/session-details/playback/playback-controls/playback-controls.tsx @@ -10,13 +10,15 @@ import { useState } from 'react' import { useThreshold } from 'utils/threshold/thresholdContext' import { CaptureInfo } from '../capture-info/capture-info' import { CaptureJob } from '../capture-job/capture-job' -import { useActiveCaptureId } from '../useActiveCapture' import { PipelinesPicker } from './pipelines-picker' import styles from './playback-controls.module.scss' import { StarButton } from './star-button' -export const PlaybackControls = () => { - const { activeCaptureId } = useActiveCaptureId() +export const PlaybackControls = ({ + activeCaptureId, +}: { + activeCaptureId: string +}) => { const { capture, isFetching } = useCaptureDetails(activeCaptureId as string) const { defaultThreshold, threshold, setThreshold } = useThreshold() const [showDetails, setShowDetails] = useState(false) diff --git a/ui/src/pages/session-details/playback/playback.tsx b/ui/src/pages/session-details/playback/playback.tsx index 844dfa9c3..f654df707 100644 --- a/ui/src/pages/session-details/playback/playback.tsx +++ b/ui/src/pages/session-details/playback/playback.tsx @@ -6,7 +6,7 @@ import { CapturePicker } from './capture-picker/capture-picker' import { Frame } from './frame/frame' import { PlaybackControls } from './playback-controls/playback-controls' import styles from './playback.module.scss' -import { useActiveCapture } from './useActiveCapture' +import { useActiveCapture, useActiveCaptureId } from './useActiveCapture' export const Playback = ({ session }: { session: SessionDetails }) => { const { threshold } = useThreshold() @@ -21,6 +21,7 @@ export const Playback = ({ session }: { session: SessionDetails }) => { } = useInfiniteCaptures(session.id, session.captureOffset, threshold) const { activeCapture, setActiveCapture } = useActiveCapture(captures) const [showOverlay, setShowOverlay] = useState(false) + const { activeCaptureId } = useActiveCaptureId() if (!session.firstCapture) { return null @@ -41,7 +42,9 @@ export const Playback = ({ session }: { session: SessionDetails }) => { showOverlay={showOverlay} /> - + {activeCaptureId && ( + + )}
diff --git a/ui/src/pages/session-details/playback/useActiveCapture.ts b/ui/src/pages/session-details/playback/useActiveCapture.ts index e048c7656..6d3052320 100644 --- a/ui/src/pages/session-details/playback/useActiveCapture.ts +++ b/ui/src/pages/session-details/playback/useActiveCapture.ts @@ -13,7 +13,7 @@ export const useActiveCaptureId = () => { const setActiveCaptureId = (captureId: string) => { searchParams.delete(SEARCH_PARAM_KEY) searchParams.set(SEARCH_PARAM_KEY, captureId) - setSearchParams(searchParams) + setSearchParams(searchParams, { replace: true }) } return { activeCaptureId, setActiveCaptureId } diff --git a/ui/src/pages/session-details/playback/useActiveOccurrences.ts b/ui/src/pages/session-details/playback/useActiveOccurrences.ts index 383ff6195..79115b79f 100644 --- a/ui/src/pages/session-details/playback/useActiveOccurrences.ts +++ b/ui/src/pages/session-details/playback/useActiveOccurrences.ts @@ -12,7 +12,7 @@ export const useActiveOccurrences = () => { (occurrences: string[]) => { searchParams.delete(SEARCH_PARAM_KEY) occurrences.forEach((o) => searchParams.append(SEARCH_PARAM_KEY, o)) - setSearchParams(searchParams) + setSearchParams(searchParams, { replace: true }) }, [searchParams, setSearchParams] )