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'
    // const url = 'https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/20210622/libre-a-vous-20210622.ogg'

    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: [
            // rectangles de zones
            WaveSurfer.regions.create({
                regionsMinLength: 2,
                regions: [
                    {
                        start: 50,
                        end: 70,
                        loop: false,
                        color: 'hsla(400, 100%, 30%, 0.25)'
                    },
                    {
                        start: 150,
                        end: 200,
                        loop: false,
                        color: 'hsla(200, 50%, 70%, 0.25)',
                        minLength: 1
                    }
                ],
                dragSelection: {
                    slop: 5
                }
            }),
            // marque pages avec texte
            WaveSurfer.markers.create({
                markers: [
                    {
                        time: 0,
                        label: "intro",
                        color: '#ff990a'
                    },
                    {
                        time: 10,
                        label: "chronique 1",
                        color: '#ff990a'
                    },
                    {
                        time: 50,
                        label: "une pause musicale",
                        color: '#00ffcc',
                        position: 'top'
                    },
                    {
                        time: 70,
                        label: "le sujet principal",
                        color: '#00ffcc',
                        position: 'top'
                    },
                    {
                        time: 200,
                        label: "la fin",
                        color: '#00ffcc',
                        position: 'top'
                    },
                ]
            })
        ]
    };

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

});