OLD | NEW |
---|---|
1 // Copyright 2013 The Chromium Authors. All rights reserved. | 1 // Copyright 2013 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 var ClientRenderer = (function() { | 5 var ClientRenderer = (function() { |
6 var ClientRenderer = function() { | 6 var ClientRenderer = function() { |
7 this.playerListElement = document.getElementById('player-list'); | 7 this.playerListElement = document.getElementById('player-list'); |
8 this.audioPropertiesTable = | 8 this.audioPropertiesTable = |
9 document.getElementById('audio-property-table').querySelector('tbody'); | 9 document.getElementById('audio-property-table').querySelector('tbody'); |
10 this.playerPropertiesTable = | 10 this.playerPropertiesTable = |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
44 }; | 44 }; |
45 | 45 |
46 /** | 46 /** |
47 * CSS classes added / removed in JS to trigger styling changes. | 47 * CSS classes added / removed in JS to trigger styling changes. |
48 * @private @enum {string} | 48 * @private @enum {string} |
49 */ | 49 */ |
50 ClientRenderer.Css_ = { | 50 ClientRenderer.Css_ = { |
51 NO_PLAYERS_SELECTED: 'no-players-selected', | 51 NO_PLAYERS_SELECTED: 'no-players-selected', |
52 NO_COMPONENTS_SELECTED: 'no-components-selected', | 52 NO_COMPONENTS_SELECTED: 'no-components-selected', |
53 SELECTABLE_BUTTON: 'selectable-button', | 53 SELECTABLE_BUTTON: 'selectable-button', |
54 DESTRUCTED_PLAYER: 'destructed-player' | 54 LIVING_PLAYER: 'living-player', |
55 DESTRUCTED_PLAYER: 'destructed-player', | |
55 }; | 56 }; |
56 | 57 |
57 function removeChildren(element) { | 58 function removeChildren(element) { |
58 while (element.hasChildNodes()) { | 59 while (element.hasChildNodes()) { |
59 element.removeChild(element.lastChild); | 60 element.removeChild(element.lastChild); |
60 } | 61 } |
61 }; | 62 }; |
62 | 63 |
63 function createSelectableButton(id, groupName, text, select_cb, | 64 function createSelectableButton(id, groupName, buttonLabel, select_cb, |
64 isDestructed) { | 65 isDestructed) { |
65 // For CSS styling. | 66 // For CSS styling. |
66 var radioButton = document.createElement('input'); | 67 var radioButton = document.createElement('input'); |
67 radioButton.classList.add(ClientRenderer.Css_.SELECTABLE_BUTTON); | 68 radioButton.classList.add(ClientRenderer.Css_.SELECTABLE_BUTTON); |
68 radioButton.type = 'radio'; | 69 radioButton.type = 'radio'; |
69 radioButton.id = id; | 70 radioButton.id = id; |
70 radioButton.name = groupName; | 71 radioButton.name = groupName; |
71 | 72 |
72 var buttonLabel = document.createElement('label'); | |
73 buttonLabel.classList.add(ClientRenderer.Css_.SELECTABLE_BUTTON); | 73 buttonLabel.classList.add(ClientRenderer.Css_.SELECTABLE_BUTTON); |
74 if (isDestructed) | 74 if (isDestructed === true) |
DaleCurtis
2017/07/01 00:08:04
is === true/false really necessary?
sandersd (OOO until July 31)
2017/07/01 00:52:03
It was, to distinguish undefined, but I've removed
| |
75 buttonLabel.classList.add(ClientRenderer.Css_.DESTRUCTED_PLAYER); | 75 buttonLabel.classList.add(ClientRenderer.Css_.DESTRUCTED_PLAYER); |
76 else if (isDestructed === false) | |
77 buttonLabel.classList.add(ClientRenderer.Css_.LIVING_PLAYER); | |
76 buttonLabel.setAttribute('for', radioButton.id); | 78 buttonLabel.setAttribute('for', radioButton.id); |
77 buttonLabel.appendChild(document.createTextNode(text)); | |
78 | 79 |
79 var fragment = document.createDocumentFragment(); | 80 var fragment = document.createDocumentFragment(); |
80 fragment.appendChild(radioButton); | 81 fragment.appendChild(radioButton); |
81 fragment.appendChild(buttonLabel); | 82 fragment.appendChild(buttonLabel); |
82 | 83 |
83 // Listen to 'change' rather than 'click' to keep styling in sync with | 84 // Listen to 'change' rather than 'click' to keep styling in sync with |
84 // button behavior. | 85 // button behavior. |
85 radioButton.addEventListener('change', function() { | 86 radioButton.addEventListener('change', function() { |
86 select_cb(); | 87 select_cb(); |
87 }); | 88 }); |
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
170 * @param players The entire map of id -> player. | 171 * @param players The entire map of id -> player. |
171 * @param player The player that had its property changed. | 172 * @param player The player that had its property changed. |
172 * @param key The name of the property that was changed. | 173 * @param key The name of the property that was changed. |
173 * @param value The new value of the property. | 174 * @param value The new value of the property. |
174 */ | 175 */ |
175 playerUpdated: function(players, player, key, value) { | 176 playerUpdated: function(players, player, key, value) { |
176 if (player === this.selectedPlayer) { | 177 if (player === this.selectedPlayer) { |
177 this.drawProperties_(player.properties, this.playerPropertiesTable); | 178 this.drawProperties_(player.properties, this.playerPropertiesTable); |
178 this.drawLog_(); | 179 this.drawLog_(); |
179 } | 180 } |
180 if (key === 'name' || key === 'url') { | 181 if (key === 'url' || key === 'frame.url' || key === 'frame.title' || |
DaleCurtis
2017/07/01 00:08:04
Maybe just create an array of these and use REQUIR
sandersd (OOO until July 31)
2017/07/01 00:52:03
Done.
| |
182 key === 'audio_codec_name' || key === 'video_codec_name' || | |
183 key === 'width' || key === 'height' || key === 'event') { | |
181 this.redrawPlayerList_(players); | 184 this.redrawPlayerList_(players); |
182 } | 185 } |
183 if (key === 'event' && value === 'WEBMEDIAPLAYER_DESTROYED') { | |
184 player.destructed = true; | |
185 document.querySelector( | |
186 "label.selectable-button[for='" + player.id + "']").classList.add( | |
187 ClientRenderer.Css_.DESTRUCTED_PLAYER); | |
188 } | |
189 }, | 186 }, |
190 | 187 |
191 createVideoCaptureFormatTable: function(formats) { | 188 createVideoCaptureFormatTable: function(formats) { |
192 if (!formats || formats.length == 0) | 189 if (!formats || formats.length == 0) |
193 return document.createTextNode('No formats'); | 190 return document.createTextNode('No formats'); |
194 | 191 |
195 var table = document.createElement('table'); | 192 var table = document.createElement('table'); |
196 var thead = document.createElement('thead'); | 193 var thead = document.createElement('thead'); |
197 var theadRow = document.createElement('tr'); | 194 var theadRow = document.createElement('tr'); |
198 for (var key in formats[0]) { | 195 for (var key in formats[0]) { |
(...skipping 101 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
300 componentType); | 297 componentType); |
301 return; | 298 return; |
302 } | 299 } |
303 | 300 |
304 var fragment = document.createDocumentFragment(); | 301 var fragment = document.createDocumentFragment(); |
305 for (var id in components) { | 302 for (var id in components) { |
306 var li = document.createElement('li'); | 303 var li = document.createElement('li'); |
307 var button_cb = this.selectAudioComponent_.bind( | 304 var button_cb = this.selectAudioComponent_.bind( |
308 this, componentType, id, components[id]); | 305 this, componentType, id, components[id]); |
309 var friendlyName = this.getAudioComponentName_(componentType, id); | 306 var friendlyName = this.getAudioComponentName_(componentType, id); |
307 var label = document.createElement('label'); | |
308 label.appendChild(document.createTextNode(friendlyName)); | |
310 li.appendChild(createSelectableButton( | 309 li.appendChild(createSelectableButton( |
311 id, buttonGroupName, friendlyName, button_cb)); | 310 id, buttonGroupName, label, button_cb)); |
312 fragment.appendChild(li); | 311 fragment.appendChild(li); |
313 } | 312 } |
314 removeChildren(listElement); | 313 removeChildren(listElement); |
315 listElement.appendChild(fragment); | 314 listElement.appendChild(fragment); |
316 | 315 |
317 if (this.selectedAudioComponentType && | 316 if (this.selectedAudioComponentType && |
318 this.selectedAudioComponentType == componentType && | 317 this.selectedAudioComponentType == componentType && |
319 this.selectedAudioComponentId in components) { | 318 this.selectedAudioComponentId in components) { |
320 // Re-select the selected component since the button was just recreated. | 319 // Re-select the selected component since the button was just recreated. |
321 selectSelectableButton(this.selectedAudioComponentId); | 320 selectSelectableButton(this.selectedAudioComponentId); |
(...skipping 19 matching lines...) Expand all Loading... | |
341 | 340 |
342 // Group name imposes rule that only one component can be selected | 341 // Group name imposes rule that only one component can be selected |
343 // (and have its properties displayed) at a time. | 342 // (and have its properties displayed) at a time. |
344 var buttonGroupName = 'player-buttons'; | 343 var buttonGroupName = 'player-buttons'; |
345 | 344 |
346 var hasPlayers = false; | 345 var hasPlayers = false; |
347 var fragment = document.createDocumentFragment(); | 346 var fragment = document.createDocumentFragment(); |
348 for (var id in players) { | 347 for (var id in players) { |
349 hasPlayers = true; | 348 hasPlayers = true; |
350 var player = players[id]; | 349 var player = players[id]; |
351 var usableName = player.properties.name || | 350 var p = player.properties; |
352 player.properties.url || | 351 var label = document.createElement('label'); |
353 'Player ' + player.id; | 352 |
353 var name_text = p.url || 'Player ' + player.id; | |
354 var name_node = document.createElement('span'); | |
355 name_node.appendChild(document.createTextNode(name_text)); | |
356 name_node.className = 'player-name'; | |
357 label.appendChild(name_node); | |
358 | |
359 var frame = []; | |
360 if (p.frame_title) | |
361 frame.push(p.frame_title); | |
362 if (p.frame_url) | |
363 frame.push(p.frame_url); | |
364 var frame_text = frame.join(' - '); | |
365 if (frame_text) { | |
366 label.appendChild(document.createElement('br')); | |
367 var frame_node = document.createElement('span'); | |
368 frame_node.className = 'player-frame'; | |
369 frame_node.appendChild(document.createTextNode(frame_text)); | |
370 label.appendChild(frame_node); | |
371 } | |
372 | |
373 var desc = [] | |
374 if (p.width && p.height) | |
375 desc.push(p.width + 'x' + p.height); | |
376 if (p.video_codec_name) | |
377 desc.push(p.video_codec_name); | |
378 if (p.video_codec_name && p.audio_codec_name) | |
379 desc.push('+'); | |
380 if (p.audio_codec_name) | |
381 desc.push(p.audio_codec_name); | |
382 if (p.event) | |
383 desc.push('(' + p.event + ')'); | |
384 var desc_text = desc.join(' '); | |
385 if (desc_text) { | |
386 label.appendChild(document.createElement('br')); | |
387 var desc_node = document.createElement('span'); | |
388 desc_node.className = 'player-desc'; | |
389 desc_node.appendChild(document.createTextNode(desc_text)); | |
390 label.appendChild(desc_node); | |
391 } | |
354 | 392 |
355 var li = document.createElement('li'); | 393 var li = document.createElement('li'); |
356 var button_cb = this.selectPlayer_.bind(this, player); | 394 var button_cb = this.selectPlayer_.bind(this, player); |
357 li.appendChild(createSelectableButton( | 395 li.appendChild(createSelectableButton( |
358 id, buttonGroupName, usableName, button_cb, player.destructed)); | 396 id, buttonGroupName, label, button_cb, player.destructed === true)); |
359 fragment.appendChild(li); | 397 fragment.appendChild(li); |
360 } | 398 } |
361 removeChildren(this.playerListElement); | 399 removeChildren(this.playerListElement); |
362 this.playerListElement.appendChild(fragment); | 400 this.playerListElement.appendChild(fragment); |
363 | 401 |
364 if (this.selectedPlayer && this.selectedPlayer.id in players) { | 402 if (this.selectedPlayer && this.selectedPlayer.id in players) { |
365 // Re-select the selected player since the button was just recreated. | 403 // Re-select the selected player since the button was just recreated. |
366 selectSelectableButton(this.selectedPlayer.id); | 404 selectSelectableButton(this.selectedPlayer.id); |
367 } | 405 } |
368 | 406 |
(...skipping 110 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
479 | 517 |
480 if (this.selectedPlayer) { | 518 if (this.selectedPlayer) { |
481 removeChildren(this.logTable); | 519 removeChildren(this.logTable); |
482 this.selectedPlayerLogIndex = 0; | 520 this.selectedPlayerLogIndex = 0; |
483 } | 521 } |
484 }, | 522 }, |
485 }; | 523 }; |
486 | 524 |
487 return ClientRenderer; | 525 return ClientRenderer; |
488 })(); | 526 })(); |
OLD | NEW |