backpack-ui/dist/components/video/videoUpNext.js

Lonely Planet's Components

"use strict";

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

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

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 _link = require("../link");

var _link2 = _interopRequireDefault(_link);

var _coverPhoto = require("../coverPhoto");

var _coverPhoto2 = _interopRequireDefault(_coverPhoto);

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

var _colors2 = _interopRequireDefault(_colors);

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

var _timing2 = _interopRequireDefault(_timing);

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

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 scopedStyles = {
  ".CoverPhoto": {
    transform: "scale(1.03) !important"
  }
};

var styles = {
  container: {
    backgroundColor: (0, _color.rgba)("#2b2b2b", 0.7),
    maxWidth: "100%",
    opacity: 0,
    overflow: "hidden",
    textAlign: "left",
    transition: "opacity " + _timing2.default.fast + " linear",
    width: "300px"
  },

  link: {
    color: _colors2.default.textOverlay,
    display: "inline-block",
    padding: "8px",
    width: "100%"
  },

  imageContainer: {
    float: "left",
    height: "56px",
    marginRight: "8px",
    overflow: "hidden",
    width: "100px"
  },

  image: {
    transition: "transform " + _timing2.default.slow + " ease-in-out"
  },

  label: {
    color: _colors2.default.accentGray,
    fontSize: _typography.fontSizeUppercase,
    lineHeight: _typography.lineHeightUppercase,
    marginTop: "2px",
    textTransform: "uppercase"
  },

  title: {
    display: "-webkit-box",
    fontSize: _typography.fontSizeBodySmall,
    lineHeight: _typography.lineHeightBodySmall,
    marginTop: "4px",
    overflow: "hidden",
    WebkitBoxOrient: "vertical",
    WebkitLineClamp: 2
  }
};

var VideoUpNext = function (_Component) {
  (0, _inherits3.default)(VideoUpNext, _Component);

  function VideoUpNext(props) {
    (0, _classCallCheck3.default)(this, VideoUpNext);

    var _this = (0, _possibleConstructorReturn3.default)(this, (VideoUpNext.__proto__ || (0, _getPrototypeOf2.default)(VideoUpNext)).call(this, props));

    _this.container = null;

    _this.state = {
      opacity: props.visible ? 1 : 0,
      height: props.visible ? "auto" : "0px"
    };
    return _this;
  }

  (0, _createClass3.default)(VideoUpNext, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.container.addEventListener("transitionEnd", this.onTransitionEnd.bind(this));
      this.container.addEventListener("webkitTransitionEnd", this.onTransitionEnd.bind(this));
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        opacity: nextProps.visible ? 1 : 0,
        height: nextProps.visible ? "auto" : this.state.height
      });
    }
  }, {
    key: "onTransitionEnd",
    value: function onTransitionEnd() {
      if (this.container.style.opacity === "0") {
        this.setState({
          height: "0px"
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          title = _props.title,
          image = _props.image,
          href = _props.href,
          style = _props.style;
      var _state = this.state,
          opacity = _state.opacity,
          height = _state.height;


      return _react2.default.createElement(
        "div",
        {
          className: "VideoUpNext",
          ref: function ref(container) {
            _this2.container = container;
          },
          style: [styles.container, { opacity: opacity, height: height }, style]
        },
        _react2.default.createElement(_radium.Style, {
          scopeSelector: ".VideoUpNext:hover",
          rules: scopedStyles
        }),
        _react2.default.createElement(
          _link2.default,
          {
            to: href,
            style: styles.link
          },
          _react2.default.createElement(
            "div",
            { style: styles.imageContainer },
            _react2.default.createElement(_coverPhoto2.default, {
              src: image,
              alt: title,
              width: 100,
              height: 56,
              style: styles.image
            })
          ),
          _react2.default.createElement(
            "div",
            null,
            _react2.default.createElement(
              "div",
              { style: styles.label },
              "Up next"
            ),
            _react2.default.createElement(
              "div",
              { style: styles.title },
              title
            )
          )
        )
      );
    }
  }]);
  return VideoUpNext;
}(_react.Component);

VideoUpNext.propTypes = {
  title: _propTypes2.default.string.isRequired,
  image: _propTypes2.default.string.isRequired, // recommended dimensions: 160x90
  href: _propTypes2.default.string.isRequired,
  visible: _propTypes2.default.bool,
  style: _propTypes4.default.style
};

VideoUpNext.defaultProps = {
  visible: false,
  style: null
};

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