# All files / composer/components MediaZoomBox.jsx

0% Statements 0/4
0% Branches 0/10
0% Functions 0/1
0% Lines 0/4

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

     import React from 'react';
    import PropTypes from 'prop-types';
    import Modal from '../__legacy-buffer-web-shared-components__/modal/modal';
    import styles from './css/MediaZoomBox.css';
    import ImageDescriptionInput from '../components/ImageDescriptionInput';
    import { MediaTypes } from '../AppConstants';
    import { getHumanReadableSize } from '../utils/StringUtils';

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

      static defaultProps = {
        composerPosition: null,
      };

      render() {
        const { media, draftId, showTwitterImageDescription, composerPosition } = this.props;

        const modalClassNames = {
          modal: styles.modalStyles,
          closeButton: styles.closeButton,
        };

        const modalDynamicStyles = {
          top: composerPosition !== null ? `${composerPosition.top}px` : '30px',
        };

        return (
          <Modal classNames={modalClassNames} modalCustumStyle={modalDynamicStyles}>
            {media.mediaType === MediaTypes.GIF &&
              <div className={styles.mediaContainer}>
                <img className={styles.media} alt="" src={media.url} />
              </div>}
            {media.mediaType === MediaTypes.IMAGE &&
              <div className={styles.mediaContainer}>
                <img className={styles.media} alt="" src={media.url} />
                {showTwitterImageDescription &&
                  <ImageDescriptionInput draftId={draftId} mediaAttachment={media} />}
              </div>}
            {media.mediaType === MediaTypes.VIDEO &&
              <div className={styles.mediaContainer}>
                <video className={styles.media} poster={media.thumbnail} controls src={media.url} />
                <div className={styles.fileSize}>{getHumanReadableSize(media.size)}</div>
              </div>
            }
          </Modal>
        );
      }
    }

    export default MediaZoomBox;