From 162adf61f268beac6e178f6f79f203b213055915 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 2 Jul 2020 16:27:35 +0200 Subject: [PATCH] Fix audio modals not using blurhash and poster (#14199) --- .../mastodon/features/ui/components/audio_modal.js | 5 +++-- .../mastodon/features/ui/components/focal_point_modal.js | 8 ++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/audio_modal.js b/app/javascript/mastodon/features/ui/components/audio_modal.js index 2300453d7..1d23925ca 100644 --- a/app/javascript/mastodon/features/ui/components/audio_modal.js +++ b/app/javascript/mastodon/features/ui/components/audio_modal.js @@ -59,8 +59,9 @@ export default class AudioModal extends ImmutablePureComponent { src={media.get('url')} alt={media.get('description')} duration={media.getIn(['meta', 'original', 'duration'], 0)} - height={135} - preload + height={150} + poster={media.get('preview_url') || status.getIn(['account', 'avatar_static'])} + blurhash={media.get('blurhash')} /> diff --git a/app/javascript/mastodon/features/ui/components/focal_point_modal.js b/app/javascript/mastodon/features/ui/components/focal_point_modal.js index 7d1509f71..06d298205 100644 --- a/app/javascript/mastodon/features/ui/components/focal_point_modal.js +++ b/app/javascript/mastodon/features/ui/components/focal_point_modal.js @@ -17,6 +17,7 @@ import CharacterCounter from 'mastodon/features/compose/components/character_cou import { length } from 'stringz'; import { Tesseract as fetchTesseract } from 'mastodon/features/ui/util/async-components'; import GIFV from 'mastodon/components/gifv'; +import { me } from 'mastodon/initial_state'; const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, @@ -26,6 +27,7 @@ const messages = defineMessages({ const mapStateToProps = (state, { id }) => ({ media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id), + account: state.getIn(['accounts', me]), }); const mapDispatchToProps = (dispatch, { id }) => ({ @@ -78,6 +80,7 @@ class FocalPointModal extends ImmutablePureComponent { static propTypes = { media: ImmutablePropTypes.map.isRequired, + account: ImmutablePropTypes.map.isRequired, onClose: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; @@ -233,7 +236,7 @@ class FocalPointModal extends ImmutablePureComponent { } render () { - const { media, intl, onClose } = this.props; + const { media, intl, account, onClose } = this.props; const { x, y, dragging, description, dirty, detecting, progress } = this.state; const width = media.getIn(['meta', 'original', 'width']) || null; @@ -325,7 +328,8 @@ class FocalPointModal extends ImmutablePureComponent { src={media.get('url')} duration={media.getIn(['meta', 'original', 'duration'], 0)} height={150} - preload + poster={media.get('preview_url') || account.get('avatar_static')} + blurhash={media.get('blurhash')} editable /> )}