quilt-lens-component/src/index.js

Lens for images and vidoes

import * as React from 'react';
import ReactPlayer from 'react-player';
import classNames from 'classnames';
import Image from 'react-image';
import './../../../../sass/lib/lens.scss'

type Props = {
  source: string,
  size: 'small' | 'medium' | 'large',
  video: boolean,
  autoplay: boolean,
  hoverText?: string,
  disableHover?: boolean
}

const Lens = (props: Props) => {
  const { size, source, video, autoplay, hoverText, disableHover } = props;
  const classes = classNames('AMLens',
    `AMLens--size--${size}`,
    `${video ? 'AMLens--video' : 'AMLens--image'}`,
    `${!disableHover && 'AMLens__imageHover--active am-background--blue'}`
  );

  return (
    <div className={classes}>
      {video ?
        <div data-testid="video-player">
          <ReactPlayer url={source} playing={autoplay} />
        </div>
        :
        <React.Fragment>
          <Image alt="" src={source} className={'AMLens--image--content'} />
          <span className="AMLens__hoverText">
            {hoverText}
          </span>
        </React.Fragment>
      }
    </div>

  );
};

Lens.defaultProps = {
  size: 'medium',
  autoplay: false,
  video: false,
  disableHover: false
};

export default Lens;