react-vegas
Version:
Vegas.js for React
176 lines (175 loc) • 9.26 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__components_VegasLoader_js_5249a791__ from "./components/VegasLoader.js";
import * as __WEBPACK_EXTERNAL_MODULE__components_VegasTimer_js_7a278d7f__ from "./components/VegasTimer.js";
import * as __WEBPACK_EXTERNAL_MODULE__components_VegasOverlay_js_173d1550__ from "./components/VegasOverlay.js";
import * as __WEBPACK_EXTERNAL_MODULE__components_VegasDefaultBackground_js_0a20f660__ from "./components/VegasDefaultBackground.js";
import * as __WEBPACK_EXTERNAL_MODULE__components_VegasSlideRenderer_js_2ea24338__ from "./components/VegasSlideRenderer.js";
import * as __WEBPACK_EXTERNAL_MODULE__components_VegasSlide_js_1830d2c0__ from "./components/VegasSlide.js";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_useLogger_js_1a2b7be5__ from "./hooks/useLogger.js";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_usePreload_js_407b09dd__ from "./hooks/usePreload.js";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_useAnimationVariants_js_e1ee2def__ from "./hooks/useAnimationVariants.js";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_useVegasState_js_4249f357__ from "./hooks/useVegasState.js";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_useAutoplay_js_fbba3b48__ from "./hooks/useAutoplay.js";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_useVisibilityChange_js_fd195d27__ from "./hooks/useVisibilityChange.js";
const Vegas = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
const { slide = 0, delay = 5000, loop = true, preload = false, preloadImage = false, preLoadImageBatch = 3, preloadVideo = false, showLoading = false, timer = false, overlay = false, autoplay = true, shuffle = false, cover = true, color = null, align = "center", valign = "center", firstTransition = null, firstTransitionDuration = 3000, transition = "fade", transitionDuration = 1000, defaultBackground, defaultBackgroundDuration = 3000, debug = false, slides, onInit, onPlay, onPause, onWalk } = props;
const [isTransitioning, setIsTransitioning] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
const [showDefaultBg, setShowDefaultBg] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(true);
const { log, logWarn, logError } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useLogger_js_1a2b7be5__.useLogger)(debug);
const containerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
const { loading, loadProgress, loadedImages, batchPreloadImages } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_usePreload_js_407b09dd__.usePreload)(slides, preloadImage, preloadVideo, preLoadImageBatch, log, logWarn, logError);
const { variants } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useAnimationVariants_js_e1ee2def__.useAnimationVariants)(transitionDuration);
const vegasState = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useVegasState_js_4249f357__.useVegasState)(slide, slides, loop, shuffle, isTransitioning, firstTransition, firstTransitionDuration, log, onWalk);
const { currentSlide, isPlaying, setIsPlaying, visibleSlides, isFirstTransition, setIsFirstTransition, play: statePlay, pause: statePause, next, previous } = vegasState;
const play = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
statePlay();
if (isFirstTransition && showDefaultBg) {
logWarn("默认背景显示中，等待动画完成");
setTimeout(()=>{
setShowDefaultBg(false);
log("默认背景隐藏");
}, transitionDuration);
setIsFirstTransition(false);
}
onPlay?.();
}, [
statePlay,
isFirstTransition,
showDefaultBg,
onPlay
]);
const pause = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
statePause();
onPause?.();
}, [
statePause,
onPause
]);
(0, __WEBPACK_EXTERNAL_MODULE__hooks_useAutoplay_js_fbba3b48__.useAutoplay)(isPlaying, isTransitioning, currentSlide, slides, delay, next, log);
(0, __WEBPACK_EXTERNAL_MODULE__hooks_useVisibilityChange_js_fd195d27__.useVisibilityChange)(play, pause, log);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
log("Vegas组件开始初始化");
if (preload) {
log("开始预加载资源");
setIsPlaying(false);
batchPreloadImages().then(()=>{
if (autoplay && !defaultBackground) play();
});
}
onInit?.();
const cleanup = ()=>{
log("Vegas组件卸载");
pause();
};
if (defaultBackground) {
log(`存在默认背景，关闭自动播放`);
setIsPlaying(false);
log(`设置默认背景: ${defaultBackground}`);
log(`设置默认背景显示定时器，延迟: ${defaultBackgroundDuration}ms`);
const timer = window.setTimeout(()=>{
log("默认背景显示完成，开始自动播放");
if (autoplay) play();
}, defaultBackgroundDuration);
return ()=>{
clearTimeout(timer);
cleanup();
};
}
if (autoplay) play();
return cleanup;
}, []);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
if (isTransitioning) {
const timer = setTimeout(()=>{
setIsTransitioning(false);
log("幻灯片切换动画完成");
}, transitionDuration);
return ()=>clearTimeout(timer);
}
}, [
isTransitioning,
transitionDuration
]);
const renderSlide = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((index)=>{
try {
const slide = slides[index];
if (!slide) {
logError(`幻灯片索引 ${index} 不存在`);
return null;
}
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__components_VegasSlideRenderer_js_2ea24338__.VegasSlideRenderer, {
slide: slide,
index: index,
isFirstTransition: isFirstTransition,
firstTransitionDuration: firstTransitionDuration,
transitionDuration: transitionDuration,
transition: transition,
cover: cover,
align: align,
valign: valign,
color: color,
variants: variants,
preloadImage: preloadImage,
loadedImages: loadedImages,
next: next,
log: log,
logError: logError
});
} catch (error) {
logError("渲染幻灯片时发生错误:", error);
return null;
}
}, [
next,
variants,
transition,
color,
cover,
align,
valign,
isFirstTransition,
firstTransitionDuration,
transitionDuration
]);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>({
previous,
next,
play,
pause
}));
if (0 === slides.length) {
logError("幻灯片数组不能为空");
return null;
}
if (transitionDuration <= 0) logWarn("transitionDuration 应该大于 0");
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
ref: containerRef,
style: {
position: "relative",
width: "100%",
height: "100%",
overflow: "hidden",
backgroundColor: color || void 0
},
children: [
defaultBackground && showDefaultBg && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__components_VegasDefaultBackground_js_0a20f660__.VegasDefaultBackground, {
backgroundUrl: defaultBackground.toString()
}),
isPlaying && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__components_VegasSlide_js_1830d2c0__.VegasSlide, {
visibleSlides: visibleSlides,
renderSlide: renderSlide
}),
overlay && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__components_VegasOverlay_js_173d1550__.VegasOverlay, {}),
timer && isPlaying && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__components_VegasTimer_js_7a278d7f__.VegasTimer, {
currentOrderIndex: vegasState.currentOrderIndex,
totalSlides: slides.length
}),
showLoading && loading && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__components_VegasLoader_js_5249a791__.VegasLoader, {
loadProgress: loadProgress
})
]
});
});
Vegas.displayName = "Vegas";
export { Vegas };