Need some events on overlay segments

[vivekd95]

Hi everyone,

I am trying to implement peak.js in my project and use overlay segments. I was trying to use mouse events on my segments. I have mouseenter and mouseleave events. Is there any way to implement to add and use mousedown and mouseup events on segments.

[chrisn]

Adding these sounds OK to me.

[chrisn]

segments.mousedown and segments.mouseup events are now available, please update to v3.0.0-beta.6.

[vivekd95]

Thanks @chrisn for making these changes. Let me try implementing it and get back to you in case of any query.

[vivekd95]

Hey @chrisn

I changed my peaks.js to v3.0.0-beta.6. I have also checked the overlay-segments.html in demo repository. So, earlier I was using the segments.click event which is not working for me now. Can you check and get back to me?

Options:

const options = {
            zoomview: {
                container: document.getElementById('s-container'),
                waveformColor: {
                    linearGradientStart: 20,
                    linearGradientEnd: 60,
                    linearGradientColorStops: ['hsl(180, 78%, 46%)', 'hsl(180, 78%, 16%)']
                },
            },
            overview: {
                container: document.getElementById('overview-container')
            },
            mediaElement: document.querySelector('video'),
            dataUri: {
                arraybuffer: 'URL of dat file'
            },
            playheadColor: 'rgb(178,34,34)',
            subtitles: this.props.subtitles,
            props: this.props,
            segmentOptions: {
                markers: false,
                overlay: true,
                waveformColor: '#ff851b',
                overlayColor: '#C6E1FF',
                overlayOpacity: 0.3,
                overlayBorderColor: '#067BFF',
                overlayBorderWidth: 5,
                overlayCornerRadius: 9,
                overlayOffset: 40,
                overlayLabelAlign: 'center',
                overlayLabelVerticalAlign: 'center',
                overlayLabelPadding: 8,
                overlayLabelColor: '#000000',
                overlayFontFamily: 'sans-serif',
                overlayFontSize: 14,
                overlayFontStyle: 'normal'
            },
            createSegmentLabel: function () { return null; },
        };

Peaks function:

            Peaks.init(options,(err,peaks)=>{
              // Remaining code
                peaks.on('segments.click', function (event) {
                    console.log(event)
                });
            })

I am not able to log the value of event here!! Is it because of I am also using mousedown event along with it?

[chrisn]

Your code seems fine to me. The segments.mousedown and segments.click events are both emitted: