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

ui: fix playlink hover state

Browse source
This commit is contained in:
nick-delirium 2025-02-19 09:27:00 +01:00
parent 4970bc365b
commit 963c8354c6
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
1 changed files with 11 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
View file

@ -12,10 +12,9 @@ import { useStore } from 'App/mstore';
const PLAY_ICON_NAMES = {
notPlayed: 'play-fill',
played: 'play-circle-light',
hovered: 'play-hover',
} as const
const getDefaultIconName = (isViewed: any) =>
const getIconName = (isViewed: any) =>
!isViewed ? PLAY_ICON_NAMES.notPlayed : PLAY_ICON_NAMES.played;
interface Props {
@ -33,15 +32,13 @@ function PlayLink(props: Props) {
const { projectsStore } = useStore();
const { isAssist, viewed, sessionId, onClick = null, queryParams } = props;
const history = useHistory();
const defaultIconName = getDefaultIconName(viewed);
const defaultIconName = getIconName(viewed);
const [isHovered, toggleHover] = useState(false);
const [iconName, setIconName] = useState<typeof PLAY_ICON_NAMES[keyof typeof PLAY_ICON_NAMES]>(defaultIconName);
useEffect(() => {
if (isHovered) setIconName(PLAY_ICON_NAMES.hovered);
else setIconName(getDefaultIconName(viewed));
}, [isHovered, viewed]);
setIconName(getIconName(viewed));
}, [viewed]);
const link = isAssist
? liveSessionRoute(sessionId, queryParams)
@ -68,22 +65,20 @@ function PlayLink(props: Props) {
const onLinkClick = props.beforeOpen ? handleBeforeOpen : onClick;
const onLeave = () => {
toggleHover(false);
};
const onOver = () => {
toggleHover(true);
};
return (
<Link
className={'group'}
onClick={onLinkClick}
to={link + (props.query ? props.query : '')}
onMouseOver={onOver}
onMouseOut={onLeave}
target={props.newTab ? '_blank' : undefined}
rel={props.newTab ? 'noopener noreferrer' : undefined}
>
<Icon name={iconName} size={38} color={isAssist ? 'tealx' : 'teal'} />
<div className={'group-hover:block hidden'}>
<Icon name={'play-hover'} size={38} color={isAssist ? 'tealx' : 'teal'} />
</div>
<div className={'group-hover:hidden block'}>
<Icon name={iconName} size={38} color={isAssist ? 'tealx' : 'teal'} />
</div>
</Link>
);
}