itx-react-multimedia

Paquete React con Media, Video, Image y MediaEventsProvider.

Instalación

npm install itx-react-multimedia react react-dom hls.js

Uso

Media

Media es el componente de alto nivel. Solo recibe media y decide internamente si renderiza Video o Image según media.type.

import { Media } from "itx-react-multimedia";
import "itx-react-multimedia/styles.css";

<Media media={{ id: "video-1", type: "Video", url: "https://example.com/video.m3u8", name: "Demo video" }} />
<Media media={{ id: "image-1", type: "Image", url: "https://example.com/image.jpg", name: "Demo image", width: 1600, height: 900, isDark: false, fileExtension: "jpg" }} />

Props

| Prop | Tipo | Uso | |---|---|---| | media | MediaField | Objeto base con type, url, name, etc. | | caption | string | Texto descriptivo para el contenido. | | loop | boolean | Reproduce el video en bucle. | | autoPlay | boolean | Arranca la reproducción automáticamente. | | muted | boolean | Empieza con audio silenciado. | | className | string | Clase CSS para el contenedor del componente. | | style | CSSProperties | Estilos inline del contenedor. | | buttons | { play_pause, time, progress_bar, fullScreen, mute } | Permite activar o desactivar controles del video. | | allowFullscreen | boolean | Habilita o bloquea pantalla completa. | | allowPlayPause | boolean | Habilita o bloquea play/pause. | | hideActionBar | boolean | Oculta la barra de acciones del video. | | poster | string | Imagen previa del video. | | alt | string | Texto alternativo para la imagen. | | imageAspectRatio | string | Fuerza una proporción para imágenes. | | imageQuality | number | Calidad global de imagen cuando la URL soporta w={}. | | imageQualityByScreen | { mobile, web?, hd?, k2?, k4? } | Calidad por breakpoint cuando la URL soporta w={}. |

Video

Video puede usarse con source o con media.

import { Video } from "itx-react-multimedia";

<Video source="https://example.com/video.m3u8" />
<Video media={{ type: "Video", url: "https://example.com/video.m3u8", name: "Demo video" }} />

Props

| Prop | Tipo | Uso | |---|---|---| | media | Media | Objeto de vídeo ya preparado. | | source | string | URL principal del vídeo. | | sourceWeb | string | Fuente alternativa para web. | | source2K | string | Fuente para pantallas 2K. | | source4K | string | Fuente para pantallas 4K. | | caption | string | Texto descriptivo del vídeo. | | loop | boolean | Reproducción en bucle. | | autoPlay | boolean | Reproducción automática. | | muted | boolean | Vídeo silenciado al inicio. | | actionAnimation | boolean | Activa animación de acciones. | | hideActionBar | boolean | Oculta la barra de controles. | | poster | string | Imagen previa. | | className | string | Clase CSS del wrapper. | | style | CSSProperties | Estilos inline del wrapper. | | buttons | { play_pause, time, progress_bar, fullScreen, mute } | Controla qué botones se muestran. | | autoHideTime | number | Tiempo para ocultar controles automáticamente. | | allowFullscreen | boolean | Permite fullscreen. | | allowPlayPause | boolean | Permite play/pause. | | aspectRatio | string | Proporción de aspecto del vídeo. | | disallowAnalytics | boolean | Desactiva eventos analíticos. | | handleStateChange | (state) => void | Callback cuando cambia el estado de reproducción. | | handleVideoReady | (val) => void | Callback cuando el vídeo está listo. | | skin | "INET" \| "ITX.COM" | Cambia la skin del reproductor. |

Image

Image puede usarse con url o con media.

import { Image } from "itx-react-multimedia";

<Image url="https://example.com/image.jpg" alt="Example image" />
<Image media={{ id: "image-1", type: "Image", url: "https://example.com/image.jpg", name: "Demo image", width: 1600, height: 900, isDark: false, fileExtension: "jpg" }} />

Props

| Prop | Tipo | Uso | |---|---|---| | url | string | URL simple de la imagen. | | media | MediaImageAdapter | Objeto de imagen enriquecido. | | optimizedUrls | OptimizedUrls | URLs por breakpoint. | | id | string | Identificador opcional. | | isSmall | boolean | Renderiza la variante móvil. | | alt | string | Texto alternativo. | | aspectRatio | string | Proporción forzada. | | className | string | Clase CSS del <img>/<picture>. | | style | CSSProperties | Estilos inline. | | forceShow | boolean | Carga sin lazy-loading. | | quality | number | Calidad global para URLs con w={}. | | qualityByScreen | { mobile, web?, hd?, k2?, k4? } | Calidad por tamaño de pantalla. |

MediaEventsProvider

Envuelve el reproductor para escuchar eventos de analítica.

Props

| Prop | Tipo | Uso | |---|---|---| | title | string | Título del contexto de analítica. | | ignoredEvents | Events | Eventos que no quieres registrar. | | children | ReactNode | Contenido a envolver. | | onEvent | (eventName, value) => void | Callback para recibir eventos. |

Exports

• Media
• Video
• Image
• MediaEventsProvider

Estilos

Importa el CSS una sola vez:

import "itx-react-multimedia/styles.css";