wavesurfer-react: V3 about wavesurfer-react HOT 18 CLOSED

Within this task all changes should be made to make wavesurfer-react to support wavesurfer.js of version 7 and above

from wavesurfer-react.

If Region component is rendered from the start wavesurfer applies incorrect start and end properties there, i.e. instead of use passed ones it will use 0 and 0 if audio is not uploaded yet

from wavesurfer-react.

Also, only one instance of a plugin should be initiated during life-cycle of a component

from wavesurfer-react.

According to https://github.com/katspaugh/wavesurfer.js/blob/main/examples/regions.js, regions can be created right after decoding event s emiitted

from wavesurfer-react.

I also think about a way to create a component like PluginController, that will be used like:

const example = (
  <WaveSurfer {..._props}>
    <WaveForm {...formProps}>
      <PluginBridge Plugin={RegionsPlugin}>
        {regions.map(reg => <Region {...reg} />)}
      </PluginBridge>
    </WaveForm>
  </WaveSurfer>
);

Aim of plugin bridge is to control plugin life-cycle, i.e. currently plugin is registered via wavesurfer instance, but is destroyed by itself, wavesurfer just listens to 'destroy' event and removes plugin that emitted it.

from wavesurfer-react.

I also think about a way to create a component like PluginController, that will be used like:

const example = (
  <WaveSurfer {..._props}>
    <WaveForm {...formProps}>
      <PluginBridge Plugin={RegionsPlugin}>
        {regions.map(reg => <Region {...reg} />)}
      </PluginBridge>
    </WaveForm>
  </WaveSurfer>
);

Aim of plugin bridge is to control plugin life-cycle, i.e. currently plugin is registered via wavesurfer instance, but is destroyed by itself, wavesurfer just listens to 'destroy' event and removes plugin that emitted it.

This way it would be easier to controll plugins used to build UI of wavesurfer. It would be easier to control same instances, i.e. avoiding PluginInstance recreation on each render on each plugin list creation.

For example, the following code shows how to use more than one plugin at the same time with the way proposed above:

const example = (
  <WaveSurfer {..._props}>
    <WaveForm {...formProps}>
      <PluginBridge Plugin={RegionsPlugin} {...regionsPluginProps}>
        {regions.map(reg => <Region {...reg} />)}
      </PluginBridge>
      <PluginBridge Plugin={TimelinePlugin} {...timelinePluginProps} />
      <PluginBridge Plugin={MyAwesomePlugin} creator="createMyAwesome" {...timelinePluginProps} />
    </WaveForm>
    <div id="timeline" />
  </WaveSurfer>
);

from wavesurfer-react.

This way is good enough, but what if some component will depend on both Regions and Timeline plugin...it should not take them from wavesurfer instance due to the fact that wavesurfer object in useState is not updated when something is destroyed.

from wavesurfer-react.

Thus...plugins list will be still in use for a while until better way to control plugins is found

from wavesurfer-react.

Also, there could be used two timelines at the same time, thus instanceof check alone is not suitable as solution to prevent plugin instance recreation.

It seems, additional field should be used along with instanceof check to differentiate different plugins...or...such field is required if more than one instance of one plugin is created.

from wavesurfer-react.

Found out a bug in wavesurfer.js - katspaugh/wavesurfer.js#3314, will continue to develop version 3 as like as this bug is already fixed.

from wavesurfer-react.

Found out a bug in wavesurfer.js - katspaugh/wavesurfer.js#3314, will continue to develop version 3 as like as this bug is already fixed.

Task was closed as not planned however I will try to investigate it further, because it should not work this way.

from wavesurfer-react.

Made extra investigation during which I created simple vanilla JS example replicating the same wrong behavior (link to the comment below): katspaugh/wavesurfer.js#3314 (comment)

from wavesurfer-react.

I will not recreate bug issue, but provide users of the package with a temporal solution to this bug of original package

from wavesurfer-react.

Found out a bug in wavesurfer.js - katspaugh/wavesurfer.js#3314, will continue to develop version 3 as like as this bug is already fixed.

Task was closed as not planned however I will try to investigate it further, because it should not work this way.

Task was reopened

from wavesurfer-react.

Markers plugins was deleted in wavesurferjs, instead Regions with content should be used.

Due to this fact I may leave Marker only by using Region component under the hood.

from wavesurfer-react.