potsda.mn/mastodon
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Try to detect iOS and *not* autoplay any videos

Browse source 
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:
Eugen Rochko 2017-03-07 09:54:57 +01:00
parent 1fb3e8988b
commit 47bf592db7
3 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/javascripts/components/components/media_gallery.jsx
View file

@ -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}

3
app/assets/javascripts/components/components/video_player.jsx
View file

@ -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>
); );
} }

6
app/assets/javascripts/components/is_mobile.jsx
View file

@ -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;
};