jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix ui: fix mobile prefetching (#2107)

Browse source
This commit is contained in:
Delirium 2024-04-19 09:07:20 +02:00 • committed by GitHub
parent ac5f4654a8
commit 0228e6cadb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 48 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
frontend/app/components/shared/SessionItem/SessionItem.tsx
View file

@ -66,6 +66,7 @@ interface Props {
isCallActive?: boolean;
agentIds?: string[];
timezone: string;
platform: string;
};
onUserClick?: (userId: string, userAnonymousId: string) => void;
hasUserFilter?: boolean;
@ -131,20 +132,21 @@ function SessionItem(props: RouteComponentProps & Props) {
metadata,
issueTypes,
active,
platform,
timezone: userTimezone,
} = session;
const location = props.location;
const queryParams = Object.fromEntries(new URLSearchParams(location.search));
const isMobile = platform !== 'web'
const formattedDuration = durationFormatted(duration);
const hasUserId = userId || userAnonymousId;
const isSessions = isRoute(SESSIONS_ROUTE, location.pathname);
const isAssist =
(!ignoreAssist &&
(isRoute(ASSIST_ROUTE, location.pathname) ||
isRoute(ASSIST_LIVE_SESSION, location.pathname) ||
location.pathname.includes('multiview'))) ||
(isRoute(ASSIST_ROUTE, location.pathname) ||
isRoute(ASSIST_LIVE_SESSION, location.pathname) ||
location.pathname.includes('multiview'))) ||
props.live;
const isLastPlayed = lastPlayedSessionId === sessionId;
@ -179,7 +181,12 @@ function SessionItem(props: RouteComponentProps & Props) {
}, []);
const handleHover = async () => {
if (prefetchState !== PREFETCH_STATE.none || props.live || isAssist) return;
if (
prefetchState !== PREFETCH_STATE.none
|| props.live
|| isAssist
|| isMobile
) return;
setPrefetched(PREFETCH_STATE.loading);
try {
@ -190,7 +197,12 @@ function SessionItem(props: RouteComponentProps & Props) {
}
};
const openSession = () => {
if (props.live || isAssist || prefetchState === PREFETCH_STATE.none) return
if (
props.live
|| isAssist
|| prefetchState === PREFETCH_STATE.none
|| isMobile
) return
presetSession?.(session);
};
return (
@ -225,13 +237,13 @@ function SessionItem(props: RouteComponentProps & Props) {
'color-teal cursor-pointer':
!disableUser && hasUserId && !props.isDisabled,
[stl.userName]:
!disableUser && hasUserId && !props.isDisabled,
!disableUser && hasUserId && !props.isDisabled,
'color-gray-medium': disableUser || !hasUserId,
})}
onClick={() =>
!disableUser && !hasUserFilter && hasUserId
? onUserClick(userId, userAnonymousId)
: null
!disableUser && !hasUserFilter && hasUserId
? onUserClick(userId, userAnonymousId)
: null
}
>
<TextEllipsis
@ -280,11 +292,11 @@ function SessionItem(props: RouteComponentProps & Props) {
text={formatTimeOrDate(
startedAt,
shownTimezone === 'user' && userTimezone
? {
label: userTimezone.split('+').join(' +'),
value: userTimezone.split(':')[0],
}
: timezone
? {
label: userTimezone.split('+').join(' +'),
value: userTimezone.split(':')[0],
}
: timezone
)}
popupProps={{ inverted: true, size: 'tiny' }}
/>
@ -297,8 +309,8 @@ function SessionItem(props: RouteComponentProps & Props) {
<span className="mr-1">{eventsCount}</span>
<span>
{eventsCount === 0 || eventsCount > 1
? 'Events'
: 'Event'}
? 'Events'
: 'Event'}
</span>
</div>
<Icon name="circle-fill" size={3} className="mx-4" />
@ -308,8 +320,8 @@ function SessionItem(props: RouteComponentProps & Props) {
{live || props.live ? (
<Counter startTime={startedAt} />
) : (
formattedDuration
)}
formattedDuration
)}
</div>
</div>
</div>
@ -410,23 +422,23 @@ function SessionItem(props: RouteComponentProps & Props) {
</div>
</div>
) : (
<div>
<PlayLink
isAssist={isAssist}
sessionId={sessionId}
viewed={viewed}
onClick={onClick}
queryParams={queryParams}
query={query}
beforeOpen={props.live || isAssist ? undefined : openSession}
/>
{bookmarked && (
<div className="ml-2 cursor-pointer">
<ItemMenu bold items={menuItems} />
</div>
)}
</div>
)}
<div>
<PlayLink
isAssist={isAssist}
sessionId={sessionId}
viewed={viewed}
onClick={onClick}
queryParams={queryParams}
query={query}
beforeOpen={props.live || isAssist ? undefined : openSession}
/>
{bookmarked && (
<div className="ml-2 cursor-pointer">
<ItemMenu bold items={menuItems} />
</div>
)}
</div>
)}
</div>
</div>
</div>