Update MediaDisplay Widget

docs/resources/ui/widgets/built-in-widgets/media-display.md

@@ -3,55 +3,33 @@ title: MediaDisplay
 slug: media-display
 tags: [Components, Base Elements]
 keywords: [Media, Image, Video, Widget, Base Elements]
-description: Learn how to add MediaDisplay widget in your FlutterFlow app.
+description: Learn how to add and customize a MediaDisplay widget in your FlutterFlow app.
 ---
+
 # MediaDisplay
-The **MediaDisplay** widget in FlutterFlow automatically detects the type of media fetched from a URL and adjusts the widget accordingly. For instance, if the URL returns an image, the widget will behave as an Image widget.
 
-This versatility allows you to easily present various types of media within your app. For example, it can be integrated into scrollable widgets like [ListView](../../widgets/composing-widgets/list-grid.md#listview-widget) for displaying activity feeds or [GridView](../../widgets/composing-widgets/list-grid.md#gridview-widget) for presenting photos and videos together.
+The **MediaDisplay** widget displays an image or video using a media URL supplied from a variable. It automatically detects the media type and uses the appropriate image or video behavior, making it useful when the same part of your app can contain either type of media.
 
-## Adding MediaDisplay widget
+For example, you can add it to a [ListView](../../widgets/composing-widgets/list-grid.md#listview-widget) to create an activity feed or to a [GridView](../../widgets/composing-widgets/list-grid.md#gridview-widget) to show images and videos together.
 
-Let's build an example of using the MediaDisplay widget inside the ListView and display the photos and videos from the Firestore database.
+![A variable supplies the media URL to MediaDisplay, which detects whether to display an image or video.](imgs/media-display-overview.svg)
 
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-    height: 0,
-    width: '100%'}}>
-    <iframe 
-        src="https://demo.arcade.software/cTIAYlFFDrAl5YV3KDtn?embed&show_copy_link=true"
-        title=""
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameborder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-<p></p>
+## Adding a MediaDisplay Widget
 
-The steps to add and use the MediaDisplay are as follows:
+1. Open the [Widget Palette](../../../../intro/ff-ui/widget-palette.md) and add the **MediaDisplay** widget from **Base Elements**.
+2. Select the widget and open the [Properties Panel](../../../../intro/ff-ui/builder.md#properties-panel).
+3. Under **Media Path**, select **Set from Variable**, then choose the variable that contains the image or video URL.
 
-1. Add the **MediaDisplay** widget from the **Base Elements** tab and drop it inside the **ListView**.
+The following walkthrough demonstrates how to add and configure the widget:
 
 <div style={{
     position: 'relative',
     paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
     height: 0,
     width: '100%'}}>
-    <iframe 
-        src="https://demo.arcade.software/UPaIcU5AojvqG0MTP374?embed&show_copy_link=true"
-        title=""
+    <iframe
+        src="https://demo.arcade.software/yDefo5KtJnxvDotpOSbn?embed&show_copy_link=true"
+        title="Add and configure a MediaDisplay widget"
         style={{
             position: 'absolute',
             top: 0,
@@ -68,46 +46,35 @@ The steps to add and use the MediaDisplay are as follows:
         allow="clipboard-write">
     </iframe>
 </div>
-<p></p>
 
-2. Create a collection and add data with some image and video URLs.
-3. Query a collection to get a list of documents from the Firestore collection and show them in the ListView.
-4. To display media inside the widget, move to the properties panel > **Media Path** > Set from Variable menu. Select the source as **[collection_name] Document** and select the field that holds the URL path from the **Available Options** list.
+### Using Dynamic Media
 
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-    height: 0,
-    width: '100%'}}>
-    <iframe 
-        src="https://demo.arcade.software/1IREtjiFSv5HyQbjhsOo?embed&show_copy_link=true"
-        title=""
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameborder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-<p></p>
+You can set **Media Path** from a database field, API response, state variable, or another variable that contains a media URL. This is useful when each item in a repeating widget displays different media.
+
+To display dynamic media in a ListView or GridView:
+
+1. Create a data field that stores the media URL for each record.
+2. Add a backend query to the ListView or GridView that returns those records.
+3. Place the **MediaDisplay** widget inside the repeating item.
+4. Select the **MediaDisplay** widget and choose **Media Path > Set from Variable**.
+5. Select the current record, then choose the field that contains its media URL.
 
 ## Customizing
 
-You can customize the appearance and behavior of the widget using the various properties available under the properties panel.
+The settings available for the MediaDisplay widget depend on the type of media it displays.
+
+### Customizing Images
+
+When **Media Path** points to an image, use the image settings to control its dimensions, fit, alignment, border, and other appearance options. See [Common Image Properties](../../widgets/basic-widgets/image.md#common-image-properties) for details.
 
-### Customizing Image
+### Customizing Videos
 
-To customize the widget when image is displayed, refer [here](../../widgets/basic-widgets/image.md#common-image-properties).
+When **Media Path** points to a video, use the video settings to control playback and appearance. See [VideoPlayer](../../../../ff-concepts/file-handling/displaying-media.md#videoplayer) for details.
 
-### Customizing Video
+## Best Practices
 
-To customize the widget when video is displayed, refer [here](../../../../ff-concepts/file-handling/displaying-media.md#videoplayer).
+- Use consistent dimensions or aspect ratios when displaying mixed media in a list or grid.
+- Test the widget with every media type your data can provide.
+- Make sure dynamically supplied URLs are valid and accessible to your app's users.
+- Decide how the surrounding layout should handle an empty or invalid media path.
+- Test loading and scrolling performance when displaying many media items.