diff --git a/app/assets/javascripts/components/components/media_gallery.jsx b/app/assets/javascripts/components/components/media_gallery.jsx
index c6c726a4e..f334af9cf 100644
--- a/app/assets/javascripts/components/components/media_gallery.jsx
+++ b/app/assets/javascripts/components/components/media_gallery.jsx
@@ -159,24 +159,22 @@ const Item = React.createClass({
/>
);
} else if (attachment.get('type') === 'gifv') {
- if (isIOS() || !this.props.autoPlayGif) {
- return (
-
- );
- } else {
- thumbnail = (
-
- );
- }
+ const autoPlay = !isIOS() && this.props.autoPlayGif;
+
+ thumbnail = (
+
+
+
+ GIF
+
+ );
}
return (
diff --git a/app/assets/javascripts/components/features/account/components/header.jsx b/app/assets/javascripts/components/features/account/components/header.jsx
index c097fbbd6..a660dee37 100644
--- a/app/assets/javascripts/components/features/account/components/header.jsx
+++ b/app/assets/javascripts/components/features/account/components/header.jsx
@@ -58,13 +58,12 @@ const Avatar = React.createClass({
className='account__header__avatar'
target='_blank'
rel='noopener'
- style={{ display: 'block', width: '90px', height: '90px', margin: '0 auto', marginBottom: '10px', borderRadius: `${radius}px`, overflow: 'hidden' }}
+ style={{ display: 'block', width: '90px', height: '90px', margin: '0 auto', marginBottom: '10px', borderRadius: `${radius}px`, overflow: 'hidden', backgroundSize: '90px 90px', backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
onFocus={this.handleMouseOver}
- onBlur={this.handleMouseOut}>
-
-
+ onBlur={this.handleMouseOut}
+ />
}
);
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 6f407a6d5..b646b0c77 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -2315,3 +2315,34 @@ button.icon-button.active i.fa-retweet {
top: 0;
left: 0;
}
+
+.media-gallery__gifv__label {
+ display: block;
+ position: absolute;
+ color: $color5;
+ background: rgba($color8, 0.5);
+ bottom: 6px;
+ left: 6px;
+ padding: 2px 6px;
+ border-radius: 2px;
+ font-size: 11px;
+ font-weight: 600;
+ z-index: 1;
+ pointer-events: none;
+ opacity: 0.9;
+ transition: opacity 0.1s ease;
+}
+
+.media-gallery__gifv {
+ &.autoplay {
+ .media-gallery__gifv__label {
+ display: none;
+ }
+ }
+
+ &:hover {
+ .media-gallery__gifv__label {
+ opacity: 1;
+ }
+ }
+}
diff --git a/app/controllers/settings/preferences_controller.rb b/app/controllers/settings/preferences_controller.rb
index f66eb9752..5d8cb7628 100644
--- a/app/controllers/settings/preferences_controller.rb
+++ b/app/controllers/settings/preferences_controller.rb
@@ -23,8 +23,8 @@ 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'
+ 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, :setting_auto_play_gif))
redirect_to settings_preferences_path, notice: I18n.t('generic.changes_saved_msg')