diff --git a/packages/pl-fe/src/components/still-image.tsx b/packages/pl-fe/src/components/still-image.tsx index 1c5942463..048177afe 100644 --- a/packages/pl-fe/src/components/still-image.tsx +++ b/packages/pl-fe/src/components/still-image.tsx @@ -74,7 +74,6 @@ const StillImage: React.FC = ({ className={clsx(baseClassName, { 'invisible group-hover:visible': hoverToPlay, })} - crossOrigin='anonymous' /> {hoverToPlay && ( diff --git a/packages/pl-fe/src/components/ui/avatar.tsx b/packages/pl-fe/src/components/ui/avatar.tsx index 8c87c36c8..a0febef42 100644 --- a/packages/pl-fe/src/components/ui/avatar.tsx +++ b/packages/pl-fe/src/components/ui/avatar.tsx @@ -1,12 +1,14 @@ import clsx from 'clsx'; import { FastAverageColor } from 'fast-average-color'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import StillImage, { IStillImage } from 'pl-fe/components/still-image'; import Icon from './icon'; +const COLOR_CACHE = new Map(); + const AVATAR_SIZE = 42; const messages = defineMessages({ @@ -33,12 +35,19 @@ const Avatar = (props: IAvatar) => { const handleLoadFailure = () => setIsAvatarMissing(true); - const handleLoad = (e: React.SyntheticEvent) => { - const color = fac.getColor(e.currentTarget); - if (!color.error) { - setColor(color.hex); + useEffect(() => { + if (COLOR_CACHE.has(src)) { + setColor(COLOR_CACHE.get(src)); + return; } - }; + + fac.getColorAsync(src).then(color => { + if (!color.error) { + COLOR_CACHE.set(src, color.hex); + setColor(color.hex); + } + }).catch(() => setColor(undefined)); + }, [src]); const style: React.CSSProperties = React.useMemo(() => ({ width: size, @@ -73,7 +82,6 @@ const Avatar = (props: IAvatar) => { src={src} alt={alt || intl.formatMessage(messages.avatar)} onError={handleLoadFailure} - onLoad={handleLoad} /> ); };