OLD | NEW |
| (Empty) |
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 }); | |
OLD | NEW |