<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
Wow. That's a good idea for an add-on and the wide widget looks nice
in Australis. It would be cool if the soundcloud-player could be
extended to be a generic music player that supported multiple music
sites like Pandora and others. :)<br>
<br>
chris<br>
<br>
<br>
<div class="moz-cite-prefix">On 4/17/14, 10:49 AM, Mike de Boer
wrote:<br>
</div>
<blockquote
cite="mid:3BED5B0C-277A-45EF-8F01-25B217375E2C@mozilla.com"
type="cite">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div>Hi all,</div>
<div><br>
</div>
<div>So we’re almost there. Australis v1 will finally be in the
hands of the public and I couldn’t be more proud of our
achievement!</div>
<div><br>
</div>
<div>Much of the Australis work has been about figuring out how to
deal with customisation and various (new) widget types under the
hood. An example of this are our so called wide widgets; the
zoom and edit controls. Their default position is at the top of
the new menu panel, but when placed on the navbar the look like
regular toolbar buttons, but glued together. Very sexy.</div>
<div><br>
</div>
<div>I wanted to see how hard or easy it would be to embrace the
new APIs and Australis UI goodness while developing a
restartless wide widget add-on.</div>
<div><br>
</div>
<div>One of my favourite sites at the moment is <a
moz-do-not-send="true" href="http://SoundCloud.com">SoundCloud.com</a>;
I’m playing my ever growing stream all day long while coding, so
I knew exactly what to build: sound player controls! </div>
<div><br>
</div>
<div>I was in for a pleasant surprise. Not only were the APIs
straightforward to use, but the Addon-SDK APIs were also
pleasantly well-documented.</div>
<div><br>
</div>
<div>Time for a couple of screenshots of the end result:</div>
<div>
<ul>
<li><a moz-do-not-send="true" href="http://note.io/1gDTNQ0">http://note.io/1gDTNQ0</a></li>
<li><a moz-do-not-send="true" href="http://note.io/1gDTSTW">http://note.io/1gDTSTW</a></li>
<li><a moz-do-not-send="true" href="http://note.io/1hQ2Q5L">http://note.io/1hQ2Q5L</a></li>
<li><a moz-do-not-send="true" href="http://note.io/1gDTZyT">http://note.io/1gDTZyT</a></li>
<li><a moz-do-not-send="true" href="http://note.io/1hQ2U5z">http://note.io/1hQ2U5z</a></li>
</ul>
</div>
<div><br>
</div>
<div>You can find the source and XPI at <a moz-do-not-send="true"
href="https://github.com/mikedeboer/soundcloud-player">https://github.com/mikedeboer/soundcloud-player</a></div>
<div><br>
</div>
<div>Features:</div>
<div>
<ul>
<li>Looks up the first open SoundCloud tab and starts playing
the first song in it.</li>
<li>Opens a new tab when it can’t find one</li>
<li>Skip to next or previous song</li>
<li>Uses the SoundCloud in-page event hub to track player
status</li>
<li>Localizable (standard SDK feature)</li>
<li>Repo contains some tools that I built around it to make
creating future add-ons easier:</li>
<ul>
<li>CSS pre-processor, so you can write Mozilla-style
CSS(tm)</li>
<ul>
<li>%define, %ifdef…else…endif</li>
<li>variable substitution</li>
<li>and more fun stuff.</li>
</ul>
<li>Simple abstraction for writing wide-widget add-ons.</li>
</ul>
<li>No docs. Yet. :-/</li>
</ul>
<div>I’ll submit it to AMO as soon as possible.</div>
</div>
<div> </div>
<div>I hope you like it!</div>
<div><br>
</div>
<div>Cheers and have fun!</div>
<div><br>
</div>
<div>Mike.</div>
<div><br>
</div>
<div><br>
</div>
<div>Ps.: I crafted the graphics myself, so they might not be
top-notch - please don’t hate me for it ;-)</div>
<div><br>
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
firefox-dev mailing list
<a class="moz-txt-link-abbreviated" href="mailto:firefox-dev@mozilla.org">firefox-dev@mozilla.org</a>
<a class="moz-txt-link-freetext" href="https://mail.mozilla.org/listinfo/firefox-dev">https://mail.mozilla.org/listinfo/firefox-dev</a>
</pre>
</blockquote>
<br>
</body>
</html>