Location of code

help
21

Just re-created the issue in a separate repo to upload and show you @mrzafod and then @robfallows comes around and changes the name of the folder and solves my problem. The wave now renders fine. Why is that the case @robfallows? What makes the /compatibility folder work and the /lib or just /client doesn’t?

22

js files in client/compatibility aren’t wrapped in a closure by the Meteor build process. That means any exposed library variables remain exposed.

client/compatibility is a “go-to” place for non-Meteor-packaged libraries.

Glad I could help :smile:

1 Like
23

@robfallows excelent! That helped a lot. That will certainly solve a lot of issues for me in the future.

However, moving the script to /compatibility also created another problem. Under Template.twoStory.events({}) I can’t seem to call a wavesurfer.playPause(); to play or pause the audio playback anymore. I get a ReferenceError: wavesurfer is not defined.


Template.twoStory.rendered = function() {

    var wavesurfer = Object.create(WaveSurfer);

    var options = {
        container: this.find('#waveform'),
        waveColor: '#bfbfbf',
        progressColor: '#f9f9f9',
        height: 80,
        normalize: true,
        hideScrollbar: true,
        cursorColor: 'transparent'
    };
    wavesurfer.init(options);
    // do not forget about initial '/'
    wavesurfer.load(Meteor.absoluteUrl() + 'media/tshirt.mp3');
    wavesurfer.on('ready', function() {
        wavesurfer.play();
    });
}

Template.twoStory.events({
    // Play Pause Button Events
    'click .playPause': function(e, t) {
        $('.playPause').find('i').toggleClass('fa-pause fa-play');
        wavesurfer.playPause();
    }
})

Why can’t I make that call?

Thanks for all the help guys!

24

Your wavesurfer variable is locally scoped to the onRendered function.

I would strongly recommend binding it in the onCreated function as a template variable:

Template.twoStory.onCreated(function() {
  this.wavesurfer = Object.create(WaveSurfer);
});

Then, you’ll be able to access this in your event handler:

Template.twoStory.events({
        // Play Pause Button Events
        'click .playPause': function(e, t) {
            $('.playPause').find('i').toggleClass('fa-pause fa-play');
            t.wavesurfer.playPause();
        }
    })
1 Like
25

Awesome! Been trying to figure out how to make these variables template-scoped for another issue on another part of the project!

That solved all of my problems!

Huge thanks for the help!