backpack-ui
Version:
Lonely Planet's Components
390 lines (311 loc) • 10.6 kB
JavaScript
"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 _heading;
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 _heading2 = require("../heading");
var _heading3 = _interopRequireDefault(_heading2);
var _italicText = require("../italicText");
var _italicText2 = _interopRequireDefault(_italicText);
var _iconButton = require("../iconButton");
var _iconButton2 = _interopRequireDefault(_iconButton);
var _video = require("../video");
var _colors = require("../../styles/colors");
var _colors2 = _interopRequireDefault(_colors);
var _typography = require("../../styles/typography");
var _zIndex = require("../../styles/zIndex");
var _zIndex2 = _interopRequireDefault(_zIndex);
var _mq = require("../../styles/mq");
var _mq2 = _interopRequireDefault(_mq);
var _time = require("../../utils/time");
var _time2 = _interopRequireDefault(_time);
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: {
backgroundPosition: "center",
backgroundSize: "cover",
height: "100%",
position: "relative",
width: "100%"
},
content: {
color: _colors2.default.textOverlay,
height: "100%"
},
backgroundVideo: {
height: "100%",
left: 0,
position: "absolute",
top: 0,
width: "100%"
},
backdrop: {
backgroundColor: (0, _color.rgba)(_colors2.default.bgOverlay, 0.15),
height: "100%",
left: 0,
position: "absolute",
top: 0,
width: "100%"
},
textContainer: (0, _defineProperty3.default)({
bottom: 0,
display: "flex",
flexDirection: "column",
height: "100%",
justifyContent: "flex-end",
left: 0,
padding: "32px 16px",
position: "relative",
zIndex: _zIndex2.default.default + 1
}, "@media (min-width: " + _mq2.default.min["480"] + ")", {
padding: "40px 32px"
}),
heading: (_heading = {
color: _colors2.default.textOverlay,
fontSize: _typography.fontSizeHeading6 + "px",
lineHeight: _typography.lineHeightHeading6,
paddingBottom: "12px"
}, (0, _defineProperty3.default)(_heading, "@media (min-width: " + _mq2.default.min["480"] + ")", {
fontSize: _typography.fontSizeHeading5 + "px",
lineHeight: _typography.lineHeightHeading5
}), (0, _defineProperty3.default)(_heading, "@media (min-width: " + _mq2.default.min["600"] + ")", {
fontSize: _typography.fontSizeHeading4 + "px",
lineHeight: _typography.lineHeightHeading4,
paddingBottom: "24px"
}), _heading),
description: (0, _defineProperty3.default)({
fontSize: _typography.fontSizeHeading7 + "px",
marginBottom: "24px",
overflow: "hidden"
}, "@media (max-width: " + _mq2.default.max["840"] + ")", {
display: "none"
}),
adSlot: {
marginRight: "32px",
marginTop: "40px",
position: "absolute",
right: 0,
top: 0,
zIndex: _zIndex2.default.default + 2
},
graphicContainer: {
alignItems: "center",
display: "flex",
flexDirection: "column",
height: "100%",
justifyContent: "center",
left: 0,
padding: "40px 32px",
position: "absolute",
top: 0,
width: "100%",
zIndex: _zIndex2.default.default + 1
},
graphic: {
marginBottom: "16px",
maxWidth: "90%"
},
graphicTitle: {
color: _colors2.default.textOverlay,
fontSize: _typography.fontSizeHeading7 + "px",
lineHeight: _typography.lineHeightHeading7,
marginBottom: "8px",
textAlign: "center"
},
duration: {
color: _colors2.default.textOverlay,
float: "right",
fontSize: _typography.fontSizeHeading7 + "px",
lineHeight: 56 / _typography.fontSizeHeading7
},
playButton: {
fontSize: "28px",
paddingLeft: "6px"
}
};
var getPlayButton = function getPlayButton() {
return _react2.default.createElement(_iconButton2.default, {
hoverBackgroundScale: 1.15,
shadow: true,
iconName: "Play",
style: styles.playButton,
size: 56,
hoverColor: _colors2.default.textOverlay,
hoverBackgroundColor: _colors2.default.linkPrimary,
label: "Play",
transitionDuration: "300ms"
});
};
var VideoFeatured = function (_Component) {
(0, _inherits3.default)(VideoFeatured, _Component);
function VideoFeatured(props) {
(0, _classCallCheck3.default)(this, VideoFeatured);
var _this = (0, _possibleConstructorReturn3.default)(this, (VideoFeatured.__proto__ || (0, _getPrototypeOf2.default)(VideoFeatured)).call(this, props));
_this.onMouseEnter = function () {
_this.setState({
hovering: true
});
};
_this.onMouseLeave = function () {
_this.setState({
hovering: false
});
};
_this.getStrippedDescription = function () {
var description = _this.props.description;
if (!description || description.trim().length === 0) {
return "";
}
var shortDescription = description;
var endOfSentence = description.indexOf(". ");
var firstComma = description.indexOf(", ");
var index = null;
if (endOfSentence !== -1) {
index = endOfSentence;
}
if (firstComma !== -1 && (index === null || index && firstComma < endOfSentence)) {
index = firstComma;
}
if (index) {
shortDescription = description.substr(0, index) + "\u2026";
}
// Strip HTML tags before returning
return shortDescription.replace(/<\/?[^>]+(>|$)/g, "");
};
_this.state = {
hovering: false
};
return _this;
}
(0, _createClass3.default)(VideoFeatured, [{
key: "render",
value: function render() {
var _props = this.props,
videoId = _props.videoId,
title = _props.title,
description = _props.description,
duration = _props.duration,
image = _props.image,
graphic = _props.graphic,
adSlot = _props.adSlot,
hoverEffects = _props.hoverEffects,
mobile = _props.mobile,
videoEmbed = _props.videoEmbed,
style = _props.style;
var hovering = this.state.hovering;
return _react2.default.createElement(
"div",
{
className: "VideoFeatured",
style: [styles.container, { backgroundImage: image ? "url(\"" + image + "\")" : "none" }, style],
onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave
},
videoId && !mobile && _react2.default.createElement(
"div",
{ style: styles.backgroundVideo },
_react2.default.createElement(_video.VideoEmbed, (0, _extends3.default)({}, videoEmbed, {
videoId: videoId,
playerName: "background",
cover: true,
autoplay: true,
muted: true,
loop: true,
controls: false,
visible: !hoverEffects || hovering,
visibleWhileNotPlaying: false,
previewMode: true
}))
),
_react2.default.createElement("div", { style: styles.backdrop }),
!graphic && _react2.default.createElement(
"div",
{ style: styles.adSlot },
adSlot
),
_react2.default.createElement(
"div",
{ style: styles.content },
graphic && _react2.default.createElement(
"div",
{ style: styles.graphicContainer },
_react2.default.createElement("img", { src: graphic, style: styles.graphic, alt: title }),
!adSlot && _react2.default.createElement(
_italicText2.default,
{ style: styles.graphicTitle },
title
),
adSlot
),
!graphic && _react2.default.createElement(
"div",
{ style: styles.textContainer },
_react2.default.createElement(
_heading3.default,
{ level: 2, weight: "thick", override: styles.heading },
title
),
description && _react2.default.createElement(
"div",
{ style: styles.description },
this.getStrippedDescription()
),
_react2.default.createElement(
"div",
null,
getPlayButton(),
_react2.default.createElement(
"div",
{ style: styles.duration },
(0, _time2.default)(duration)
)
)
)
)
);
}
}]);
return VideoFeatured;
}(_react.Component);
VideoFeatured.propTypes = {
videoId: _propTypes2.default.string,
title: _propTypes2.default.string,
description: _propTypes2.default.string,
duration: _propTypes2.default.number,
image: _propTypes2.default.string,
graphic: _propTypes2.default.string,
adSlot: _propTypes2.default.element,
hoverEffects: _propTypes2.default.bool,
mobile: _propTypes2.default.bool,
videoEmbed: _propTypes2.default.shape((0, _extends3.default)({}, _video.VideoEmbed.propTypes, {
videoId: _propTypes2.default.string
})),
style: _propTypes4.default.style
};
VideoFeatured.defaultProps = {
mobile: false
};
exports.default = (0, _radium2.default)(VideoFeatured);