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

Fix media attachments not being displayed on polls

Browse Source 
Fixes #1595
This commit is contained in:
Claire 2021-09-08 14:39:14 +02:00
parent e2921375c3
commit 6bbcd99f14
4 changed files with 93 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/javascript/flavours/glitch/components/status.js
View File

@ -516,8 +516,8 @@ class Status extends ImmutablePureComponent {
const { isExpanded, isCollapsed, forceFilter } = this.state; const { isExpanded, isCollapsed, forceFilter } = this.state;
let background = null; let background = null;
let attachments = null; let attachments = null;
let media = null; let media = [];
let mediaIcon = null; let mediaIcons = [];
if (status === null) { if (status === null) {
return null; return null;
@ -586,25 +586,27 @@ class Status extends ImmutablePureComponent {
// After we have generated our appropriate media element and stored it in // After we have generated our appropriate media element and stored it in
// `media`, we snatch the thumbnail to use as our `background` if media // `media`, we snatch the thumbnail to use as our `background` if media
// backgrounds for collapsed statuses are enabled. // backgrounds for collapsed statuses are enabled.
attachments = status.get('media_attachments'); attachments = status.get('media_attachments');
if (status.get('poll')) { if (status.get('poll')) {
media = <PollContainer pollId={status.get('poll')} />; media.push(<PollContainer pollId={status.get('poll')} />);
mediaIcon = 'tasks'; mediaIcons.push('tasks');
} else if (usingPiP) { }
media = <PictureInPicturePlaceholder width={this.props.cachedMediaWidth} />; if (usingPiP) {
mediaIcon = 'video-camera'; media.push(<PictureInPicturePlaceholder width={this.props.cachedMediaWidth} />);
mediaIcons.push('video-camera');
} else if (attachments.size > 0) { } else if (attachments.size > 0) {
if (muted || attachments.some(item => item.get('type') === 'unknown')) { if (muted || attachments.some(item => item.get('type') === 'unknown')) {
media = ( media.push(
<AttachmentList <AttachmentList
compact compact
media={status.get('media_attachments')} media={status.get('media_attachments')}
/> />,
); );
} else if (attachments.getIn([0, 'type']) === 'audio') { } else if (attachments.getIn([0, 'type']) === 'audio') {
const attachment = status.getIn(['media_attachments', 0]); const attachment = status.getIn(['media_attachments', 0]);
media = ( media.push(
<Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} > <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
{Component => ( {Component => (
<Component <Component
@ -621,13 +623,13 @@ class Status extends ImmutablePureComponent {
deployPictureInPicture={this.handleDeployPictureInPicture} deployPictureInPicture={this.handleDeployPictureInPicture}
/> />
)} )}
</Bundle> </Bundle>,
); );
mediaIcon = 'music'; mediaIcons.push('music');
} else if (attachments.getIn([0, 'type']) === 'video') { } else if (attachments.getIn([0, 'type']) === 'video') {
const attachment = status.getIn(['media_attachments', 0]); const attachment = status.getIn(['media_attachments', 0]);
media = ( media.push(
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} > <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
{Component => (<Component {Component => (<Component
preview={attachment.get('preview_url')} preview={attachment.get('preview_url')}
@ -647,11 +649,11 @@ class Status extends ImmutablePureComponent {
visible={this.state.showMedia} visible={this.state.showMedia}
onToggleVisibility={this.handleToggleMediaVisibility} onToggleVisibility={this.handleToggleMediaVisibility}
/>)} />)}
</Bundle> </Bundle>,
); );
mediaIcon = 'video-camera'; mediaIcons.push('video-camera');
} else { // Media type is 'image' or 'gifv' } else { // Media type is 'image' or 'gifv'
media = ( media.push(
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}> <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
{Component => ( {Component => (
<Component <Component
@ -667,16 +669,16 @@ class Status extends ImmutablePureComponent {
onToggleVisibility={this.handleToggleMediaVisibility} onToggleVisibility={this.handleToggleMediaVisibility}
/> />
)} )}
</Bundle> </Bundle>,
); );
mediaIcon = 'picture-o'; mediaIcons.push('picture-o');
} }
if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) { if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) {
background = attachments.getIn([0, 'preview_url']); background = attachments.getIn([0, 'preview_url']);
} }
} else if (status.get('card') && settings.get('inline_preview_cards')) { } else if (status.get('card') && settings.get('inline_preview_cards')) {
media = ( media.push(
<Card <Card
onOpenMedia={this.handleOpenMedia} onOpenMedia={this.handleOpenMedia}
card={status.get('card')} card={status.get('card')}
@ -684,9 +686,9 @@ class Status extends ImmutablePureComponent {
cacheWidth={this.props.cacheMediaWidth} cacheWidth={this.props.cacheMediaWidth}
defaultWidth={this.props.cachedMediaWidth} defaultWidth={this.props.cachedMediaWidth}
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
/> />,
); );
mediaIcon = 'link'; mediaIcons.push('link');
} }
// Here we prepare extra data-* attributes for CSS selectors. // Here we prepare extra data-* attributes for CSS selectors.
@ -753,7 +755,7 @@ class Status extends ImmutablePureComponent {
</span> </span>
<StatusIcons <StatusIcons
status={status} status={status}
mediaIcon={mediaIcon} mediaIcons={mediaIcons}
collapsible={settings.getIn(['collapsed', 'enabled'])} collapsible={settings.getIn(['collapsed', 'enabled'])}
collapsed={isCollapsed} collapsed={isCollapsed}
setCollapsed={setCollapsed} setCollapsed={setCollapsed}
@ -763,7 +765,7 @@ class Status extends ImmutablePureComponent {
<StatusContent <StatusContent
status={status} status={status}
media={media} media={media}
mediaIcon={mediaIcon} mediaIcons={mediaIcons}
expanded={isExpanded} expanded={isExpanded}
onExpandedToggle={this.handleExpandedToggle} onExpandedToggle={this.handleExpandedToggle}
parseClick={parseClick} parseClick={parseClick}

23
app/javascript/flavours/glitch/components/status_content.js
View File

@ -69,7 +69,7 @@ export default class StatusContent extends React.PureComponent {
expanded: PropTypes.bool, expanded: PropTypes.bool,
collapsed: PropTypes.bool, collapsed: PropTypes.bool,
onExpandedToggle: PropTypes.func, onExpandedToggle: PropTypes.func,
media: PropTypes.element, media: PropTypes.node,
mediaIcon: PropTypes.string, mediaIcon: PropTypes.string,
parseClick: PropTypes.func, parseClick: PropTypes.func,
disabled: PropTypes.bool, disabled: PropTypes.bool,
@ -286,28 +286,35 @@ export default class StatusContent extends React.PureComponent {
</Permalink> </Permalink>
)).reduce((aggregate, item) => [...aggregate, item, ' '], []); )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
const toggleText = hidden ? [ let toggleText = null;
if (hidden) {
toggleText = [
<FormattedMessage <FormattedMessage
id='status.show_more' id='status.show_more'
defaultMessage='Show more' defaultMessage='Show more'
key='0' key='0'
/>, />,
mediaIcon ? ( ];
if (mediaIcon) {
toggleText.push(
<Icon <Icon
fixedWidth fixedWidth
className='status__content__spoiler-icon' className='status__content__spoiler-icon'
id={mediaIcon} id={mediaIcon}
aria-hidden='true' aria-hidden='true'
key='1' key='1'
/> />,
) : null, );
] : [ }
} else {
toggleText = (
<FormattedMessage <FormattedMessage
id='status.show_less' id='status.show_less'
defaultMessage='Show less' defaultMessage='Show less'
key='0' key='0'
/>, />
]; );
}
if (hidden) { if (hidden) {
mentionsPlaceholder = <div>{mentionLinks}</div>; mentionsPlaceholder = <div>{mentionLinks}</div>;

31
app/javascript/flavours/glitch/components/status_icons.js
View File

@ -27,7 +27,7 @@ class StatusIcons extends React.PureComponent {
static propTypes = { static propTypes = {
status: ImmutablePropTypes.map.isRequired, status: ImmutablePropTypes.map.isRequired,
mediaIcon: PropTypes.string, mediaIcons: PropTypes.arrayOf(PropTypes.string),
collapsible: PropTypes.bool, collapsible: PropTypes.bool,
collapsed: PropTypes.bool, collapsed: PropTypes.bool,
directMessage: PropTypes.bool, directMessage: PropTypes.bool,
@ -44,8 +44,8 @@ class StatusIcons extends React.PureComponent {
} }
} }
mediaIconTitleText () { mediaIconTitleText (mediaIcon) {
const { intl, mediaIcon } = this.props; const { intl } = this.props;
switch (mediaIcon) { switch (mediaIcon) {
case 'link': case 'link':
@ -61,11 +61,24 @@ class StatusIcons extends React.PureComponent {
} }
} }
renderIcon (mediaIcon) {
return (
<Icon
fixedWidth
className='status__media-icon'
key={`media-icon--${mediaIcon}`}
id={mediaIcon}
aria-hidden='true'
title={this.mediaIconTitleText(mediaIcon)}
/>
);
}
// Rendering. // Rendering.
render () { render () {
const { const {
status, status,
mediaIcon, mediaIcons,
collapsible, collapsible,
collapsed, collapsed,
directMessage, directMessage,
@ -90,15 +103,7 @@ class StatusIcons extends React.PureComponent {
aria-hidden='true' aria-hidden='true'
title={intl.formatMessage(messages.localOnly)} title={intl.formatMessage(messages.localOnly)}
/>} />}
{mediaIcon ? ( { !!mediaIcons && mediaIcons.map(icon => this.renderIcon(icon)) }
<Icon
fixedWidth
className='status__media-icon'
id={mediaIcon}
aria-hidden='true'
title={this.mediaIconTitleText()}
/>
) : null}
{!directMessage && <VisibilityIcon visibility={status.get('visibility')} />} {!directMessage && <VisibilityIcon visibility={status.get('visibility')} />}
{collapsible ? ( {collapsible ? (
<IconButton <IconButton

41
app/javascript/flavours/glitch/features/status/components/detailed_status.js
View File

@ -119,8 +119,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
return null; return null;
} }
let media = null; let media = [];
let mediaIcon = null; let mediaIcons = [];
let applicationLink = ''; let applicationLink = '';
let reblogLink = ''; let reblogLink = '';
let reblogIcon = 'retweet'; let reblogIcon = 'retweet';
@ -131,18 +131,19 @@ export default class DetailedStatus extends ImmutablePureComponent {
} }
if (status.get('poll')) { if (status.get('poll')) {
media = <PollContainer pollId={status.get('poll')} />; media.push(<PollContainer pollId={status.get('poll')} />);
mediaIcon = 'tasks'; mediaIcons.push('tasks');
} else if (usingPiP) { }
media = <PictureInPicturePlaceholder />; if (usingPiP) {
mediaIcon = 'video-camera'; media.push(<PictureInPicturePlaceholder />);
mediaIcons.push('video-camera');
} else if (status.get('media_attachments').size > 0) { } else if (status.get('media_attachments').size > 0) {
if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) { if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
media = <AttachmentList media={status.get('media_attachments')} />; media.push(<AttachmentList media={status.get('media_attachments')} />);
} else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') { } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
const attachment = status.getIn(['media_attachments', 0]); const attachment = status.getIn(['media_attachments', 0]);
media = ( media.push(
<Audio <Audio
src={attachment.get('url')} src={attachment.get('url')}
alt={attachment.get('description')} alt={attachment.get('description')}
@ -152,12 +153,12 @@ export default class DetailedStatus extends ImmutablePureComponent {
foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])} foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
accentColor={attachment.getIn(['meta', 'colors', 'accent'])} accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
height={150} height={150}
/> />,
); );
mediaIcon = 'music'; mediaIcons.push('music');
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
const attachment = status.getIn(['media_attachments', 0]); const attachment = status.getIn(['media_attachments', 0]);
media = ( media.push(
<Video <Video
preview={attachment.get('preview_url')} preview={attachment.get('preview_url')}
frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])} frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
@ -173,11 +174,11 @@ export default class DetailedStatus extends ImmutablePureComponent {
autoplay autoplay
visible={this.props.showMedia} visible={this.props.showMedia}
onToggleVisibility={this.props.onToggleMediaVisibility} onToggleVisibility={this.props.onToggleMediaVisibility}
/> />,
); );
mediaIcon = 'video-camera'; mediaIcons.push('video-camera');
} else { } else {
media = ( media.push(
<MediaGallery <MediaGallery
standalone standalone
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
@ -188,13 +189,13 @@ export default class DetailedStatus extends ImmutablePureComponent {
onOpenMedia={this.props.onOpenMedia} onOpenMedia={this.props.onOpenMedia}
visible={this.props.showMedia} visible={this.props.showMedia}
onToggleVisibility={this.props.onToggleMediaVisibility} onToggleVisibility={this.props.onToggleMediaVisibility}
/> />,
); );
mediaIcon = 'picture-o'; mediaIcons.push('picture-o');
} }
} else if (status.get('card')) { } else if (status.get('card')) {
media = <Card sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card')} />; media.push(<Card sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card')} />);
mediaIcon = 'link'; mediaIcons.push('link');
} }
if (status.get('application')) { if (status.get('application')) {
@ -268,7 +269,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
<StatusContent <StatusContent
status={status} status={status}
media={media} media={media}
mediaIcon={mediaIcon} mediaIcons={mediaIcons}
expanded={expanded} expanded={expanded}
collapsed={false} collapsed={false}
onExpandedToggle={onToggleHidden} onExpandedToggle={onToggleHidden}