MetuFSS
/
metu.life
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix media attachments not being displayed on polls

Browse Source 
Fixes #1595
master
Claire 3 years ago
parent e2921375c3
commit 6bbcd99f14
4 changed files with 93 additions and 78 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 48
      app/javascript/flavours/glitch/components/status.js
  2. 23
      app/javascript/flavours/glitch/components/status_content.js
  3. 31
      app/javascript/flavours/glitch/components/status_icons.js
  4. 41
      app/javascript/flavours/glitch/features/status/components/detailed_status.js

48
app/javascript/flavours/glitch/components/status.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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}

Write Preview
Loading…
Cancel
Save