react-vegas/dist/hooks/usePreload.js

Vegas.js for React

import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
const usePreload = (slides, preloadImage, preloadVideo, preLoadImageBatch, log, logWarn, logError)=>{
    const [loading, setLoading] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
    const [loadProgress, setLoadProgress] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
    const [loadedImages, setLoadedImages] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({});
    const batchPreloadImages = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(async ()=>{
        if (!preloadImage) return;
        setLoading(true);
        const batchSize = preLoadImageBatch;
        const imageSlides = slides.filter((slide)=>!slide.video);
        try {
            for(let i = 0; i < imageSlides.length; i += batchSize){
                const batch = imageSlides.slice(i, i + batchSize);
                const promises = batch.map((slide)=>new Promise((resolve)=>{
                        const img = new Image();
                        img.onload = ()=>{
                            setLoadedImages((prev)=>({
                                    ...prev,
                                    [slide.src]: true
                                }));
                            resolve();
                        };
                        img.onerror = ()=>{
                            logWarn(`图片加载失败: ${slide.src}`);
                            resolve();
                        };
                        img.src = slide.src;
                    }));
                await Promise.all(promises);
                setLoadProgress(Math.min(100, Math.floor((i + batch.length) / imageSlides.length * 100)));
            }
        } catch (error) {
            logError("预加载图片时发生错误:", error);
        } finally{
            setLoading(false);
        }
    }, [
        slides,
        preloadImage,
        preLoadImageBatch,
        log,
        logWarn,
        logError
    ]);
    const preloadVideoResources = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
        if (!preloadVideo) return;
        log("开始预加载视频资源");
        slides.forEach((slide)=>{
            if (slide.video) slide.video.src.forEach((src)=>{
                const link = document.createElement("link");
                link.rel = "preload";
                link.as = "video";
                link.href = src;
                document.head.appendChild(link);
                log(`预加载视频: ${src}`);
            });
        });
    }, [
        slides,
        preloadVideo,
        log
    ]);
    const preloadResources = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(async ()=>{
        log("开始预加载资源");
        setLoading(true);
        const preloadPromises = [];
        if (preloadImage) preloadPromises.push(batchPreloadImages());
        if (preloadVideo) preloadVideoResources();
        try {
            await Promise.all(preloadPromises);
            log("所有资源预加载完成");
        } catch (error) {
            logError("预加载资源时发生错误:", error);
        } finally{
            setLoading(false);
        }
    }, [
        batchPreloadImages,
        preloadVideoResources,
        preloadImage,
        preloadVideo,
        log,
        logError
    ]);
    return {
        loading,
        loadProgress,
        loadedImages,
        preloadResources,
        batchPreloadImages,
        preloadVideoResources
    };
};
export { usePreload };