Componentes libres en React para imágenes y vídeo

React player

A menudo queremos agregar vídeos a una de nuestras aplicaciones, se puede dar un montón de situaciones: que queramos poner ese vídeo en autoplay, cambiar el volumen del vídeo original, poner los controles originales de la plataforma de vídeo o unos custom. Podemos no siempre estar conformes con las settings de ese servicio o disparar algún evento cuando se reproduzca o se pause un vídeo por ejemplo, aunque en estos dos últimos temas no voy a profundizar.

Para solucionar todos estos problemas os voy a presentar esta fantástico componente de uso libre. Vamos a ver primero

Como nos dice en Github este plugin puede reproducir vídeos en local, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, y DailyMotion.

Para instalarlo desde la consola, con Node instalado escribimos:

npm install react-player # or yarn add react-player

En el componente que lo vayamos a utilizar es tan fácil como incluir el import de ReactPlayer como aparece en la segunda línea:

import React from 'react';
import ReactPlayer from 'react-player';

Para renderizar el video incluimos en el return de nuestro método render la siguiente etiqueta, este es el uso más básico, luego explicare otros atributos.

<ReactPlayer url="https://www.youtube.com/watch?v=ysz5S6PUM-U" />

A continuación las lista de propiedades y eventos, respectivamente, que podemos usar para modificar el comportamiento de nuestros vídeos

Instalamos también react player:

npm install –save react-player

Antes de presentaros el ejemplo de este componente y los siguientes os aclaro que hice la instalación de los siguientes paquetes opcionales para facilitarnos el trabajo usando Bootstrap y jQuery:

npm install –save react-router-dom bootstrap jquery popper.js

En nuestro app.js incluiremos lo siguiente:

import "./../../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import $ from "jquery";
import Popper from "popper.js";
import "./../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min";

Si incluyeramos Jquery en alguno de nuestros componentes haríamos su correspondiente import.

Sin más dilación vamos a ver el código de nuestro ejemplo y posteriormente la explicación de su funcionamiento. Explicaré primero la composición del DOM y luego de arriba abajo para que nadie se pierda dando saltos de caballo.

El resultado final:

Gallery de react photo gallery

Muchas veces queremos mostrar nuestras imágenes de manera agrupada, con un tamaño similar, como una especie de “collage” y que cuando pulsemos sobre una de ellas se muestre la imagen original, especialmente con imágenes de tamaño mediano o grande. Buscando por la red de redes encontré el ejemplo perfecto para este menester. El algoritmo del componente hace automáticamente pequeños ajustes sobre las imágenes.

Instalamos react photo gallery:

npm install –save react-photo-gallery

Lo primero de todo vamos a crear en la misma carpeta que nuestro componente un archivo js para nuestras imágenes, que en nuestro caso llamaremos “photo.js” que contendrá la colección de imágenes que queremos mostrar:

Encontré este ejemplo maravilloso en la web pero como estamos más acostumbrados a usar clases que hooks lo convertí yo mismo, muestro mi componente a continuación.

Hacemos los imports necesarios para el componente así como el de nuestro fichero con el array de fotos, vamos que es copiar, pegar y a funcionar, así de sencillo. Añadiendo atributos con valores al invocar el componente o en cada elemento individual de nuestro array de fotos podemos añadir más configuración. Os dejo el enlace la tablas que hay en github al respecto por si lo necesitarais:

http://neptunian.github.io/react-photo-gallery/api.html

El resultado final:

Carousel del paquete react-bootstrap

A veces si queremos darle todo el protagonismo a una sola imagen al mismo tiempo o queremos aprovechar un pequeño espacio para poner imágenes en rotación. Por ejemplo en la página de un equipo de fútbol o de un fotógrafo que realiza sesiones en bodas. Una buena solución a la que se quiera recurrir suele ser utilizar un Slide o Carousel (carrusel).

Después de pelearme con react-slick y con otro componente cuyo nombre siquiera recuerdo elegí usar el carrusel de Bootstrap. Si es la librería que utilizamos muchos programadores para ‘pintar’ nuestra interfaz de usuario para que irse más lejos…¿no?

Para instalar el componente ejecutamos en la consola:

npm install react-bootstrap Bootstrap --save

Vamos a ver el componente e iré haciendo algunas aclaraciones:

Cuando tengamos una gran librería y queramos usar sólo una pequeña parte es recomendable usar como en este ejemplo la importación de ese único componente poniendo /nombrecomponente como vemos en el ejemplo. Así nuestra aplicación será más liviana puesto que se descargarán menos código al navegador del cliente.

Como se puede apreciar el uso del componente es bastante sencillo: utilizamos el componente Carousel y dentro de él por cada “diapositiva” utilizamos Carousel.Item.

Podemos meter en cada Item tanto una imagen como un texto, depende de lo necesitemos y además un Carousel.Caption donde podemos ubicar nuestra leyenda/pie de foto.

Post Scriptum: Los controles de siguiente imagen o anterior imagen funcionaban pero no se mostraba el icono con lo cúal he tenido que introducir un fix: He creado un css y lo he importado en el componente con el siguiente código:

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

El resultado final: