From eb854275764d13c114729fbd0dc083fe3a3bb38c Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 2 Oct 2018 15:48:55 +0200 Subject: [Glitch] Honour displayMedia setting in accountMedia gallery Inspired by b79ab15859e7f8383526afd147e8416d2df2f7a7 --- .../account_gallery/components/media_item.js | 21 +++++++++++++++++---- .../flavours/glitch/styles/components/accounts.scss | 10 +++++++++- 2 files changed, 26 insertions(+), 5 deletions(-) (limited to 'app') diff --git a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js index c2cf48d7b..2e48ab799 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js +++ b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js @@ -2,6 +2,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Permalink from 'flavours/glitch/components/permalink'; +import { displayMedia } from 'flavours/glitch/util/initial_state'; export default class MediaItem extends ImmutablePureComponent { @@ -9,8 +10,13 @@ export default class MediaItem extends ImmutablePureComponent { media: ImmutablePropTypes.map.isRequired, }; + state = { + visible: displayMedia !== 'hide_all' && !this.props.media.getIn(['status', 'sensitive']) || displayMedia === 'show_all', + }; + render () { const { media } = this.props; + const { visible } = this.state; const status = media.get('status'); const focusX = media.getIn(['meta', 'focus', 'x']); const focusY = media.getIn(['meta', 'focus', 'y']); @@ -18,21 +24,28 @@ export default class MediaItem extends ImmutablePureComponent { const y = ((focusY / -2) + .5) * 100; const style = {}; - let content; + let label, icon; if (media.get('type') === 'gifv') { - content = GIF; + label = GIF; } - if (!status.get('sensitive')) { + if (visible) { style.backgroundImage = `url(${media.get('preview_url')})`; style.backgroundPosition = `${x}% ${y}%`; + } else { + icon = ( + + + + ); } return (
- {content} + {icon} + {label}
); diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 3eddd7fb4..ea748b72b 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -415,7 +415,7 @@ background-size: cover; background-position: center; position: absolute; - color: inherit; + color: $ui-primary-color; text-decoration: none; border-radius: 4px; @@ -434,6 +434,14 @@ } } } + + &__icons { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + } } .account__section-headline { -- cgit