@@ -167,6 +173,7 @@ class Item extends PureComponent {
onClick={this.handleClick}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
+ onLoadedData={this.handleImageLoad}
autoPlay={autoPlay}
playsInline
loop
diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx
index 6c32fd245d7..46926b4aaea 100644
--- a/app/javascript/mastodon/components/status.jsx
+++ b/app/javascript/mastodon/components/status.jsx
@@ -449,7 +449,25 @@ class Status extends ImmutablePureComponent {
} else if (status.get('media_attachments').size > 0) {
const language = status.getIn(['translation', 'language']) || status.get('language');
- if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
+ if (['image', 'gifv'].includes(status.getIn(['media_attachments', 0, 'type'])) || status.get('media_attachments').size > 1) {
+ media = (
+
+ {Component => (
+
+ )}
+
+ );
+ } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
const attachment = status.getIn(['media_attachments', 0]);
const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
@@ -501,24 +519,6 @@ class Status extends ImmutablePureComponent {
)}
);
- } else {
- media = (
-
- {Component => (
-
- )}
-
- );
}
} else if (status.get('spoiler_text').length === 0 && status.get('card')) {
media = (
diff --git a/app/javascript/mastodon/features/account_gallery/components/media_item.jsx b/app/javascript/mastodon/features/account_gallery/components/media_item.jsx
deleted file mode 100644
index 087e7757533..00000000000
--- a/app/javascript/mastodon/features/account_gallery/components/media_item.jsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import PropTypes from 'prop-types';
-
-import classNames from 'classnames';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import AudiotrackIcon from '@/material-icons/400-24px/music_note.svg?react';
-import PlayArrowIcon from '@/material-icons/400-24px/play_arrow.svg?react';
-import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
-import { Blurhash } from 'mastodon/components/blurhash';
-import { Icon } from 'mastodon/components/icon';
-import { autoPlayGif, displayMedia, useBlurhash } from 'mastodon/initial_state';
-
-export default class MediaItem extends ImmutablePureComponent {
-
- static propTypes = {
- attachment: ImmutablePropTypes.map.isRequired,
- displayWidth: PropTypes.number.isRequired,
- onOpenMedia: PropTypes.func.isRequired,
- };
-
- state = {
- visible: displayMedia !== 'hide_all' && !this.props.attachment.getIn(['status', 'sensitive']) || displayMedia === 'show_all',
- loaded: false,
- };
-
- handleImageLoad = () => {
- this.setState({ loaded: true });
- };
-
- handleMouseEnter = e => {
- if (this.hoverToPlay()) {
- e.target.play();
- }
- };
-
- handleMouseLeave = e => {
- if (this.hoverToPlay()) {
- e.target.pause();
- e.target.currentTime = 0;
- }
- };
-
- hoverToPlay () {
- return !autoPlayGif && ['gifv', 'video'].indexOf(this.props.attachment.get('type')) !== -1;
- }
-
- handleClick = e => {
- if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
- e.preventDefault();
-
- if (this.state.visible) {
- this.props.onOpenMedia(this.props.attachment);
- } else {
- this.setState({ visible: true });
- }
- }
- };
-
- render () {
- const { attachment, displayWidth } = this.props;
- const { visible, loaded } = this.state;
-
- const width = `${Math.floor((displayWidth - 4) / 3) - 4}px`;
- const height = width;
- const status = attachment.get('status');
- const title = status.get('spoiler_text') || attachment.get('description');
-
- let thumbnail, label, icon, content;
-
- if (!visible) {
- icon = (
-
-
-
- );
- } else {
- if (['audio', 'video'].includes(attachment.get('type'))) {
- content = (
-
)
- );
-
- if (attachment.get('type') === 'audio') {
- label =
;
- } else {
- label =
;
- }
- } else if (attachment.get('type') === 'image') {
- const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
- const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;
- const x = ((focusX / 2) + .5) * 100;
- const y = ((focusY / -2) + .5) * 100;
-
- content = (
-
})
- );
- } else if (attachment.get('type') === 'gifv') {
- content = (
-
- );
-
- label = 'GIF';
- }
-
- thumbnail = (
-
- {content}
-
- {label && (
-
- {label}
-
- )}
-
- );
- }
-
- return (
-
- );
- }
-
-}
diff --git a/app/javascript/mastodon/features/account_gallery/components/media_item.tsx b/app/javascript/mastodon/features/account_gallery/components/media_item.tsx
new file mode 100644
index 00000000000..1a294a74a05
--- /dev/null
+++ b/app/javascript/mastodon/features/account_gallery/components/media_item.tsx
@@ -0,0 +1,197 @@
+import { useState, useCallback } from 'react';
+
+import classNames from 'classnames';
+
+import HeadphonesIcon from '@/material-icons/400-24px/headphones-fill.svg?react';
+import MovieIcon from '@/material-icons/400-24px/movie-fill.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+import { Blurhash } from 'mastodon/components/blurhash';
+import { Icon } from 'mastodon/components/icon';
+import { formatTime } from 'mastodon/features/video';
+import { autoPlayGif, displayMedia, useBlurhash } from 'mastodon/initial_state';
+import type { Status, MediaAttachment } from 'mastodon/models/status';
+
+export const MediaItem: React.FC<{
+ attachment: MediaAttachment;
+ onOpenMedia: (arg0: MediaAttachment) => void;
+}> = ({ attachment, onOpenMedia }) => {
+ const [visible, setVisible] = useState(
+ (displayMedia !== 'hide_all' &&
+ !attachment.getIn(['status', 'sensitive'])) ||
+ displayMedia === 'show_all',
+ );
+ const [loaded, setLoaded] = useState(false);
+
+ const handleImageLoad = useCallback(() => {
+ setLoaded(true);
+ }, [setLoaded]);
+
+ const handleMouseEnter = useCallback(
+ (e: React.MouseEvent
) => {
+ if (e.target instanceof HTMLVideoElement) {
+ void e.target.play();
+ }
+ },
+ [],
+ );
+
+ const handleMouseLeave = useCallback(
+ (e: React.MouseEvent) => {
+ if (e.target instanceof HTMLVideoElement) {
+ e.target.pause();
+ e.target.currentTime = 0;
+ }
+ },
+ [],
+ );
+
+ const handleClick = useCallback(
+ (e: React.MouseEvent) => {
+ if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+ e.preventDefault();
+
+ if (visible) {
+ onOpenMedia(attachment);
+ } else {
+ setVisible(true);
+ }
+ }
+ },
+ [attachment, visible, onOpenMedia, setVisible],
+ );
+
+ const status = attachment.get('status') as Status;
+ const description = (attachment.getIn(['translation', 'description']) ||
+ attachment.get('description')) as string | undefined;
+ const previewUrl = attachment.get('preview_url') as string;
+ const fullUrl = attachment.get('url') as string;
+ const avatarUrl = status.getIn(['account', 'avatar_static']) as string;
+ const lang = status.get('language') as string;
+ const blurhash = attachment.get('blurhash') as string;
+ const statusId = status.get('id') as string;
+ const acct = status.getIn(['account', 'acct']) as string;
+ const type = attachment.get('type') as string;
+
+ let thumbnail;
+
+ const badges = [];
+
+ if (description && description.length > 0) {
+ badges.push(
+
+ ALT
+ ,
+ );
+ }
+
+ if (!visible) {
+ thumbnail = (
+
+
+
+ );
+ } else if (type === 'audio') {
+ thumbnail = (
+ <>
+ 
+
+
+
+
+
+ );
+ } else if (type === 'image') {
+ const focusX = (attachment.getIn(['meta', 'focus', 'x']) || 0) as number;
+ const focusY = (attachment.getIn(['meta', 'focus', 'y']) || 0) as number;
+ const x = (focusX / 2 + 0.5) * 100;
+ const y = (focusY / -2 + 0.5) * 100;
+
+ thumbnail = (
+ 
+ );
+ } else if (['video', 'gifv'].includes(type)) {
+ const duration = attachment.getIn([
+ 'meta',
+ 'original',
+ 'duration',
+ ]) as number;
+
+ thumbnail = (
+
+
+
+ {type === 'video' && (
+
+
+
+ )}
+