1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. 2 // Use of this source code is governed by a BSD-style license that can be 3 // found in the LICENSE file. 4 5 cr.define('media', function() { 6 'use strict'; 7 8 /** 9 * This class inherits from <li> and is designed to store and display 10 * information about an open media player. 11 */ 12 var MediaPlayer = cr.ui.define('li'); 13 14 MediaPlayer.prototype = { 15 __proto__: HTMLLIElement.prototype, 16 renderer: null, 17 id: null, 18 19 /** 20 * Decorate this <li> as a MediaPlayer. 21 */ 22 decorate: function() { 23 this.properties = {}; 24 25 this.url_ = document.createElement('span'); 26 this.url_.textContent = 'URL Unknown'; 27 28 this.summary_ = document.createElement('summary'); 29 this.summary_.appendChild(this.url_); 30 31 var bufferedDiv = document.createElement('div'); 32 bufferedDiv.className = 'buffered'; 33 this.summary_.appendChild(bufferedDiv); 34 35 // Create our canvii. 36 function createCanvas(label) { 37 var canvas = document.createElement('canvas'); 38 canvas.width = media.BAR_WIDTH; 39 canvas.height = media.BAR_HEIGHT; 40 return canvas; 41 } 42 this.bufferedCanvas_ = createCanvas(); 43 this.cacheReadsCanvas_ = createCanvas(); 44 this.cacheWritesCanvas_ = createCanvas(); 45 46 // Create our per-canvas entry divs that are initially hidden. 47 function addEntry(label, canvas) { 48 var labelDiv = document.createElement('div'); 49 labelDiv.textContent = label; 50 var canvasDiv = document.createElement('div'); 51 canvasDiv.appendChild(canvas); 52 var entryDiv = document.createElement('div'); 53 entryDiv.appendChild(labelDiv); 54 entryDiv.appendChild(canvasDiv); 55 entryDiv.hidden = true; 56 bufferedDiv.appendChild(entryDiv); 57 return entryDiv; 58 } 59 this.bufferedEntry_ = addEntry('Buffered', this.bufferedCanvas_); 60 this.cacheReadsEntry_ = addEntry('Cache Reads', this.cacheReadsCanvas_); 61 this.cacheWritesEntry_ = addEntry( 62 'Cache Writes', this.cacheWritesCanvas_); 63 64 this.details_ = document.createElement('details'); 65 this.details_.appendChild(this.summary_); 66 67 this.propertyTable_ = document.createElement('table'); 68 this.events_ = new media.EventList; 69 this.metrics_ = new media.Metrics; 70 71 var properties = media.createDetailsLi(); 72 properties.summary.textContent = 'Properties:'; 73 properties.details.appendChild(this.propertyTable_); 74 75 var ul = document.createElement('ul'); 76 ul.appendChild(properties); 77 ul.appendChild(this.metrics_); 78 ul.appendChild(this.events_); 79 this.details_.appendChild(ul); 80 81 this.appendChild(this.details_); 82 $('media-players').appendChild(this); 83 }, 84 85 /** 86 * Record an event and update statistics etc. 87 * @param {Object} event The event that occurred. 88 */ 89 addEvent: function(event) { 90 for (var key in event.params) { 91 this.properties[key] = event.params[key]; 92 } 93 94 if (event.type == 'LOAD' && event.params['url']) { 95 this.url_.textContent = event.params['url']; 96 } 97 98 if (event.type == 'BUFFERED_EXTENTS_CHANGED') { 99 return; 100 } 101 this.events_.addEvent(event); 102 this.metrics_.addEvent(event); 103 }, 104 105 /** 106 * Update the summary line and properties table and redraw the canvas. 107 * @return {HTMLElement} A <li> representing this MediaPlayer. 108 */ 109 redraw: function() { 110 media.appendDictionaryToTable(this.properties, this.propertyTable_); 111 112 this.setAttribute('status', this.properties.state); 113 114 // Don't bother drawing anything if we don't know the total size. 115 var size = this.properties.total_bytes; 116 if (!size) { 117 return; 118 } 119 120 // Draw the state of BufferedResourceLoader. 121 this.bufferedEntry_.hidden = false; 122 var canvas = this.bufferedCanvas_; 123 var context = canvas.getContext('2d'); 124 context.fillStyle = '#aaa'; 125 context.fillRect(0, 0, canvas.width, canvas.height); 126 127 var left = this.properties.buffer_start / size * canvas.width; 128 var middle = this.properties.buffer_current / size * canvas.width; 129 var right = this.properties.buffer_end / size * canvas.width; 130 context.fillStyle = '#a0a'; 131 context.fillRect(left, 0, middle - left, canvas.height); 132 context.fillStyle = '#aa0'; 133 context.fillRect(middle, 0, right - middle, canvas.height); 134 135 // Only show cached file information if we have something. 136 var cacheEntry = media.cacheEntriesByKey[this.properties.url]; 137 if (!cacheEntry) { 138 return; 139 } 140 141 // Draw cache reads. 142 this.cacheReadsEntry_.hidden = false; 143 cacheEntry.drawCacheReadsToCanvas(this.cacheReadsCanvas_); 144 145 // Draw cache writes. 146 this.cacheWritesEntry_.hidden = false; 147 cacheEntry.drawCacheWritesToCanvas(this.cacheWritesCanvas_); 148 }, 149 }; 150 151 return { 152 MediaPlayer: MediaPlayer 153 }; 154 }); 155