From 42d54dc9ea8c6e73008c4400a2d154f0e6bdd384 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 18 Apr 2017 01:57:50 +0200
Subject: [PATCH] Adjust visuals of non-autoplaying GIFV
---
.../components/components/media_gallery.jsx | 34 +++++++++----------
.../features/account/components/header.jsx | 7 ++--
app/assets/stylesheets/components.scss | 31 +++++++++++++++++
.../settings/preferences_controller.rb | 4 +--
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 c6c726a4eb..f334af9cf1 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 c097fbbd69..a660dee377 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 6f407a6d55..b646b0c775 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 f66eb97528..5d8cb76287 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')
--
GitLab