mastofe

commit: 47bf592db786107f0cdc67b98f55c947acdb5a51
parent: 1fb3e8988b017155a9c23f19afa162b58e11590d
Author: Eugen Rochko <eugen@zeonfederated.com>
Date:   Tue,  7 Mar 2017 09:54:57 +0100

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.

Diffstat:
M
app/assets/javascripts/components/components/media_gallery.jsx
3
++-
M
app/assets/javascripts/components/components/video_player.jsx
3
++-
M
app/assets/javascripts/components/is_mobile.jsx
6
++++++

3 files changed, 10 insertions(+), 2 deletions(-)
diff --git 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
@@ -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
@@ -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;
+};