Browse Source

Add gif auto-play/pause preference

This introduces a new per-user preference called
"Auto-play animated GIFs", which is enabled by default. When a
user disables this setting, gifs in toots become click-to-play.

Previews of animated gifs were changed to display the video play
button so that users can distinguish them from regular images.

This setting also affects account avatars in the detailed account
view, which was changed to use the same hover-to-play mechanism
that is used for animated avatars in timelines.

Fixes #1652
closed-social-glitch-2
Patrick Figel 7 years ago
parent
commit
ffb99325ca
12 changed files with 65 additions and 28 deletions
  1. +23
    -13
      app/assets/javascripts/components/components/media_gallery.jsx
  2. +2
    -1
      app/assets/javascripts/components/components/status.jsx
  3. +2
    -1
      app/assets/javascripts/components/containers/status_container.jsx
  4. +17
    -6
      app/assets/javascripts/components/features/account/components/header.jsx
  5. +2
    -1
      app/assets/javascripts/components/features/status/components/detailed_status.jsx
  6. +6
    -4
      app/assets/javascripts/components/features/status/index.jsx
  7. +3
    -2
      app/controllers/settings/preferences_controller.rb
  8. +4
    -0
      app/models/user.rb
  9. +1
    -0
      app/views/home/initial_state.json.rabl
  10. +3
    -0
      app/views/settings/preferences/show.html.haml
  11. +1
    -0
      config/locales/simple_form.en.yml
  12. +1
    -0
      config/settings.yml

+ 23
- 13
app/assets/javascripts/components/components/media_gallery.jsx View File

