backpack-ui/dist/components/video/videoInfo.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 _default2, _socialLinksDesktop, _default4;

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 _defer = require("lodash/defer");

var _defer2 = _interopRequireDefault(_defer);

var _heading = require("../heading");

var _heading2 = _interopRequireDefault(_heading);

var _link = require("../link");

var _link2 = _interopRequireDefault(_link);

var _socialIconButton = require("../socialIconButton");

var _socialIconButton2 = _interopRequireDefault(_socialIconButton);

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

var _colors2 = _interopRequireDefault(_colors);

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

var _mq2 = _interopRequireDefault(_mq);

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

var _timing2 = _interopRequireDefault(_timing);

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

var _grid = require("../../utils/grid");

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

var styles = {
  container: {
    default: {
      opacity: 0,
      transition: "opacity " + _timing2.default.default + " linear"
    },

    visible: {
      opacity: 1
    }
  },

  section: {
    default: (0, _defineProperty3.default)({
      overflow: "hidden",
      display: "flex",
      paddingTop: (0, _grid.gutter)("static")

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

    light: {
      color: _colors2.default.textPrimary
    },

    dark: (0, _defineProperty3.default)({
      color: _colors2.default.textOverlay,
      borderBottom: "1px solid #474747"

    }, "@media (min-width: " + _mq2.default.min["480"] + ")", {
      marginBottom: "48px"
    })
  },

  article: {
    display: "flex",
    flexDirection: "row",
    flexGrow: 1,
    paddingBottom: (0, _grid.gutter)("static"),
    position: "relative"
  },

  heading: {
    default: (_default2 = {
      fontSize: _typography.fontSizeHeading7 + "px",
      lineHeight: _typography.lineHeightHeading7

    }, (0, _defineProperty3.default)(_default2, "@media (max-width: " + _mq2.default.max["480"] + ")", {
      letterSpacing: "-0.5px"
    }), (0, _defineProperty3.default)(_default2, "@media (min-width: " + _mq2.default.min["480"] + ")", {
      fontSize: _typography.fontSizeHeading5 + "px",
      lineHeight: _typography.lineHeightHeading5
    }), (0, _defineProperty3.default)(_default2, "@media (min-width: " + _mq2.default.min["960"] + ")", {
      fontSize: _typography.fontSizeHeading4 + "px",
      lineHeight: _typography.lineHeightHeading4,
      paddingRight: "245px"
    }), _default2),

    light: {
      color: _colors2.default.textPrimary
    },

    dark: {
      color: _colors2.default.textOverlay
    }
  },

  description: (0, _defineProperty3.default)({
    fontSize: _typography.fontSizeBodySmall + "px",
    fontWeight: _typography.fontWeightLight,
    lineHeight: _typography.lineHeightBodySmall,
    marginBottom: "16px",
    marginTop: "16px"

  }, "@media (min-width: " + _mq2.default.min["960"] + ")", {
    fontSize: _typography.fontSizeBodyArticleSmall + "px",
    lineHeight: _typography.lineHeightBodyArticleSmall,
    marginBottom: "24px",
    marginTop: "24px"
  }),

  data: {
    fontSize: _typography.fontSizeUppercase + "px",
    fontWeight: _typography.fontWeightRegular,
    letterSpacing: "0.05px",
    lineHeight: 18 / _typography.fontSizeUppercase,
    textTransform: "uppercase"
  },

  dataLabel: {
    color: _colors2.default.accentGray,
    fontStyle: "italic",
    marginRight: "8px",
    textTransform: "none"
  },

  dataDivider: {
    color: _colors2.default.accentGray,
    marginLeft: "8px",
    marginRight: "8px"
  },

  socialLinksDesktop: (_socialLinksDesktop = {
    display: "none",
    marginLeft: "auto",
    paddingLeft: "24px"

  }, (0, _defineProperty3.default)(_socialLinksDesktop, "@media (min-width: " + _mq2.default.min["480"] + ")", {
    display: "flex"
  }), (0, _defineProperty3.default)(_socialLinksDesktop, "@media (min-width: " + _mq2.default.min["480"] + ") and (max-width: " + _mq2.default.max["960"] + ")", {
    flexDirection: "column"
  }), (0, _defineProperty3.default)(_socialLinksDesktop, "@media (min-width: " + _mq2.default.min["960"] + ")", {
    position: "absolute",
    right: 0,
    top: 0
  }), _socialLinksDesktop),

  socialLinkDesktop: {
    float: "right",
    marginLeft: "16px",
    marginBottom: "16px"
  },

  socialLinksMobile: {
    default: (0, _defineProperty3.default)({
      borderStyle: "solid",
      borderBottomWidth: "1px",
      borderLeftWidth: 0,
      borderRightWidth: 0,
      paddingBottom: (0, _grid.gutter)("static"),
      paddingTop: (0, _grid.gutter)("static")

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

    light: {
      borderTopWidth: "1px",
      borderColor: _colors2.default.borderPrimary
    },

    dark: {
      borderColor: "#474747",
      borderTopWidth: 0,
      marginBottom: (0, _grid.gutter)("static")
    }
  },

  socialLinkMobile: {
    marginRight: "16px"
  },

  socialLinksText: {
    default: {
      fontSize: _typography.fontSizeUppercase + "px",
      fontWeight: _typography.fontWeightRegular,
      letterSpacing: "0.05px",
      lineHeight: _typography.lineHeightUppercase,
      paddingBottom: (0, _grid.gutter)("static", 1, 0.5),
      textTransform: "uppercase"
    },

    light: {
      color: _colors2.default.textPrimary
    },

    dark: {
      color: _colors2.default.textOverlay
    }
  },

  adContainer: {
    default: (_default4 = {
      display: "none"

    }, (0, _defineProperty3.default)(_default4, "@media (max-width: " + _mq2.default.max["720"] + ")", {
      paddingBottom: (0, _grid.gutter)("static"),
      borderLeftWidth: 0
    }), (0, _defineProperty3.default)(_default4, "@media (min-width: " + _mq2.default.min["720"] + ")", {
      marginLeft: (0, _grid.gutter)("static"),
      paddingLeft: (0, _grid.gutter)("static"),
      paddingRight: (0, _grid.gutter)("static")
    }), _default4),

    light: {},

    dark: {
      borderLeftColor: "#474747",
      borderLeftStyle: "solid",
      borderLeftWidth: "1px"
    }
  }
};

var facebookAppId = "111537044496";

var VideoInfo = function (_React$Component) {
  (0, _inherits3.default)(VideoInfo, _React$Component);

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

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

    _this.onClickFacebook = function () {
      var video = _this.props.video;

      var videoUrl = video.url.startsWith("http") ? video.url : "https://www.lonelyplanet.com" + video.url;
      var appId = facebookAppId;
      var display = "popup";
      var href = encodeURIComponent(videoUrl);
      var url = "https://www.facebook.com/dialog/share?app_id=" + appId + "&display=" + display + "&href=" + href;
      window.open(url, "_blank", "width=555,height=655");
    };

    _this.onClickFacebookMessenger = function () {
      var video = _this.props.video;

      var videoUrl = video.url.startsWith("http") ? video.url : "https://www.lonelyplanet.com" + video.url;
      var appId = facebookAppId;
      var href = encodeURIComponent(videoUrl);
      var url = "fb-messenger://share?link=" + href + "&app_id=" + appId;
      window.open(url);
    };

    _this.onClickTwitter = function () {
      var video = _this.props.video;

      var videoUrl = video.url.startsWith("http") ? video.url : "https://www.lonelyplanet.com" + video.url;
      var href = encodeURIComponent(videoUrl);
      var text = encodeURIComponent(video.name);
      var via = "lonelyplanet";
      var url = "https://twitter.com/share?url=" + href + "&via=" + via + "&text=" + text;
      window.open(url, "_blank", "width=500,height=300");
    };

    _this.onClickWhatsApp = function () {
      var _this$props = _this.props,
          video = _this$props.video,
          mobile = _this$props.mobile;

      var videoUrl = video.url.startsWith("http") ? video.url : "https://www.lonelyplanet.com" + video.url;
      var text = encodeURIComponent(video.name + " " + videoUrl);
      var url = mobile ? "whatsapp://send?text=" + text : "https://api.whatsapp.com/send?text=" + text;
      window.open(url, "_blank");
    };

    _this.state = {
      visible: !props.fadeIn
    };
    return _this;
  }

  (0, _createClass3.default)(VideoInfo, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      (0, _defer2.default)(function () {
        return _this2.setState({ visible: true });
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _props = this.props,
          video = _props.video,
          theme = _props.theme,
          mobile = _props.mobile,
          headingLevel = _props.headingLevel;
      var visible = this.state.visible;


      return _react2.default.createElement(
        "div",
        {
          className: "VideoInfo",
          style: [styles.container.default, video && visible && styles.container.visible]
        },
        video && _react2.default.createElement(
          "div",
          null,
          _react2.default.createElement(_radium.Style, {
            scopeSelector: ".VideoInfo",
            rules: {
              "#ad-logo > div": {
                display: "flex",
                justifyContent: "flex-start",
                flexDirection: "column",
                height: "100%"
              },
              a: theme === "dark" ? { color: "#41a4ef" } : {}
            }
          }),
          _react2.default.createElement(
            "section",
            {
              style: [styles.section.default, styles.section[theme]]
            },
            _react2.default.createElement(
              "article",
              { style: styles.article },
              _react2.default.createElement(
                "div",
                null,
                _react2.default.createElement(
                  _heading2.default,
                  {
                    level: headingLevel,
                    weight: "thick",
                    tracking: "tight",
                    override: (0, _extends3.default)({}, styles.heading.default, styles.heading[theme])
                  },
                  video.name
                ),
                video.description && _react2.default.createElement("p", {
                  style: styles.description,
                  dangerouslySetInnerHTML: { __html: video.description }
                }),
                _react2.default.createElement(
                  "p",
                  { style: styles.data },
                  video.host && _react2.default.createElement(
                    "span",
                    null,
                    _react2.default.createElement(
                      "span",
                      { style: styles.dataLabel },
                      "Host:"
                    ),
                    video.host
                  ),
                  video.director && video.host && _react2.default.createElement(
                    "span",
                    { style: styles.dataDivider },
                    "|"
                  ),
                  video.director && _react2.default.createElement(
                    "span",
                    null,
                    _react2.default.createElement(
                      "span",
                      { style: styles.dataLabel },
                      "Director:"
                    ),
                    video.director
                  ),
                  video.year && (video.director || video.host) && _react2.default.createElement(
                    "span",
                    { style: styles.dataDivider },
                    "|"
                  ),
                  video.year,
                  video.relatedChannels && video.relatedChannels.length && (video.director || video.host || video.year) && _react2.default.createElement(
                    "span",
                    { style: styles.dataDivider },
                    "|"
                  ),
                  video.relatedChannels && video.relatedChannels.map(function (channel, index) {
                    return _react2.default.createElement(
                      "span",
                      { key: index },
                      _react2.default.createElement(
                        _link2.default,
                        {
                          to: channel.url,
                          style: styles.data
                        },
                        channel.name
                      ),
                      _react2.default.createElement(
                        "span",
                        {
                          style: [styles.dataDivider, index === video.relatedChannels.length - 1 ? { display: "none" } : {}]
                        },
                        "|"
                      )
                    );
                  })
                )
              ),
              video.url && _react2.default.createElement(
                "div",
                { style: styles.socialLinksDesktop },
                _react2.default.createElement(_socialIconButton2.default, {
                  network: "facebook",
                  onClick: this.onClickFacebook,
                  style: styles.socialLinkDesktop
                }),
                mobile && _react2.default.createElement(_socialIconButton2.default, {
                  network: "facebookMessenger",
                  onClick: this.onClickFacebookMessenger,
                  style: styles.socialLinkDesktop
                }),
                _react2.default.createElement(_socialIconButton2.default, {
                  network: "twitter",
                  onClick: this.onClickTwitter,
                  style: styles.socialLinkDesktop
                }),
                _react2.default.createElement(_socialIconButton2.default, {
                  network: "whatsapp",
                  onClick: this.onClickWhatsApp,
                  style: styles.socialLinkDesktop
                })
              )
            ),
            _react2.default.createElement("aside", {
              id: "ad-logo",
              style: [styles.adContainer.default, styles.adContainer[theme]]
            })
          ),
          video.url && _react2.default.createElement(
            "div",
            {
              style: [styles.socialLinksMobile.default, styles.socialLinksMobile[theme]]
            },
            _react2.default.createElement(
              "div",
              {
                style: [styles.socialLinksText.default, styles.socialLinksText[theme]]
              },
              "Share this video:"
            ),
            _react2.default.createElement(
              "div",
              null,
              _react2.default.createElement(_socialIconButton2.default, {
                network: "facebook",
                onClick: this.onClickFacebook,
                style: styles.socialLinkMobile
              }),
              mobile && _react2.default.createElement(_socialIconButton2.default, {
                network: "facebookMessenger",
                onClick: this.onClickFacebookMessenger,
                style: styles.socialLinkMobile
              }),
              _react2.default.createElement(_socialIconButton2.default, {
                network: "twitter",
                onClick: this.onClickTwitter,
                style: styles.socialLinkMobile
              }),
              _react2.default.createElement(_socialIconButton2.default, {
                network: "whatsapp",
                onClick: this.onClickWhatsApp,
                style: styles.socialLinkMobile
              })
            )
          )
        )
      );
    }
  }]);
  return VideoInfo;
}(_react2.default.Component);

var channelShape = {
  name: _propTypes2.default.string,
  url: _propTypes2.default.string
};

var videoShape = {
  name: _propTypes2.default.string,
  description: _propTypes2.default.string,
  url: _propTypes2.default.string,
  host: _propTypes2.default.string,
  director: _propTypes2.default.string,
  year: _propTypes2.default.string,
  relatedChannels: _propTypes2.default.arrayOf(_propTypes2.default.shape(channelShape))
};

VideoInfo.propTypes = {
  video: _propTypes2.default.shape(videoShape),
  theme: _propTypes2.default.oneOf(["light", "dark"]).isRequired,
  mobile: _propTypes2.default.bool,
  headingLevel: _propTypes2.default.number,
  fadeIn: _propTypes2.default.bool
};

VideoInfo.defaultProps = {
  theme: "light",
  headingLevel: 2,
  fadeIn: false
};

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