backpack-ui/dist/components/video/videoPlaylist.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 _keys = require("babel-runtime/core-js/object/keys");

var _keys2 = _interopRequireDefault(_keys);

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 _class, _temp, _initialiseProps;

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

var _thumbnailListItem2 = _interopRequireDefault(_thumbnailListItem);

var _videoPopout = require("./videoPopout");

var _videoPopout2 = _interopRequireDefault(_videoPopout);

var _ = require("./");

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

var _colors2 = _interopRequireDefault(_colors);

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

var _mq2 = _interopRequireDefault(_mq);

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

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

var _timing2 = _interopRequireDefault(_timing);

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

var _zIndex2 = _interopRequireDefault(_zIndex);

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

var _time2 = _interopRequireDefault(_time);

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

var _propTypes4 = _interopRequireDefault(_propTypes3);

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

var lightBackgroundColor = _colors2.default.bgPrimary;
var lightBorderColor = _colors2.default.borderPrimary;
var darkBackgroundColor = "#1f1f1f";
var darkBorderColor = "#2b2b2b";

var styles = {
  container: {
    display: "flex"
  },

  playlistVideoContainer: {
    display: "flex",
    position: "relative",
    width: "100%"
  },

  playlistVideo: {
    flexGrow: 1,
    overflow: "hidden",
    position: "relative"
  },

  featuredVideoContainer: {
    border: 0,
    cursor: "pointer",
    height: "100%",
    left: 0,
    outline: 0,
    position: "absolute",
    textAlign: "left",
    top: 0,
    transition: "opacity " + _timing2.default.default + " ease",
    width: "100%",
    zIndex: _zIndex2.default.default
  },

  playlistContainer: (0, _defineProperty3.default)({
    flexShrink: 0,
    height: "auto",
    position: "relative",
    right: 0,
    top: 0,
    width: "370px"

  }, "@media (max-width: " + _mq2.default.max["960"] + ")", {
    display: "none"
  }),

  playlistInner: {
    default: {
      display: "flex",
      flexDirection: "column",
      height: "100%",
      left: 0,
      position: "absolute",
      top: 0,
      width: "100%"
    },
    light: {
      backgroundColor: lightBackgroundColor
    },
    dark: {
      backgroundColor: darkBackgroundColor
    }
  },

  playlistHeader: {
    default: {
      borderStyle: "solid",
      borderTopWidth: 0,
      borderRightWidth: 0,
      borderBottomWidth: "1px",
      borderLeftWidth: 0,
      fontSize: _typography.fontSizeHeading7 + "px",
      fontWeight: _typography.fontWeightLight,
      letterSpacing: "1.5px",
      lineHeight: _typography.lineHeightHeading7,
      padding: "8px 16px",
      textAlign: "center"
    },
    light: {
      color: _colors2.default.textPrimary,
      backgroundColor: lightBackgroundColor,
      borderColor: lightBorderColor
    },
    dark: {
      color: _colors2.default.textOverlay,
      backgroundColor: darkBackgroundColor,
      borderColor: darkBorderColor
    }
  },

  playlistItems: {
    overflowY: "auto"
  },

  thumbnailListItemContainer: {
    paddingLeft: "8px",
    paddingRight: "8px"
  },

  thumbnailListItem: {
    padding: "8px",
    cursor: "pointer"
  }
};

