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. {{ :developer_center:recipe_book:extensions_and_core:display_panes:ng_nothing_playing.png?direct |}} 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 [[http://src.getnightingale.com/xref/nightingale-hacking/feathers/bluemonday/chrome/content/bindings/displayPane.css#165|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 [[http://src.getnightingale.com/xref/nightingale-hacking/feathers/bluemonday/chrome/skin/feathers.css#1095|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: <code> <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> </code> The albumart.displaypane.not_playing_message entity is [[http://src.getnightingale.com/xref/nightingale-hacking/locales/en-US/songbird/songbird.dtd#715|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 [[developer_center:recipe_book:extensions_and_core:Media_Playback|Media Playback recipe]]. Some sample code for doing this: <code> 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); </code>

developer_center/recipe_book/extensions_and_core/display_panes/nothing_playing.txt · Last modified: 2013/12/28 08:55 by geekshadow