detecting when flower player has loaded?

jakob's Avatar

jakob

19 Oct, 2011 11:15 PM

I'd like to manipulate some of the output produced by flower player in flower_soundplaylist and flower_soundplayer_title and have a class for doing some minor string manipulations using mootools.

I've achieved what I want with a static test page of the output produced by flower using window.addEvent('load',function() { ... }); (no response with domready) but I have no luck on the actual page when all the libraries loaded.

My guess is the string manipulation function is happening too early. How do I execute my function only once the player UI has fully loaded? I can see that flower core has "bootComplete" and "htmlChanged" events but I'm not very familiar with mootools and have no idea how to invoke my class only once the relevant event has fired.

I'd be most grateful for a pointer (with example if possible)!

  1. Support Staff 1 Posted by Jesse von Doom on 20 Oct, 2011 08:15 AM

    Jesse von Doom's Avatar

    Hi Jakob,

    What you're looking for is built into Flower but not well documented
    or publicized. You can tell it on boot to notify you whenever specific
    modules are loaded. We've used that in the past to do exactly what
    you're looking for...here's a simplified version (with a few comments)
    using a modified version of the flower_init.js script:

    /*
    CASH Music Flower bootstrap script
    more information/downloads available at: http://cashmusic.org/tools/
    */
    var flowerUID;
    window.addEvent('domready', function(){
    flowerUID = new FlowerCore();
    flowerUID.addEvent('moduleLoad', function(modulename){
    if (modulename == 'soundplayer') {
    // the soundplayer has announced to the core that it's ready
    (function(){
    // slight delay on this one...cycles through each listed track
    // and adds a space after the 3rd track
    var licount = 1;
    $$('li').each(function(li, index){
    if (licount == 4) {
    li.setStyle('margin-top',24);
    }
    licount = licount + 1;
    });
    }).delay(250);
    }
    });
    flowerUID.bootstrap();
    });

    Hope it helps!

  2. 2 Posted by Jakob on 20 Oct, 2011 09:42 AM

    Jakob's Avatar

    Hi Jesse,

    Thank you, that was a great help. I have the playlist string
    manipulation working just fine now. May I ask why the delay is
    necessary? If I remove it entirely, it doesn't work, if I set it to
    `.delay(0)` it does!

    One further question: how would I detect the event when
    `flower_soundplayer_title` is updated?

    By way of explanation, I have shorter clips of the tracks in the player
    but want to indicate the entire track length as part of the track title
    but to style it differently so the title string is "Track name – 12:34"
    (if I include html tags in the title, they become part of the title).
    The string manipulation just splits the title string at the dash and
    wraps the track length in an em tag. That's working fine now for the
    track list but the flower_soundplayer_title DOM is updated later when
    operating the player.

    Thanks again! ~j

    > ------------------------------------------------------------------------
    >
    > Jesse von Doom
    > <mailto:[email blocked]>
    > 20. Oktober 2011 10:15
    >
    >

  3. Jesse von Doom closed this discussion on 05 Feb, 2013 09:00 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac