diff --git a/app/assets/javascripts/components/components/media_gallery.jsx b/app/assets/javascripts/components/components/media_gallery.jsx index cd23940230f0c76c43b839a87a4525f9542d63fa..72b5e977f6a0c609adc7ac559571612a350aecd1 100644 --- a/app/assets/javascripts/components/components/media_gallery.jsx +++ b/app/assets/javascripts/components/components/media_gallery.jsx @@ -2,6 +2,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import IconButton from './icon_button'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { isIOS } from '../is_mobile'; const messages = defineMessages({ toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' } @@ -161,7 +162,7 @@ const Item = React.createClass({ <video src={attachment.get('url')} onClick={this.handleClick} - autoPlay={true} + autoPlay={!isIOS()} loop={true} muted={true} style={gifvThumbStyle} diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx index df09da9124cc345519ac80f84bbf2f827850f087..92597a2eca3acc72461513c264cf3299b72bcfca 100644 --- a/app/assets/javascripts/components/components/video_player.jsx +++ b/app/assets/javascripts/components/components/video_player.jsx @@ -2,6 +2,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import IconButton from './icon_button'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { isIOS } from '../is_mobile'; const messages = defineMessages({ 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' }}> {spoilerButton} {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> ); } diff --git a/app/assets/javascripts/components/is_mobile.jsx b/app/assets/javascripts/components/is_mobile.jsx index eaa6221e41ed935a23bc238338e2bf0e5bddc867..992e63727a6c061730b3c8d85bc520bb4293aac4 100644 --- a/app/assets/javascripts/components/is_mobile.jsx +++ b/app/assets/javascripts/components/is_mobile.jsx @@ -3,3 +3,9 @@ const LAYOUT_BREAKPOINT = 1024; export function isMobile(width) { return width <= LAYOUT_BREAKPOINT; }; + +const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; + +export function isIOS() { + return iOS; +};