Fix media attachments not being displayed on polls

Fixes #1595
2021-09-08 14:39:14 +02:00 · 2021-09-08 14:39:14 +02:00 · 6bbcd99f14
parent e2921375c3
commit 6bbcd99f14
4 changed files with 93 additions and 78 deletions
--- 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}
--- 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 ? [
+      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>;
--- 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
--- 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}