bbc/peaks.js

Update segment by overview

jason30704 opened this issue · 7 comments

jason30704 commented

Hello,
I set the overview's enableMarkerEditing to true based on peaks js-react-example.
image

This allows me to drag segments on the overview, but it does not update the range.
I can only update segments on zoomview.
image

Also, I will get the error by dragging segments on the overview.
image

chrisn commented

Thanks for reporting this, I'll look into it. Originally, segments could be dragged in the zoomview only, and the overview waveform was just to give a visualisation of the complete duration, but with only minimal interaction (seek).

  • 👍1
jason30704 commented

Thanks you!
If I may, I have another question. I would like to ask how to draw a square segment similar to the picture below.
image

I've seen it in other issues. You previously provided an example of drawing a square area segment in the view, but I can't seem to see it now.
image

I have tried to modify CustomSegmentMarker, but I don't know how to dynamically obtain the width between startMarker and endMarker. Or is there any example that I can refer to?
image

1.mp4
chrisn commented

You can use the segmentOptions (documentation) to control how the segment is drawn. The CustomSegmentMarker only implements the start/end markers, not the region between them.

jason30704 commented

I have tried using segmentOptions to draw square areas.
But segmentOptions seems to only change the color of the waveform?
I tried setting background-Color but it got an error.
image

chrisn commented

Try using these options:

segmentOptions: {
  overlayColor: '#ff0000',
  overlayOpacity: 0.3,
  overlayBorderColor: '#ff0000',
  overlayBorderWidth: 2,
  overlayCornerRadius: 5
}

background-color isn't a valid option - see the Configuration section in the API documentation for the available options.

  • 👍1
jason30704 commented

Thanks a lot!
I tried adding " overlay: true ", and it worked.

chrisn commented

I'd like to keep this open, because of the original issue you reported. Those errors can be avoided by not creating custom segment markers in the overview waveform, but it needs fixing properly.

  • 👍1