bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MediaGallery: clean up unused code, rearrange useEffect

Browse source
This commit is contained in:
Alex Gleason 2022-09-30 18:11:05 -05:00
parent 1069546b50
commit cc3e8ebd3b
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 15 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
app/soapbox/components/media_gallery.tsx
View file

@ -80,8 +80,6 @@ const Item: React.FC<IItem> = ({
const settings = useSettings(); const settings = useSettings();
const autoPlayGif = settings.get('autoPlayGif') === true; const autoPlayGif = settings.get('autoPlayGif') === true;
const [loaded, setLoaded] = useState(false);
const handleMouseEnter: React.MouseEventHandler<HTMLVideoElement> = ({ currentTarget: video }) => { const handleMouseEnter: React.MouseEventHandler<HTMLVideoElement> = ({ currentTarget: video }) => {
if (hoverToPlay()) { if (hoverToPlay()) {
video.play(); video.play();
@ -118,10 +116,6 @@ const Item: React.FC<IItem> = ({
e.stopPropagation(); e.stopPropagation();
}; };
const handleImageLoad = () => {
setLoaded(true);
};
const handleVideoHover: React.MouseEventHandler<HTMLVideoElement> = ({ currentTarget: video }) => { const handleVideoHover: React.MouseEventHandler<HTMLVideoElement> = ({ currentTarget: video }) => {
video.playbackRate = 3.0; video.playbackRate = 3.0;
video.play(); video.play();
@ -166,7 +160,7 @@ const Item: React.FC<IItem> = ({
return ( return (
<div className={classNames('media-gallery__item', { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}> <div className={classNames('media-gallery__item', { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
<a className='media-gallery__item-thumbnail' href={attachment.url} target='_blank' style={{ cursor: 'pointer' }}> <a className='media-gallery__item-thumbnail' href={attachment.url} target='_blank' style={{ cursor: 'pointer' }}>
<Blurhash hash={attachment.get('blurhash')} className='media-gallery__preview' /> <Blurhash hash={attachment.blurhash} className='media-gallery__preview' />
<span className='media-gallery__item__icons'>{attachmentIcon}</span> <span className='media-gallery__item__icons'>{attachmentIcon}</span>
<span className='media-gallery__filename__label'>{filename}</span> <span className='media-gallery__filename__label'>{filename}</span>
</a> </a>
@ -258,10 +252,8 @@ const Item: React.FC<IItem> = ({
</div> </div>
)} )}
<Blurhash <Blurhash
hash={attachment.get('blurhash')} hash={attachment.blurhash}
className={classNames('media-gallery__preview', { className='media-gallery__preview'
'media-gallery__preview--hidden': visible && loaded,
})}
/> />
{visible && thumbnail} {visible && thumbnail}
</div> </div>
@ -304,15 +296,6 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
const node = useRef<HTMLDivElement>(null); const node = useRef<HTMLDivElement>(null);
// const componentDidUpdate = (prevProps) => {
// const { visible } = props;
// if (!is(media, prevProps.media) && visible === undefined) {
// this.setState({ visible: prevProps.displayMedia !== 'hide_all' && !sensitive || prevProps.displayMedia === 'show_all' });
// } else if (!is(visible, prevProps.visible) && visible !== undefined) {
// setVisible(visible);
// }
// };
const handleOpen: React.MouseEventHandler = (e) => { const handleOpen: React.MouseEventHandler = (e) => {
e.stopPropagation(); e.stopPropagation();
@ -327,18 +310,6 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
onOpenMedia(media, index); onOpenMedia(media, index);
}; };
useEffect(() => {
if (node.current) {
const { offsetWidth } = node.current;
if (cacheWidth) {
cacheWidth(offsetWidth);
}
setWidth(offsetWidth);
}
}, [node.current]);
const getSizeDataSingle = (): SizeData => { const getSizeDataSingle = (): SizeData => {
const w = width || defaultWidth; const w = width || defaultWidth;
const aspectRatio = media.getIn([0, 'meta', 'original', 'aspect']) as number | undefined; const aspectRatio = media.getIn([0, 'meta', 'original', 'aspect']) as number | undefined;
@ -590,6 +561,18 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />; warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
} }
useEffect(() => {
if (node.current) {
const { offsetWidth } = node.current;
if (cacheWidth) {
cacheWidth(offsetWidth);
}
setWidth(offsetWidth);
}
}, [node.current]);
return ( return (
<div className={classNames('media-gallery', { 'media-gallery--compact': compact })} style={sizeData.style} ref={node}> <div className={classNames('media-gallery', { 'media-gallery--compact': compact })} style={sizeData.style} ref={node}>
<div <div