Using videojs-wavesurfer with angular 8 without webpack

[akashgaikwad91]

Description

I want to use videojs-wavesurfer in my angular project without a webpack.

Steps to reproduce

I have implemented the help of the Example and I am getting error as I have not used webpack.

Error output

ERROR in ./node_modules/videojs-wavesurfer/dist/videojs.wavesurfer.js Module not found: Error: Can't resolve 'WaveSurfer' in 'C:\Lex_UI\fusion\node_modules\videojs-wavesurfer\dist'

ERROR in ./node_modules/videojs-wavesurfer/dist/videojs.wavesurfer.js Module not found: Error: Can't resolve 'videojs' in 'C:\Lex_UI\fusion\node_modules\videojs-wavesurfer\dist' i ?wdm?: Failed to compile.

Results

Actual

If we modify videojs to video.js and WaveSurfer to WaveSurfer.js
in the videojs.wavesurfer.js file which is in the node module, it is working.

But this, not the best approach.

Please suggest me the alternative approach for doing this, or can do these changes in the actual code so that if we install this library we don't have to modify it manually.

Versions

videojs-wavesurfer:- 3.2.0

[thijstriemstra]

what imports are you using? have you tried making a videojs only test?

[akashgaikwad91]

imports

import videojs from 'video.js'; import as WaveSurfer from 'wavesurfer.js'; import as Wavesurfer from 'videojs-wavesurfer/dist/videojs.wavesurfer.js';

It is working with the videojs (without waveform)

[dineshmaths1]

same issue am facing on angular 9

[thijstriemstra]

It is working with the videojs (without waveform)

@sportsakash can you copy paste a minimal example here, one with video.js working?

[akashgaikwad91]

https://stackblitz.com/edit/angular-ivy-pqqtr5

this code is working in my local system.

[thijstriemstra]

https://stackblitz.com/edit/angular-ivy-pqqtr5

Sorry, that's not copy/pasting it here. I don't want to visit stackblitz.com, i'd like to see the code.

[akashgaikwad91]

@thijstriemstra PF the code

vjs-player.component.ts

import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from'@angular/core';
importvideojsfrom'video.js';
@Component({
selector:'app-vjs-player',
styleUrls:['./vjs-player.component.css'],
templateUrl:'./vjs-player.component.html',

// template: `<audio id={{playerID}} class="video-js vjs-default-skin vjs-wavesurfer vjs-progress-control"></audio>`,
encapsulation:ViewEncapsulation.None,
})
exportclassVjsPlayerComponentimplementsOnInit, OnDestroy {
  @ViewChild('target', { static:true }) target: ElementRef;

  @Input() options: {
fluid: boolean,
aspectRatio: string,
autoplay: boolean,
sources: {
src: string,
type: string,
    }[],
  };

playerID: string = "VideoPlayer";
privateconfig: any;
privateplayer: any;
privateplugin: any;

constructor(private_elementRef: ElementRef) {
this.player = false;

this.config = {
controls:true,
autoplay:false,
loop:false,
muted:false,
fluid:false,
width:600,
height:300,
    };
  }

ngOnInit() { }

ngAfterViewInit() {
this.player = videojs(document.getElementById(this.playerID), this.config, () => {

this.player.src({src:'https://cors-anywhere.herokuapp.com/https://www2.cs.uic.edu/~i101/SoundFiles/CantinaBand60.wav', type:'audio/mp3'});

    });

this.player.on('waveReady', event=> {
console.log('waveform is ready!');
    });

this.player.on('playbackFinish', event=> {
console.log('playback finished.');
    });

// error handling
this.player.on('error', (element, error) => {
console.warn(error);
    });

this.player.on('deviceError', () => {
console.error('device error:', this.player.deviceErrorCode);
    });
  }
ngOnDestroy() {
// destroy player
if (this.player) {
this.player.dispose();
    }
  }
}

vjs-player.component.html

<audio id={{playerID}} class="video-js vjs-default-skin"></audio>

vjs-player.component.css

@import '~video.js/dist/video-js.css';

[dmitriy-uvarov]

I faced similar issue even with webpack in my project. I believe that it happens because of the externals in the webpack config, since we have

