volume-control-react.jsx

/**
 * React Volume Control Component
 * A React wrapper for the VolumeControl class
 */

import React, { useRef, useEffect, useState } from 'react';

const VolumeControlReact = ({
  min = 0,
  max = 100,
  step = 1,
  defaultValue = 70,
  storageKey = 'volume-level',
  audioElement = null,
  gainNode = null,
  onVolumeChange = null,
  onMuteToggle = null,
  className = '',
  style = {}
}) => {
  const containerRef = useRef(null);
  const volumeControlRef = useRef(null);
  const [volume, setVolume] = useState(defaultValue);
  const [muted, setMuted] = useState(false);

  useEffect(() => {
    // Initialize volume control
    volumeControlRef.current = new window.VolumeControl({
      min,
      max,
      step,
      defaultValue,
      storageKey
    });

    // Connect audio elements if provided
    if (audioElement) {
      volumeControlRef.current.connectAudioElement(audioElement);
    }
    if (gainNode) {
      volumeControlRef.current.connectGainNode(gainNode);
    }

    // Add event listeners
    if (onVolumeChange) {
      volumeControlRef.current.on('onVolumeChange', (newVolume, isMuted) => {
        setVolume(newVolume);
        setMuted(isMuted);
        onVolumeChange(newVolume, isMuted);
      });
    }

    if (onMuteToggle) {
      volumeControlRef.current.on('onMuteToggle', (newVolume, isMuted) => {
        setVolume(newVolume);
        setMuted(isMuted);
        onMuteToggle(newVolume, isMuted);
      });
    }

    // Add default volume change listener to update state
    volumeControlRef.current.on('onVolumeChange', (newVolume, isMuted) => {
      setVolume(newVolume);
      setMuted(isMuted);
    });

    // Append the volume control to the container
    if (containerRef.current) {
      containerRef.current.appendChild(volumeControlRef.current.getElement());
    }

    return () => {
      // Cleanup
      if (volumeControlRef.current) {
        volumeControlRef.current.destroy();
      }
    };
  }, [min, max, step, defaultValue, storageKey]);

  // Effect to update audio elements when they change
  useEffect(() => {
    if (volumeControlRef.current && audioElement) {
      volumeControlRef.current.connectAudioElement(audioElement);
    }
  }, [audioElement]);

  useEffect(() => {
    if (volumeControlRef.current && gainNode) {
      volumeControlRef.current.connectGainNode(gainNode);
    }
  }, [gainNode]);

  return React.createElement('div', {
    ref: containerRef,
    className: `volume-control-react ${className}`,
    style: style
  });
};

// PropTypes for better development experience
VolumeControlReact.propTypes = {
  min: PropTypes.number,
  max: PropTypes.number,
  step: PropTypes.number,
  defaultValue: PropTypes.number,
  storageKey: PropTypes.string,
  audioElement: PropTypes.instanceOf(HTMLAudioElement),
  gainNode: PropTypes.object, // GainNode from Web Audio API
  onVolumeChange: PropTypes.func,
  onMuteToggle: PropTypes.func,
  className: PropTypes.string,
  style: PropTypes.object
};

export default VolumeControlReact;

// Usage example component
export const VolumeControlExample = () => {
  const [audioElement] = useState(() => {
    // Create a dummy audio element for demonstration
    const audio = new Audio();
    audio.src = 'https://example.com/audio.mp3'; // Replace with actual audio URL
    return audio;
  });

  const handleVolumeChange = (volume, muted) => {
    console.log('Volume changed:', volume, muted);
  };

  const handleMuteToggle = (volume, muted) => {
    console.log('Mute toggled:', muted);
  };

  return React.createElement(VolumeControlReact, {
    audioElement: audioElement,
    onVolumeChange: handleVolumeChange,
    onMuteToggle: handleMuteToggle,
    className: 'custom-volume-control',
    style: { margin: '20px' }
  });
};

// Hook for using volume control state
export const useVolumeControl = (initialVolume = 70) => {
  const [volume, setVolume] = useState(initialVolume);
  const [muted, setMuted] = useState(false);

  const volumeControlRef = useRef(null);

  const initialize = (element, options = {}) => {
    if (element && typeof window !== 'undefined' && window.VolumeControl) {
      volumeControlRef.current = new window.VolumeControl(options);
      
      if (element instanceof HTMLAudioElement) {
        volumeControlRef.current.connectAudioElement(element);
      }
      
      volumeControlRef.current.on('onVolumeChange', (newVolume, isMuted) => {
        setVolume(newVolume);
        setMuted(isMuted);
      });
      
      volumeControlRef.current.on('onMuteToggle', (newVolume, isMuted) => {
        setVolume(newVolume);
        setMuted(isMuted);
      });

      return volumeControlRef.current.getElement();
    }
    return null;
  };

  const setVolumeExternal = (newVolume) => {
    if (volumeControlRef.current) {
      volumeControlRef.current.setVolume(newVolume);
    }
  };

  const toggleMuteExternal = () => {
    if (volumeControlRef.current) {
      volumeControlRef.current.toggleMute();
    }
  };

  return {
    volume,
    muted,
    initialize,
    setVolume: setVolumeExternal,
    toggleMute: toggleMuteExternal,
    volumeControl: volumeControlRef.current
  };
};