Desired changes for usability

[Ellen Marie Dash]

This is just a general bug listing a few things I'd like for usability.

Merge in changes from ofmlabs demos

Merge in the changes for ofmlabs demos. We want something along the lines of DGStreamPlayer and DGFilePlayer, but with better names.

Also, add http://labs.official.fm/codecs/js/auroraplayer.js to the repo. Please. PLEASE.

---

Fill player instances with javascript

Start with:

<div class="player" data-src="/foo/bar.mp3"></div>

Add everything so we end up getting:

<div class="player" tabindex="0" data-src="/foo/bar.mp3">
  <div class="avatar">
    <img src="/dgplayer/resources/fallback_album_art.png">
  </div>

  <span class="title"></span>
  <span class="artist"></span>

  <div class="button"></div>

  <div class="volume">
    <img src="/dgplayer/resources/volume_high.png">
    <div class="track">
      <div class="progress"></div>
      <div class="handle"></div>
    </div>
    <img src="/dgplayer/resources/volume_low.png">
  </div>

  <div class="seek">
    <span>0:00</span>
    <div class="track">
      <div class="loaded"></div>
      <div class="progress"></div>
    </div>
    <span>-0:00</span>
  </div>

  <div class="file_button"></div>
  <span class="file_description">Choose a file on your computer</span>
</div>

And then call whatever is necessary to make that player play /foo/bar.mp3.

---

Add this to something inside dgplayer

// Chrome doesn't support changing the sample rate, and uses whatever the hardware supports.
// We cheat here.  Instead of resampling on the fly, we're currently just loading two different
// files based on common hardware sample rates.
var _sampleRate = (function() {
    var AudioContext = (window.AudioContext || window.webkitAudioContext);
    if (!AudioContext)
        return 44100;

    return new AudioContext().sampleRate;
}());

---

And here's a slightly-modified version of a function used for the ofmlabs demos:

function addDGPlayer(DGPlayer) {
    if (unsupported) return;

    DGPlayer.volume = 100;

    var player, onplay;
    var url = '/media/planets@' + _sampleRate + '.mp3';

    DGPlayer.on('play', onplay = function(){
        if (player)
            player.disconnect();

        player = new DGAuroraPlayer(Player.fromURL(url), DGPlayer);
        DGPlayer.off('play', onplay);
    });

    DGPlayer.on('file', function(file) {        
        if (file) {
            if (player)
                player.disconnect();

            player = new DGAuroraPlayer(Player.fromFile(file), DGPlayer);
            DGPlayer.off('play', onplay);
        }
    });

}

---

Some miscellaneous wrappers

DGPlayer.fillPlayer(document.getElementById('dgplayer'), [url]);

// Possibly this, too, if we can (sanely) detect the difference:
DGPlayer.fillPlayer('#player', [url]) // Mmmm, querySelector() magic. Tastes like chicken.


/* Sortof like:
 *    document.querySelectorAll('.player').foreach(function(p){ DGPlayer.fillPlayer(p);}
 * but without .foreach, because .querySelectorAll doen't return an actual Array :(
 */
DGPlayer.fillPlayers();

[Ellen Marie Dash]

After talking with @devongovett, we've settled on using http://mozilla.github.com/x-tag/ for the player.

<dgplayer filechooser autoplay loop volume="..." src="..." albumart="/fallbackart.png" title="fallback title" artist="fallback artist">

• filechooser, autoplay, loop: false unless specified.
• volume: 0.00-1.00, 0-100, 0%-100%, default 100(?)
• albumart: the fallback album art, default to the ofmlabs one we use for the demos?
• title: fallback title, default "unknown title" or similar?
• artist: fallback artist, default "unknown artist" or similar?

[Devon Govett]

I've been thinking about how best to write this in the most bullet proof way. The widget will end up being embedded on random websites with who knows what other CSS on there, so it should work the best it can in those circumstances.

1. We don't know where they will place resources. It would be best to have just the single JavaScript file to upload to the server and embed on the page rather than worrying about where to put the images and CSS files. What's the best way to do this? Using embedded (inline) styles and data URI's for the images is all I could think of. We will have to generate all the HTML elements ourself anyway, so we might as well use inline styles. The images are the main question I think.
2. Who knows what other CSS they have on the page that could override our styles and mess up the layout etc. We need to code things in a way where it is as hard as possible to override the inline styles. I think inline styles take a higher precedence than external stylesheets anyway, except for !important rules, so we should be ok here I think, but maybe not.

I think I'll write it in a kind of modular way (with different functionality in different files) and then have a build process to merge everything into the final JS file that we distribute. Let me know if you have more ideas.

[Ellen Marie Dash]

1. Inline's probably best. If we're using the custom tag thing, does the CSS apply directly to the speshul tags? It'd be hard to override that unless you're trying, so depending on how it works we may be safe. Images are tricky. I see two possibilities: data URIs, and pure HTML/CSS. There's likely a few other ways to do it. We'll need to experiment a bit, I think.
2. Yes, inline takes precedence except for !important, afaik. See what I said wrt ...x-tags, I think it is?

Modular + build process is probably best, too.