organism-react-video
Version:
103 lines (99 loc) • 3.18 kB
JavaScript
;
var _interopRequireWildcard = require("reshow-runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("reshow-runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("reshow-runtime/helpers/objectSpread2"));
var React = _interopRequireWildcard(require("react"));
var _reactAtomicMolecule = require("react-atomic-molecule");
var _getObjectValue = _interopRequireDefault(require("get-object-value"));
var _callFunc = _interopRequireDefault(require("call-func"));
var _reshowHooks = require("reshow-hooks");
var _jsxRuntime = require("react/jsx-runtime");
//@ts-check
var cloneElement = React.cloneElement;
/**
* @typedef {object} ResponsiveVideoProps
* @property {string=} className
* @property {React.CSSProperties=} style
* @property {boolean=} mask
* @property {string=} aspectRatio
* @property {Function=} onClick
* @property {React.ReactElement?} [children]
*/
/**
* @param {ResponsiveVideoProps} props
*/
var ResponsiveVideo = function ResponsiveVideo(_ref) {
var _ref$mask = _ref.mask,
mask = _ref$mask === void 0 ? true : _ref$mask,
_ref$aspectRatio = _ref.aspectRatio,
aspectRatio = _ref$aspectRatio === void 0 ? "16/9" : _ref$aspectRatio,
children = _ref.children,
onClick = _ref.onClick,
style = _ref.style,
className = _ref.className;
var lastRestart = (0, _reshowHooks.useRefUpdate)(onClick);
var handler = {
click: function click() {
return (0, _callFunc["default"])(lastRestart.current);
}
};
var thisMask = null;
if (mask) {
thisMask = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAtomicMolecule.SemanticUI, {
className: "play-mask",
style: Styles.mask,
onTouchStart: handler.click,
onClick: handler.click
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAtomicMolecule.SemanticUI, {
className: (0, _reactAtomicMolecule.mixClass)("rwd-video", className),
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, Styles.container), style), {}, {
aspectRatio: aspectRatio
}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAtomicMolecule.SemanticUI, {
className: "rwd-video-inner",
style: Styles.inner,
children: children && cloneElement(children, {
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _getObjectValue["default"])(children, ["props", "style"])), Styles.videoContainer)
})
}), thisMask]
});
};
var _default = exports["default"] = ResponsiveVideo;
/**
* @type {{[key: string]: React.CSSProperties}}
*/
var Styles = {
container: {
position: "relative",
overflow: "hidden",
zIndex: 0
},
inner: {
position: "absolute",
top: -2,
bottom: -2,
left: -2,
right: -2,
zIndex: 0
},
videoContainer: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%"
},
mask: {
zIndex: 1,
position: "absolute",
top: -10,
left: -10,
right: -10,
bottom: -10
}
};
module.exports = exports.default;