From cf3fa1e814c59fd25008b56a976dbc67bfc0efd0 Mon Sep 17 00:00:00 2001 From: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com> Date: Sun, 16 Apr 2023 23:09:04 +0900 Subject: [PATCH] Rewrite GIFV component with React hooks (#24552) --- app/javascript/mastodon/components/gifv.jsx | 76 ------------------- app/javascript/mastodon/components/gifv.tsx | 68 +++++++++++++++++ .../ui/components/focal_point_modal.jsx | 2 +- .../features/ui/components/media_modal.jsx | 2 +- 4 files changed, 70 insertions(+), 78 deletions(-) delete mode 100644 app/javascript/mastodon/components/gifv.jsx create mode 100644 app/javascript/mastodon/components/gifv.tsx diff --git a/app/javascript/mastodon/components/gifv.jsx b/app/javascript/mastodon/components/gifv.jsx deleted file mode 100644 index 1ce7e7c29b..0000000000 --- a/app/javascript/mastodon/components/gifv.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -export default class GIFV extends React.PureComponent { - - static propTypes = { - src: PropTypes.string.isRequired, - alt: PropTypes.string, - lang: PropTypes.string, - width: PropTypes.number, - height: PropTypes.number, - onClick: PropTypes.func, - }; - - state = { - loading: true, - }; - - handleLoadedData = () => { - this.setState({ loading: false }); - }; - - componentWillReceiveProps (nextProps) { - if (nextProps.src !== this.props.src) { - this.setState({ loading: true }); - } - } - - handleClick = e => { - const { onClick } = this.props; - - if (onClick) { - e.stopPropagation(); - onClick(); - } - }; - - render () { - const { src, width, height, alt, lang } = this.props; - const { loading } = this.state; - - return ( -
- {loading && ( - - )} - -
- ); - } - -} diff --git a/app/javascript/mastodon/components/gifv.tsx b/app/javascript/mastodon/components/gifv.tsx new file mode 100644 index 0000000000..8968170c5f --- /dev/null +++ b/app/javascript/mastodon/components/gifv.tsx @@ -0,0 +1,68 @@ +import React, { useCallback, useState } from 'react'; + +type Props = { + src: string; + key: string; + alt?: string; + lang?: string; + width: number; + height: number; + onClick?: () => void; +} + +export const GIFV: React.FC = ({ + src, + alt, + lang, + width, + height, + onClick, +})=> { + const [loading, setLoading] = useState(true); + + const handleLoadedData: React.ReactEventHandler = useCallback(() => { + setLoading(false); + }, [setLoading]); + + const handleClick: React.MouseEventHandler = useCallback((e) => { + if (onClick) { + e.stopPropagation(); + onClick(); + } + }, [onClick]); + + return ( +
+ {loading && ( + + )} + +
+ ); +}; + +export default GIFV; diff --git a/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx b/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx index 11c4c52375..2a1e4c8bbc 100644 --- a/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx +++ b/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx @@ -383,7 +383,7 @@ class FocalPointModal extends ImmutablePureComponent { {focals && (
{media.get('type') === 'image' && } - {media.get('type') === 'gifv' && } + {media.get('type') === 'gifv' && }
diff --git a/app/javascript/mastodon/features/ui/components/media_modal.jsx b/app/javascript/mastodon/features/ui/components/media_modal.jsx index 52bd754535..ec6ddc0e11 100644 --- a/app/javascript/mastodon/features/ui/components/media_modal.jsx +++ b/app/javascript/mastodon/features/ui/components/media_modal.jsx @@ -186,7 +186,7 @@ class MediaModal extends ImmutablePureComponent { src={image.get('url')} width={width} height={height} - key={image.get('preview_url')} + key={image.get('url')} alt={image.get('description')} lang={language} onClick={this.toggleNavigation}