@razorpay/blade
Version:
The Design System that powers Razorpay
195 lines (185 loc) • 9.94 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import { forwardRef, useState, useRef, useEffect } from 'react';
import { RzpGlassMount } from './RzpGlassMount.js';
import { DEFAULT_CDN_PATH, getDefaultAssets, getPresetAssets, resolveConfig } from './utils.js';
import { useMergeRefs } from '../../../utils/useMergeRefs.js';
import { jsx } from 'react/jsx-runtime';
var _excluded = ["width", "height", "className", "style", "onLoad", "onError", "assetsPath", "gradientMapCanvas", "gradientMapSrc", "gradientMap2Src", "imageSrc"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var FADE_IN_MS = 200;
var RzpGlass = /*#__PURE__*/forwardRef(function RzpGlass(props, forwardedRef) {
var _presetAssets$videoSr, _ref, _ref2, _presetAssets$centerG, _configProps$edgeFeat;
var _props$width = props.width,
width = _props$width === void 0 ? '100%' : _props$width,
_props$height = props.height,
height = _props$height === void 0 ? '100%' : _props$height,
className = props.className,
style = props.style,
onLoad = props.onLoad,
onError = props.onError,
assetsPathProp = props.assetsPath,
gradientMapCanvas = props.gradientMapCanvas,
gradientMapSrcProp = props.gradientMapSrc,
gradientMap2SrcProp = props.gradientMap2Src,
imageSrcProp = props.imageSrc,
configProps = _objectWithoutProperties(props, _excluded);
// Get default assets based on assetsPath
var assetsPath = assetsPathProp !== null && assetsPathProp !== void 0 ? assetsPathProp : DEFAULT_CDN_PATH;
var defaultAssets = getDefaultAssets(assetsPath);
// Resolve assets: prop overrides preset, preset overrides default
var presetAssets = getPresetAssets(props.preset, assetsPath);
var imageSrc = imageSrcProp !== null && imageSrcProp !== void 0 ? imageSrcProp : presetAssets.imageSrc;
var videoSrc = imageSrc ? undefined : (_presetAssets$videoSr = presetAssets.videoSrc) !== null && _presetAssets$videoSr !== void 0 ? _presetAssets$videoSr : defaultAssets.videoSrc;
var gradientMapSrc = (_ref = gradientMapSrcProp !== null && gradientMapSrcProp !== void 0 ? gradientMapSrcProp : presetAssets.gradientMapSrc) !== null && _ref !== void 0 ? _ref : defaultAssets.gradientMapSrc;
var gradientMap2Src = (_ref2 = gradientMap2SrcProp !== null && gradientMap2SrcProp !== void 0 ? gradientMap2SrcProp : presetAssets.gradientMap2Src) !== null && _ref2 !== void 0 ? _ref2 : defaultAssets.gradientMap2Src;
var centerGradientMapSrc = (_presetAssets$centerG = presetAssets.centerGradientMapSrc) !== null && _presetAssets$centerG !== void 0 ? _presetAssets$centerG : defaultAssets.centerGradientMapSrc;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isInitialized = _useState2[0],
setIsInitialized = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
error = _useState4[0],
setError = _useState4[1];
var divRef = useRef(null);
var mountRef = useRef(null);
// Initialize on mount
useEffect(function () {
var init = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _config$paused, config, userWantsPaused, _error, _t;
return _regeneratorRuntime.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!(!divRef.current || mountRef.current)) {
_context.next = 1;
break;
}
return _context.abrupt("return");
case 1:
_context.prev = 1;
config = resolveConfig(props, assetsPath);
mountRef.current = new RzpGlassMount(divRef.current, {
videoSrc: videoSrc,
imageSrc: imageSrc,
gradientMapSrc: gradientMapSrc,
gradientMap2Src: gradientMap2Src,
centerGradientMapSrc: centerGradientMapSrc
}, config);
_context.next = 2;
return mountRef.current.loadAssets();
case 2:
// Pause the video during the CSS fade-in so one-shot animations
// don't burn frames while the component is still transparent.
// Only do this when the consumer hasn't explicitly set paused: true.
userWantsPaused = (_config$paused = config.paused) !== null && _config$paused !== void 0 ? _config$paused : false;
if (!userWantsPaused) {
mountRef.current.pause();
}
setIsInitialized(true); // kicks off the CSS opacity 0 → 1 transition
// After the fade-in completes, resume video and notify the consumer.
setTimeout(function () {
if (!mountRef.current) return;
if (!userWantsPaused) {
mountRef.current.play();
}
onLoad === null || onLoad === void 0 || onLoad();
}, FADE_IN_MS);
_context.next = 4;
break;
case 3:
_context.prev = 3;
_t = _context["catch"](1);
_error = _t instanceof Error ? _t : new Error(String(_t));
setError(_error);
onError === null || onError === void 0 || onError(_error);
case 4:
case "end":
return _context.stop();
}
}, _callee, null, [[1, 3]]);
}));
return function init() {
return _ref3.apply(this, arguments);
};
}();
void init();
return function () {
var _mountRef$current;
(_mountRef$current = mountRef.current) === null || _mountRef$current === void 0 || _mountRef$current.dispose();
mountRef.current = null;
setIsInitialized(false);
};
}, [assetsPath, videoSrc, imageSrc, gradientMapSrc, gradientMap2Src, centerGradientMapSrc, configProps.preset]);
// Update uniforms when config props change
useEffect(function () {
if (isInitialized && mountRef.current) {
var config = resolveConfig(props, assetsPath);
mountRef.current.setUniforms(config);
}
}, [isInitialized, configProps.preset,
// Colorama
configProps.inputMin, configProps.inputMax, configProps.modifyGamma, configProps.posterizeLevels, configProps.cycleRepetitions, configProps.phaseShift, configProps.cycleSpeed, configProps.wrapMode, configProps.reverse, configProps.blendWithOriginal,
// Displacement
configProps.numSegments, configProps.slitAngle, configProps.displacementX, configProps.displacementY,
// Center element
configProps.enableCenterElement, configProps.centerAnimDuration,
// Color correction
configProps.ccBlackPoint, configProps.ccWhitePoint, configProps.ccMidtoneGamma, configProps.ccGamma, configProps.ccContrast,
// Zoom & Pan
configProps.zoom, configProps.panX, configProps.panY].concat(_toConsumableArray((_configProps$edgeFeat = configProps.edgeFeather) !== null && _configProps$edgeFeat !== void 0 ? _configProps$edgeFeat : [0, 0, 0, 0]), [
// Effect toggles
configProps.enableDisplacement, configProps.enableColorama, configProps.enableBloom, configProps.enableLightSweep,
// Light
configProps.lightIntensity, configProps.lightStartFrame,
// Playback
configProps.paused, configProps.startTime, configProps.endTime, configProps.animateLightIndependently,
// Cycle animation
configProps.animateCycleReps, configProps.cycleRepetitionsStart, configProps.cycleRepetitionsEnd, configProps.cycleRepetitionsStartFrame, configProps.cycleRepetitionsDuration,
// Gradient map blend
configProps.gradientMapBlend, configProps.gradientMapBlendDuration]));
// Update gradient map texture when a canvas is provided
useEffect(function () {
if (isInitialized && mountRef.current && gradientMapCanvas) {
mountRef.current.updateGradientMapTexture(gradientMapCanvas);
}
}, [isInitialized, gradientMapCanvas]);
var mergedRef = useMergeRefs(forwardedRef, divRef);
// Convert width/height to string if number
var widthStyle = typeof width === 'number' ? "".concat(width, "px") : width;
var heightStyle = typeof height === 'number' ? "".concat(height, "px") : height;
if (error) {
return /*#__PURE__*/jsx("div", {
ref: mergedRef,
className: className,
style: _objectSpread({
width: widthStyle,
height: heightStyle
}, style)
});
}
return /*#__PURE__*/jsx("div", {
ref: mergedRef,
className: className,
style: _objectSpread(_objectSpread({
width: widthStyle,
height: heightStyle,
position: 'relative',
overflow: 'hidden',
backgroundColor: 'transparent',
transition: "".concat(FADE_IN_MS, "ms opacity")
}, isInitialized ? {
opacity: 1
} : {
opacity: 0
}), style)
});
});
export { RzpGlass };
//# sourceMappingURL=RzpGlass.js.map