Home | History | Annotate | Download | only in media
      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