backpack-ui
Version:
Lonely Planet's Components
1,289 lines (1,102 loc) • 36.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require("babel-runtime/helpers/extends");
var _extends3 = _interopRequireDefault(_extends2);
var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
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 _uniqueId = require("lodash/uniqueId");
var _uniqueId2 = _interopRequireDefault(_uniqueId);
var _videoUpNext = require("./videoUpNext");
var _videoUpNext2 = _interopRequireDefault(_videoUpNext);
var _mq = require("../../styles/mq");
var _mq2 = _interopRequireDefault(_mq);
var _timing = require("../../styles/timing");
var _timing2 = _interopRequireDefault(_timing);
var _colors = require("../../styles/colors");
var _colors2 = _interopRequireDefault(_colors);
var _typography = require("../../styles/typography");
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 _ = { uniqueId: _uniqueId2.default };
var bcPlayerIds = {
default: "default",
background: "BJputewob",
bestintravel: "HkJcclwoZ",
blackforest: "ryeUCvtBb7",
blackforest2: "S16yttBbX",
copilot: "Hy3iMpP2M",
destination: "HkPdqeDiZ",
eed: "rJtMIpi7M",
home: "HJe5vuWSVG",
interest: "S1gCMqoEG",
jnto: "Bkg3o1opuz",
puremichigan: "Hy9srNpMQ",
test: "HyOg9VOQb",
test2: "H1SwHfqIM"
};
var cueDuration = 15;
var styles = {
container: {
default: {
height: "100%",
opacity: 0,
overflow: "hidden",
paddingBottom: 9 / 16 * 100 + "%",
position: "relative",
transition: "opacity " + _timing2.default.slow + " ease",
width: "100%"
},
visible: {
opacity: 1
},
cover: {
paddingBottom: 0
}
},
video: {
default: {
bottom: 0,
height: "100%",
left: 0,
position: "absolute",
right: 0,
top: 0,
width: "100%"
},
cover: {
bottom: "unset", // TODO: No IE 11 support
height: "auto",
left: "50%",
minHeight: "100%",
minWidth: "100%",
overflow: "hidden",
right: "unset", // TODO: No IE 11 support
top: "50%",
transform: "translate(-50%, -50%)",
width: "auto"
}
},
mutedOverlay: {
alignItems: "center",
color: _colors2.default.textOverlay,
display: "flex",
fontSize: "80px",
height: "100%",
justifyContent: "center",
left: 0,
opacity: 0,
position: "absolute",
top: 0,
transition: "opacity " + _timing2.default.fast + " ease",
width: "100%",
":hover": {
opacity: 1
}
},
nextVideo: {
bottom: "60px",
position: "absolute",
right: 0
}
};
var scopedStyles = {
".video-js": {
backgroundColor: _colors2.default.bgOverlay,
overflow: "visible"
},
".vjs-control-bar": {
transition: "transform " + _timing2.default.fast + " ease !important"
},
".vjs-button:hover, .vjs-button:active, .vjs-button:focus": {
backgroundImage: "radial-gradient(circle at center, " + (0, _color.rgba)(_colors2.default.bgPrimary, 0.18) + " 0%, " + (0, _color.rgba)(_colors2.default.bgPrimary, 0) + " 70%)",
textShadow: "none !important"
},
".vjs-overlay-right": {
maxWidth: "none !important",
right: 0
},
".vjs-overlay-bottom": {
left: 0,
marginLeft: 0,
maxWidth: "none !important",
width: "100%"
},
".vjs-overlay-top-left": {
left: 0,
top: 0
},
".vjs-overlay-top-right": {
maxWidth: "100% !important",
textAlign: "right",
width: "100%"
},
".vjs-error .vjs-error-display": {
display: "none"
},
".VideoEmbed-ad-overlay": {
backgroundColor: (0, _color.rgba)(_colors2.default.bgOverlay, 0.55),
color: "#e6e6e6",
fontSize: _typography.fontSizeHeading8 + "px",
fontWeight: _typography.fontWeightRegular,
lineHeight: "21px",
marginTop: "8px",
padding: "6px 24px",
verticalAlign: "middle"
},
".VideoEmbed-lowerthird-overlay": {
height: 0,
paddingBottom: 9 / 16 * 100 + "%",
position: "relative"
},
".VideoEmbed-lowerthird-overlay > div": {
height: "100% !important",
width: "100% !important"
},
".VideoEmbed-lowerthird-overlay iframe": {
height: "100%",
left: 0,
position: "absolute",
top: 0,
width: "100%"
},
".VideoEmbed-muted-overlay .vjs-icon-volume-high": {
backgroundColor: (0, _color.rgba)(_colors2.default.bgPrimary, 0.45),
border: 0,
borderRadius: "50%",
color: _colors2.default.textOverlay,
cursor: "pointer",
height: "120px",
textAlign: "center",
textShadow: "0 1px 6px " + (0, _color.rgba)(_colors2.default.bgOverlay, 0.5),
transition: "text-shadow " + _timing2.default.fast + " ease, background-color " + _timing2.default.fast + " ease",
width: "120px"
},
".VideoEmbed-muted-overlay .vjs-icon-volume-high:hover, .VideoEmbed-muted-overlay .vjs-icon-volume-high:active, .VideoEmbed-muted-overlay .vjs-icon-volume-high:focus": {
backgroundColor: (0, _color.rgba)(_colors2.default.bgOverlay, 0.55),
textShadow: "0 1px 9px " + (0, _color.rgba)(_colors2.default.bgOverlay, 0.7)
},
mediaQueries: (0, _defineProperty3.default)({}, "(max-width: " + _mq2.default.max[480] + ")", {
".vjs-big-play-button": {
transform: "scale(.7)"
}
})
};
var VideoEmbed = function (_Component) {
(0, _inherits3.default)(VideoEmbed, _Component);
function VideoEmbed(props) {
(0, _classCallCheck3.default)(this, VideoEmbed);
var _this = (0, _possibleConstructorReturn3.default)(this, (VideoEmbed.__proto__ || (0, _getPrototypeOf2.default)(VideoEmbed)).call(this, props));
_this.setVideoRef = function (element) {
_this.videoElement = element;
};
_this.hasLPUIPlugin = function () {
return _this.player && _this.player.lp && _this.player.lp() && _this.player.lp().props;
};
_this.id = _.uniqueId();
_this.accountId = "5104226627001";
_this.playerId = bcPlayerIds[props.playerName] || props.playerName;
_this.embedId = "default";
_this.cueEndTime = null;
_this.previewStartTime = props.previewStartTime;
_this.previewEndTime = props.previewEndTime;
_this.container = null;
_this.player = null;
_this.videoElement = null;
_this.scriptElement = null;
_this.playWhenInView = props.playWhenInView;
_this.inView = _this.isInView();
_this.activeCues = [];
_this.originalOverlays = [];
_this.showCaptions = false;
_this.showMutedOverlay = false;
_this.state = {
hover: false,
playing: false,
nextVideoVisible: false,
nextVideoFits: true,
showMutedOverlay: false
};
_this.onMouseEnter = _this.onMouseEnter.bind(_this);
_this.onMouseLeave = _this.onMouseLeave.bind(_this);
_this.onPlayerCueEnd = _this.onPlayerCueEnd.bind(_this);
_this.onWindowScroll = _this.onWindowScroll.bind(_this);
_this.onClickMutedOverlay = _this.onClickMutedOverlay.bind(_this);
return _this;
}
(0, _createClass3.default)(VideoEmbed, [{
key: "componentDidMount",
value: function componentDidMount() {
if (typeof window !== "undefined") {
window.addEventListener("scroll", this.onWindowScroll, false);
}
this.setupPlayer();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
this.updatePlayerProps();
if ((prevProps.videoId !== this.props.videoId || !prevProps.autoplay && this.props.autoplay) && !this.isAdRunning()) {
this.loadVideo(this.props.videoId);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.tearDownPlayer();
if (typeof window !== "undefined") {
window.removeEventListener("scroll", this.onWindowScroll, false);
}
}
}, {
key: "onWindowScroll",
value: function onWindowScroll() {
var inView = this.isInView();
if (!this.inView && inView) {
this.onInView();
}
this.inView = inView;
}
}, {
key: "onInView",
value: function onInView() {
if (this.player && this.playWhenInView) {
this.playWhenInView = false;
this.showMutedOverlay = true;
this.showCaptions = true;
this.player.muted(true);
this.play();
}
}
}, {
key: "onLoadSetupScript",
value: function onLoadSetupScript() {
if (!this.videoElement) {
return;
}
this.player = window.videojs(this.videoElement);
this.updatePlayerProps();
this.player.ready(this.onPlayerReady.bind(this));
this.player.on("loadstart", this.onPlayerLoadStart.bind(this));
this.player.on("error", this.onPlayerError.bind(this));
this.player.on("waiting", this.onPlayerWaiting.bind(this));
this.player.on("playing", this.onPlayerPlaying.bind(this));
this.player.on("pause", this.onPlayerPause.bind(this));
this.player.on("timeupdate", this.onPlayerTimeUpdate.bind(this));
this.player.on("ended", this.onPlayerEnded.bind(this));
this.player.on("ads-ad-started", this.onAdStarted.bind(this));
this.player.on("ads-ad-ended", this.onAdEnded.bind(this));
this.player.on("ads-play", this.onAdPlay.bind(this));
this.player.on("ads-pause", this.onAdPause.bind(this));
}
}, {
key: "onPlayerReady",
value: function onPlayerReady() {
this.originalOverlays = (this.player.overlays_ || []).map(function (overlay) {
return overlay.options_;
});
this.updatePlayerProps();
this.loadVideo(this.props.videoId);
}
}, {
key: "onPlayerLoadStart",
value: function onPlayerLoadStart() {
var _this2 = this;
if (!this.hasLPUIPlugin()) {
// We don't listen to oncuechange events if videojs-lp is registered
// as it will take care of any cue-based logic we want.
this.getTextTracks().forEach(function (tt) {
tt.oncuechange = _this2.onPlayerCueChange.bind(_this2);
});
}
this.setPreviewBounds();
this.renderPixel();
this.configureOverlays();
if (this.props.onLoadStart) {
this.props.onLoadStart();
}
if (this.props.autoplay) {
this.play();
} else if (this.isInView() && this.playWhenInView) {
this.playWhenInView = false;
this.showMutedOverlay = true;
this.showCaptions = true;
this.player.muted(true);
this.play();
}
}
}, {
key: "onPlayerWaiting",
value: function onPlayerWaiting() {
this.setState({
playing: false
});
}
}, {
key: "onPlayerError",
value: function onPlayerError() {
this.setState({
playing: false
});
/**
* If the current video errors (ex. a timeout), we can recover by
* just attempting to load/play the video again.
*/
this.loadVideo(this.props.videoId);
}
}, {
key: "onPlayerPlaying",
value: function onPlayerPlaying() {
this.setState({
playing: true
});
if (this.showCaptions) {
this.enableCaptions();
}
if (this.showMutedOverlay) {
this.enableMutedOverlay();
}
/**
* When an ad ends, the "playing" event or the "ads-ad-ended" event
* may be fired. so we make sure to disable the "ad overlay" when
* any of these events fire.
*/
this.disableAdOverlay();
if (!this.props.hideNextVideoOnCuePoint || !this.cueEndTime) {
this.setState({
nextVideoVisible: true
});
}
/**
* If videoId was set while an ad was playing, and the user skips
* the ad, the onAdEnded() handler will not be run. This makes sure
* we load the new video.
*/
this.loadVideo(this.props.videoId);
if (this.props.onPlaying) {
this.props.onPlaying();
}
/**
* In cases where we attempt to progammatically pause a video while
* it is still loading (before playback begins), the player may still begin playing.
* This is only really a problem in "preview mode" if no "preview bounds" are set.
* To be consistent with this.play(), don't play the video in "preview mode" if no
* "preview bounds" are specified.
*/
if (this.props.previewMode && (this.previewStartTime === null || this.previewEndTime === null)) {
this.pause();
}
}
}, {
key: "onPlayerPause",
value: function onPlayerPause() {
this.setState({
playing: false
});
if (this.props.onPause) {
this.props.onPause();
}
}
}, {
key: "onPlayerTimeUpdate",
value: function onPlayerTimeUpdate() {
var currentTime = this.player.currentTime();
if (this.cueEndTime && this.cueEndTime < currentTime) {
this.cueEndTime = null;
this.onPlayerCueEnd();
}
/**
* If we're in "preview mode" and video playback has progressed to a
* point outside of the preview time window, rewind the video to the
* preview start time.
*/
if (this.props.previewMode) {
var beforeStartTime = this.previewStartTime !== null && this.previewStartTime > currentTime;
var afterEndTime = this.previewEndTime !== null && this.previewEndTime <= currentTime;
if (this.previewStartTime !== null && this.previewEndTime !== null && (beforeStartTime || afterEndTime)) {
this.player.currentTime(this.previewStartTime);
}
}
}
}, {
key: "onAdStarted",
value: function onAdStarted() {
if (!this.isAdRunning()) {
/*
If an ads-ad-started event fired, but there is "no ad running",
it's an indication that something went wrong with the ad setup,
which most likely will put the player into a confused state.
Most commonly, you'll see `VIDEOJS: WARN: Unexpected startLinearAdMode invocation (Preroll)`
in your console just before the `ads-ad-started` event fires.
We only kill the ad from here if videojs-lp isn't being used because otherwise, videojs-lp
will handle it.
Read about the issue here:
https://github.com/googleads/videojs-ima/issues/796
Read about the ima3 method we use to kill the ad:
https://developers.google.com/interactive-media-ads/docs/sdks/android/v3/api/reference/com/google/ads/interactivemedia/v3/api/AdsManager.html#discardAdBreak()
*/
if (!this.hasLPUIPlugin()) {
try {
this.player.ima3.adsManager.discardAdBreak();
} catch (e) {} /* eslint-disable-line no-empty */
}
// Act like onAdStarted never happened.
return;
}
this.setState({
playing: true
});
if (this.showCaptions) {
this.enableCaptions();
}
/**
* Ads aren't programmatically unmutable in most cases so don't cover
* the ad and don't make the user think they can unmute it using our
* overlay.
*/
this.disableMutedOverlay();
this.enableAdOverlay();
if (this.props.onAdStarted) {
this.props.onAdStarted();
}
}
}, {
key: "onAdEnded",
value: function onAdEnded() {
this.setState({
playing: false
});
/**
* When an ad ends, the "playing" event or the "ads-ad-ended" event
* may be fired, so we make sure to disable the "ad overlay" when
* any of these events fire.
*/
this.disableAdOverlay();
/**
* If videoId was set while an ad was playing, and the ad ends
* (without being skipped), make sure to load the new video.
*/
this.loadVideo(this.props.videoId);
}
}, {
key: "onPlayerEnded",
value: function onPlayerEnded() {
this.setState({
playing: false
});
if (this.props.onEnded) {
this.props.onEnded();
}
}
}, {
key: "onAdPlay",
value: function onAdPlay() {
this.setState({
playing: true
});
if (this.props.onAdPlay) {
this.props.onAdPlay();
}
}
}, {
key: "onAdPause",
value: function onAdPause() {
this.setState({
playing: false
});
if (this.props.onAdPause) {
this.props.onAdPause();
}
}
}, {
key: "onPlayerCueChange",
value: function onPlayerCueChange() {
var activeCues = this.getActiveCues();
var cuePointCue = activeCues.find(function (c) {
return c.text === "CODE" && c.originalCuePoint;
});
if (cuePointCue) {
var cue = cuePointCue.originalCuePoint;
var x = this.activeCues.find(function (c) {
return c.originalCuePoint && c.originalCuePoint.id === cue.id;
});
if (!x) {
this.onPlayerCuePoint(cue);
}
}
this.activeCues = activeCues;
}
}, {
key: "onPlayerCuePoint",
value: function onPlayerCuePoint(cue) {
var overlayElementId = "ad-lowerthird-" + this.id + "-" + cue.id;
var element = document.getElementById(overlayElementId);
if (!element) {
return;
}
var cueIndex = this.player.mediainfo.cuePoints.findIndex(function (c) {
return c.id === cue.id;
});
if (cueIndex === -1) {
return;
}
this.cueEndTime = this.player.currentTime() + cueDuration;
if (this.props.hideNextVideoOnCuePoint) {
this.setState({
nextVideoVisible: false
});
}
if (this.props.onCuePoint) {
this.props.onCuePoint(cue, cueIndex, overlayElementId);
}
}
}, {
key: "onPlayerCueEnd",
value: function onPlayerCueEnd() {
this.setState({
nextVideoVisible: true
});
}
}, {
key: "onMouseEnter",
value: function onMouseEnter() {
this.setState({
hover: true,
nextVideoFits: this.container && this.container.clientWidth >= 450
});
}
}, {
key: "onMouseLeave",
value: function onMouseLeave() {
this.setState({
hover: false
});
}
}, {
key: "onClickMutedOverlay",
value: function onClickMutedOverlay() {
if (!this.player) {
return;
}
this.showCaptions = false;
this.showMutedOverlay = false;
this.disableCaptions();
this.disableMutedOverlay();
this.player.muted(false);
this.play();
}
}, {
key: "getTextTracks",
value: function getTextTracks() {
if (!this.player) {
return [];
}
var textTracks = this.player.textTracks();
return [].concat((0, _toConsumableArray3.default)(Array(textTracks.length).keys())).map(function (i) {
return textTracks[i];
});
}
}, {
key: "getActiveCues",
value: function getActiveCues() {
var activeCues = [];
this.getTextTracks().forEach(function (tt) {
[].concat((0, _toConsumableArray3.default)(Array(tt.activeCues ? tt.activeCues.length : 0).keys())).forEach(function (j) {
activeCues.push(tt.activeCues[j]);
});
});
return activeCues;
}
}, {
key: "getAdOverlayId",
value: function getAdOverlayId() {
return "ad-overlay-" + this.id;
}
}, {
key: "setupPlayer",
value: function setupPlayer() {
var script = document.createElement("script");
script.onload = this.onLoadSetupScript.bind(this);
script.src = "https://players.brightcove.net/" + this.accountId + "/" + this.playerId + "_" + this.embedId + "/index.min.js";
this.scriptElement = document.body.appendChild(script);
}
}, {
key: "setPreviewBounds",
value: function setPreviewBounds() {
var _this3 = this;
this.previewStartTime = this.props.previewStartTime;
this.previewEndTime = this.props.previewEndTime;
this.player.mediainfo.cuePoints.forEach(function (cuePoint) {
if (cuePoint.name === "preview start") {
_this3.previewStartTime = cuePoint.time;
} else if (cuePoint.name === "preview end") {
_this3.previewEndTime = cuePoint.time;
}
});
// Make sure our initial playback point is the preview start point
if (this.props.previewMode && this.previewStartTime !== null && this.previewEndTime !== null) {
this.player.currentTime(this.previewStartTime);
}
}
}, {
key: "updatePlayerProps",
value: function updatePlayerProps() {
if (!this.player) {
return;
}
var _props = this.props,
controls = _props.controls,
muted = _props.muted,
autoplay = _props.autoplay,
playsInline = _props.playsInline,
loop = _props.loop,
poster = _props.poster,
vjsLP = _props.vjsLP;
if (this.hasLPUIPlugin()) {
this.player.lp().props(vjsLP);
}
if (!poster && this.player.poster().length > 0 || poster && poster !== this.player.poster()) {
this.player.poster(poster);
}
if (autoplay !== this.player.autoplay()) {
this.player.autoplay(autoplay);
}
if (controls !== this.player.controls()) {
this.player.controls(controls);
}
if (playsInline !== this.player.playsinline()) {
this.player.playsinline(playsInline);
}
if (muted !== this.player.muted()) {
this.player.muted(muted);
}
if (loop !== this.player.loop()) {
this.player.loop(loop);
}
}
}, {
key: "loadVideo",
value: function loadVideo(videoId) {
var _this4 = this;
if (!this.isReady()) {
return;
}
if (this.isVideoLoaded(videoId)) {
if (this.props.autoplay) {
this.play();
}
} else {
/**
* Hide the "next video" preview whenever we tell the player to
* load a new video. Basically just to reset things.
*/
this.setState({
nextVideoVisible: false
});
this.player.catalog.getVideo(videoId, function (error, video) {
if (!error) {
_this4.player.catalog.load(video);
// Wait for 'loadstart' event
}
});
}
}
}, {
key: "isReady",
value: function isReady() {
return this.player && this.player.isReady_;
}
}, {
key: "isAdRunning",
value: function isAdRunning() {
return this.player && this.player.ads && this.player.ads.state === "ad-playback";
}
}, {
key: "play",
value: function play() {
var previewMode = this.props.previewMode;
var _props2 = this.props,
onPlayError = _props2.onPlayError,
onPlaySuccess = _props2.onPlaySuccess;
onPlayError = onPlayError || function () {};
onPlaySuccess = onPlaySuccess || function () {};
if (!this.player) {
return;
}
if (previewMode && (this.previewStartTime === null || this.previewEndTime === null)) {
return;
}
var promise = this.player.play();
if (promise) {
var failed = false;
promise.catch(function (reason) {
var safariAbortError = reason.name === "AbortError" && !reason.code;
var notAllowedError = reason.name === "NotAllowedError";
failed = safariAbortError || notAllowedError;
if (failed) {
onPlayError();
} else {
onPlaySuccess();
}
}).then(function () {
if (!failed) {
onPlaySuccess();
}
});
} else {
onPlaySuccess();
}
}
}, {
key: "pause",
value: function pause() {
if (this.player) {
this.player.pause();
}
}
}, {
key: "tearDownPlayer",
value: function tearDownPlayer() {
if (this.scriptElement) {
this.scriptElement.parentNode.removeChild(this.scriptElement);
this.scriptElement = null;
}
if (this.player) {
this.player.dispose();
this.player = null;
}
}
}, {
key: "isVideoLoaded",
value: function isVideoLoaded(videoId) {
return this.player && this.player.mediainfo && this.player.mediainfo.id === videoId;
}
}, {
key: "enableMutedOverlay",
value: function enableMutedOverlay() {
if (!this.player || this.props.mobile) {
return;
}
if (this.hasLPUIPlugin()) {
this.player.lp().showMutedOverlay();
this.showMutedOverlay = false;
} else {
this.setState({
showMutedOverlay: true
});
this.player.controls(false);
}
if (this.props.onMutedOverlayVisible) {
this.props.onMutedOverlayVisible();
}
}
}, {
key: "disableMutedOverlay",
value: function disableMutedOverlay() {
if (!this.player) {
return;
}
if (this.hasLPUIPlugin()) {
this.player.lp().hideMutedOverlay();
} else {
this.setState({
showMutedOverlay: false
});
this.player.controls(true);
}
if (this.props.onMutedOverlayHidden) {
this.props.onMutedOverlayHidden();
}
}
}, {
key: "enableCaptions",
value: function enableCaptions() {
if (!this.player || !this.container) {
return;
}
var controls = this.player.controls();
var enableCaptionsButton = this.container.querySelector(".vjs-captions-menu-item");
if (enableCaptionsButton) {
if (controls) {
this.player.controls(false);
}
enableCaptionsButton.click();
if (controls) {
this.player.controls(true);
}
}
}
}, {
key: "disableCaptions",
value: function disableCaptions() {
if (!this.player || !this.container) {
return;
}
var controls = this.player.controls();
var enableCaptionsButton = this.container.querySelector(".vjs-captions-menu-item");
if (enableCaptionsButton) {
var disableCaptionsButton = enableCaptionsButton.previousElementSibling;
if (disableCaptionsButton) {
if (controls) {
this.player.controls(false);
}
disableCaptionsButton.click();
if (controls) {
this.player.controls(true);
}
}
}
}
}, {
key: "enableAdOverlay",
value: function enableAdOverlay() {
var adOverlay = typeof document !== "undefined" ? document.getElementById(this.getAdOverlayId()) : null;
if (adOverlay) {
adOverlay.style.display = "inline-block";
}
}
}, {
key: "disableAdOverlay",
value: function disableAdOverlay() {
var adOverlay = typeof document !== "undefined" ? document.getElementById(this.getAdOverlayId()) : null;
if (adOverlay) {
adOverlay.style.display = "none";
}
}
}, {
key: "isAboveViewport",
value: function isAboveViewport() {
if (!this.container) {
return false;
}
var bounds = this.container.getBoundingClientRect();
var halfContainerHeight = bounds.height / 2;
return bounds.top < -halfContainerHeight;
}
}, {
key: "isBelowViewport",
value: function isBelowViewport() {
if (!this.container) {
return false;
}
var bounds = this.container.getBoundingClientRect();
var halfContainerHeight = bounds.height / 2;
var windowHeight = window.innerHeight;
return bounds.top > windowHeight - halfContainerHeight;
}
}, {
key: "isInView",
value: function isInView() {
return !this.isAboveViewport() && !this.isBelowViewport();
}
}, {
key: "configureOverlays",
value: function configureOverlays() {
var _this5 = this;
if (!this.player || !this.player.overlay || this.hasLPUIPlugin()) {
// We can't configure the overlays if there is no player or
// no overlays plugin is registered.
// Also don't configure overlays if the videojs-lp plugin is
// registered as it takes care of out custom overlays for us.
return;
}
var overlayCuePoints = this.player.mediainfo.cuePoints.filter(function (cuePoint) {
return cuePoint.type === "CODE";
}).filter(function (cuePoint) {
return cuePoint.name !== "preview start" && cuePoint.name !== "preview end";
});
var overlays = this.originalOverlays.concat(overlayCuePoints.map(function (cuePoint) {
var defaultEnd = cuePoint.startTime + cueDuration;
var end = defaultEnd < cuePoint.endTime ? defaultEnd : cuePoint.endTime;
return {
content: "<div id=\"ad-lowerthird-" + _this5.id + "-" + cuePoint.id + "\" class=\"VideoEmbed-lowerthird-overlay\" />",
align: "bottom",
start: cuePoint.startTime,
end: end
};
}));
overlays.push({
content: "<div id=\"" + this.getAdOverlayId() + "\" class=\"VideoEmbed-ad-overlay\">Advertisement</div>",
align: "top-left",
start: "ads-ad-started",
end: "playing"
});
this.player.overlay({
content: "",
overlays: overlays,
showBackground: false,
attachToControlBar: true,
debug: false
});
}
}, {
key: "renderPixel",
value: function renderPixel() {
if (!this.container || !this.player || !this.player.mediainfo) {
return;
}
var customFields = this.player.mediainfo.customFields;
if (customFields && customFields.pixel) {
var pixel = customFields.pixel.replace(/\[timestamp\]/g, new Date().getTime());
var div = document.createElement("div");
div.innerHTML = pixel;
this.container.appendChild(div);
}
}
}, {
key: "render",
value: function render() {
var _this6 = this;
var _props3 = this.props,
cover = _props3.cover,
loop = _props3.loop,
poster = _props3.poster,
muted = _props3.muted,
autoplay = _props3.autoplay,
visible = _props3.visible,
visibleWhileNotPlaying = _props3.visibleWhileNotPlaying,
playsInline = _props3.playsInline,
controls = _props3.controls,
style = _props3.style,
nextVideo = _props3.nextVideo;
var _state = this.state,
nextVideoVisible = _state.nextVideoVisible,
nextVideoFits = _state.nextVideoFits,
hover = _state.hover,
playing = _state.playing,
showMutedOverlay = _state.showMutedOverlay;
return _react2.default.createElement(
"div",
{
className: "VideoEmbed",
ref: function ref(container) {
_this6.container = container;
},
style: [styles.container.default, cover && styles.container.cover, visible && (visibleWhileNotPlaying || playing) && styles.container.visible, style],
onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave
},
_react2.default.createElement(_radium.Style, {
scopeSelector: ".VideoEmbed",
rules: scopedStyles
}),
_react2.default.createElement("video", {
ref: this.setVideoRef,
style: [styles.video.default, cover && styles.video.cover],
"data-account": this.accountId,
"data-player": this.playerId,
"data-embed": this.embedId,
className: "video-js VideoEmbed-video",
playsInline: playsInline,
muted: muted,
autoPlay: autoplay,
controls: controls,
loop: loop,
poster: poster
}),
_react2.default.createElement(
"div",
null,
showMutedOverlay && _react2.default.createElement(
"div",
{ className: "VideoEmbed-muted-overlay", style: styles.mutedOverlay },
_react2.default.createElement("button", {
className: "vjs-icon-volume-high",
onClick: this.onClickMutedOverlay
})
)
),
nextVideo && _react2.default.createElement(_videoUpNext2.default, (0, _extends3.default)({}, nextVideo, {
visible: hover && nextVideoVisible && nextVideoFits,
style: styles.nextVideo
}))
);
}
}]);
return VideoEmbed;
}(_react.Component);
VideoEmbed.propTypes = {
videoId: _propTypes2.default.string.isRequired,
playerName: _propTypes2.default.string,
nextVideo: _propTypes2.default.shape({
title: _propTypes2.default.string,
image: _propTypes2.default.string,
href: _propTypes2.default.string
}),
hideNextVideoOnCuePoint: _propTypes2.default.bool,
autoplay: _propTypes2.default.bool,
cover: _propTypes2.default.bool,
controls: _propTypes2.default.bool,
muted: _propTypes2.default.bool,
loop: _propTypes2.default.bool,
poster: _propTypes2.default.string,
visible: _propTypes2.default.bool,
visibleWhileNotPlaying: _propTypes2.default.bool,
previewMode: _propTypes2.default.bool,
previewStartTime: _propTypes2.default.number,
previewEndTime: _propTypes2.default.number,
playWhenInView: _propTypes2.default.bool,
playsInline: _propTypes2.default.bool,
mobile: _propTypes2.default.bool,
onAdStarted: _propTypes2.default.func,
onAdPlay: _propTypes2.default.func,
onAdPause: _propTypes2.default.func,
onLoadStart: _propTypes2.default.func,
onPlaySuccess: _propTypes2.default.func,
onPlayError: _propTypes2.default.func,
onPlaying: _propTypes2.default.func,
onPause: _propTypes2.default.func,
onEnded: _propTypes2.default.func,
onCuePoint: _propTypes2.default.func,
onMutedOverlayVisible: _propTypes2.default.func,
onMutedOverlayHidden: _propTypes2.default.func,
vjsLP: _propTypes2.default.shape({
showTitle: _propTypes2.default.bool,
showDescription: _propTypes2.default.bool,
showRelatedLocations: _propTypes2.default.bool,
showRelatedVideos: _propTypes2.default.bool,
showShareButton: _propTypes2.default.bool,
playlistReferenceId: _propTypes2.default.string,
nextVideoTitle: _propTypes2.default.string,
nextVideoImage: _propTypes2.default.string,
nextVideoHandler: _propTypes2.default.func,
showNextVideo: _propTypes2.default.bool,
popoutHandler: _propTypes2.default.func,
mutedOverlayHandler: _propTypes2.default.func,
shareUrl: _propTypes2.default.string,
shareText: _propTypes2.default.string,
shareCurrentPage: _propTypes2.default.bool
}),
style: _propTypes4.default.style
};
VideoEmbed.defaultProps = {
playerName: "default",
controls: true,
visible: true,
visibleWhileNotPlaying: true,
hideNextVideoOnCuePoint: true,
previewStartTime: null,
previewEndTime: null
};
exports.default = (0, _radium2.default)(VideoEmbed);