Display active media players on chrome://media-internals.

chrome/browser/resources/media_internals/media_player.js

Index: chrome/browser/resources/media_internals/media_player.js
diff --git a/chrome/browser/resources/media_internals/media_player.js b/chrome/browser/resources/media_internals/media_player.js
new file mode 100644
index 0000000000000000000000000000000000000000..3444bc8ac24d0891810446f2aab74c3d2349bdd2
--- /dev/null
+++ b/chrome/browser/resources/media_internals/media_player.js
@@ -0,0 +1,114 @@
+// 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.
+
+cr.define('media', function() {
+
+  /**
+   * This class stores information about an open media player.
+   */
+  function MediaPlayer(source, renderer) {
+    this.properties = {};
+    this.renderer = renderer;
+    this.source = source;
+
+    this.events_ = new media.EventList;
+    this.li_ = media.createDetailsLi();
+    this.metrics_ = new media.Metrics;
+    this.propertyTable_ = document.createElement('table');
+
+    this.li_.id = source;
+    this.li_.details.open = true;
+    var properties = media.createDetailsLi();
+    properties.summary.textContent = 'Properties:';
+    properties.details.appendChild(this.propertyTable_);
+
+    var ul = document.createElement('ul');
+    ul.appendChild(properties);
+    ul.appendChild(this.metrics_.li);
+    ul.appendChild(this.events_.li);
+    this.li_.details.appendChild(ul);
+  };
+
+  MediaPlayer.prototype = {
+    /**
+     * Record an event and update statistics etc.
+     * @param {Object} event The event that occurred.
+     */
+    addEvent: function(event) {
+      for (key in event.params)

[arv (Not doing code reviews), 2011/08/16 19:29:03]

missing var. Use strict mode?

[arv (Not doing code reviews), 2011/08/16 19:29:03]

Missing {

[Scott Franklin, 2011/08/16 23:33:52]

Done.

[Scott Franklin, 2011/08/16 23:33:52]

Didn't realize those were necessary one single-line loops. Done.

+        this.properties[key] = event.params[key];
+
+      if (event.type == 'BUFFERED_EXTENTS_CHANGED')
+        return;
+      this.events_.addEvent(event);
+      this.metrics_.addEvent(event);
+    },
+
+    /**
+     * Render this MediaPlayer as a <li>.

[arv (Not doing code reviews), 2011/08/16 19:29:03]

Why don't you just make MediaPlayer a sub class of HTMLLIElement then?

[Scott Franklin, 2011/08/16 23:33:52]

Because I didn't realize such a thing was possible :)
Done.

+     * Updates this summary line and redraws the canvas.
+     * @return {HTMLElement} A <li> representing this MediaPlayer.
+     */
+    toListItem: function() {
+      media.printDictionaryToTable(this.properties, this.propertyTable_);
+
+      this.li_.setAttribute('status', this.properties.state);
+      this.li_.summary.textContent = '';
+      this.li_.summary.appendChild(document.createTextNode(
+            this.source + ' (' + media.clipURL(this.properties.url) + '):'));
+      this.li_.summary.appendChild(document.createElement('br'));
+
+      // Draw the state of BufferedResourceLoader.
+      var canvas = document.createElement('canvas');
+      canvas.width = media.BAR_WIDTH;
+      canvas.height = 3 * media.BAR_HEIGHT + 2;
+      canvas.className = 'buffer-canvas';
+      this.li_.summary.appendChild(canvas);
+
+      var context = canvas.getContext('2d');
+      context.textAlign = 'center';
+      context.textBaseline = 'middle';
+      context.fillStyle = '#aaa';
+      context.fillRect(0, 0, canvas.width, canvas.height);
+
+      var size = this.properties.total_bytes;
+      if (!size) {
+        context.fillStyle = '#fff';
+        context.fillText('Unknown file size.', canvas.width / 2,
+            canvas.height / 2);
+        return this.li_;
+      }
+
+      var left = this.properties.buffer_start / size * canvas.width;
+      var middle = this.properties.buffer_current / size * canvas.width;
+      var right = this.properties.buffer_end / size * canvas.width;
+      context.fillStyle = '#a0a';
+      context.fillRect(left, 0, middle - left, media.BAR_HEIGHT);
+      context.fillStyle = '#aa0';
+      context.fillRect(middle, 0, right - middle, media.BAR_HEIGHT);
+
+      media.drawLine(context, media.BAR_HEIGHT + 0.5);
+
+      context.fillStyle = '#fff';
+      context.fillText('Buffered by player.', canvas.width / 2,
+          media.BAR_HEIGHT / 2);
+
+      if (!media.cacheEntriesByKey[this.properties.url]) {
+        context.fillText('No cache entry for this file.', canvas.width / 2,
+            2 * canvas.height / 3);
+      } else {
+        var cached = media.cacheEntriesByKey[this.properties.url].canvas;
+        var data = cached.getContext('2d').getImageData(0, 0, cached.width,
+            cached.height);
+        context.putImageData(data, 0, media.BAR_HEIGHT + 1);
+      }
+
+      return this.li_;
+    },
+  };
+
+  return {
+    MediaPlayer: MediaPlayer,
+  };
+});