organism-react-video
Version:
99 lines (95 loc) • 2.28 kB
JavaScript
import _objectSpread from "reshow-runtime/es/helpers/objectSpread2";
//@ts-check
import * as React from "react";
var {
cloneElement
} = React;
import { SemanticUI, mixClass } from "react-atomic-molecule";
import get from "get-object-value";
import callfunc from "call-func";
import { useRefUpdate } from "reshow-hooks";
/**
* @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
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var ResponsiveVideo = function ResponsiveVideo(_ref) {
var {
mask = true,
aspectRatio = "16/9",
children,
onClick,
style,
className
} = _ref;
var lastRestart = useRefUpdate(onClick);
var handler = {
click: function click() {
return callfunc(lastRestart.current);
}
};
var thisMask = null;
if (mask) {
thisMask = /*#__PURE__*/_jsx(SemanticUI, {
className: "play-mask",
style: Styles.mask,
onTouchStart: handler.click,
onClick: handler.click
});
}
return /*#__PURE__*/_jsxs(SemanticUI, {
className: mixClass("rwd-video", className),
style: _objectSpread(_objectSpread(_objectSpread({}, Styles.container), style), {}, {
aspectRatio
}),
children: [/*#__PURE__*/_jsx(SemanticUI, {
className: "rwd-video-inner",
style: Styles.inner,
children: children && cloneElement(children, {
style: _objectSpread(_objectSpread({}, get(children, ["props", "style"])), Styles.videoContainer)
})
}), thisMask]
});
};
export 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
}
};