// specify dependencies for the library that are not resolved by webpack,
    // but become dependencies of the output: they are imported from the
    // environment during runtime.
    externals: [
        {'video.js': 'videojs'},
        {'wavesurfer.js': 'WaveSurfer'}
    ],

as the result it will be

if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("videojs"), require("WaveSurfer"));
    else if(typeof define === 'function' && define.amd)
        define("VideojsWavesurfer", ["videojs", "WaveSurfer"], factory);
    else if(typeof exports === 'object')
        exports["VideojsWavesurfer"] = factory(require("videojs"), require("WaveSurfer"));
    else
        root["VideojsWavesurfer"] = factory(root["videojs"], root["WaveSurfer"]);

The solution in this case could be using an object instead of just strings (since target is umd), like this

externals : {
    'video.js': {
      commonjs: 'video.js',
      amd: 'video.js',
      root: 'videojs' // indicates global variable
    },
    'wavesurfer.js': {
      commonjs: 'wavesurfer.js',
      amd: 'wavesurfer.js',
      root: 'WaveSurfer' // indicates global variable
    }
  },

What do you think?

[thijstriemstra]

Here's the documentation for the externals property: https://webpack.js.org/configuration/externals/#object

The solution in this case could be using an object instead of just strings (since target is umd), like this

I definitely want to try out, good find!

[akashgaikwad91]

I have done the changes in the videojs.wavesurfer.js which is in node_module with the help of patch-package and postinstall. It is working in the development environment. I will be checking it in the production environment, will update the status.

Thank you All for your response

[thijstriemstra]

Can you create a pull request?

[dmitriy-uvarov]

Any updates here? Is anyone working on this?

[thijstriemstra]

@dmitriy-uvarov can you make a pull request for your externals change?

[thijstriemstra]

I definitely want to try out, good find!

I tried with the following changes:

diff --git a/build-config/fragments/common.js b/build-config/fragments/common.js
index e3dd609..a64c38a 100644
--- a/build-config/fragments/common.js
+++ b/build-config/fragments/common.js
@@ -49,11 +49,22 @@ module.exports = {
     },
     // specify dependencies for the library that are not resolved by webpack,
     // but become dependencies of the output: they are imported from the
-    // environment during runtime.
-    externals: [
-        {'video.js': 'videojs'},
-        {'wavesurfer.js': 'WaveSurfer'}
-    ],
+    // environment during runtime and never directly included in the
+    // videojs-record library.
+    externals: {
+        'video.js': {
+            commonjs: 'video.js',
+            commonjs2: 'video.js',
+            amd: 'video.js',
+            root: 'videojs' // indicates global variable
+        },
+        'wavesurfer.js': {
+            commonjs: 'wavesurfer.js',
+            commonjs2: 'wavesurfer.js',
+            amd: 'wavesurfer.js',
+            root: 'WaveSurfer' // indicates global variable
+        }
+    },
     module: {
         rules: [
             {

And it seems to work fine with the repository examples. If it also works with react, angular etc out of the box, which I'm going to test now, I am very glad this annoying problem is finally f*cking fixed!

[thijstriemstra]

With the new webpack externals config I tested react, webpack, and vue, and they all seem to work properly (so no webpack configuration needed anymore, woohoo!). Unfortunately I couldn't get the Angular example working, but I'm also not familiar with the framework so maybe someone can help out.

@dmitriy-uvarov @akashgaikwad91 can you try pull request #114 and see if that works for you?

[di2pro]

@thijstriemstra for my case it works fine, we use latest angularjs. Is there any specific setup for Angular example? @akashgaikwad91

[thijstriemstra]

for my case it works fine, we use latest angularjs. Is there any specific setup for Angular example?

@di2pro Can you share an example of latest angular example project created using angular-cli preferably? If you want to adjust the existing guide, even better, edit this file: https://github.com/collab-project/videojs-wavesurfer/blob/webpack-externals-109/docs/angular.md

[akashgaikwad91]

@thijstriemstra it works fine with the angular 10. I have edited the existing example of angular guide and created pull request #115 . review the changes.

[thijstriemstra]

thanks @akashgaikwad91!

[thijstriemstra]

I updated the Angular guide to use the angular-cli tool. This made the guide a lot shorter and easier to follow, and also easier to maintain. Thanks for the feedback all, I will release this as v3.3.0.