var VideoPlaylist = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(VideoPlaylist, _Component);

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

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

    _initialiseProps.call(_this);

    var video = props.video,
        videos = props.videos;

    _this.initialVideo = video || (videos && videos.length ? videos[0] : null);

    _this.state = {
      video: _this.initialVideo,
      autoplay: props.autoplay,
      childStyles: {}
    };

    _this.featuredVideoContainer = null;
    _this.childContainer = null;
    _this.childRefs = {};
    return _this;
  }

  (0, _createClass3.default)(VideoPlaylist, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.updateChildStyles();

      if (this.childContainer) {
        this.childContainer.addEventListener("scroll", this.onScroll);
      }

      if (typeof window !== "undefined") {
        window.addEventListener("resize", this.onWindowResize);
      }

      if (this.state.video && this.props.onLoadVideo) {
        this.props.onLoadVideo(this.state.video, this.state.autoplay);
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var video = nextProps.video,
          videos = nextProps.videos;

      this.setState({
        video: !video && videos && videos.length ? videos[0] : video,
        autoplay: nextProps.autoplay
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      if (prevProps.hideList && !this.props.hideList) {
        this.updateChildStyles();
        this.childContainer.addEventListener("scroll", this.onScroll);
      }

      if (this.props.onLoadVideo && (!prevState.video && this.state.video || prevState.video && this.state.video && prevState.video.id !== this.state.video.id)) {
        this.props.onLoadVideo(this.state.video, this.state.autoplay);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (typeof window !== "undefined") {
        window.removeEventListener("resize", this.onWindowResize);
      }
    }
  }, {
    key: "getNextVideo",
    value: function getNextVideo() {
      var videos = this.props.videos;
      var video = this.state.video;


      var videoIndex = videos.findIndex(function (v) {
        return video && v.id === video.id;
      });

      var nextVideo = videos && videos.length ? videos[0] : null;
      if (videos && videoIndex + 1 < videos.length) {
        nextVideo = videos[videoIndex + 1];
      }

      return nextVideo;
    }
  }, {
    key: "isOnLastVideo",
    value: function isOnLastVideo() {
      var videos = this.props.videos;
      var video = this.state.video;

      return video && videos && videos.length && video.id === videos[videos.length - 1].id;
    }
  }, {
    key: "updateChildStyles",
    value: function updateChildStyles() {
      var _this2 = this;

      if (!this.childContainer) {
        return;
      }

      var playlistTop = this.childContainer.getBoundingClientRect().top;
      var playlistHeight = this.childContainer.clientHeight;
      var childStyles = {};

      (0, _keys2.default)(this.childRefs).forEach(function (key) {
        var ref = _this2.childRefs[key];
        var refTop = ref ? ref.getBoundingClientRect().top : 0;
        var refHeight = ref ? ref.clientHeight : 0;

        if (!(0, _keys2.default)(childStyles).includes(key)) {
          childStyles[key] = {};
        }

        if (!playlistHeight) {
          childStyles[key].opacity = 0;
        } else {
          childStyles[key].opacity = playlistTop + playlistHeight - refTop;
          childStyles[key].opacity /= refHeight;
        }
      });

      this.setState({
        childStyles: childStyles
      });
    }
  }, {
    key: "hideFeaturedVideo",
    value: function hideFeaturedVideo() {
      var _this3 = this;

      if (!this.featuredVideoContainer) {
        return;
      }

      this.featuredVideoContainer.style.opacity = 0;

      setTimeout(function () {
        _this3.featuredVideoContainer.style.display = "none";
      }, 400);
    }
  }, {
    key: "showFeaturedVideo",
    value: function showFeaturedVideo() {
      var _this4 = this;

      if (!this.featuredVideoContainer) {
        return;
      }

      this.featuredVideoContainer.style.display = "block";

      setTimeout(function () {
        _this4.featuredVideoContainer.style.opacity = 1;
      }, 100);
    }
  }, {
    key: "render",
    value: function render() {
      var _this5 = this;

      var _props = this.props,
          heading = _props.heading,
          theme = _props.theme,
          videos = _props.videos,
          visibleVideos = _props.visibleVideos,
          videoPopout = _props.videoPopout,
          videoEmbed = _props.videoEmbed,
          hideList = _props.hideList,
          showFeaturedVideoCover = _props.showFeaturedVideoCover,
          mobile = _props.mobile,
          style = _props.style,
          qaHook = _props.qaHook;
      var _state = this.state,
          autoplay = _state.autoplay,
          childStyles = _state.childStyles;

      var video = this.state.video || this.initialVideo;

      /* eslint-disable jsx-a11y/no-static-element-interactions */
      return _react2.default.createElement(
        "div",
        {
          className: "VideoPlaylist",
          style: [styles.container, style]
        },
        video && videos && videos.length > 0 && _react2.default.createElement(
          "div",
          { style: styles.playlistVideoContainer },
          _react2.default.createElement(
            "div",
            { style: styles.playlistVideo },
            showFeaturedVideoCover && _react2.default.createElement(
              "div",
              {
                role: "button",
                ref: function ref(_ref) {
                  _this5.featuredVideoContainer = _ref;
                },
                style: styles.featuredVideoContainer,
                onClick: this.onClickFeaturedVideo
              },
              this.initialVideo && _react2.default.createElement(_.VideoFeatured, {
                title: this.initialVideo.name,
                description: this.initialVideo.description,
                duration: this.initialVideo.duration,
                image: this.initialVideo.image,
                mobile: mobile
              })
            ),
            _react2.default.createElement(_videoPopout2.default, (0, _extends3.default)({
              mobile: mobile
            }, videoPopout, {
              videoEmbed: (0, _extends3.default)({
                videoId: video.id
              }, videoEmbed, {
                autoplay: autoplay,
                onEnded: this.onEnded,
                mobile: mobile,
                onPlaySuccess: this.onPlaySuccess,
                vjsLP: (0, _extends3.default)({
                  showDescription: hideList,
                  showRelatedLocations: hideList,
                  showRelatedVideos: hideList
                }, videoEmbed.vjsLP || {})
              })
            }))
          ),
          !hideList && _react2.default.createElement(
            "div",
            { style: styles.playlistContainer },
            _react2.default.createElement(_radium.Style, {
              scopeSelector: ".VideoPlaylist",
              rules: {
                ".ListItem-thumbnail .Heading": {
                  fontWeight: "400 !important"
                },
                "::-webkit-scrollbar-thumb": {
                  backgroundColor: "rgb(180, 190, 196)"
                },
                "::-webkit-scrollbar": {
                  width: "4px"
                }
              }
            }),
            _react2.default.createElement(
              "div",
              {
                style: [styles.playlistInner.default, styles.playlistInner[theme]]
              },
              heading && _react2.default.createElement(
                "div",
                {
                  style: [styles.playlistHeader.default, styles.playlistHeader[theme]]
                },
                heading
              ),
              _react2.default.createElement(
                "div",
                {
                  ref: function ref(childContainer) {
                    _this5.childContainer = childContainer;
                  },
                  style: styles.playlistItems
                },
                videos.slice(0, visibleVideos || videos.length).map(function (v) {
                  return _react2.default.createElement(
                    "div",
                    {
                      key: v.id,
                      style: [styles.thumbnailListItemContainer, heading && { paddingTop: "8px" }],
                      ref: function ref(_ref2) {
                        _this5.childRefs[v.id] = _ref2;
                      }
                    },
                    _react2.default.createElement(_thumbnailListItem2.default, {
                      title: v.name,
                      onClick: function onClick() {
                        return _this5.onClickThumbnailVideo(v);
                      },
                      imagePath: v.thumbnailImage,
                      subtitle: [(0, _time2.default)(v.duration)],
                      theme: v.id === video.id ? "active" : theme,
                      imageIcon: v.id === video.id && "Play" || null,
                      imageIconLabel: "Play",
                      lineClamp: 2,
                      style: [styles.thumbnailListItem, childStyles[v.id]],
                      qaHook: qaHook
                    })
                  );
                })
              )
            )
          )
        )
      );
    }
  }]);
  return VideoPlaylist;
}(_react.Component), _initialiseProps = function _initialiseProps() {
  var _this6 = this;

  this.onWindowResize = function () {
    _this6.updateChildStyles();
  };

  this.onScroll = function () {
    _this6.updateChildStyles();
  };

  this.onEnded = function () {
    var _props2 = _this6.props,
        videoEmbed = _props2.videoEmbed,
        videos = _props2.videos;


    if (videoEmbed && videoEmbed.onEnded) {
      videoEmbed.onEnded();
    }

    if (_this6.isOnLastVideo()) {
      _this6.showFeaturedVideo();
      if (videos && videos.length) {
        _this6.loadVideo({
          video: videos[0],
          autoplay: false
        });
      }
    } else {
      _this6.loadVideo({
        video: _this6.getNextVideo(),
        autoplay: true
      });
    }
  };

  this.onPlaySuccess = function () {
    _this6.hideFeaturedVideo();
  };

  this.onClickFeaturedVideo = function () {
    _this6.hideFeaturedVideo();
    _this6.loadVideo({
      video: _this6.state.video,
      autoplay: true
    });
  };

  this.onClickThumbnailVideo = function (video) {
    _this6.hideFeaturedVideo();
    _this6.loadVideo({
      video: video,
      autoplay: true
    });
  };

  this.loadVideo = function (_ref3) {
    var video = _ref3.video,
        autoplay = _ref3.autoplay;

    _this6.setState({
      video: video,
      autoplay: autoplay
    });
  };
}, _temp);


