User Tools

Site Tools


developer_center:recipe_book:extensions_and_core:display_panes:nothing_playing

Nothing Playing

Nightingale has CSS classes for presenting informational messages to the user in a consistent and uniform manner. Currently these are used by add-ons mostly to express a 'not playing' state, since most interesting Nightingale add-ons are media related and present information based on a playing vs. 'not-playing' state. You can see example of this with the Album Art display pane.

There are two CSS classes of interest. The first one, empty, defines the background of the tab (e.g., the hash you see in the screenshot) and can be found in displayPane.css. The second one, empty-message, defines the look of the text-label sitting on top of the background and can be found in feathers.css. Both of these are defined by the Feather, thus allowing your add-on to seamlessly blend into the app if the Featherer has done their job right. :)

To use this in your XUL, it's as simple as defining something like:

<deck id="my-deck" flex="1">
    <vbox class="empty" flex="1">
        <label class="empty-message"
               value="albumart.displaypane.not_playing_message" />
    </vbox>
    <hbox>
        <!-- put your normal XUL here -->
    </hbox>
</deck>

The albumart.displaypane.not_playing_message entity is defined by Nightingale's DTD, and is the string “Nothing Playing”. Obviously, feel free to replace it with any string of your choosing - but you get free localisation if you use the Nightingale DTD's string.

You then hook up a listener to the sbIMediacoreManager service to listen and switch the .selectedIndex of my-deck appropriately based on whether a track is playing or not. For more background and information on how to add a listener to the Mediacore Manager, see our Media Playback recipe.

Some sample code for doing this:

var myDeck = document.getElementById("my-deck");
var myListener = {
    onMediacoreEvent: function(ev) {
        switch (ev.type) {
            case Ci.sbIMediacoreEvent.TRACK_CHANGE:
                myDeck.selectedIndex = 1;
                // do something neat
                break;
            case Ci.sbIMediacoreEvent.STREAM_STOP:
            case Ci.sbIMediacoreEvent.STREAM_END:
                myDeck.selectedIndex = 0;
                // do something neat
                break;
            default:
                break;
        }
    }
}
gMM.addListener(myListener);
developer_center/recipe_book/extensions_and_core/display_panes/nothing_playing.txt · Last modified: 2013/12/28 08:55 by geekshadow