A plugin alongside another custom plugin

[Megidd]

The problem is explained in detail by this thread:

mediacms-io/mediacms#403 (comment)

Summarize

Let me summarize it here. There is a custom videojs plugin:

https://github.com/mediacms-io/mediacms/tree/main/frontend/packages/vjs-plugin

I need to use another plugin i.e. videojs-wavesurfer, to be able to visualize the audio:

https://github.com/collab-project/videojs-wavesurfer

Question

Is it even feasible to use the videojs-wavesurfer plugin alongside the custom plugin?

If it's feasible, I need some hints on how it can be done. Is there any helpful example? Thanks.

[Megidd]

2 ways to initialize a plugin

According to docs, there are two ways to set up or initialize a videojs plugin:

How custom plugin is initialized

Source code initializes the custom plugin by:

https://github.com/mediacms-io/mediacms/blob/fb0f3ee739dfc2951b593842951e1883f6664f46/frontend/packages/player/src/MediaPlayer.js#L431

	this.player = videojs(domPlayer, passOptions);

	/*
	 * Call plugin.
	 */

	this.player.mediaCmsVjsPlugin(
		domPlayer,
		pluginOptions,
		pluginState,
		pluginVideoResolutions,
		pluginVideoPlaybackSpeeds,
		pluginStateUpdateCallback,
		onNextButtonClick,
		onPrevButtonClick
	);

How to register videojs-wavesurfer plugin

I guess I have to register videojs-wavesurfer properly. videojs-wavesurfer documentation mentions the following approach to register the plugin. Basically, it registers itself when all the imports are done properly:

import 'video.js/dist/video-js.css';
import videojs from 'video.js';

import WaveSurfer from 'wavesurfer.js';

// register videojs-wavesurfer plugin with this import
// The videojs-wavesurfer plugin automatically registers itself after importing it:
import 'videojs-wavesurfer/dist/css/videojs.wavesurfer.css';
import Wavesurfer from 'videojs-wavesurfer/dist/videojs.wavesurfer.js';

Problem: cannot import videojs 🐞

The above approach of registering by import is not working for me. Since I cannot import videojs. It is already somehow declared by the custom plugin.

How to initialize videojs-wavesurfer plugin

Moreover, I have to initialize the videojs-wavesurfer plugin right after the initialization of the custom plugin. The videojs-wavesurfer plugin documentation mentions passing these among the videojs options in order to initialize the plugin:

    plugins: {
        wavesurfer: {
            backend: 'MediaElement',
            displayMilliseconds: true,
            debug: true,
            waveColor: '#163b5b',
            progressColor: 'black',
            cursorColor: 'black',
            hideScrollbar: true
        }
    }

I might have to do the equivalent of the above approach, in this way:

	this.player.wavesurfer(
		/* Pass wavesurfer options here */
                {
                    backend: 'MediaElement',
                    displayMilliseconds: true,
                    debug: true,
                    waveColor: '#163b5b',
                    progressColor: 'black',
                    cursorColor: 'black',
                    hideScrollbar: true
                }
	);

Implication

I have to tackle multiple problems of plugin registration and initialization 🙂

[Megidd]

This approach didn't work:

mediacms-io/mediacms#403 (comment)