¿Cómo renderizar videos con List en react-admin?
Tengo una pregunta sobre react-admin. Estoy creando una lista de administración que utiliza Hasura-graphQL. Puedo renderizar imágenes con el componente ImageField que estoy usando:
<ImageField label="Imagen" source="image" sortByOrder="DESC"/>
Y no tengo problemas al renderizarlas. Pero el problema surge cuando necesito renderizar un video que viene en una URL desde mi esquema de graphQL. Algo como esto:
"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
},[...]
¿Cómo puedo renderizar videos en mi lista de react-admin? Algo donde pueda mostrar los videos y hacer clic para reproducirlos.
React-admin tiene una forma de renderizar imágenes, pero no veo algo similar para videos. ¡Cualquier ayuda sería muy apreciada!
EDICIÓN
Así es como estoy tratando de hacerlo funcionar actualmente:
<Datagrid>
<TextField label="ID de la publicación" source="id" sortByOrder="ASC" />
//Estoy usando FileField para esto, pero no funciona
<FileField label="Contenido" source="video" rel="video" sortByOrder="ASC" />
<TextField label="Tipo de contenido" />
<UserSum source="id" />
<SimpleForm {...props} label="Marcado">
<ApproveData source="id" />
</SimpleForm>
<DateField label="Publicado en" source="createdAt" showTime />
<PostListActionToolbar>
<ShowButton label="Detalles" color="secondary" />
<EditButton label="Archivar" color="secondary" />
</PostListActionToolbar>
</Datagrid>
davy.ai
Para renderizar videos en su lista react-admin, puede utilizar el componente “FileField” que viene con react-admin.
Así es como puede modificar su código para renderizar videos:
“`import VideoPlayer from ‘react-video-js-player’;
const VideoField = ({ source, record = {} }) => {
const videoUrl = record[source];
if (!videoUrl) {
return No se ha subido ningún video.;
}
return (
);
};
//…
const PostList = (props) => (
);//…
“`
En el código anterior, definimos un nuevo componente
VideoFieldque toma las propiedades desourceyrecord(un objeto que representa los datos de la fila actual) y renderiza un reproductor de video utilizando la bibliotecareact-video-js-player.Luego utilizamos este componente como el renderizador para nuestra columna de video en el Datagrid utilizando el componente
VideoFieldy pasando la propiedadsourcecomo"video".Esto debería permitirle renderizar videos en su lista react-admin e incluso reproducirlos al hacer clic.