backpack-ui/dist/components/cardVideo/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _defineProperty2 = require("babel-runtime/helpers/defineProperty");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _card = require("../card");

var _typography = require("../../styles/typography");

var _iconButton = require("../iconButton");

var _iconButton2 = _interopRequireDefault(_iconButton);

var _mq = require("../../styles/mq");

var _mq2 = _interopRequireDefault(_mq);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _time = require("../../utils/time");

var _time2 = _interopRequireDefault(_time);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _color = require("../../utils/color");

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var styles = {
  container: {
    maxWidth: "100%",
    minWidth: 0
  },

  image: {
    position: "relative"
  },

  overlay: {
    default: {
      height: "100%",
      left: 0,
      position: "absolute",
      top: 0,
      width: "100%"
    },

    desktop: {
      backgroundColor: (0, _color.rgba)(_colors2.default.bgOverlay, 0.25),
      opacity: 0,
      transition: "opacity " + _timing2.default.fast + " ease"
    },

    mobile: {
      backgroundImage: "linear-gradient(-180deg, " + (0, _color.rgba)(_colors2.default.bgOverlay, 0) + " 53%, " + (0, _color.rgba)(_colors2.default.bgOverlay, 0.8) + " 99%)"
    }
  },

  overlayContent: {
    default: {
      height: "100%",
      left: 0,
      position: "relative",
      top: "10px",
      transition: "top " + _timing2.default.fast + " ease",
      width: "100%"
    },

    mobile: {
      top: 0
    }
  },

  button: (0, _defineProperty3.default)({
    bottom: "16px",
    fontSize: _typography.fontSizeHeading7 + "px",
    position: "absolute"

  }, "@media (max-width: " + _mq2.default.max["360"] + ")", {
    bottom: "9px",
    left: "10px"
  }),

  playButton: {
    left: "16px",
    paddingLeft: "4px"
  },

  actionButton: {
    right: "16px"
  },

  duration: {
    default: (0, _defineProperty3.default)({
      color: _colors2.default.textOverlay,
      fontSize: _typography.fontSizeBodySmall + "px",
      lineHeight: _typography.lineHeightBodySmall,
      position: "absolute",
      right: "16px"

    }, "@media (max-width: " + _mq2.default.max["360"] + ")", {
      right: "10px"
    }),

    topAligned: (0, _defineProperty3.default)({
      top: "16px"

    }, "@media (max-width: " + _mq2.default.max["360"] + ")", {
      top: "9px"
    }),

    bottomAligned: (0, _defineProperty3.default)({
      bottom: "21px"

    }, "@media (max-width: " + _mq2.default.max["360"] + ")", {
      bottom: "14px"
    })
  }
};

var CardVideo = function CardVideo(_ref) {
  var href = _ref.href,
      onClick = _ref.onClick,
      imageSrc = _ref.imageSrc,
      aspectRatio = _ref.aspectRatio,
      actionIcon = _ref.actionIcon,
      actionIconLabel = _ref.actionIconLabel,
      onClickActionIcon = _ref.onClickActionIcon,
      runtime = _ref.runtime,
      heading = _ref.heading,
      bullets = _ref.bullets,
      layout = _ref.layout,
      theme = _ref.theme,
      spacing = _ref.spacing,
      className = _ref.className,
      mobile = _ref.mobile,
      style = _ref.style;
  return _react2.default.createElement(
    _card.Card,
    {
      className: (0, _classnames2.default)("Card--video", className),
      layout: layout,
      theme: theme,
      style: [styles.container, style]
    },
    _react2.default.createElement(
      _card.CardImage,
      {
        href: href,
        onClick: onClick,
        src: imageSrc,
        aspectRatio: aspectRatio,
        opacity: 1,
        style: styles.image
      },
      _react2.default.createElement(
        "div",
        {
          className: "Card--video--overlay",
          style: [styles.overlay.default, styles.overlay[mobile ? "mobile" : "desktop"]]
        },
        _react2.default.createElement(_radium.Style, {
          scopeSelector: ".Card--video:hover",
          rules: {
            ".Card--video--overlay": {
              opacity: "1 !important"
            },
            ".Card--video--overlayContent": {
              top: "0 !important"
            }
          }
        }),
        _react2.default.createElement(
          "div",
          {
            className: "Card--video--overlayContent",
            style: [styles.overlayContent.default, mobile && styles.overlayContent.mobile]
          },
          _react2.default.createElement(_iconButton2.default, {
            hoverBackgroundScale: 1.2,
            shadow: true,
            iconName: "Play",
            label: "Play",
            style: [styles.button, styles.playButton],
            size: 32,
            hoverColor: _colors2.default.textOverlay,
            hoverBackgroundColor: _colors2.default.linkPrimary,
            transitionDuration: _timing2.default.fast
          }),
          onClickActionIcon && _react2.default.createElement(_iconButton2.default, {
            hoverBackgroundScale: 1.2,
            shadow: true,
            iconName: actionIcon,
            label: actionIconLabel,
            onClick: onClickActionIcon,
            style: [styles.button, styles.actionButton],
            size: 32,
            hoverColor: _colors2.default.textOverlay,
            hoverBackgroundColor: _colors2.default.linkPrimary,
            transitionDuration: _timing2.default.fast
          }),
          typeof runtime === "number" && _react2.default.createElement(
            "div",
            {
              style: [styles.duration.default, styles.duration[mobile || !onClickActionIcon ? "bottomAligned" : "topAligned"]]
            },
            (0, _time2.default)(runtime)
          )
        )
      )
    ),
    _react2.default.createElement(
      _card.CardText,
      null,
      _react2.default.createElement(
        _card.CardAnchor,
        {
          href: href,
          onClick: onClick,
          layout: layout,
          spacing: spacing
        },
        bullets && bullets.length > 0 && _react2.default.createElement(_card.CardBullets, {
          bullets: bullets,
          spacing: spacing
        }),
        _react2.default.createElement(
          _card.CardHeading,
          {
            theme: theme,
            spacing: spacing,
            style: {
              paddingLeft: "1px",
              paddingRight: "1px"
            }
          },
          heading
        )
      )
    )
  );
};

CardVideo.propTypes = {
  href: _propTypes2.default.string,
  onClick: _propTypes2.default.func,
  imageSrc: _propTypes2.default.string.isRequired,
  aspectRatio: _propTypes2.default.oneOf(["video", "poster"]),
  runtime: _propTypes2.default.number,
  heading: _propTypes2.default.string.isRequired,
  bullets: _propTypes2.default.arrayOf(_propTypes2.default.string),
  layout: _propTypes2.default.oneOf(["card", "tile"]),
  theme: _propTypes2.default.oneOf(["light", "dark"]),
  spacing: _propTypes2.default.oneOf(["normal", "compact"]),
  actionIcon: _propTypes2.default.string,
  actionIconLabel: _propTypes2.default.string,
  onClickActionIcon: _propTypes2.default.func,
  className: _propTypes2.default.string,
  mobile: _propTypes2.default.bool,
  style: _propTypes4.default.style
};

CardVideo.defaultProps = {
  aspectRatio: "video",
  actionIcon: "ClockOutline",
  actionIconLabel: "Watch Later",
  layout: "card",
  theme: "light",
  spacing: "normal",
  mobile: false
};

exports.default = (0, _radium2.default)(CardVideo);