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

chrome/browser/resources/media_internals/media_internals.js

Index: chrome/browser/resources/media_internals/media_internals.js
diff --git a/chrome/browser/resources/media_internals/media_internals.js b/chrome/browser/resources/media_internals/media_internals.js
new file mode 100644
index 0000000000000000000000000000000000000000..c74b0a78ea7441a409ed66957593acb37aca5ec1
--- /dev/null
+++ b/chrome/browser/resources/media_internals/media_internals.js
@@ -0,0 +1,60 @@
+// 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.
+

[Evan Stade, 2011/07/11 21:31:52]

namespace this file as well

[Scott Franklin, 2011/07/12 22:35:13]

Done.
Should the on* functions called directly by the WebUI go in here as well? If so,
I'll prefix the 'media.' to them in the C++.

[Evan Stade, 2011/07/15 22:31:05]

yes, that would be choice

[Scott Franklin, 2011/07/15 23:18:15]

Done.

+var audioStreams = new ItemStore;
+var audioStreamDiv;
+
+// Render the set of audio streams to HTML and write it to the page.
+printAudioHTML = function() {
+
+  // Render a single stream as a <li>.
+  printStream = function(stream) {
+    var out = '<li id=' + stream.id;

[Evan Stade, 2011/07/11 21:31:52]

easier to read if you do this all via js

out = document.createElement('li');
out.id = stream.id;
out.className = ...

etc.

[Scott Franklin, 2011/07/12 22:35:13]

Unfortunately this required more fiddling with the DOM later on (unless I want
to serialize each one to html and back). But you're right, it is more readable.

[Evan Stade, 2011/07/15 22:31:05]

sorry, what do you mean?

[Scott Franklin, 2011/07/15 23:18:15]

Just that the following lines also had to turn into DOM manipulation (add/remove
children) instead of strings; which is fine, just an interesting side effect.

+    out += ' class="audio-stream-' + stream.status + '">';

[Evan Stade, 2011/07/11 21:31:52]

I think it makes more sense to set the status as an attribute, you can still
apply CSS with

.audio-stream[status='error']

[Scott Franklin, 2011/07/12 22:35:13]

Good idea. Done.

[scherkus (not reviewing), 2011/07/13 04:17:48]

Cool!

+    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;
+  };
+
+  var out = '<h2>Active audio streams:</h2>';
+  out += '<ul>';
+  out += audioStreams.map(printStream).join('');
+  out += '</ul>';
+
+  audioStreamDiv.innerHTML = out;
+};
+
+// Receiving data for an audio stream.
+// Add it to audioStreams and refresh.
+onAudioUpdate = function(stream) {
+  audioStreams.addItem(stream);
+  printAudioHTML();
+};
+
+// Receiving all data.
+// Add it all to the appropriate stores and refresh.
+onReceiveEverything = function(stuff) {
+  audioStreams.addItems(stuff.audio_streams);
+  printAudioHTML();
+};
+
+// Removing an item from the appropriate store.
+onItemDeleted = function(item) {
+  var type = item.split(".")[0];
+  switch (type) {
+  case "audio_streams":
+    audioStreams.removeItem(item);
+    printAudioHTML();
+    break;
+  }
+};
+
+window.onload = function() {
+  audioStreamDiv = document.getElementById('audio-streams');
+
+  // Get information about all currently active media.
+  chrome.send('getEverything');
+};