var videoShape = {
  id: _propTypes2.default.string,
  name: _propTypes2.default.string,
  description: _propTypes2.default.string,
  image: _propTypes2.default.string, // recommended dimensions: 915x515
  thumbnailImage: _propTypes2.default.string, // recommended dimensions: 160x90
  duration: _propTypes2.default.number
};

VideoPlaylist.propTypes = {
  heading: _propTypes2.default.string,
  theme: _propTypes2.default.oneOf(["light", "dark"]),
  video: _propTypes2.default.shape(videoShape),
  videos: _propTypes2.default.arrayOf(_propTypes2.default.shape(videoShape)),
  visibleVideos: _propTypes2.default.number,
  videoPopout: _propTypes2.default.shape((0, _extends3.default)({}, _videoPopout2.default.propTypes, {
    showCloseButton: _propTypes2.default.bool
  })).isRequired,
  videoEmbed: _propTypes2.default.shape((0, _extends3.default)({}, _.VideoEmbed.propTypes, {
    videoId: _propTypes2.default.string
  })).isRequired,
  showFeaturedVideoCover: _propTypes2.default.bool.isRequired,
  hideList: _propTypes2.default.bool.isRequired,
  autoplay: _propTypes2.default.bool,
  onLoadVideo: _propTypes2.default.func,
  mobile: _propTypes2.default.bool,
  style: _propTypes4.default.style,
  qaHook: _propTypes2.default.bool
};

VideoPlaylist.defaultProps = {
  theme: "light",
  showFeaturedVideoCover: false,
  mobile: false,
  hideList: false,
  videoPopout: {},
  videoEmbed: {},
  qaHook: false
};

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