let silverSurfer = {}

const handlePlayPause = () => {
    silverSurfer.playPause(); 
};

const onVolumeChange = e => {
    console.log(e)
    const {target} = e;
    const newVolume = +target.value;

    if (newVolume) {
        setVolume(newVolume);
        WaveSurfer.current.setVolume(newVolume || 1);
    }
};



window.addEventListener('DOMContentLoaded', (event) => {
    console.log('page is fully loaded', WaveSurfer);


    const refElement = document.querySelector('#waveform')
    // const url = '/audio/anitra.mp4'
    // const url = document.querySelector('#player source').src
    const url = 'http://localhost:5000/audio/anitra.mp4'

    console.log('hello from main.js', refElement)
    const waveoptions = {
        // container: refElement,
        container: document.querySelector('#waveform'),
// The color can be either a simple CSS color or a Canvas gradient
        waveColor: '#ffa492',
        progressColor: 'hsla(12,100%,43%,0.5)',
        cursorColor: '#fff',
        // This parameter makes the waveform look like SoundCloud's player
        barWidth: 1,
        barHeight: 10,
        backend: 'MediaElement',
        plugins: [
            // WaveSurfer.regions.create({
            //     regionsMinLength: 2,
            //     regions: [
            //         {
            //             start: 1,
            //             end: 3,
            //             loop: false,
            //             color: 'hsla(400, 100%, 30%, 0.5)'
            //         },
            //         {
            //             start: 5,
            //             end: 7,
            //             loop: false,
            //             color: 'hsla(200, 50%, 70%, 0.4)',
            //             minLength: 1
            //         }
            //     ],
            //     dragSelection: {
            //         slop: 5
            //     }
            // }),
        ]
    };

    console.log('url', url);
    silverSurfer = WaveSurfer.create(waveoptions)
    silverSurfer.load(url)
    console.log('silverSurfer', silverSurfer);

});