monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix media attachments not being displayed on polls 

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

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

@ -69,7 +69,7 @@ export default class StatusContent extends React.PureComponent {
expanded: PropTypes.bool,
collapsed: PropTypes.bool,
onExpandedToggle: PropTypes.func,
media: PropTypes.element,
media: PropTypes.node,
mediaIcon: PropTypes.string,
parseClick: PropTypes.func,
disabled: PropTypes.bool,
@ -286,28 +286,35 @@ export default class StatusContent extends React.PureComponent {
</Permalink>
)).reduce((aggregate, item) => [...aggregate, item, ' '], []);
const toggleText = hidden ? [
<FormattedMessage
id='status.show_more'
defaultMessage='Show more'
key='0'
/>,
mediaIcon ? (
<Icon
fixedWidth
className='status__content__spoiler-icon'
id={mediaIcon}
aria-hidden='true'
key='1'
let toggleText = null;
if (hidden) {
toggleText = [
<FormattedMessage
id='status.show_more'
defaultMessage='Show more'
key='0'
/>,
];
if (mediaIcon) {
toggleText.push(
<Icon
fixedWidth
className='status__content__spoiler-icon'
id={mediaIcon}
aria-hidden='true'
key='1'
/>,
);
}
} else {
toggleText = (
<FormattedMessage
id='status.show_less'
defaultMessage='Show less'
key='0'
/>
) : null,
] : [
<FormattedMessage
id='status.show_less'
defaultMessage='Show less'
key='0'
/>,
];
);
}
if (hidden) {
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 = {
status: ImmutablePropTypes.map.isRequired,
mediaIcon: PropTypes.string,
mediaIcons: PropTypes.arrayOf(PropTypes.string),
collapsible: PropTypes.bool,
collapsed: PropTypes.bool,
directMessage: PropTypes.bool,
@ -44,8 +44,8 @@ class StatusIcons extends React.PureComponent {
}
}
mediaIconTitleText () {
const { intl, mediaIcon } = this.props;
mediaIconTitleText (mediaIcon) {
const { intl } = this.props;
switch (mediaIcon) {
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.
render () {
const {
status,
mediaIcon,
mediaIcons,
collapsible,
collapsed,
directMessage,
@ -90,15 +103,7 @@ class StatusIcons extends React.PureComponent {
aria-hidden='true'
title={intl.formatMessage(messages.localOnly)}
/>}
{mediaIcon ? (
<Icon
fixedWidth
className='status__media-icon'
id={mediaIcon}
aria-hidden='true'
title={this.mediaIconTitleText()}
/>
) : null}
{ !!mediaIcons && mediaIcons.map(icon => this.renderIcon(icon)) }
{!directMessage && <VisibilityIcon visibility={status.get('visibility')} />}
{collapsible ? (
<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;
}
let media = null;
let mediaIcon = null;
let media = [];
let mediaIcons = [];
let applicationLink = '';
let reblogLink = '';
let reblogIcon = 'retweet';
@ -131,18 +131,19 @@ export default class DetailedStatus extends ImmutablePureComponent {
}
if (status.get('poll')) {
media = <PollContainer pollId={status.get('poll')} />;
mediaIcon = 'tasks';
} else if (usingPiP) {
media = <PictureInPicturePlaceholder />;
mediaIcon = 'video-camera';
media.push(<PollContainer pollId={status.get('poll')} />);
mediaIcons.push('tasks');
}
if (usingPiP) {
media.push(<PictureInPicturePlaceholder />);
mediaIcons.push('video-camera');
} else if (status.get('media_attachments').size > 0) {
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') {
const attachment = status.getIn(['media_attachments', 0]);
media = (
media.push(
<Audio
src={attachment.get('url')}
alt={attachment.get('description')}
@ -152,12 +153,12 @@ export default class DetailedStatus extends ImmutablePureComponent {
foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
height={150}
/>
/>,
);
mediaIcon = 'music';
mediaIcons.push('music');
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
const attachment = status.getIn(['media_attachments', 0]);
media = (
media.push(
<Video
preview={attachment.get('preview_url')}
frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
@ -173,11 +174,11 @@ export default class DetailedStatus extends ImmutablePureComponent {
autoplay
visible={this.props.showMedia}
onToggleVisibility={this.props.onToggleMediaVisibility}
/>
/>,
);
mediaIcon = 'video-camera';
mediaIcons.push('video-camera');
} else {
media = (
media.push(
<MediaGallery
standalone
sensitive={status.get('sensitive')}
@ -188,13 +189,13 @@ export default class DetailedStatus extends ImmutablePureComponent {
onOpenMedia={this.props.onOpenMedia}
visible={this.props.showMedia}
onToggleVisibility={this.props.onToggleMediaVisibility}
/>
/>,
);
mediaIcon = 'picture-o';
mediaIcons.push('picture-o');
}
} else if (status.get('card')) {
media = <Card sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card')} />;
mediaIcon = 'link';
media.push(<Card sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card')} />);
mediaIcons.push('link');
}
if (status.get('application')) {
@ -268,7 +269,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
<StatusContent
status={status}
media={media}
mediaIcon={mediaIcon}
mediaIcons={mediaIcons}
expanded={expanded}
collapsed={false}
onExpandedToggle={onToggleHidden}