feat: Add info panel options prefetchImage, prefetchVideo, prefetchAudio to pre-fetch media content in the info panel (parse-community#3009)

Author: mtrezza

README.md

@@ -224,6 +224,9 @@ Each class in `columnPreference` can have an array of column configurations:
 | `cloudCodeFunction` | String              | no       | -       | `"getUserDetails"` | Cloud Function receiving selected object.     |
 | `prefetchObjects`   | Number              | yes      | `0`     | `2`                | Number of next rows to prefetch.              |
 | `prefetchStale`     | Number              | yes      | `0`     | `10`               | Seconds after which prefetched data is stale. |
+| `prefetchImage`     | Boolean             | yes      | `true`  | `false`            | Whether to prefetch image content.            |
+| `prefetchVideo`     | Boolean             | yes      | `true`  | `false`            | Whether to prefetch video content.            |
+| `prefetchAudio`     | Boolean             | yes      | `true`  | `false`            | Whether to prefetch audio content.            |
 
 
 ##### User Configuration (`users[]`)
@@ -1020,7 +1023,10 @@ The following example dashboard configuration shows an info panel for the `_User
         "classes": ["_User"],
         "cloudCodeFunction": "getUserDetails",
         "prefetchObjects": 2,
-        "prefetchStale": 10
+        "prefetchStale": 10,
+        "prefetchImage": true,
+        "prefetchVideo": true,
+        "prefetchAudio": true
       }
     ]
   }
@@ -1321,13 +1327,18 @@ Example:
 
 To reduce the time for info panel data to appear, data can be prefetched.
 
-| Parameter                      | Type   | Optional | Default | Example | Description                                                                                                                       |
-|--------------------------------|--------|----------|---------|---------|-----------------------------------------------------------------------------------------------------------------------------------|
-| `infoPanel[*].prefetchObjects` | Number | yes      | `0`     | `2`     | Number of next rows to prefetch when browsing sequential rows. For example, `2` means the next 2 rows will be fetched in advance. |
-| `infoPanel[*].prefetchStale`   | Number | yes      | `0`     | `10`    | Duration in seconds after which prefetched data is discarded as stale.                                                            |
+| Parameter                      | Type    | Optional | Default | Example | Description                                                                                                                       |
+|--------------------------------|---------|----------|---------|---------|-----------------------------------------------------------------------------------------------------------------------------------|
+| `infoPanel[*].prefetchObjects` | Number  | yes      | `0`     | `2`     | Number of next rows to prefetch when browsing sequential rows. For example, `2` means the next 2 rows will be fetched in advance. |
+| `infoPanel[*].prefetchStale`   | Number  | yes      | `0`     | `10`    | Duration in seconds after which prefetched data is discarded as stale.                                                            |
+| `infoPanel[*].prefetchImage`   | Boolean | yes      | `true`  | `false` | Whether to prefetch image content when prefetching objects. Only applies when `prefetchObjects` is enabled.                       |
+| `infoPanel[*].prefetchVideo`   | Boolean | yes      | `true`  | `false` | Whether to prefetch video content when prefetching objects. Only applies when `prefetchObjects` is enabled.                       |
+| `infoPanel[*].prefetchAudio`   | Boolean | yes      | `true`  | `false` | Whether to prefetch audio content when prefetching objects. Only applies when `prefetchObjects` is enabled.                       |
 
 Prefetching is particularly useful when navigating through lists of objects. To optimize performance and avoid unnecessary data loading, prefetching is triggered only after the user has moved through 3 consecutive rows using the keyboard down-arrow key or by mouse click.
 
+When `prefetchObjects` is enabled, media content (images, videos, and audio) in the info panel can also be prefetched to improve loading performance. By default, all media types are prefetched, but you can selectively disable prefetching for specific media types using the `prefetchImage`, `prefetchVideo`, and `prefetchAudio` options.
+
 ### Freeze Columns
 
 ▶️ *Core > Browser > Freeze column*

src/dashboard/Data/Browser/Browser.react.js

@@ -465,6 +465,9 @@ class Browser extends DashboardView {
               classes: panel.classes,
               prefetchObjects: panel.prefetchObjects || 0,
               prefetchStale: panel.prefetchStale || 0,
+              prefetchImage: panel.prefetchImage ?? true,
+              prefetchVideo: panel.prefetchVideo ?? true,
+              prefetchAudio: panel.prefetchAudio ?? true,
             });
           });
         });

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -768,6 +768,9 @@ export default class DataBrowser extends React.Component {
     return {
       prefetchObjects: config?.prefetchObjects || 0,
       prefetchStale: config?.prefetchStale || 0,
+      prefetchImage: config?.prefetchImage ?? true,
+      prefetchVideo: config?.prefetchVideo ?? true,
+      prefetchAudio: config?.prefetchAudio ?? true,
     };
   }
 
@@ -809,6 +812,66 @@ export default class DataBrowser extends React.Component {
     }
   }
 
+  isSafeHttpUrl(url) {
+    try {
+      const parsed = new URL(url);
+      return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+    } catch {
+      return false;
+    }
+  }
+
+  extractMediaUrls(data) {
+    const urls = { images: new Set(), videos: new Set(), audios: new Set() };
+
+    if (!data?.panel?.segments) {
+      return urls;
+    }
+
+    data.panel.segments.forEach(segment => {
+      if (segment.items) {
+        segment.items.forEach(item => {
+          if (item.type === 'image' && item.url && this.isSafeHttpUrl(item.url)) {
+            urls.images.add(item.url);
+          } else if (item.type === 'video' && item.url && this.isSafeHttpUrl(item.url)) {
+            urls.videos.add(item.url);
+          } else if (item.type === 'audio' && item.url && this.isSafeHttpUrl(item.url)) {
+            urls.audios.add(item.url);
+          }
+        });
+      }
+    });
+
+    return urls;
+  }
+
+  prefetchMedia(urls, mediaType) {
+    if (!urls || urls.size === 0) {
+      return;
+    }
+
+    urls.forEach(url => {
+      // Use link-based prefetching for better browser optimization and caching
+      const link = document.createElement('link');
+      link.rel = mediaType === 'image' ? 'preload' : 'prefetch';
+      link.as = mediaType;
+      link.href = url;
+
+      link.onload = () => {
+        // Resource successfully cached, safe to remove the link element
+        link.remove();
+      };
+
+      link.onerror = () => {
+        console.error(`Failed to prefetch ${mediaType}: ${url}`);
+        // Failed to fetch, remove the link element
+        link.remove();
+      };
+
+      document.head.appendChild(link);
+    });
+  }
+
   prefetchObject(objectId) {
     const { className, app } = this.props;
     const cloudCodeFunction =
@@ -831,6 +894,20 @@ export default class DataBrowser extends React.Component {
           [objectId]: { data: result, timestamp: Date.now() },
         },
       }));
+
+      // Prefetch media if enabled
+      const { prefetchImage, prefetchVideo, prefetchAudio } = this.getPrefetchSettings();
+      const mediaUrls = this.extractMediaUrls(result);
+
+      if (prefetchImage && mediaUrls.images.size > 0) {
+        this.prefetchMedia(mediaUrls.images, 'image');
+      }
+      if (prefetchVideo && mediaUrls.videos.size > 0) {
+        this.prefetchMedia(mediaUrls.videos, 'video');
+      }
+      if (prefetchAudio && mediaUrls.audios.size > 0) {
+        this.prefetchMedia(mediaUrls.audios, 'audio');
+      }
     }).catch(error => {
       console.error(`Failed to prefetch object ${objectId}:`, error);
     });