backpack-ui
Version:
Lonely Planet's Components
378 lines (310 loc) • 12.5 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 _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 _container = require("../container");
var _container2 = _interopRequireDefault(_container);
var _thumbnailList = require("../thumbnailList");
var _thumbnailList2 = _interopRequireDefault(_thumbnailList);
var _thumbnailListItem = require("../thumbnailListItem");
var _thumbnailListItem2 = _interopRequireDefault(_thumbnailListItem);
var _videoPopout = require("./videoPopout");
var _videoPopout2 = _interopRequireDefault(_videoPopout);
var _ = require("./");
var _cardShelfVideoSlider = require("../cardShelfVideoSlider");
var _cardShelfVideoSlider2 = _interopRequireDefault(_cardShelfVideoSlider);
var _cardVideo = require("../cardVideo");
var _cardVideo2 = _interopRequireDefault(_cardVideo);
var _time = require("../../utils/time");
var _time2 = _interopRequireDefault(_time);
var _mq = require("../../styles/mq");
var _mq2 = _interopRequireDefault(_mq);
var _spacing = require("../../styles/spacing");
var _spacing2 = _interopRequireDefault(_spacing);
var _propTypes3 = require("../../utils/propTypes");
var _propTypes4 = _interopRequireDefault(_propTypes3);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var styles = {
playlistContainer: (0, _defineProperty3.default)({}, "@media (max-width: " + _mq2.default.max["720"] + ")", {
marginLeft: 0,
marginRight: 0,
marginTop: 0,
paddingLeft: 0,
paddingRight: 0
}),
sliderContainer: (0, _defineProperty3.default)({
display: "none",
marginTop: _spacing2.default.gutter
}, "@media (min-width: " + _mq2.default.min["560"] + ") and (max-width: " + _mq2.default.max["960"] + ")", {
display: "block"
}),
listContainer: (0, _defineProperty3.default)({
display: "block",
marginTop: _spacing2.default.gutter
}, "@media (min-width: " + _mq2.default.min["560"] + ")", {
display: "none"
})
};
var VideoPlaylistWithSlider = function (_React$Component) {
(0, _inherits3.default)(VideoPlaylistWithSlider, _React$Component);
function VideoPlaylistWithSlider(props) {
(0, _classCallCheck3.default)(this, VideoPlaylistWithSlider);
var _this = (0, _possibleConstructorReturn3.default)(this, (VideoPlaylistWithSlider.__proto__ || (0, _getPrototypeOf2.default)(VideoPlaylistWithSlider)).call(this, props));
_this.onLoadVideo = function (video, autoplay) {
var onLoadVideo = _this.props.onLoadVideo;
if (onLoadVideo) {
onLoadVideo(video, autoplay);
}
if (autoplay) {
_this.play(video);
} else {
_this.setState({
video: video,
autoplay: autoplay,
enableVideoInfo: false
});
}
};
_this.onClickVideo = function (video) {
_this.play(video);
};
_this.getInitialVideo = function () {
var _this$props = _this.props,
video = _this$props.video,
videos = _this$props.videos;
return videos && videos.length > 0 ? videos[0] : video;
};
_this.play = function (video) {
var isInitialVideo = video.id === _this.getInitialVideo().id;
_this.setState({
video: video,
autoplay: !isInitialVideo ? true : _this.state.autoplay,
enableVideoInfo: !isInitialVideo ? true : _this.state.enableVideoInfo
});
};
_this.state = {
video: props.video,
autoplay: props.autoplay,
enableVideoInfo: false
};
return _this;
}
(0, _createClass3.default)(VideoPlaylistWithSlider, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var videoIds = (this.props.videos || []).map(function (v) {
return v.id;
}).sort();
var nextVideoIds = (nextProps.videos || []).map(function (v) {
return v.id;
}).sort();
if (videoIds.length !== nextVideoIds.length || videoIds.filter(function (v, i) {
return v.id !== nextVideoIds[i].id;
}).length !== 0) {
// Assume a new playlist has been loaded and state should reset
this.setState({
video: nextProps.video,
enableVideoInfo: false
});
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
videos = _props.videos,
theme = _props.theme,
visibleVideosDesktop = _props.visibleVideosDesktop,
visibleVideosMobile = _props.visibleVideosMobile,
videoPopout = _props.videoPopout,
videoEmbed = _props.videoEmbed,
heading = _props.heading,
sliderHeading = _props.sliderHeading,
hideList = _props.hideList,
mobile = _props.mobile,
showVideoInfo = _props.showVideoInfo,
showFeaturedVideoCover = _props.showFeaturedVideoCover,
followVideoUrls = _props.followVideoUrls,
style = _props.style,
qaHook = _props.qaHook;
var _state = this.state,
video = _state.video,
autoplay = _state.autoplay,
enableVideoInfo = _state.enableVideoInfo;
return _react2.default.createElement(
"div",
{ className: "VideoPlaylistWithSlider", style: style },
videos && videos.length > 0 && _react2.default.createElement(
"div",
null,
_react2.default.createElement(
_container2.default,
{ style: styles.playlistContainer },
_react2.default.createElement(_.VideoPlaylist, {
heading: heading,
theme: theme,
mobile: mobile,
video: video,
videos: videos,
hideList: hideList,
showFeaturedVideoCover: showFeaturedVideoCover,
visibleVideos: visibleVideosDesktop,
autoplay: autoplay,
onLoadVideo: this.onLoadVideo,
videoPopout: videoPopout,
videoEmbed: (0, _extends3.default)({}, videoEmbed, {
vjsLP: (0, _extends3.default)({
showTitle: !(showVideoInfo && enableVideoInfo),
showDescription: hideList && !(showVideoInfo && enableVideoInfo)
}, videoEmbed.vjsLP || {})
}),
qaHook: qaHook
})
),
showVideoInfo && enableVideoInfo && _react2.default.createElement(
_container2.default,
null,
_react2.default.createElement(_.VideoInfo, {
video: video,
fadeIn: true
})
),
!hideList && _react2.default.createElement(
"div",
null,
_react2.default.createElement(
"div",
{ style: styles.sliderContainer },
_react2.default.createElement(
_container2.default,
null,
_react2.default.createElement(
_cardShelfVideoSlider2.default,
{
heading: sliderHeading || heading,
mobile: mobile,
spacing: "compact"
},
videos.slice(0, visibleVideosDesktop).map(function (v) {
return _react2.default.createElement(_cardVideo2.default, {
key: v.id,
heading: v.name,
runtime: v.duration,
imageSrc: v.cardImage,
href: followVideoUrls ? v.url : null,
onClick: !followVideoUrls ? function () {
return _this2.onClickVideo(v);
} : null,
layout: "tile",
spacing: "compact",
mobile: mobile,
actionIcon: v.cardActionIcon,
onClickActionIcon: v.cardOnClickActionIcon
});
})
)
)
),
_react2.default.createElement(
"div",
{ style: styles.listContainer },
_react2.default.createElement(
_container2.default,
null,
_react2.default.createElement(
_thumbnailList2.default,
{ heading: sliderHeading || heading },
videos.slice(0, visibleVideosMobile).map(function (v) {
return _react2.default.createElement(_thumbnailListItem2.default, {
key: v.id,
title: v.name,
href: followVideoUrls ? v.url : null,
onClick: !followVideoUrls ? function () {
return _this2.onClickVideo(v);
} : null,
imagePath: v.thumbnailImage,
subtitle: [(0, _time2.default)(v.duration)],
lineClamp: 0,
qaHook: qaHook
});
})
)
)
)
)
)
);
}
}]);
return VideoPlaylistWithSlider;
}(_react2.default.Component);
var videoShape = {
id: _propTypes2.default.string,
name: _propTypes2.default.string,
description: _propTypes2.default.string,
url: _propTypes2.default.string,
duration: _propTypes2.default.number,
host: _propTypes2.default.string,
director: _propTypes2.default.string,
year: _propTypes2.default.string,
image: _propTypes2.default.string, // recommended dimensions: 915x515
cardImage: _propTypes2.default.string, // recommended dimensions: 430x250
thumbnailImage: _propTypes2.default.string, // recommended dimensions: 160x90
cardActionIcon: _propTypes2.default.string,
cardOnClickActionIcon: _propTypes2.default.func
};
VideoPlaylistWithSlider.propTypes = {
video: _propTypes2.default.shape(videoShape),
theme: _propTypes2.default.oneOf(["light", "dark"]),
videos: _propTypes2.default.arrayOf(_propTypes2.default.shape(videoShape)).isRequired,
heading: _propTypes2.default.string,
sliderHeading: _propTypes2.default.string,
visibleVideosDesktop: _propTypes2.default.number.isRequired,
visibleVideosMobile: _propTypes2.default.number.isRequired,
hideList: _propTypes2.default.bool,
autoplay: _propTypes2.default.bool,
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,
onLoadVideo: _propTypes2.default.func,
mobile: _propTypes2.default.bool,
showVideoInfo: _propTypes2.default.bool,
showFeaturedVideoCover: _propTypes2.default.bool.isRequired,
followVideoUrls: _propTypes2.default.bool,
style: _propTypes4.default.style,
qaHook: _propTypes2.default.bool
};
VideoPlaylistWithSlider.defaultProps = {
theme: "light",
visibleVideosDesktop: 12,
visibleVideosMobile: 4,
showFeaturedVideoCover: false,
videoPopout: {},
videoEmbed: {},
qaHook: false
};
exports.default = (0, _radium2.default)(VideoPlaylistWithSlider);