fix gif autoplay on iOS (#21422)

th-downstream
James Adney 2 years ago committed by GitHub
parent e0d03fd3cb
commit 0a302f7673

@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
import { is } from 'immutable'; import { is } from 'immutable';
import IconButton from './icon_button'; import IconButton from './icon_button';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { isIOS } from '../is_mobile';
import classNames from 'classnames'; import classNames from 'classnames';
import { autoPlayGif, cropImages, displayMedia, useBlurhash } from '../initial_state'; import { autoPlayGif, cropImages, displayMedia, useBlurhash } from '../initial_state';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
@ -181,7 +180,7 @@ class Item extends React.PureComponent {
</a> </a>
); );
} else if (attachment.get('type') === 'gifv') { } else if (attachment.get('type') === 'gifv') {
const autoPlay = !isIOS() && this.getAutoPlay(); const autoPlay = this.getAutoPlay();
thumbnail = ( thumbnail = (
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}> <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
@ -195,6 +194,7 @@ class Item extends React.PureComponent {
onMouseEnter={this.handleMouseEnter} onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave} onMouseLeave={this.handleMouseLeave}
autoPlay={autoPlay} autoPlay={autoPlay}
playsInline
loop loop
muted muted
/> />

@ -2,7 +2,6 @@ import Blurhash from 'mastodon/components/blurhash';
import classNames from 'classnames'; import classNames from 'classnames';
import Icon from 'mastodon/components/icon'; import Icon from 'mastodon/components/icon';
import { autoPlayGif, displayMedia, useBlurhash } from 'mastodon/initial_state'; import { autoPlayGif, displayMedia, useBlurhash } from 'mastodon/initial_state';
import { isIOS } from 'mastodon/is_mobile';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
@ -109,7 +108,8 @@ export default class MediaItem extends ImmutablePureComponent {
src={attachment.get('url')} src={attachment.get('url')}
onMouseEnter={this.handleMouseEnter} onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave} onMouseLeave={this.handleMouseLeave}
autoPlay={!isIOS() && autoPlayGif} autoPlay={autoPlayGif}
playsInline
loop loop
muted muted
/> />

Loading…
Cancel
Save