tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust visuals of non-autoplaying GIFV

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 (

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

@ -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>
);