diff options
Diffstat (limited to 'app')
4 files changed, 93 insertions, 78 deletions
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index d3944b0c3..b72c2417c 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -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} diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index faa1302c4..3a9b23228 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -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>; diff --git a/app/javascript/flavours/glitch/components/status_icons.js b/app/javascript/flavours/glitch/components/status_icons.js index f4d0a7405..e66947f4a 100644 --- a/app/javascript/flavours/glitch/components/status_icons.js +++ b/app/javascript/flavours/glitch/components/status_icons.js @@ -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 diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index 4cc1d1af5..416a4ca13 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -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} |