mirror of https://github.com/Siphonay/mastodon
[Glitch] Honour displayMedia setting in accountMedia gallery
Inspired by b79ab15859
This commit is contained in:
parent
35e9d099b3
commit
eb85427576
|
@ -2,6 +2,7 @@ import React from 'react';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
import Permalink from 'flavours/glitch/components/permalink';
|
import Permalink from 'flavours/glitch/components/permalink';
|
||||||
|
import { displayMedia } from 'flavours/glitch/util/initial_state';
|
||||||
|
|
||||||
export default class MediaItem extends ImmutablePureComponent {
|
export default class MediaItem extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
@ -9,8 +10,13 @@ export default class MediaItem extends ImmutablePureComponent {
|
||||||
media: ImmutablePropTypes.map.isRequired,
|
media: ImmutablePropTypes.map.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
visible: displayMedia !== 'hide_all' && !this.props.media.getIn(['status', 'sensitive']) || displayMedia === 'show_all',
|
||||||
|
};
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { media } = this.props;
|
const { media } = this.props;
|
||||||
|
const { visible } = this.state;
|
||||||
const status = media.get('status');
|
const status = media.get('status');
|
||||||
const focusX = media.getIn(['meta', 'focus', 'x']);
|
const focusX = media.getIn(['meta', 'focus', 'x']);
|
||||||
const focusY = media.getIn(['meta', 'focus', 'y']);
|
const focusY = media.getIn(['meta', 'focus', 'y']);
|
||||||
|
@ -18,21 +24,28 @@ export default class MediaItem extends ImmutablePureComponent {
|
||||||
const y = ((focusY / -2) + .5) * 100;
|
const y = ((focusY / -2) + .5) * 100;
|
||||||
const style = {};
|
const style = {};
|
||||||
|
|
||||||
let content;
|
let label, icon;
|
||||||
|
|
||||||
if (media.get('type') === 'gifv') {
|
if (media.get('type') === 'gifv') {
|
||||||
content = <span className='media-gallery__gifv__label'>GIF</span>;
|
label = <span className='media-gallery__gifv__label'>GIF</span>;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!status.get('sensitive')) {
|
if (visible) {
|
||||||
style.backgroundImage = `url(${media.get('preview_url')})`;
|
style.backgroundImage = `url(${media.get('preview_url')})`;
|
||||||
style.backgroundPosition = `${x}% ${y}%`;
|
style.backgroundPosition = `${x}% ${y}%`;
|
||||||
|
} else {
|
||||||
|
icon = (
|
||||||
|
<span className='account-gallery__item__icons'>
|
||||||
|
<i className='fa fa-eye-slash' />
|
||||||
|
</span>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='account-gallery__item'>
|
<div className='account-gallery__item'>
|
||||||
<Permalink to={`/statuses/${status.get('id')}`} href={status.get('url')} style={style}>
|
<Permalink to={`/statuses/${status.get('id')}`} href={status.get('url')} style={style}>
|
||||||
{content}
|
{icon}
|
||||||
|
{label}
|
||||||
</Permalink>
|
</Permalink>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -415,7 +415,7 @@
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: inherit;
|
color: $ui-primary-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
|
@ -434,6 +434,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__icons {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.account__section-headline {
|
.account__section-headline {
|
||||||
|
|
Loading…
Reference in New Issue