# All files / composer/components MediaAttachmentThumbnail.jsx

0% Statements 0/23
0% Branches 0/20
0% Functions 0/3
0% Lines 0/23

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99

     import React from 'react';
    import PropTypes from 'prop-types';
    import ComposerActionCreators from '../action-creators/ComposerActionCreators';
    import AppActionCreators from '../action-creators/AppActionCreators';
    import CloseButton from '../components/CloseButton';
    import Button from '../components/Button';
    import { escapeParens } from '../utils/StringUtils';
    import { MediaTypes } from '../AppConstants';
    import styles from './css/MediaAttachmentThumbnail.css';
    import ModalActionCreators from '../__legacy-buffer-web-shared-components__/modal/actionCreators';

    class MediaAttachmentThumbnail extends React.Component {
      static propTypes = {
        draftId: PropTypes.string.isRequired,
        className: PropTypes.string,
        media: PropTypes.object.isRequired,
        showTwitterImageDescription: PropTypes.bool.isRequired,
        composerPosition: PropTypes.object,
        canEditVideoAttachment: PropTypes.bool,
      };

      static defaultProps = {
        composerPosition: null,
        canEditVideoAttachment: null,
      };

      onClick = () => {
        const { media, draftId, showTwitterImageDescription, composerPosition } = this.props;
        ModalActionCreators.openModal('MediaZoomBox', {
          media, draftId, showTwitterImageDescription, composerPosition,
        });
      }

      onCloseButtonClick = () => {
        const { draftId, media } = this.props;

        switch (media.mediaType) {
          case MediaTypes.IMAGE:
            ComposerActionCreators.removeDraftImage(draftId, media);
            AppActionCreators.trackUserAction(['composer', 'media', 'removed', 'photo'], {
              isGif: false,
            });
            break;

          case MediaTypes.VIDEO:
            ComposerActionCreators.removeDraftVideo(draftId);
            AppActionCreators.trackUserAction(['composer', 'media', 'removed', 'video']);
            break;

          case MediaTypes.GIF:
            ComposerActionCreators.removeDraftGif(draftId);
            AppActionCreators.trackUserAction(['composer', 'media', 'removed', 'photo'], {
              isGif: true,
            });
            break;

          default:
            break;
        }
      };

      render() {
        const { media, className, showTwitterImageDescription, canEditVideoAttachment } = this.props;
        const thumbnailClassName = [styles.thumbnail, className].join(' ');
        const isVideo = media.mediaType === MediaTypes.VIDEO;
        const isRegularImage = media.mediaType === MediaTypes.IMAGE;
        const thumbnail = isVideo ? media.thumbnail : media.url;

        const videoThumbnailClass = canEditVideoAttachment ?
          `${styles.editableVideoThumbnail} bi bi-video` :
          `${styles.videoThumbnail} bi bi-video`;
        const tooltipCopy = (isRegularImage && showTwitterImageDescription) ?
          'Click to expand & add description' : 'Click to expand';
        const ariaLabel = (isRegularImage && showTwitterImageDescription) ?
          'Select to expand image and add image description' :
          `Select to expand ${isVideo ? 'video' : 'image'}`;

        return (
          <div className={thumbnailClassName}>
            <Button
              className={styles.imageContainer}
              aria-label={ariaLabel}
              data-tip={tooltipCopy} onClick={this.onClick}
              style={{ backgroundImage: `url(${escapeParens(thumbnail)})` }}
            >
              {isVideo &&
                <span className={videoThumbnailClass} aria-label="video attachment" />}
            </Button>

            <CloseButton
              className={styles.closeButton} onClick={this.onCloseButtonClick} label="Remove media"
            />
          </div>
        );
      }
    }

    export default MediaAttachmentThumbnail;