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

Lonely Planet's Components

"use strict";

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

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

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 _defineProperty2 = require("babel-runtime/helpers/defineProperty");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _fixedToWindow;

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

var _videoEmbed2 = _interopRequireDefault(_videoEmbed);

var _icon = require("../icon");

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

var _colors2 = _interopRequireDefault(_colors);

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

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

var _timing2 = _interopRequireDefault(_timing);

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

var _mq2 = _interopRequireDefault(_mq);

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 = {
  outerContainer: {
    backgroundColor: _colors2.default.bgOverlay,
    bottom: 0,
    height: "100%",
    left: 0,
    paddingBottom: 9 / 16 * 100 + "%",
    position: "relative",
    right: 0,
    top: 0,
    width: "100%"
  },

  innerContainer: {
    default: {
      bottom: 0,
      height: "100%",
      overflow: "hidden",
      position: "absolute",
      right: 0,
      transition: "opacity " + _timing2.default.fast + " ease",
      width: "100%"
    },

    outOfView: {
      opacity: 0
    },

    fixedToWindow: (_fixedToWindow = {
      bottom: "24px",
      boxShadow: "0px 1px 8px 0px " + (0, _color.rgba)(_colors2.default.bgOverlay, 0.4),
      position: "fixed",
      right: "24px",
      zIndex: _zIndex2.default.popup,
      width: "406px",
      height: 406 / 1.7778 + "px"

    }, (0, _defineProperty3.default)(_fixedToWindow, "@media (max-width: " + _mq2.default.max["560"] + ")", {
      width: "314px",
      height: 314 / 1.7778 + "px"
    }), (0, _defineProperty3.default)(_fixedToWindow, "@media (max-width: " + _mq2.default.max["360"] + ")", {
      width: "270px",
      height: 270 / 1.7778 + "px"
    }), _fixedToWindow),

    poppedOut: {
      opacity: 1
    }
  },

  overlay: {
    display: "inline-block",
    opacity: 0,
    position: "absolute",
    right: 0,
    textAlign: "right",
    top: "-30px",
    transition: "top " + _timing2.default.fast + " ease, opacity " + _timing2.default.fast + " ease",
    zIndex: _zIndex2.default.default
  },

  closeButton: {
    backgroundColor: "" + (0, _color.rgba)(_colors2.default.bgOverlay, 0.55),
    color: _colors2.default.textOverlay,
    padding: "2px 6px"
  }
};

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

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

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

    _this.onWindowResize = function () {
      _this.update();
    };

    _this.onWindowScroll = function () {
      _this.update();
    };

    _this.onMouseEnter = function () {
      _this.setState({
        hover: true
      });
    };

    _this.onMouseLeave = function () {
      _this.setState({
        hover: false
      });
    };

    _this.onVideoEmbedAdPlay = function () {
      var videoEmbed = _this.props.videoEmbed;


      if (videoEmbed.onAdPlay) {
        videoEmbed.onAdPlay();
      }

      _this.enabled = true;

      _this.setState({
        adIsPlaying: true
      });
    };

    _this.onVideoEmbedAdPause = function () {
      var videoEmbed = _this.props.videoEmbed;


      if (videoEmbed.onAdPause) {
        videoEmbed.onAdPause();
      }

      if (!_this.outOfView) {
        _this.enabled = false;
      }

      _this.setState({
        adIsPlaying: false
      });
    };

    _this.onVideoEmbedPlaying = function () {
      var videoEmbed = _this.props.videoEmbed;


      if (videoEmbed.onPlaying) {
        videoEmbed.onPlaying();
      }

      _this.enabled = true;

      _this.setState({
        adIsPlaying: false
      });

      _this.update();
    };

    _this.onVideoEmbedPause = function () {
      var videoEmbed = _this.props.videoEmbed;


      if (videoEmbed.onPause) {
        videoEmbed.onPause();
      }

      if (!_this.outOfView) {
        _this.enabled = false;
      }
    };

    _this.onVideoEmbedAdStarted = function () {
      var videoEmbed = _this.props.videoEmbed;


      if (videoEmbed.onAdStarted) {
        videoEmbed.onAdStarted();
      }

      _this.enabled = true;

      _this.setState({
        adIsPlaying: true
      });

      _this.update();
    };

    _this.onVideoEmbedMutedOverlayVisible = function () {
      _this.setState({
        mutedOverlayVisible: true
      });
    };

    _this.onVideoEmbedMutedOverlayHidden = function () {
      _this.setState({
        mutedOverlayVisible: false
      });
    };

    _this.onClosePopout = function () {
      _this.enabled = false;
      _this.update();
    };

    _this.onClickCloseButton = function () {
      _this.videoEmbed.pause();
      _this.enabled = false;
      _this.update();
    };

    _this.play = function () {
      _this.videoEmbed.play();
    };

    _this.isAboveViewport = function () {
      var bounds = _this.container.getBoundingClientRect();
      var halfContainerHeight = bounds.height / 2;
      return bounds.top < -halfContainerHeight;
    };

    _this.isBelowViewport = function () {
      var bounds = _this.container.getBoundingClientRect();
      var halfContainerHeight = bounds.height / 2;
      var windowHeight = window.innerHeight;
      return bounds.top > windowHeight - halfContainerHeight;
    };

    _this.update = function () {
      var _this$props = _this.props,
          whenAboveViewport = _this$props.whenAboveViewport,
          whenBelowViewport = _this$props.whenBelowViewport;


      if (_this.enabled && (whenAboveViewport && _this.isAboveViewport() || whenBelowViewport && _this.isBelowViewport())) {
        _this.outOfView = true;
        clearInterval(_this.inViewTimeoutId);
        _this.inViewTimeoutId = null;

        if (!_this.outOfViewTimeoutId) {
          _this.setState({
            outOfView: true
          });

          _this.outOfViewTimeoutId = setTimeout(function () {
            _this.setState({
              fixedToWindow: true,
              poppedOut: true
            });

            _this.outOfViewTimeoutId = null;
          }, 200);
        }
      } else {
        _this.outOfView = false;
        clearInterval(_this.outOfViewTimeoutId);
        _this.outOfViewTimeoutId = null;

        if (!_this.inViewTimeoutId) {
          _this.setState({
            poppedOut: false
          });

          _this.inViewTimeoutId = setTimeout(function () {
            _this.setState({
              fixedToWindow: false,
              outOfView: false
            });

            _this.inViewTimeoutId = null;
          }, 200);
        }
      }
    };

    _this.state = {
      outOfView: false,
      fixedToWindow: false,
      poppedOut: false,
      hover: false,
      adIsPlaying: false,
      mutedOverlayVisible: false
    };

    _this.enabled = false;
    _this.outOfViewTimeoutId = null;
    _this.inViewTimeoutId = null;
    _this.container = null;
    _this.videoEmbed = null;
    _this.outOfView = false;
    return _this;
  }

  (0, _createClass3.default)(VideoPopout, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (typeof window !== "undefined") {
        window.addEventListener("scroll", this.onWindowScroll);
        window.addEventListener("resize", this.onWindowResize);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (typeof window !== "undefined") {
        window.removeEventListener("scroll", this.onWindowScroll);
        window.removeEventListener("resize", this.onWindowResize);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          showCloseButton = _props.showCloseButton,
          videoEmbed = _props.videoEmbed,
          mobile = _props.mobile,
          style = _props.style;
      var _state = this.state,
          outOfView = _state.outOfView,
          fixedToWindow = _state.fixedToWindow,
          poppedOut = _state.poppedOut,
          hover = _state.hover,
          adIsPlaying = _state.adIsPlaying,
          mutedOverlayVisible = _state.mutedOverlayVisible;


      return _react2.default.createElement(
        "div",
        {
          className: "VideoPopout",
          ref: function ref(container) {
            _this2.container = container;
          },
          style: [styles.outerContainer, style]
        },
        _react2.default.createElement(
          "div",
          {
            style: [styles.innerContainer.default, outOfView && styles.innerContainer.outOfView, fixedToWindow && styles.innerContainer.fixedToWindow, poppedOut && styles.innerContainer.poppedOut],
            onMouseEnter: this.onMouseEnter,
            onMouseLeave: this.onMouseLeave
          },
          _react2.default.createElement(_radium.Style, {
            scopeSelector: ".VideoPopout:hover",
            rules: {
              ".vjs-control-bar": {
                transform: "translateY(0) !important"
              }
            }
          }),
          showCloseButton && _react2.default.createElement(
            "div",
            {
              className: "VideoPopout-overlay",
              style: [styles.overlay, poppedOut && (hover || mobile) && !adIsPlaying && !mutedOverlayVisible ? { opacity: 1, top: 0 } : {}]
            },
            _react2.default.createElement(
              "button",
              {
                style: styles.closeButton,
                onClick: this.onClickCloseButton
              },
              _react2.default.createElement(_icon.Close, { width: 16, height: 16 })
            )
          ),
          _react2.default.createElement(_videoEmbed2.default, (0, _extends3.default)({
            ref: function ref(_ref) {
              _this2.videoEmbed = _ref;
            }
          }, videoEmbed, {
            mobile: mobile,
            onPlaying: this.onVideoEmbedPlaying,
            onPause: this.onVideoEmbedPause,
            onAdStarted: this.onVideoEmbedAdStarted,
            onAdPlay: this.onVideoEmbedAdPlay,
            onAdPause: this.onVideoEmbedAdPause,
            onMutedOverlayVisible: this.onVideoEmbedMutedOverlayVisible,
            onMutedOverlayHidden: this.onVideoEmbedMutedOverlayHidden,
            vjsLP: (0, _extends3.default)({}, videoEmbed.vjsLP || {}, {
              popoutHandler: poppedOut ? this.onClosePopout : null
            }),
            style: (0, _extends3.default)({}, videoEmbed.style || {}, poppedOut ? { paddingBottom: 9 / 16 * 100 + "%" } : {})
          }))
        )
      );
    }
  }]);
  return VideoPopout;
}(_react.Component);

VideoPopout.propTypes = {
  whenAboveViewport: _propTypes2.default.bool,
  whenBelowViewport: _propTypes2.default.bool,
  showCloseButton: _propTypes2.default.bool.isRequired,
  videoEmbed: _propTypes2.default.shape((0, _extends3.default)({}, _videoEmbed2.default.propTypes, {
    videoId: _propTypes2.default.string
  })),
  mobile: _propTypes2.default.bool,
  style: _propTypes4.default.style
};

VideoPopout.defaultProps = {
  whenAboveViewport: true,
  whenBelowViewport: true,
  showCloseButton: true,
  videoEmbed: {}
};

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