Armonia Player

Un reproductor de YouTube elegante y potente para React con controles personalizados, soporte para streams en vivo, y una API simple pero completa.

Instalación

npm install armonia-player

O con yarn:

yarn add armonia-player

O con pnpm:

pnpm add armonia-player

Uso Básico

import React from 'react'
import { ArmoniaPlayer } from 'armonia-player'

function App() {
  return (
    <ArmoniaPlayer src='https://www.youtube.com/watch?v=LXb3EKWsInQ' />
  )
}

Características

• 🎨 Interfaz elegante - Controles modernos y minimalistas
• 🎮 Controles completos - Play/pause, volumen, velocidad, loop, fullscreen
• 📺 Streams en vivo - Detección automática y soporte para transmisiones en vivo
• ⌨️ Atajos de teclado - Control completo desde el teclado
• 📱 Responsive - Se adapta a cualquier tamaño de pantalla
• 🎯 TypeScript - Tipado completo incluido
• 🚀 Ligero - Sin dependencias pesadas

Props

src (requerido)

URL de YouTube o videoId directo. Acepta múltiples formatos:

• https://www.youtube.com/watch?v=VIDEO_ID
• https://youtu.be/VIDEO_ID
• https://www.youtube.com/embed/VIDEO_ID
• VIDEO_ID (directamente)

<ArmoniaPlayer src="https://www.youtube.com/watch?v=LXb3EKWsInQ" />
<ArmoniaPlayer src="LXb3EKWsInQ" />

title (opcional)

Título del video (actualmente no se muestra en la UI, pero está disponible para uso futuro).

<ArmoniaPlayer 
  src="https://www.youtube.com/watch?v=LXb3EKWsInQ"
  title="Mi video favorito"
/>

onProgress (opcional)

Callback que se ejecuta durante la reproducción con el tiempo actual y la duración total.

<ArmoniaPlayer 
  src="https://www.youtube.com/watch?v=LXb3EKWsInQ"
  onProgress={(currentTime, duration) => {
    console.log(`Progreso: ${currentTime}/${duration}`)
  }}
/>

onEnd (opcional)

Callback que se ejecuta cuando el video termina.

<ArmoniaPlayer 
  src="https://www.youtube.com/watch?v=LXb3EKWsInQ"
  onEnd={() => {
    console.log('Video terminado')
  }}
/>

Ejemplos Avanzados

Con callbacks

import React, { useState } from 'react'
import { ArmoniaPlayer } from 'armonia-player'

function VideoPlayer() {
  const [progress, setProgress] = useState({ current: 0, total: 0 })
  const [hasEnded, setHasEnded] = useState(false)

  return (
    <div>
      <ArmoniaPlayer 
        src="https://www.youtube.com/watch?v=LXb3EKWsInQ"
        onProgress={(current, total) => {
          setProgress({ current, total })
        }}
        onEnd={() => {
          setHasEnded(true)
          alert('Video terminado!')
        }}
      />
      
      {!hasEnded && (
        <p>
          Progreso: {Math.round(progress.current)}s / {Math.round(progress.total)}s
        </p>
      )}
    </div>
  )
}

Múltiples videos

import React, { useState } from 'react'
import { ArmoniaPlayer } from 'armonia-player'

const videos = [
  'https://www.youtube.com/watch?v=LXb3EKWsInQ',
  'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
  'https://www.youtube.com/watch?v=jNQXAC9IVRw',
]

function Playlist() {
  const [currentVideo, setCurrentVideo] = useState(0)

  return (
    <div>
      <ArmoniaPlayer 
        src={videos[currentVideo]}
        onEnd={() => {
          if (currentVideo < videos.length - 1) {
            setCurrentVideo(currentVideo + 1)
          }
        }}
      />
      
      <div>
        {videos.map((_, index) => (
          <button 
            key={index}
            onClick={() => setCurrentVideo(index)}
            disabled={index === currentVideo}
          >
            Video {index + 1}
          </button>
        ))}
      </div>
    </div>
  )
}

Atajos de Teclado

• Espacio - Play/Pause
• M - Mute/Unmute
• F - Fullscreen
• L - Toggle Loop
• ← - Retroceder 5 segundos
• → - Avanzar 5 segundos

Requisitos

• React 16.8.0 o superior
• React DOM 16.8.0 o superior
• lucide-react ^0.263.0

Estilos

El componente utiliza clases de Tailwind CSS. Asegúrate de tener Tailwind CSS configurado en tu proyecto, o los estilos no se aplicarán correctamente.

Si no usas Tailwind CSS, puedes importar los estilos necesarios o sobrescribir las clases según tus necesidades.

Licencia

MIT