AudioPlayer

// Framework-Agnostic Core (Zero React Dependency)
import { createMediaPlayer, formatMediaTime } from '@nofinite/media';

// React Adapter
import { AudioPlayer } from '@nofinite/media/react';

import { createMediaPlayer, formatMediaTime, type MediaPlayerInstance } from '@nofinite/media';
import '@nofinite/nuicss/styles.css';

const container = document.getElementById('audio-container')!;

// 1. Initialize Framework-Agnostic Audio Player
const audioPlayer: MediaPlayerInstance = createMediaPlayer({
  src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3',
  type: 'audio',
  title: 'Episode 42: Modern Open-Source Frontend Architecture',
  artist: 'Dr. Elena Rostova & Marcus Brody',
  artwork: 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=200',
  controls: true,
  autoplay: false,
});

// 2. Mount into DOM
container.appendChild(audioPlayer.element);

// 3. Listen to player events
audioPlayer.on('timeupdate', () => {
  const { currentTime, duration } = audioPlayer.getState();
  console.log(`Progress: ${formatMediaTime(currentTime)} / ${formatMediaTime(duration)}`);
});

audioPlayer.on('play', () => console.log('Audio is playing'));
audioPlayer.on('pause', () => console.log('Audio paused'));

// 4. Imperative operations
// await audioPlayer.play();
// audioPlayer.setPlaybackRate(1.5);
// audioPlayer.setVolume(0.7);
// audioPlayer.seek(120);

// 5. Cleanup
// audioPlayer.destroy();

'use client';

import React from 'react';
import { AudioPlayer } from '@nofinite/media/react';
import '@nofinite/nuicss/styles.css';

export default function PodcastEpisode() {
  return (
    <div className="w-full max-w-md mx-auto p-4 rounded-xl border border-default bg-surface shadow-xs">
      <AudioPlayer
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
        title="Episode 42: Modern Open-Source Frontend Architecture"
        artist="Nofinite Engineering Podcast"
        artwork="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=200"
      />
    </div>
  );
}