MediaDisplay

The MediaDisplay widget shows the image or video from the URL link. You could use this widget inside the scrollable widgets such as ListView (to display activity feeds) and GridView (to show all photos and videos together).
MediaDisplay widget 
Adding MediaDisplay widget
Let's build an example of using the MediaDisplay widget inside the ListView and display the photos and videos from the Firestore database.
MediaDisplay widget in a ListView
The steps to add and use the MediaDisplay are as follows:
1.​Building UI​
2.​Adding photos and videos to the collection​
3.​Querying a Collection on a ListView​
4.​Showing Data in UI Elements​
1. Building UI
The UI consists of the ListView and MediaDisplay widgets. Here is how you add it:
First, remove the existing Column widget and drag the ListView widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
Drag the MediaDisplay widget from the Base Elements tab and drop it inside the ListView. Change its width and height if you wish to.
Building UI
2. Adding photos and videos to the collection
To add and display data from Firestore, ensure you incorporate all the mentioned prerequisites.
Be familiar with Structuring the Firebase Database.
Complete all steps in the Firebase Setup section for your project.
Create a Collection with the schema that contains a field with an Image Path data type.
​Add Data to the Collection with some image and video URLs.
Your collection should look like the following:
collection schema
collection data
3. Querying a collection on a ListView
In this step, you will query a collection to get a list of documents from the Firestore collection and show them in the ListView.
To query a collection on a ListView:
Select the ListView widget from the widget tree or the canvas area.
Click on the Backend Query tab (on the right side of your screen).
Set the Query Type to Query Collection.
Scroll down to find the Collection dropdown and change it to your collection.
Set the Query Type to List of Documents.
Click Confirm.
Querying a collection on a ListView
4. Showing data in UI elements
To show an image and video from the URL stored in your Firestore document:
Select the MediaDisplay Widget from the widget tree or the canvas area.
Move to the properties panel and scroll down to the Media Path property.
Click on the Set from Variable text. (This will open a new popup)
Select the source as [collection_name] Document. This is displayed only after querying a collection.
Select the field that holds the URL path from the Available Options list.
Showing data in UI elements
Customizing
You can customize the appearance and behavior of the widget using the various properties available under the properties panel.
Customizing Image
To customize the image, please follow the instructions here.
Customizing Video
To customize the image, please follow the instructions here.
Show/hide widget
Please find the instructions to show/hide the widget here.

Transform

RiveAnimation

Last modified 10mo ago