Display active audio streams on chrome://media-internals.

chrome/browser/resources/media_internals/item_store.js

+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+////////////////////////////////////////////////////////////////////////////////
+//
+// ItemStore
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// This class stores hashes by their id field. It provides methods for rendering
+// them into html.
+function ItemStore() {
+  this.items_ = {};
+};
+
+// Gets a sorted list of ids.
+ItemStore.prototype.ids = function() {
+  var ids = [];
+  for (var i in this.items_)
+    ids.push(i);
+  return ids.sort();
+};
+
+// Adds an item to the store.
+ItemStore.prototype.addItem = function(item) {
+  this.items_[item.id] = item;
+};
+
+// Adds a hash of items to the store.
+ItemStore.prototype.addItems = function(items) {
+  for (id in items)
+    this.addItem(items[id]);
+};
+
+// Removes an item from the store.
+ItemStore.prototype.removeItem = function(id) {
+  delete this.items_[id];
+};
+
+// Produces an html rendering of items_[|id|].
+// Overridden for each type of item.
+ItemStore.prototype.printItem = null;
+
+// Produces an html rendering of the item store.
+// Overridden for each type of item.
+ItemStore.prototype.print = null;
+
+// Concatenates the html representations of the items together, sorted by ids
+// and separated by |separator|.
+ItemStore.prototype.joinItems = function(separator) {
+  var ids = this.ids();
+  var items = [];
+  for (var i = 0; i < ids.length; i++)
+    items[i] = this.printItem(ids[i]);
+
+  return items.join(separator);
+};
+
+////////////////////////////////////////////////////////////////////////////////
+//
+// AudioStreamStore
+//
+////////////////////////////////////////////////////////////////////////////////
+
+function AudioStreamStore() {
+  this.items_ = {};
+};
+
+// Inherit from ItemStore.
+AudioStreamStore.prototype = new ItemStore();

[Scott Franklin, 2011/07/02 00:57:20]

I'm tempted to ditch the inheritance and do something along the lines of:
var audioStreams = new ItemStore();
audioStreams.printItem = function(id) { ... };
audioStreams.print = function() { ... };

to get the single instance I need, but I have no idea what the official stance
is on such practice.

[scherkus (not reviewing), 2011/07/07 20:57:30]

from what I've experienced/read JS + inheritance is somewhat of a sham and not
worth pursuing (i.e., over time it ends in tears)

I think I like your suggestion here a bit better, namely because if you think
about this application there will be many ItemStores, but only one
AudioStreamStore, so do you really need to bless AudioStreamStore w/ its own
class 'n stuff?

ALSO... couldn't we have standalone generateAudioHTML() functions inside
media_internals.js that accept an ItemStore?

I don't think ItemStore really needs to both itself w/ printing "hooks"

then code would look like:

var audioStreams = new ItemStore();
// setup event callbacks

function generateAudioHTML() {
  // blah blah w/ audioStreams object
}

[Scott Franklin, 2011/07/09 00:33:22]

Yeah, I think I'll ditch the inheritance altogether. It doesn't appear to be too
spaghetti-like this way.

+
+// Prints a stream as a list item.
+AudioStreamStore.prototype.printItem = function(id) {
+  var stream = this.items_[id];
+  var out = '<li id=' + id + ' class="audio-stream-' + stream.status + '">';
+  out += 'Audio stream ' + stream.id.split('.')[1];
+  out += ' is ' + (stream.playing ? 'playing' : 'paused');
+  out += ' at ' + Math.round(stream.volume * 100) + '% volume.';
+  out += '</li>';
+  return out;
+};
+
+// Produces a ul of all audio streams.
+AudioStreamStore.prototype.print = function() {
+  var out = '<h2>Active audio streams:</h2>';
+  out += '<ul>';
+  out += this.joinItems('');
+  out += '</ul>';
+  return out;
+};