diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap index f8385357a..fbd44ecc5 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap @@ -3,6 +3,8 @@ exports[`
{ - if (this.props.animate) return; - this.setState({ hovering: true }); - }; - - handleMouseLeave = () => { - if (this.props.animate) return; - this.setState({ hovering: false }); - }; - - render() { - const { account, friend, animate, size, baseSize, overlaySize } = this.props; - const { hovering } = this.state; - - return ( -
-
-
-
- ); - } - -} diff --git a/app/javascript/mastodon/components/avatar_overlay.tsx b/app/javascript/mastodon/components/avatar_overlay.tsx new file mode 100644 index 000000000..5c65a928c --- /dev/null +++ b/app/javascript/mastodon/components/avatar_overlay.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import type { Account } from '../../types/resources'; +import { useHovering } from '../../hooks/useHovering'; +import { autoPlayGif } from '../initial_state'; + +type Props = { + account: Account; + friend: Account; + size?: number; + baseSize?: number; + overlaySize?: number; +}; + +export const AvatarOverlay: React.FC = ({ + account, + friend, + size = 46, + baseSize = 36, + overlaySize = 24, +}) => { + const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(autoPlayGif); + const accountSrc = hovering ? account?.get('avatar') : account?.get('avatar_static'); + const friendSrc = hovering ? friend?.get('avatar') : friend?.get('avatar_static'); + + return ( +
+
+
+ {accountSrc && {account?.get('acct')}} +
+
+
+
+ {friendSrc && {friend?.get('acct')}} +
+
+
+ ); +}; + +export default AvatarOverlay;