feat

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,52 @@ export default class DataBrowser extends React.Component {
     }
   }
 
+  extractMediaUrls(data) {
+    const urls = { images: [], videos: [], audios: [] };
+
+    if (!data?.panel?.segments) {
+      return urls;
+    }
+
+    data.panel.segments.forEach(segment => {
+      if (segment.items) {
+        segment.items.forEach(item => {
+          if (item.type === 'image' && item.url) {
+            urls.images.push(item.url);
+          } else if (item.type === 'video' && item.url) {
+            urls.videos.push(item.url);
+          } else if (item.type === 'audio' && item.url) {
+            urls.audios.push(item.url);
+          }
+        });
+      }
+    });
+
+    return urls;
+  }
+
+  prefetchMedia(urls, mediaType) {
+    if (!urls || urls.length === 0) {
+      return;
+    }
+
+    urls.forEach(url => {
+      try {
+        if (mediaType === 'image') {
+          const img = new Image();
+          img.src = url;
+        } else if (mediaType === 'video' || mediaType === 'audio') {
+          // For video and audio, we can use fetch to cache the content
+          fetch(url, { mode: 'no-cors' }).catch(() => {
+            // Silently fail - the media will load normally if prefetch fails
+          });
+        }
+      } catch (error) {
+        // Silently fail - the media will load normally if prefetch fails
+      }
+    });
+  }
+
   prefetchObject(objectId) {
     const { className, app } = this.props;
     const cloudCodeFunction =
@@ -831,6 +880,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.length > 0) {
+        this.prefetchMedia(mediaUrls.images, 'image');
+      }
+      if (prefetchVideo && mediaUrls.videos.length > 0) {
+        this.prefetchMedia(mediaUrls.videos, 'video');
+      }
+      if (prefetchAudio && mediaUrls.audios.length > 0) {
+        this.prefetchMedia(mediaUrls.audios, 'audio');
+      }
     }).catch(error => {
       console.error(`Failed to prefetch object ${objectId}:`, error);
     });