How to render videos with List in react-admin?

Question

I have a question regarding react-admin. So I'm building this admin List which Hasura-graphQL. I am able to render Images with the ImageField component which I am using:

<ImageField label="Image" source="image" sortByOrder="DESC"/>

And which I have no problems rendering. But the issue comes when I need to render a video that comes in a URL from my graphQL schema. Something like this:

        "video": "https://myappvideo.blob.core.windows.net/posts/post_93753139-524a-4c85-a0fc-d40b47bd95f5.mp4?se=2030-12-31&sp=rwdlac&sv=2018-03-28&ss=btf&srt=sco&sig=oeyHYsiWC79a1z7fcgsPPdJzeC499t%2BwPkbImcctpJE%3D",
        "id": 471
      },
      {
        "video": null,
        "id": 493
      },
      {
        "video": "https://myappvideo.blob.core.windows.net/posts/post_f9c59f2f-3d2e-4c63-ae1e-65e5324866ad.mp4?se=2030-12-31&sp=rwdlac&sv=2018-03-28&ss=btf&srt=sco&sig=oeyHYsiWC79a1z7fcgsPPdJzeC499t%2BwPkbImcctpJE%3D",
        "id": 476
      },[...]

How can render videos in my react-admin list? Something where I can show the videos and I can click and reproduce?

React-admin has a way to render Images but I can see something similar for videos. Any help would be appreciated a lot!

EDIT

This is how I'm actually trying to make this work:

          <Datagrid>
              <TextField label="Post ID" source="id" sortByOrder="ASC" />
              
           //I am using FileField for this, but it does not work
              <FileField label="Content" source="video" rel="video" sortByOrder="ASC" />
              <TextField label="Content Type" />
    
              <UserSum source="id" />
    
              <SimpleForm {...props} label="Flagged">
                <ApproveData source="id" />
              </SimpleForm>
              <DateField label="Posted On" source="createdAt" showTime />
    
              <PostListActionToolbar>
                <ShowButton label="Details" color="secondary" />
                <EditButton label="Archive" color="secondary" />
              </PostListActionToolbar>
            </Datagrid>

Answer 1

Ok, I just figure out how to do this. Indeed react-admin does not have a way to render videos. So in this case you'll have to create your own component.

Step 1

Is to create the function:

const VideoField = (props) => {
  const record = useRecordContext(props);
  return <video src={`${record.video}`} controls width="320" height="240"></video>;
}

In this case, you'll have to interpolate the video record inside the video tag. I added the controls and the width and height to add more view on the video

Step 2

You can add a default label into it like this:

VideoField.defaultProps = { label: 'Video' };

This is necessary since it will label your content on the top side of the list.

Step 3

Then add your function in to a component inside the datagrid and you'll be having something like this:

Add it like this on your datagrid

 <Datagrid>
      <TextField label="Post ID" source="id" sortByOrder="ASC" />
      <VideoField source="video" />
      <TextField label="Content Type" />
    </Datagrid>