mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Merge commit '853a68cd5479ffc5f7a14a93a065db8f08bfe424' into develop

Browse Source 
autoPlayGif fixes
merge-requests/80/merge
Alex Gleason 4 years ago
parent 473c2f9b21 853a68cd54
commit b70ec4e0e3
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
18 changed files with 236 additions and 206 deletions
Show Stats Download Patch File Download Diff File

26
app/soapbox/components/__tests__/__snapshots__/avatar-test.js.snap
Unescape View File

@ -2,30 +2,36 @@
exports[`<Avatar /> Autoplay renders an animated avatar 1`] = `
<div
className="account__avatar"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
className="account__avatar still-image"
style={
Object {
"backgroundImage": "url(/animated/alice.gif)",
"height": "100px",
"width": "100px",
}
}
/>
>
<img
alt=""
onLoad={[Function]}
src="/animated/alice.gif"
/>
</div>
`;
exports[`<Avatar /> Still renders a still avatar 1`] = `
<div
className="account__avatar"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
className="account__avatar still-image"
style={
Object {
"backgroundImage": "url(/static/alice.jpg)",
"height": "100px",
"width": "100px",
}
}
/>
>
<img
alt=""
onLoad={[Function]}
src="/animated/alice.gif"
/>
</div>
`;

32
app/soapbox/components/__tests__/__snapshots__/avatar_overlay-test.js.snap
Unescape View File

@ -5,20 +5,24 @@ exports[`<AvatarOverlay renders a overlay avatar 1`] = `
className="account__avatar-overlay"
>
<div
className="account__avatar-overlay-base"
style={
Object {
"backgroundImage": "url(/static/alice.jpg)",
}
}
/>
className="account__avatar-overlay-base still-image"
style={Object {}}
>
<img
alt=""
onLoad={[Function]}
src="/animated/alice.gif"
/>
</div>
<div
className="account__avatar-overlay-overlay"
style={
Object {
"backgroundImage": "url(/static/eve.jpg)",
}
}
/>
className="account__avatar-overlay-overlay still-image"
style={Object {}}
>
<img
alt=""
onLoad={[Function]}
src="/animated/eve.gif"
/>
</div>
</div>
`;

8
app/soapbox/components/__tests__/avatar-test.js
Unescape View File

