cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Adjust visuals of non-autoplaying GIFV

This commit is contained in:
Eugen Rochko 2017-04-18 01:57:50 +02:00
parent 57d784f1e4
commit 42d54dc9ea
4 changed files with 52 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/assets/javascripts/components/components/media_gallery.jsx
View File

@ -159,25 +159,23 @@ const Item = React.createClass({
/> />
); );
} else if (attachment.get('type') === 'gifv') { } else if (attachment.get('type') === 'gifv') {
if (isIOS() || !this.props.autoPlayGif) { const autoPlay = !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 = ( thumbnail = (
<div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }} className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}>
<video <video
src={attachment.get('url')} src={attachment.get('url')}
onClick={this.handleClick} onClick={this.handleClick}
autoPlay autoPlay={autoPlay}
loop={true} loop={true}
muted={true} muted={true}
style={gifvThumbStyle} style={gifvThumbStyle}
/> />
<span className='media-gallery__gifv__label'>GIF</span>
</div>
); );
} }
}
return ( return (
<div key={attachment.get('id')} style={{ ...itemStyle, left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}> <div key={attachment.get('id')} style={{ ...itemStyle, left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>

7
app/assets/javascripts/components/features/account/components/header.jsx
View File

@ -58,13 +58,12 @@ const Avatar = React.createClass({
className='account__header__avatar' className='account__header__avatar'
target='_blank' target='_blank'
rel='noopener' 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} onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut} onMouseOut={this.handleMouseOut}
onFocus={this.handleMouseOver} onFocus={this.handleMouseOver}
onBlur={this.handleMouseOut}> 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>
} }
</Motion> </Motion>
); );

31
app/assets/stylesheets/components.scss
View File

@ -2315,3 +2315,34 @@ button.icon-button.active i.fa-retweet {
top: 0; top: 0;
left: 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;
}
}
}