partycles 1.0.0 → 1.1.0

package/dist/index.js

@@ -1152,12 +1152,57 @@ const animations = {
     },
 };
 
+const isMobileDevice = () => {
+    if (typeof window === 'undefined')
+        return false;
+    // Check user agent
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+    // Check viewport width
+    const isMobileWidth = window.innerWidth <= 768;
+    // Check touch support
+    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    return isMobileUA || (isMobileWidth && hasTouch);
+};
+const optimizeConfigForMobile = (config) => {
+    var _a, _b, _c;
+    if (!isMobileDevice())
+        return config;
+    return Object.assign(Object.assign({}, config), { 
+        // Reduce particle count by 40%
+        particleCount: Math.floor((config.particleCount || 50) * 0.6), 
+        // Reduce element size by 20%
+        elementSize: Math.floor((config.elementSize || 20) * 0.8), 
+        // Reduce lifetime by 20%
+        lifetime: Math.floor((config.lifetime || 150) * 0.8), 
+        // Simplify physics
+        physics: Object.assign(Object.assign({}, config.physics), { 
+            // Reduce precision for mobile
+            gravity: Math.round((((_a = config.physics) === null || _a === void 0 ? void 0 : _a.gravity) || 0) * 100) / 100, wind: Math.round((((_b = config.physics) === null || _b === void 0 ? void 0 : _b.wind) || 0) * 100) / 100, friction: Math.round((((_c = config.physics) === null || _c === void 0 ? void 0 : _c.friction) || 0.98) * 100) / 100 }) });
+};
+// Frame skipping for mobile
+const shouldSkipFrame = (frameCount) => {
+    if (!isMobileDevice())
+        return false;
+    // Skip every 3rd frame on mobile
+    return frameCount % 3 === 0;
+};
+
 const useReward = (elementId, animationType, config) => {
     const [isAnimating, setIsAnimating] = React.useState(false);
     const animationFrameRef = React.useRef();
     const particlesRef = React.useRef([]);
     const containerRef = React.useRef(null);
     const rootRef = React.useRef(null);
+    const isTabVisible = React.useRef(true);
+    // Monitor tab visibility
+    React.useEffect(() => {
+        const handleVisibilityChange = () => {
+            isTabVisible.current = !document.hidden;
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+    }, []);
     const animate = React.useCallback(() => {
         var _a, _b, _c, _d, _e, _f;
         const element = document.getElementById(elementId);
@@ -1173,8 +1218,10 @@ const useReward = (elementId, animationType, config) => {
             console.error(`Animation type "${animationType}" not found`);
             return;
         }
+        // Apply mobile performance optimizations
+        const optimizedConfig = config ? optimizeConfigForMobile(config) : undefined;
         // Create particles
-        particlesRef.current = animationHandler.createParticles(origin, config || {});
+        particlesRef.current = animationHandler.createParticles(origin, optimizedConfig || {});
         // Create container
         const container = document.createElement('div');
         container.style.position = 'fixed';
@@ -1195,8 +1242,13 @@ const useReward = (elementId, animationType, config) => {
         const gravity = (_b = (_a = config === null || config === void 0 ? void 0 : config.physics) === null || _a === void 0 ? void 0 : _a.gravity) !== null && _b !== void 0 ? _b : defaultGravity;
         const friction = (_d = (_c = config === null || config === void 0 ? void 0 : config.physics) === null || _c === void 0 ? void 0 : _c.friction) !== null && _d !== void 0 ? _d : 0.98;
         const wind = (_f = (_e = config === null || config === void 0 ? void 0 : config.physics) === null || _e === void 0 ? void 0 : _e.wind) !== null && _f !== void 0 ? _f : 0;
+        // Track frame count for mobile optimization
+        let frameCount = 0;
         const updateParticles = () => {
             let activeParticles = 0;
+            frameCount++;
+            // Skip frame rendering on mobile to improve performance
+            const skipFrame = shouldSkipFrame(frameCount);
             particlesRef.current = particlesRef.current.map((particle) => {
                 if (particle.life <= 0)
                     return particle;
@@ -1224,13 +1276,13 @@ const useReward = (elementId, animationType, config) => {
                 }
                 return particle;
             });
-            // Render particles
-            if (rootRef.current) {
+            // Render particles (skip rendering on mobile for some frames)
+            if (rootRef.current && !skipFrame) {
                 rootRef.current.render(React.createElement(React.Fragment, null, particlesRef.current
                     .filter((p) => p.life > 0)
                     .map((particle) => (React.createElement("div", { key: particle.id, style: createParticleStyle(particle, containerRect) }, animationHandler.renderParticle(particle))))));
             }
-            if (activeParticles > 0) {
+            if (activeParticles > 0 && isTabVisible.current) {
                 animationFrameRef.current = requestAnimationFrame(updateParticles);
             }
             else {
@@ -1277,5 +1329,7 @@ const useReward = (elementId, animationType, config) => {
 };
 
 exports.emojiPresets = emojiPresets;
+exports.isMobileDevice = isMobileDevice;
+exports.optimizeConfigForMobile = optimizeConfigForMobile;
 exports.useReward = useReward;
 //# sourceMappingURL=index.js.map