@ -1,7 +1,7 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { fromJS } from 'immutable';
import { Avatar } from '../avatar';
import { createComponent } from 'soapbox/test_helpers';
import Avatar from '../avatar';
describe('<Avatar />', () => {
const account = fromJS({
@ -16,7 +16,7 @@ describe('<Avatar />', () => {
describe('Autoplay', () => {
it('renders an animated avatar', () => {
const component = renderer.create(<Avatar account={account} animate size={size} />);
const component = createComponent(<Avatar account={account} animate size={size} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
@ -25,7 +25,7 @@ describe('<Avatar />', () => {
describe('Still', () => {
it('renders a still avatar', () => {
const component = renderer.create(<Avatar account={account} size={size} />);
const component = createComponent(<Avatar account={account} size={size} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();

6
app/soapbox/components/__tests__/avatar_overlay-test.js
Unescape View File

@ -1,7 +1,7 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { fromJS } from 'immutable';
import { AvatarOverlay } from '../avatar_overlay';
import { createComponent } from 'soapbox/test_helpers';
import AvatarOverlay from '../avatar_overlay';
describe('<AvatarOverlay', () => {
const account = fromJS({
@ -21,7 +21,7 @@ describe('<AvatarOverlay', () => {
});
it('renders a overlay avatar', () => {
const component = renderer.create(<AvatarOverlay account={account} friend={friend} />);
const component = createComponent(<AvatarOverlay account={account} friend={friend} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();

53
app/soapbox/components/avatar.js
Unescape View File

@ -1,54 +1,25 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { getSettings } from 'soapbox/actions/settings';
import classNames from 'classnames';
import StillImage from 'soapbox/components/still_image';
const mapStateToProps = state => ({
animate: getSettings(state).get('autoPlayGif'),
});
export class Avatar extends React.PureComponent {
export default class Avatar extends React.PureComponent {
static propTypes = {
account: ImmutablePropTypes.map,
size: PropTypes.number,
style: PropTypes.object,
inline: PropTypes.bool,
animate: PropTypes.bool,
};
static defaultProps = {
inline: false,
};
state = {
hovering: false,
};
handleMouseEnter = () => {
if (this.props.animate) return;
this.setState({ hovering: true });
}
handleMouseLeave = () => {
if (this.props.animate) return;
this.setState({ hovering: false });
}
render() {
const { account, size, animate, inline } = this.props;
const { account, size, inline } = this.props;
if (!account) return null;
const { hovering } = this.state;
const src = account.get('avatar');
const staticSrc = account.get('avatar_static');
let className = 'account__avatar';
if (inline) {
className = className + ' account__avatar-inline';
}
// : TODO : remove inline and change all avatars to be sized using css
const style = !size ? {} : {
@ -56,22 +27,14 @@ export class Avatar extends React.PureComponent {
height: `${size}px`,
};
if (hovering || animate) {
style.backgroundImage = `url(${src})`;
} else {
style.backgroundImage = `url(${staticSrc})`;
}
return (
<div
className={className}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
<StillImage
className={classNames('account__avatar', { 'account__avatar-inline': inline })}
style={style}
src={account.get('avatar')}
alt=''
/>
);
}
}
export default connect(mapStateToProps)(Avatar);

16
app/soapbox/components/avatar_composite.js
Unescape View File

@ -1,24 +1,16 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { getSettings } from 'soapbox/actions/settings';
import StillImage from 'soapbox/components/still_image';
const mapStateToProps = state => ({
animate: getSettings(state).get('autoPlayGif'),
});
export default @connect(mapStateToProps)
class AvatarComposite extends React.PureComponent {
export default class AvatarComposite extends React.PureComponent {
static propTypes = {
accounts: ImmutablePropTypes.list.isRequired,
animate: PropTypes.bool,
size: PropTypes.number.isRequired,
};
renderItem(account, size, index) {
const { animate } = this.props;
let width = 50;
let height = 100;
@ -76,12 +68,10 @@ class AvatarComposite extends React.PureComponent {
bottom: bottom,
width: `${width}%`,
height: `${height}%`,
backgroundSize: 'cover',
backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`,
};
return (
<div key={account.get('id')} style={style} />
<StillImage key={account.get('id')} src={account.get('avatar')} style={style} />
);
}

27
app/soapbox/components/avatar_overlay.js
Unescape View File

@ -1,40 +1,23 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { getSettings } from 'soapbox/actions/settings';
import StillImage from 'soapbox/components/still_image';
const mapStateToProps = state => ({
animate: getSettings(state).get('autoPlayGif'),
});
export class AvatarOverlay extends React.PureComponent {
export default class AvatarOverlay extends React.PureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
friend: ImmutablePropTypes.map.isRequired,
animate: PropTypes.bool,
};
render() {
const { account, friend, animate } = this.props;
const baseStyle = {
backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`,
};
const overlayStyle = {
backgroundImage: `url(${friend.get(animate ? 'avatar' : 'avatar_static')})`,
};
const { account, friend } = this.props;
return (
<div className='account__avatar-overlay'>
<div className='account__avatar-overlay-base' style={baseStyle} />
<div className='account__avatar-overlay-overlay' style={overlayStyle} />
<StillImage src={account.get('avatar')} className='account__avatar-overlay-base' />
<StillImage src={friend.get('avatar')} className='account__avatar-overlay-overlay' />
</div>
);
}
}
export default connect(mapStateToProps)(AvatarOverlay);

45
app/soapbox/components/media_gallery.js
Unescape View File

@ -11,6 +11,7 @@ import { decode } from 'blurhash';
import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
import { Map as ImmutableMap } from 'immutable';
import { getSettings } from 'soapbox/actions/settings';
import StillImage from 'soapbox/components/still_image';
const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
@ -60,8 +61,7 @@ class Item extends React.PureComponent {
hoverToPlay() {
const { attachment, autoPlayGif } = this.props;
return !autoPlayGif &&
(attachment.get('type') === 'gifv' || attachment.getIn(['pleroma', 'mime_type']) === 'image/gif');
return !autoPlayGif && attachment.get('type') === 'gifv';
}
handleClick = (e) => {
@ -72,7 +72,7 @@ class Item extends React.PureComponent {
e.preventDefault();
} else {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
if (!this.canvas && this.hoverToPlay()) {
if (this.hoverToPlay()) {
e.target.pause();
e.target.currentTime = 0;
}
@ -112,23 +112,12 @@ class Item extends React.PureComponent {
this.canvas = c;
}
setImageRef = i => {
this.image = i;
}
handleImageLoad = () => {
this.setState({ loaded: true });
if (this.hoverToPlay()) {
const image = this.image;
const canvas = this.canvas;
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
canvas.getContext('2d').drawImage(image, 0, 0);
}
}
render() {
const { attachment, standalone, displayWidth, visible, dimensions, autoPlayGif } = this.props;
const { attachment, standalone, visible, dimensions, autoPlayGif } = this.props;
let width = 100;
let height = '100%';
@ -162,39 +151,17 @@ class Item extends React.PureComponent {
);
} else if (attachment.get('type') === 'image') {
const previewUrl = attachment.get('preview_url');
const previewWidth = attachment.getIn(['meta', 'small', 'width']);
const originalUrl = attachment.get('url');
const originalWidth = attachment.getIn(['meta', 'original', 'width']);
const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number';
const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null;
const sizes = hasSize && (displayWidth > 0) ? `${displayWidth * (width / 100)}px` : null;
const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;
const x = ((focusX / 2) + .5) * 100;
const y = ((focusY / -2) + .5) * 100;
thumbnail = (
<a
className={classNames('media-gallery__item-thumbnail', { 'media-gallery__item-thumbnail--play-on-hover': this.hoverToPlay() })}
className='media-gallery__item-thumbnail'
href={attachment.get('remote_url') || originalUrl}
onClick={this.handleClick}
target='_blank'
>
<img
src={previewUrl}
srcSet={srcSet}
sizes={sizes}
alt={attachment.get('description')}
title={attachment.get('description')}
style={{ objectPosition: `${x}% ${y}%` }}
onLoad={this.handleImageLoad}
ref={this.setImageRef}
/>
{this.hoverToPlay() && <canvas ref={this.setCanvasRef} style={{ objectPosition: `${x}% ${y}%` }} />}
<StillImage src={previewUrl} alt={attachment.get('description')} />
</a>
);
} else if (attachment.get('type') === 'gifv') {

63
app/soapbox/components/still_image.js
Unescape View File

@ -0,0 +1,63 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getSettings } from 'soapbox/actions/settings';
import classNames from 'classnames';
const mapStateToProps = state => ({
autoPlayGif: getSettings(state).get('autoPlayGif'),
});
export default @connect(mapStateToProps)
class StillImage extends React.PureComponent {
static propTypes = {
alt: PropTypes.string,
autoPlayGif: PropTypes.bool.isRequired,
className: PropTypes.node,
src: PropTypes.string.isRequired,
style: PropTypes.object,
};
static defaultProps = {
alt: '',
className: '',
style: {},
}
hoverToPlay() {
const { autoPlayGif, src } = this.props;
return !autoPlayGif && (src.endsWith('.gif') || src.startsWith('blob:'));
}
setCanvasRef = c => {
this.canvas = c;
}
setImageRef = i => {
this.img = i;
}
handleImageLoad = () => {
if (this.hoverToPlay()) {
const img = this.img;
const canvas = this.canvas;
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext('2d').drawImage(img, 0, 0);
}
}
render() {
const { alt, className, src, style } = this.props;
const hoverToPlay = this.hoverToPlay();
return (
<div className={classNames(className, 'still-image', { 'still-image--play-on-hover': hoverToPlay })} style={style}>
<img src={src} alt={alt} ref={this.setImageRef} onLoad={this.handleImageLoad} />
{hoverToPlay && <canvas ref={this.setCanvasRef} />}
</div>
);
}
}

11
app/soapbox/features/account/components/header.js
Unescape View File

@ -16,7 +16,7 @@ import { NavLink } from 'react-router-dom';
import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
import ProfileInfoPanel from '../../ui/components/profile_info_panel';
import { debounce } from 'lodash';
import { getSettings } from 'soapbox/actions/settings';
import StillImage from 'soapbox/components/still_image';
const messages = defineMessages({
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
@ -54,7 +54,6 @@ const mapStateToProps = state => {
return {
me,
isStaff: isStaff(state.getIn(['accounts', me])),
autoPlayGif: getSettings(state).get('autoPlayGif'),
version: parseVersion(state.getIn(['instance', 'version'])),
};
};
@ -70,7 +69,6 @@ class Header extends ImmutablePureComponent {
onBlock: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
username: PropTypes.string,
autoPlayGif: PropTypes.bool,
isStaff: PropTypes.bool.isRequired,
version: PropTypes.object,
};
@ -226,7 +224,7 @@ class Header extends ImmutablePureComponent {
};
render() {
const { account, intl, username, me, autoPlayGif } = this.props;
const { account, intl, username, me } = this.props;
const { isSmallScreen } = this.state;
if (!account) {
@ -252,8 +250,7 @@ class Header extends ImmutablePureComponent {
const actionBtn = this.getActionBtn();
const menu = this.makeMenu();
const headerImgSrc = autoPlayGif ? account.get('header') : account.get('header_static');
const headerMissing = (headerImgSrc.indexOf('/headers/original/missing.png') > -1);
const headerMissing = (account.get('header').indexOf('/headers/original/missing.png') > -1);
const avatarSize = isSmallScreen ? 90 : 200;
@ -264,7 +261,7 @@ class Header extends ImmutablePureComponent {
{info}
</div>
<img src={headerImgSrc} alt='' className='parallax' />
<StillImage src={account.get('header')} alt='' className='parallax' />
</div>
<div className='account__header__bar'>

5
app/soapbox/features/account_gallery/components/media_item.js
Unescape View File

@ -8,6 +8,7 @@ import classNames from 'classnames';
import { decode } from 'blurhash';
import { isIOS } from 'soapbox/is_mobile';
import { getSettings } from 'soapbox/actions/settings';
import StillImage from 'soapbox/components/still_image';
const mapStateToProps = state => ({
autoPlayGif: getSettings(state).get('autoPlayGif'),
@ -113,12 +114,10 @@ class MediaItem extends ImmutablePureComponent {
const y = ((focusY / -2) + .5) * 100;
thumbnail = (
<img
<StillImage
src={attachment.get('preview_url')}
alt={attachment.get('description')}
title={attachment.get('description')}
style={{ objectPosition: `${x}% ${y}%` }}
onLoad={this.handleImageLoad}
/>
);
} else if (['gifv', 'video'].indexOf(attachment.get('type')) !== -1) {

5
app/soapbox/features/edit_profile/components/profile_preview.js
Unescape View File

@ -1,16 +1,17 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { acctFull } from 'soapbox/utils/accounts';
import StillImage from 'soapbox/components/still_image';
const ProfilePreview = ({ account }) => (
<div className='card h-card'>
<a target='_blank' rel='noopener' href={account.get('url')}>
<div className='card__img'>
<img alt='' src={account.get('header')} />
<StillImage alt='' src={account.get('header')} />
</div>
<div className='card__bar'>
<div className='avatar'>
<img alt='' className='u-photo' src={account.get('avatar')} width='48' height='48' />
<StillImage alt='' className='u-photo' src={account.get('avatar')} width='48' height='48' />
</div>
<div className='display-name'>
<span style={{ display: 'none' }}>{account.get('username')}</span>

7
app/soapbox/features/ui/components/user_panel.js
Unescape View File

@ -9,7 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import Avatar from 'soapbox/components/avatar';
import { shortNumberFormat } from 'soapbox/utils/numbers';
import { acctFull } from 'soapbox/utils/accounts';
import { getSettings } from 'soapbox/actions/settings';
import StillImage from 'soapbox/components/still_image';
class UserPanel extends ImmutablePureComponent {
@ -20,7 +20,7 @@ class UserPanel extends ImmutablePureComponent {
}
render() {
const { account, intl, domain, autoPlayGif } = this.props;
const { account, intl, domain } = this.props;
if (!account) return null;
const displayNameHtml = { __html: account.get('display_name_html') };
const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
@ -30,7 +30,7 @@ class UserPanel extends ImmutablePureComponent {
<div className='user-panel__container'>
<div className='user-panel__header'>
<img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' />
<StillImage src={account.get('header')} alt='' />
</div>
<div className='user-panel__profile'>
@ -91,7 +91,6 @@ const mapStateToProps = state => {
return {
account: getAccount(state, me),
autoPlayGif: getSettings(state).get('autoPlayGif'),
};
};

4
app/styles/accounts.scss
Unescape View File

@ -24,7 +24,7 @@
background: var(--background-color);
border-radius: 4px 4px 0 0;
img {
.still-image {
display: block;
width: 100%;
height: 100%;
@ -61,7 +61,7 @@
height: 48px;
padding-top: 2px;
img {
.still-image {
width: 100%;
height: 100%;
display: block;

1
app/styles/application.scss
Unescape View File

@ -58,6 +58,7 @@
@import 'components/navigation-bar';
@import 'components/promo-panel';
@import 'components/drawer';
@import 'components/still-image';
@import 'components/timeline-queue-header';
@import 'components/badge';
@import 'components/trends';

35
app/styles/components/account-header.scss
Unescape View File

@ -21,7 +21,6 @@
background: var(--accent-color--med);
@media screen and (max-width: 895px) {height: 225px;}
&--none {height: 125px;}
img {
object-fit: cover;
display: block;
@ -29,6 +28,23 @@
height: 100%;
margin: 0;
}
.still-image--play-on-hover::before {
content: 'GIF';
position: absolute;
color: var(--primary-text-color);
background: var(--foreground-color);
top: 6px;
left: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 18px;
}
}
&__bar {
@ -58,6 +74,23 @@
background-size: 200px 200px;
}
.still-image--play-on-hover::before {
content: 'GIF';
position: absolute;
color: var(--primary-text-color);
background: var(--foreground-color);
bottom: 15%;
left: 15%;
padding: 1px 4px;
border-radius: 2px;
font-size: 8px;
font-weight: 600;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 13px;
}
@media screen and (max-width: 895px) {
top: -45px;
left: 10px;

70
app/styles/components/media-gallery.scss
Unescape View File

@ -28,47 +28,26 @@
z-index: 1;
&,
img,
canvas {
.still-image {
height: 100%;
width: 100%;
}
img,
canvas {
object-fit: cover;
}
&--play-on-hover {
&::before {
content: 'GIF';
position: absolute;
color: var(--primary-text-color);
background: var(--foreground-color);
bottom: 6px;
left: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 18px;
}
img {
position: absolute;
}
img,
&:hover::before {
visibility: hidden;
}
&:hover img {
visibility: visible;
}
.still-image--play-on-hover::before {
content: 'GIF';
position: absolute;
color: var(--primary-text-color);
background: var(--foreground-color);
bottom: 6px;
left: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 18px;
}
}
@ -82,6 +61,23 @@
z-index: 0;
background: var(--background-color);
.still-image--play-on-hover::before {
content: 'GIF';
position: absolute;
color: var(--primary-text-color);
background: var(--foreground-color);
bottom: 6px;
left: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 18px;
}
&--hidden {
display: none;
}

28
app/styles/components/still-image.scss
Unescape View File

@ -0,0 +1,28 @@
.still-image {
position: relative;
overflow: hidden;
img,
canvas {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
font-family: inherit;
}
&--play-on-hover {
img {
position: absolute;
visibility: hidden;
}
&:hover img {
visibility: visible;
}
&:hover canvas {
visibility: hidden;
}
}
}
Write Preview
Loading…
Cancel
Save