Fix missing avatar fallback interfering with transparency in web UI (#32270)
parent
a59160cf01
commit
1f5bd571cd
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
|
exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
|
||||||
<div
|
<div
|
||||||
className="account__avatar"
|
className="account__avatar account__avatar--loading"
|
||||||
onMouseEnter={[Function]}
|
onMouseEnter={[Function]}
|
||||||
onMouseLeave={[Function]}
|
onMouseLeave={[Function]}
|
||||||
style={
|
style={
|
||||||
|
@ -14,6 +14,8 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
|
onError={[Function]}
|
||||||
|
onLoad={[Function]}
|
||||||
src="/animated/alice.gif"
|
src="/animated/alice.gif"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -21,7 +23,7 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
|
||||||
|
|
||||||
exports[`<Avatar /> Still renders a still avatar 1`] = `
|
exports[`<Avatar /> Still renders a still avatar 1`] = `
|
||||||
<div
|
<div
|
||||||
className="account__avatar"
|
className="account__avatar account__avatar--loading"
|
||||||
onMouseEnter={[Function]}
|
onMouseEnter={[Function]}
|
||||||
onMouseLeave={[Function]}
|
onMouseLeave={[Function]}
|
||||||
style={
|
style={
|
||||||
|
@ -33,6 +35,8 @@ exports[`<Avatar /> Still renders a still avatar 1`] = `
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
|
onError={[Function]}
|
||||||
|
onLoad={[Function]}
|
||||||
src="/static/alice.jpg"
|
src="/static/alice.jpg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
|
import { useState, useCallback } from 'react';
|
||||||
|
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import { useHovering } from 'mastodon/../hooks/useHovering';
|
||||||
|
import { autoPlayGif } from 'mastodon/initial_state';
|
||||||
import type { Account } from 'mastodon/models/account';
|
import type { Account } from 'mastodon/models/account';
|
||||||
|
|
||||||
import { useHovering } from '../../hooks/useHovering';
|
|
||||||
import { autoPlayGif } from '../initial_state';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
|
account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
|
||||||
size: number;
|
size: number;
|
||||||
|
@ -25,6 +26,8 @@ export const Avatar: React.FC<Props> = ({
|
||||||
counterBorderColor,
|
counterBorderColor,
|
||||||
}) => {
|
}) => {
|
||||||
const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate);
|
const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState(false);
|
||||||
|
|
||||||
const style = {
|
const style = {
|
||||||
...styleFromParent,
|
...styleFromParent,
|
||||||
|
@ -37,16 +40,28 @@ export const Avatar: React.FC<Props> = ({
|
||||||
? account?.get('avatar')
|
? account?.get('avatar')
|
||||||
: account?.get('avatar_static');
|
: account?.get('avatar_static');
|
||||||
|
|
||||||
|
const handleLoad = useCallback(() => {
|
||||||
|
setLoading(false);
|
||||||
|
}, [setLoading]);
|
||||||
|
|
||||||
|
const handleError = useCallback(() => {
|
||||||
|
setError(true);
|
||||||
|
}, [setError]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={classNames('account__avatar', {
|
className={classNames('account__avatar', {
|
||||||
'account__avatar-inline': inline,
|
'account__avatar--inline': inline,
|
||||||
|
'account__avatar--loading': loading,
|
||||||
})}
|
})}
|
||||||
onMouseEnter={handleMouseEnter}
|
onMouseEnter={handleMouseEnter}
|
||||||
onMouseLeave={handleMouseLeave}
|
onMouseLeave={handleMouseLeave}
|
||||||
style={style}
|
style={style}
|
||||||
>
|
>
|
||||||
{src && <img src={src} alt='' />}
|
{src && !error && (
|
||||||
|
<img src={src} alt='' onLoad={handleLoad} onError={handleError} />
|
||||||
|
)}
|
||||||
|
|
||||||
{counter && (
|
{counter && (
|
||||||
<div
|
<div
|
||||||
className='account__avatar__counter'
|
className='account__avatar__counter'
|
||||||
|
|
|
@ -2077,7 +2077,6 @@ body > [data-popper-placement] {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: var(--avatar-border-radius);
|
border-radius: var(--avatar-border-radius);
|
||||||
background-color: var(--surface-background-color);
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -2087,7 +2086,11 @@ body > [data-popper-placement] {
|
||||||
display: inline-block; // to not show broken images
|
display: inline-block; // to not show broken images
|
||||||
}
|
}
|
||||||
|
|
||||||
&-inline {
|
&--loading {
|
||||||
|
background-color: var(--surface-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--inline {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-inline-end: 5px;
|
margin-inline-end: 5px;
|
||||||
|
|
Loading…
Reference in New Issue