How to render videos with List in react-admin? - reactjs

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>