mirror of
https://github.com/funamitech/mastodon
synced 2024-12-12 21:59:04 +09:00
parent
e2921375c3
commit
6bbcd99f14
@ -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}
|
||||
|
@ -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 ? [
|
||||
let toggleText = null;
|
||||
if (hidden) {
|
||||
toggleText = [
|
||||
<FormattedMessage
|
||||
id='status.show_more'
|
||||
defaultMessage='Show more'
|
||||
key='0'
|
||||
/>,
|
||||
mediaIcon ? (
|
||||
];
|
||||
if (mediaIcon) {
|
||||
toggleText.push(
|
||||
<Icon
|
||||
fixedWidth
|
||||
className='status__content__spoiler-icon'
|
||||
id={mediaIcon}
|
||||
aria-hidden='true'
|
||||
key='1'
|
||||
/>
|
||||
) : null,
|
||||
] : [
|
||||
/>,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
toggleText = (
|
||||
<FormattedMessage
|
||||
id='status.show_less'
|
||||
defaultMessage='Show less'
|
||||
key='0'
|
||||
/>,
|
||||
];
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (hidden) {
|
||||
mentionsPlaceholder = <div>{mentionLinks}</div>;
|
||||
|
@ -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
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user