Wavesurfer.js: Implementing a plugin that extends an existing plugin

[marizuccara]

Hi, I would like to override some methods of an existing plugin, extending a basic one. It is possible?

[thijstriemstra]

I don't see why not. Give it a try and let us know how it goes.

[marizuccara]

I'm asking because as the first step I tried to do this without modifing the library. I simply implemented a class that extends a plugin, like this:

import CursorPlugin from "wavesurfer.js/src/plugin/cursor";
export default class CursorCustomPlugin extends CursorPlugin {
  static create(params) {
        return {
            name: 'cursor',
            deferInit: params && params.deferInit ? params.deferInit : false,
            params: params,
            staticProps: {},
            instance: CursorCustomPlugin 
        };
    }
   ......
     constructor(params, ws) {
        super(params, ws);
       ......
  }
  .......
}

adding this new plugin to wavesurfer in the classic way:

wavesurferOptions.plugins.push(CursorCustomPlugin.create(wavesurferPluginOptions.cursor));
wavesurfer.current = WaveSurfer.create(wavesurferOptions);

but this give me this error:

My suspect is because CursorPlugin is a Factory class.

[thijstriemstra]

@marizuccara I would use a different name, you used name: 'cursor' for both classes.

eg. myCursorExtension:

CursorCustomPlugin.create(wavesurferPluginOptions.myCursorExtension))

Also take a look at the tests for the plugin API: https://github.com/katspaugh/wavesurfer.js/blob/master/spec/plugin-api.spec.js

[marizuccara]

Thanks for the answer! I solved my problem, but in different way.
The problem was that my CursorCustomPlugin class extends native ES6 class (wavesurfer's CursorPlugin class) and is transpiled to ES5 with Babel. But transpiled classes cannot extend native classes, because ES6 classes are only called with new. So I modified my babel.config.js file setting the targets configuration of the @babel/preset-env to esmodules. In this way:

"presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "esmodules": true
          }
        }
      ],
      "@babel/preset-react",
 ],

And it works!
Thank you for the always fast support.

[thijstriemstra]

good to hear. Maybe you could add an example implementation in the 'plugin system' example that extends the cursor plugin for example.

[marizuccara]

You mean add only a description to how do this here:
https://wavesurfer-js.org/example/plugin-system/index.html

or also adding an another plugin "CursorCustom" to select?
I'm asking because I've extended the plugin to not modify the library code internally. But I've modified only the method updateCursorPosition, change that taken alone adds nothing if everything else remains the same.

[thijstriemstra]

adding an another plugin "CursorCustom" to select?

Yeah, another plugin (and include some words about it in that example description).