@ -78,7 +78,8 @@ const Item = React.createClass({
attachment: ImmutablePropTypes.map.isRequired,
index: React.PropTypes.number.isRequired,
size: React.PropTypes.number.isRequired,
onClick: React.PropTypes.func.isRequired
onClick: React.PropTypes.func.isRequired,
autoPlayGif: React.PropTypes.bool.isRequired
},
mixins: [PureRenderMixin],
@ -158,16 +159,24 @@ const Item = React.createClass({
/>
);
} else if (attachment.get('type') === 'gifv') {
thumbnail = (
<video
src={attachment.get('url')}
onClick={this.handleClick}
autoPlay={!isIOS()}
loop={true}
muted={true}
style={gifvThumbStyle}
/>
);
if (isIOS() || !this.props.autoPlayGif) {
return (
<div key={attachment.get('id')} style={{ ...itemStyle, background: `url(${attachment.get('preview_url')}) no-repeat center`, left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }} onClick={this.handleClick}>
<div style={{ position: 'absolute', top: '50%', left: '50%', fontSize: '36px', transform: 'translate(-50%, -50%)', padding: '5px', borderRadius: '100px', color: 'rgba(255, 255, 255, 0.8)' }}><i className='fa fa-play' /></div>
</div>
);
} else {
thumbnail = (
<video
src={attachment.get('url')}
onClick={this.handleClick}
autoPlay
loop={true}
muted={true}
style={gifvThumbStyle}
/>
);
}
}
return (
@ -192,7 +201,8 @@ const MediaGallery = React.createClass({
media: ImmutablePropTypes.list.isRequired,
height: React.PropTypes.number.isRequired,
onOpenMedia: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
intl: React.PropTypes.object.isRequired,
autoPlayGif: React.PropTypes.bool.isRequired
},
mixins: [PureRenderMixin],
@ -227,7 +237,7 @@ const MediaGallery = React.createClass({
);
} else {
const size = media.take(4).size;
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} />);
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} />);
}
return (

+ 2
- 1
app/assets/javascripts/components/components/status.jsx View File

@ -29,6 +29,7 @@ const Status = React.createClass({
onBlock: React.PropTypes.func,
me: React.PropTypes.number,
boostModal: React.PropTypes.bool,
autoPlayGif: React.PropTypes.bool,
muted: React.PropTypes.bool
},
@ -79,7 +80,7 @@ const Status = React.createClass({
if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
media = <VideoPlayer media={status.getIn(['media_attachments', 0])} sensitive={status.get('sensitive')} onOpenVideo={this.props.onOpenVideo} />;
} else {
media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} />;
media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
}
}

+ 2
- 1
app/assets/javascripts/components/containers/status_container.jsx View File

@ -27,7 +27,8 @@ const makeMapStateToProps = () => {
const mapStateToProps = (state, props) => ({
status: getStatus(state, props.id),
me: state.getIn(['meta', 'me']),
boostModal: state.getIn(['meta', 'boost_modal'])
boostModal: state.getIn(['meta', 'boost_modal']),
autoPlayGif: state.getIn(['meta', 'auto_play_gif'])
});
return mapStateToProps;

+ 17
- 6
app/assets/javascripts/components/features/account/components/header.jsx View File

@ -5,6 +5,7 @@ import escapeTextContentForBrowser from 'escape-html';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import IconButton from '../../../components/icon_button';
import { Motion, spring } from 'react-motion';
import { connect } from 'react-redux';
const messages = defineMessages({
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
@ -12,10 +13,19 @@ const messages = defineMessages({
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' }
});
const makeMapStateToProps = () => {
const mapStateToProps = (state, props) => ({
autoPlayGif: state.getIn(['meta', 'auto_play_gif'])
});
return mapStateToProps;
};
const Avatar = React.createClass({
propTypes: {
account: ImmutablePropTypes.map.isRequired
account: ImmutablePropTypes.map.isRequired,
autoPlayGif: React.PropTypes.bool.isRequired
},
getInitialState () {
@ -37,7 +47,7 @@ const Avatar = React.createClass({
},
render () {
const { account } = this.props;
const { account, autoPlayGif } = this.props;
const { isHovered } = this.state;
return (
@ -53,7 +63,7 @@ const Avatar = React.createClass({
onMouseOut={this.handleMouseOut}
onFocus={this.handleMouseOver}
onBlur={this.handleMouseOut}>
<img src={account.get('avatar')} alt={account.get('acct')} style={{ display: 'block', width: '90px', height: '90px' }} />
<img src={autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')} alt={account.get('acct')} style={{ display: 'block', width: '90px', height: '90px' }} />
</a>
}
</Motion>
@ -68,7 +78,8 @@ const Header = React.createClass({
account: ImmutablePropTypes.map,
me: React.PropTypes.number.isRequired,
onFollow: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
intl: React.PropTypes.object.isRequired,
autoPlayGif: React.PropTypes.bool.isRequired
},
mixins: [PureRenderMixin],
@ -119,7 +130,7 @@ const Header = React.createClass({
return (
<div className='account__header' style={{ backgroundImage: `url(${account.get('header')})` }}>
<div style={{ padding: '20px 10px' }}>
<Avatar account={account} />
<Avatar account={account} autoPlayGif={this.props.autoPlayGif} />
<span style={{ display: 'inline-block', fontSize: '20px', lineHeight: '27px', fontWeight: '500' }} className='account__header__display-name' dangerouslySetInnerHTML={displayNameHTML} />
<span className='account__header__username' style={{ fontSize: '14px', fontWeight: '400', display: 'block', marginBottom: '10px' }}>@{account.get('acct')} {lockedIcon}</span>
@ -134,4 +145,4 @@ const Header = React.createClass({
});
export default injectIntl(Header);
export default connect(makeMapStateToProps)(injectIntl(Header));

+ 2
- 1
app/assets/javascripts/components/features/status/components/detailed_status.jsx View File

@ -19,6 +19,7 @@ const DetailedStatus = React.createClass({
status: ImmutablePropTypes.map.isRequired,
onOpenMedia: React.PropTypes.func.isRequired,
onOpenVideo: React.PropTypes.func.isRequired,
autoPlayGif: React.PropTypes.bool,
},
mixins: [PureRenderMixin],
@ -42,7 +43,7 @@ const DetailedStatus = React.createClass({
if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
media = <VideoPlayer sensitive={status.get('sensitive')} media={status.getIn(['media_attachments', 0])} width={300} height={150} onOpenVideo={this.props.onOpenVideo} autoplay />;
} else {
media = <MediaGallery sensitive={status.get('sensitive')} media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} />;
media = <MediaGallery sensitive={status.get('sensitive')} media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
}
} else {
media = <CardContainer statusId={status.get('id')} />;

+ 6
- 4
app/assets/javascripts/components/features/status/index.jsx View File

@ -39,7 +39,8 @@ const makeMapStateToProps = () => {
ancestorsIds: state.getIn(['timelines', 'ancestors', Number(props.params.statusId)]),
descendantsIds: state.getIn(['timelines', 'descendants', Number(props.params.statusId)]),
me: state.getIn(['meta', 'me']),
boostModal: state.getIn(['meta', 'boost_modal'])
boostModal: state.getIn(['meta', 'boost_modal']),
autoPlayGif: state.getIn(['meta', 'auto_play_gif'])
});
return mapStateToProps;
@ -57,7 +58,8 @@ const Status = React.createClass({
ancestorsIds: ImmutablePropTypes.list,
descendantsIds: ImmutablePropTypes.list,
me: React.PropTypes.number,
boostModal: React.PropTypes.bool
boostModal: React.PropTypes.bool,
autoPlayGif: React.PropTypes.bool
},
mixins: [PureRenderMixin],
@ -126,7 +128,7 @@ const Status = React.createClass({
render () {
let ancestors, descendants;
const { status, ancestorsIds, descendantsIds, me } = this.props;
const { status, ancestorsIds, descendantsIds, me, autoPlayGif } = this.props;
if (status === null) {
return (
@ -155,7 +157,7 @@ const Status = React.createClass({
<div className='scrollable'>
{ancestors}
<DetailedStatus status={status} me={me} onOpenVideo={this.handleOpenVideo} onOpenMedia={this.handleOpenMedia} />
<DetailedStatus status={status} autoPlayGif={autoPlayGif} me={me} onOpenVideo={this.handleOpenVideo} onOpenMedia={this.handleOpenMedia} />
<ActionBar status={status} me={me} onReply={this.handleReplyClick} onFavourite={this.handleFavouriteClick} onReblog={this.handleReblogClick} onDelete={this.handleDeleteClick} onMention={this.handleMentionClick} onReport={this.handleReport} />
{descendants}

+ 3
- 2
app/controllers/settings/preferences_controller.rb View File

@ -24,8 +24,9 @@ class Settings::PreferencesController < ApplicationController
current_user.settings['default_privacy'] = user_params[:setting_default_privacy]
current_user.settings['boost_modal'] = user_params[:setting_boost_modal] == '1'
current_user.settings['auto_play_gif'] = user_params[:setting_auto_play_gif] == '1'
if current_user.update(user_params.except(:notification_emails, :interactions, :setting_default_privacy, :setting_boost_modal))
if current_user.update(user_params.except(:notification_emails, :interactions, :setting_default_privacy, :setting_boost_modal, :setting_auto_play_gif))
redirect_to settings_preferences_path, notice: I18n.t('generic.changes_saved_msg')
else
render action: :show
@ -35,6 +36,6 @@ class Settings::PreferencesController < ApplicationController
private
def user_params
params.require(:user).permit(:locale, :setting_default_privacy, :setting_boost_modal, notification_emails: [:follow, :follow_request, :reblog, :favourite, :mention, :digest], interactions: [:must_be_follower, :must_be_following])
params.require(:user).permit(:locale, :setting_default_privacy, :setting_boost_modal, :setting_auto_play_gif, notification_emails: [:follow, :follow_request, :reblog, :favourite, :mention, :digest], interactions: [:must_be_follower, :must_be_following])
end
end

+ 4
- 0
app/models/user.rb View File

@ -32,4 +32,8 @@ class User < ApplicationRecord
def setting_boost_modal
settings.boost_modal
end
def setting_auto_play_gif
settings.auto_play_gif
end
end

+ 1
- 0
app/views/home/initial_state.json.rabl View File

@ -9,6 +9,7 @@ node(:meta) do
me: current_account.id,
admin: @admin.try(:id),
boost_modal: current_account.user.setting_boost_modal,
auto_play_gif: current_account.user.setting_auto_play_gif,
}
end

+ 3
- 0
app/views/settings/preferences/show.html.haml View File

@ -25,5 +25,8 @@
.fields-group
= f.input :setting_boost_modal, as: :boolean, wrapper: :with_label
.fields-group
= f.input :setting_auto_play_gif, as: :boolean, wrapper: :with_label
.actions
= f.button :button, t('generic.save_changes'), type: :submit

+ 1
- 0
config/locales/simple_form.en.yml View File

@ -28,6 +28,7 @@ en:
note: Bio
otp_attempt: Two-factor code
password: Password
setting_auto_play_gif: Auto-play animated GIFs
setting_boost_modal: Show confirmation dialog before boosting
setting_default_privacy: Post privacy
severity: Severity

+ 1
- 0
config/settings.yml View File

@ -15,6 +15,7 @@ defaults: &defaults
open_registrations: true
closed_registrations_message: ''
boost_modal: false
auto_play_gif: true
notification_emails:
follow: false
reblog: false

Loading…
Cancel
Save