diff options
4 files changed, 52 insertions, 24 deletions
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 ( - <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} - /> - ); - } + const autoPlay = !isIOS() && this.props.autoPlayGif; + + thumbnail = ( + <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }} className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}> + <video + src={attachment.get('url')} + onClick={this.handleClick} + autoPlay={autoPlay} + loop={true} + muted={true} + style={gifvThumbStyle} + /> + + <span className='media-gallery__gifv__label'>GIF</span> + </div> + ); } 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}> - <img src={autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')} alt={account.get('acct')} style={{ display: 'block', width: '90px', height: '90px' }} /> - </a> + onBlur={this.handleMouseOut} + /> } </Motion> ); 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') |