napp-wallet-post-feed-test 1.0.47

package/dist/components/useImagePreloading.js

@@ -0,0 +1,231 @@
+// useImagePreloading.jsx - React hook for managing image preloading
+import useEffect from "react";
+import useRef from "react";
+import useCallback from "react";
+import useMemo from "react";
+import imagePreloader from "./ImagePreloader";
+
+// Hook for preloading images based on intersection observer
+export var useImagePreloading = function useImagePreloading(posts) {
+  var enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var preloadedPosts = useRef(new Set());
+  var lastPostsRef = useRef(null);
+
+  // Memoize posts to prevent unnecessary re-renders
+  var memoizedPosts = useMemo(function () {
+    return posts;
+  }, [posts]);
+
+  // Memoize the preloading function to prevent recreation on every render
+  var preloadImages = useCallback(function (newPosts) {
+    if (!newPosts || newPosts.length === 0) return;
+
+    // Mark posts as being preloaded
+    newPosts.forEach(function (post) {
+      if (post !== null && post !== void 0 && post.rsmguid) {
+        preloadedPosts.current.add(post.rsmguid);
+      }
+    });
+
+    // Preload images for new posts
+    imagePreloader.preloadPostImages(newPosts, 0, Math.min(newPosts.length, 10),
+    // Limit to 10 posts at a time
+    imagePreloader.priorities.HIGH);
+  }, []);
+
+  // Memoize the filtering logic
+  var getNewPosts = useCallback(function (currentPosts) {
+    if (!currentPosts || currentPosts.length === 0) return [];
+    return currentPosts.filter(function (post) {
+      return post && post.rsmguid && !preloadedPosts.current.has(post.rsmguid);
+    });
+  }, []);
+  useEffect(function () {
+    if (!enabled || !memoizedPosts || memoizedPosts.length === 0) return;
+
+    // Check if posts have actually changed to prevent unnecessary processing
+    var postsChanged = lastPostsRef.current !== memoizedPosts;
+    if (!postsChanged) return;
+    lastPostsRef.current = memoizedPosts;
+
+    // Only preload posts that haven't been preloaded yet
+    var newPosts = getNewPosts(memoizedPosts);
+    if (newPosts.length > 0) {
+      preloadImages(newPosts);
+    }
+  }, [enabled, memoizedPosts, preloadImages, getNewPosts]);
+
+  // Cleanup function
+  useEffect(function () {
+    return function () {
+      // Clear preloaded posts set when component unmounts
+      preloadedPosts.current.clear();
+      lastPostsRef.current = null;
+    };
+  }, []);
+
+  // Return utility functions for external use
+  return {
+    isPostPreloaded: useCallback(function (postId) {
+      return preloadedPosts.current.has(postId);
+    }, []),
+    getPreloadedCount: useCallback(function () {
+      return preloadedPosts.current.size;
+    }, []),
+    clearPreloadedPosts: useCallback(function () {
+      preloadedPosts.current.clear();
+    }, [])
+  };
+};
+
+// Hook for preloading visible viewport images
+export var useViewportImagePreloading = function useViewportImagePreloading(containerRef, posts, visibleRange) {
+  var lastPreloadedRange = useRef({
+    start: -1,
+    end: -1
+  });
+  var lastPostsRef = useRef(null);
+
+  // Memoize posts and visible range
+  var memoizedPosts = useMemo(function () {
+    return posts;
+  }, [posts]);
+  var memoizedVisibleRange = useMemo(function () {
+    return visibleRange;
+  }, [visibleRange]);
+
+  // Memoize the viewport preloading function
+  var preloadViewportImages = useCallback(function (currentPosts, range) {
+    if (!currentPosts || currentPosts.length === 0 || !range) return;
+    var start = range.start,
+      end = range.end;
+    var _lastPreloadedRange$c = lastPreloadedRange.current,
+      lastStart = _lastPreloadedRange$c.start,
+      lastEnd = _lastPreloadedRange$c.end;
+
+    // Only preload if range has significantly changed
+    if (Math.abs(start - lastStart) > 2 || Math.abs(end - lastEnd) > 2) {
+      // Preload current viewport plus buffer
+      var bufferSize = 3;
+      var preloadStart = Math.max(0, start - bufferSize);
+      var preloadEnd = Math.min(currentPosts.length, end + bufferSize);
+      imagePreloader.preloadPostImages(currentPosts, preloadStart, preloadEnd - preloadStart, imagePreloader.priorities.HIGH);
+      lastPreloadedRange.current = {
+        start: start,
+        end: end
+      };
+    }
+  }, []);
+  useEffect(function () {
+    if (!memoizedPosts || memoizedPosts.length === 0 || !memoizedVisibleRange) return;
+
+    // Check if data has actually changed
+    var dataChanged = lastPostsRef.current !== memoizedPosts;
+    if (!dataChanged) return;
+    lastPostsRef.current = memoizedPosts;
+    preloadViewportImages(memoizedPosts, memoizedVisibleRange);
+  }, [memoizedPosts, memoizedVisibleRange, preloadViewportImages]);
+
+  // Cleanup
+  useEffect(function () {
+    return function () {
+      lastPostsRef.current = null;
+      lastPreloadedRange.current = {
+        start: -1,
+        end: -1
+      };
+    };
+  }, []);
+};
+
+// Hook for managing image cache and cleanup
+export var useImageCacheManagement = function useImageCacheManagement() {
+  var maxCacheSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 500;
+  var intervalRef = useRef(null);
+
+  // Memoize the cache management function
+  var manageCache = useCallback(function () {
+    var stats = imagePreloader.getStats();
+
+    // Clear cache if it gets too large
+    if (stats.cacheSize > maxCacheSize) {
+      imagePreloader.clearCache();
+    }
+  }, [maxCacheSize]);
+  useEffect(function () {
+    // Clear any existing interval
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+
+    // Set up new interval
+    intervalRef.current = setInterval(manageCache, 30000); // Check every 30 seconds
+
+    return function () {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [manageCache]);
+
+  // Return cache stats for debugging
+  return useMemo(function () {
+    return {
+      getCacheStats: function getCacheStats() {
+        return imagePreloader.getStats();
+      },
+      clearCache: function clearCache() {
+        return imagePreloader.clearCache();
+      }
+    };
+  }, []);
+};
+
+// Hook for prefetching critical images on app load
+export var useCriticalImagePrefetch = function useCriticalImagePrefetch(criticalImageUrls) {
+  var lastUrlsRef = useRef(null);
+
+  // Memoize the critical image URLs
+  var memoizedUrls = useMemo(function () {
+    return criticalImageUrls;
+  }, [criticalImageUrls]);
+
+  // Memoize the prefetch function
+  var prefetchImages = useCallback(function (urls) {
+    if (!urls || urls.length === 0) return;
+
+    // Prefetch critical images using browser's prefetch mechanism
+    imagePreloader.prefetchCriticalImages(urls);
+
+    // Also preload them through our system
+    urls.forEach(function (url) {
+      imagePreloader.preloadImage(url, imagePreloader.priorities.HIGH).catch(function (error) {
+        // Silently handle preload failures
+        // Critical image preload failed
+      });
+    });
+  }, []);
+  useEffect(function () {
+    if (!memoizedUrls || memoizedUrls.length === 0) return;
+
+    // Check if URLs have changed
+    var urlsChanged = lastUrlsRef.current !== memoizedUrls;
+    if (!urlsChanged) return;
+    lastUrlsRef.current = memoizedUrls;
+    prefetchImages(memoizedUrls);
+  }, [memoizedUrls, prefetchImages]);
+
+  // Cleanup
+  useEffect(function () {
+    return function () {
+      lastUrlsRef.current = null;
+    };
+  }, []);
+};
+export default {
+  useImagePreloading: useImagePreloading,
+  useViewportImagePreloading: useViewportImagePreloading,
+  useImageCacheManagement: useImageCacheManagement,
+  useCriticalImagePrefetch: useCriticalImagePrefetch
+};