En un bloque de REACT Gutenberg, cuando un usuario actualiza el atributo src de un elemento de video, ¿cómo puedo hacer que este cambio sea visible para el usuario de inmediato?

Estoy creando un bloque personalizado de Gutenberg para WordPress utilizando @wordpress/create-block. Estoy utilizando el componente React MediaUpload, que se puede consultar aquí https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload/README.md.

El bloque contiene un elemento de video HTML5 actualizable por el usuario. Mi pregunta es: ¿cómo puedo hacer para que cuando el usuario cargue el video elegido, lo vean en la vista previa de la pantalla de edición de la entrada en WordPress? Actualmente, cuando el usuario carga su video y se actualiza el atributo src, no ven el video en la vista previa a menos que publiquen la entrada y luego actualicen la página.

Estoy utilizando el componente MediaUpload importado de @wordpress/block-editor. Cuando el usuario selecciona su imagen, en realidad se crea un objeto de imagen, este objeto de imagen tiene una serie de propiedades, incluyendo “url”, para que podamos pasarlo a una función como argumento.

Esto actualiza el src usando una función simple. Paso el objeto de imagen y luego actualizo la URL utilizando imageObject.url.

Para mayor claridad, así es como se ve el elemento de video en el inspector del navegador antes de que el usuario cargue su video.

A continuación, utilizan el botón de carga en el panel lateral y esto los dirige al administrador de medios para seleccionar su archivo.

Cuando se completa este paso y regresan a la pantalla de edición de la entrada, el atributo src del elemento de video se ha actualizado, pero el DOM no se ha actualizado, por lo que el usuario no ve el cambio en el área de edición de la entrada de Gutenberg. Si publican o guardan cambios y luego actualizan la página, verán el video que agregaron, pero esto confunde al usuario. Necesito que puedan ver el cambio de inmediato sin guardar ni actualizar. ¿Hay alguna manera de lograr esto?

davy.ai

July 14, 2023 at 4:07 am

Una posible solución a este problema es utilizar la URL del objeto del archivo de vídeo cargado en lugar de la URL proporcionada por el objeto de imagen. La URL del objeto es una URL temporal que crea el navegador para el archivo y se puede utilizar para mostrar el contenido del archivo sin subirlo realmente al servidor.

Para implementar esta solución, puedes modificar la función setVideo() para crear una URL del objeto a partir del archivo cargado y establecerla como origen del elemento de vídeo. Aquí tienes un ejemplo de código:

import { MediaUpload } from '@wordpress/block-editor';

function MyVideoBlock() {
  let videoRef = useRef();

  const setVideo = (video) => {
    if (video && video.url) {
      const videoObjectUrl = URL.createObjectURL(video);
      videoRef.current.setAttribute('src', videoObjectUrl);
    } else {
      videoRef.current.removeAttribute('src');
    }
  };

  return (
    <div>
      <mediaupload onselect="{setVideo}" allowedtypes="{['video']}" render="{({" open="" })=""> (
          <button onclick="{open}">Subir Video</button>
        )}
      />
      <video ref="{videoRef}" controls=""></video>
    </mediaupload></div>
  );
}

En este código, la función setVideo() crea una URL del objeto a partir del archivo de vídeo seleccionado utilizando la función URL.createObjectURL(). Luego establece esta URL del objeto como origen del elemento de vídeo utilizando el método setAttribute().

Ten en cuenta que también tendrás que añadir el atributo controls al elemento video para mostrar los controles del vídeo, y utilizar el gancho useRef() para obtener una referencia al elemento video para poder modificarlo directamente en la función setVideo().

Con esta solución, el usuario podrá ver el vídeo cargado inmediatamente en la vista previa de la pantalla de edición de la publicación, sin tener que guardar ni actualizar la página.

Answer

davy.ai

July 14, 2023 at 4:07 am
Una posible solución a este problema es utilizar la URL del objeto del archivo de vídeo cargado en lugar de la URL proporcionada por el objeto de imagen. La URL del objeto es una URL temporal que crea el navegador para el archivo y se puede utilizar para mostrar el contenido del archivo sin subirlo realmente al servidor.

Para implementar esta solución, puedes modificar la función setVideo() para crear una URL del objeto a partir del archivo cargado y establecerla como origen del elemento de vídeo. Aquí tienes un ejemplo de código:
```
import { MediaUpload } from '@wordpress/block-editor';

function MyVideoBlock() {
  let videoRef = useRef();

  const setVideo = (video) => {
    if (video && video.url) {
      const videoObjectUrl = URL.createObjectURL(video);
      videoRef.current.setAttribute('src', videoObjectUrl);
    } else {
      videoRef.current.removeAttribute('src');
    }
  };

  return (
    <div>
      <mediaupload onselect="{setVideo}" allowedtypes="{['video']}" render="{({" open="" })=""> (
          <button onclick="{open}">Subir Video</button>
        )}
      />
      <video ref="{videoRef}" controls=""></video>
    </mediaupload></div>
  );
}
```
En este código, la función setVideo() crea una URL del objeto a partir del archivo de vídeo seleccionado utilizando la función URL.createObjectURL(). Luego establece esta URL del objeto como origen del elemento de vídeo utilizando el método setAttribute().

Ten en cuenta que también tendrás que añadir el atributo controls al elemento video para mostrar los controles del vídeo, y utilizar el gancho useRef() para obtener una referencia al elemento video para poder modificarlo directamente en la función setVideo().

Con esta solución, el usuario podrá ver el vídeo cargado inmediatamente en la vista previa de la pantalla de edición de la publicación, sin tener que guardar ni actualizar la página.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

En un bloque de REACT Gutenberg, cuando un usuario actualiza el atributo src de un elemento de video, ¿cómo puedo hacer que este cambio sea visible para el usuario de inmediato?

Answer

davy.ai