Try to detect iOS and *not* autoplay any videos
Technically the check for iOS from components is a side effect, because it's neither in state nor props, but the user agent does not change, so I think that's okay.
This commit is contained in:
parent
250beb1971
commit
ed21f43271
3 changed files with 10 additions and 2 deletions
|
@ -2,6 +2,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
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';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' }
|
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' }
|
||||||
|
@ -161,7 +162,7 @@ const Item = React.createClass({
|
||||||
<video
|
<video
|
||||||
src={attachment.get('url')}
|
src={attachment.get('url')}
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
autoPlay={true}
|
autoPlay={!isIOS()}
|
||||||
loop={true}
|
loop={true}
|
||||||
muted={true}
|
muted={true}
|
||||||
style={gifvThumbStyle}
|
style={gifvThumbStyle}
|
||||||
|
|
|
@ -2,6 +2,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
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';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' },
|
toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' },
|
||||||
|
@ -197,7 +198,7 @@ const VideoPlayer = React.createClass({
|
||||||
<div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: `${width}px`, height: `${height}px`, boxSizing: 'border-box', background: '#000', position: 'relative' }}>
|
<div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: `${width}px`, height: `${height}px`, boxSizing: 'border-box', background: '#000', position: 'relative' }}>
|
||||||
{spoilerButton}
|
{spoilerButton}
|
||||||
{muteButton}
|
{muteButton}
|
||||||
<video ref={this.setRef} src={media.get('url')} autoPlay={true} loop={true} muted={this.state.muted} style={videoStyle} onClick={this.handleVideoClick} />
|
<video ref={this.setRef} src={media.get('url')} autoPlay={!isIOS()} loop={true} muted={this.state.muted} style={videoStyle} onClick={this.handleVideoClick} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,3 +3,9 @@ const LAYOUT_BREAKPOINT = 1024;
|
||||||
export function isMobile(width) {
|
export function isMobile(width) {
|
||||||
return width <= LAYOUT_BREAKPOINT;
|
return width <= LAYOUT_BREAKPOINT;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
|
||||||
|
|
||||||
|
export function isIOS() {
|
||||||
|
return iOS;
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in a new issue