react-vegas
Version:
Vegas.js for React
65 lines (64 loc) • 2.94 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import "react";
import * as __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__ from "motion/react";
const VegasSlideRenderer = ({ slide, index, isFirstTransition, firstTransitionDuration, transitionDuration, transition, cover, align, valign, color, variants, preloadImage, loadedImages, next, log, logError })=>{
const currentTransition = slide.transition || transition;
const style = {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundColor: slide.color || color || void 0,
objectFit: slide.cover ?? cover ? "cover" : "contain",
objectPosition: `${slide.align || align} ${slide.valign || valign}`
};
const currentTransitionDurationValue = isFirstTransition ? firstTransitionDuration : transitionDuration;
const isImagePreloaded = preloadImage && loadedImages[slide.src];
const content = slide.video ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("video", {
style: style,
autoPlay: true,
muted: slide.video.muted,
loop: slide.video.loop,
onEnded: ()=>{
if (!slide.video?.loop) {
log("视频播放结束,切换到下一张");
next();
}
},
children: slide.video.src.map((src, i)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("source", {
src: src
}, i))
}, index) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
style: {
...style,
backgroundImage: `url(${slide.src})`,
backgroundSize: slide.cover ?? cover ? "cover" : "contain",
backgroundPosition: `${slide.align || align} ${slide.valign || valign}`,
backgroundRepeat: "no-repeat"
},
onLoad: isImagePreloaded ? void 0 : ()=>{},
onError: ()=>{
logError(`图片加载失败: ${slide.src}`);
}
}, index);
const variant = variants[currentTransition] || variants.fade;
log(`渲染幻灯片: ${slide.src}, 动画: ${currentTransition}, 持续时间: ${currentTransitionDurationValue}ms`);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div, {
initial: "exit",
animate: "enter",
exit: "exit",
variants: currentTransition in variants ? variant({
duration: currentTransitionDurationValue / 1000
}) : variant({
duration: transitionDuration / 1000
}),
style: {
position: "absolute",
width: "100%",
height: "100%"
},
children: content
}, slide.src);
};
export { VegasSlideRenderer };