1 // ==========================================================================
  2 // Project:   SproutCore - JavaScript Application Framework
  3 // Copyright: ©2006-2011 Strobe Inc. and contributors.
  4 //            Portions ©2008-2011 Apple Inc. All rights reserved.
  5 // License:   Licensed under MIT license (see license.js)
  6 // ==========================================================================
  7 /*globals SC */
  8 
  9 /**
 10  * @class
 11  * 
 12  * The MediaSlider element takes the original SC.SliderView and adds an
 13  * indicator of which ranges of the media have been loaded.
 14  * 
 15  * @extends SC.SliderView
 16  */
 17 SC.MediaSlider = SC.SliderView.extend(
 18 /** @scope SC.MediaSlider.prototype */
 19 {
 20   /**
 21    * The media view which this slider should attach itself to.
 22    */
 23   // TODO: Deprecate, bind to loadedTimeRanges instead.
 24   mediaView: null,
 25   
 26   /**
 27    * The name of our render delegate
 28    */
 29   renderDelegateName: 'mediaSliderRenderDelegate',
 30   
 31   /**
 32    * @private
 33    * 
 34    * Appends a loaded ranges span to the div element.
 35    * 
 36    * @param context
 37    * @param firstTime
 38    */
 39   render: function(context, firstTime) {
 40     sc_super();
 41     
 42     // Render the loaded time ranges.
 43     this.renderLoadedTimeRanges();
 44   },
 45   
 46   renderLoadedTimeRanges: function() {
 47     var ranges = this.getPath('mediaView.loadedTimeRanges');
 48     var rangesElement = this.$('.sc-loaded-ranges');
 49     var max = this.get('maximum');
 50     // TODO: Remove support for mediaView, simply bind to loadedTimeRanges.
 51     
 52     // Read the ranges element, kick out if it doesn't exist yet.
 53     if(SC.empty(rangesElement)) {
 54       return;
 55     }
 56     // Scrub all children.
 57     rangesElement.empty(".sc-loaded-range");
 58     
 59     // If there are no ranges, exit.
 60     if(SC.empty(ranges)) {
 61       return;
 62     }
 63     
 64     var width = rangesElement.width();
 65     for( var i = 0; i < ranges.length; i += 2) {
 66       try {
 67         // Ranges are reported as an array of numbers. Odds are start indexes,
 68         // evens are end indexes of the previous start index.
 69         var startRange = ranges[i];
 70         var endRange = ranges[i + 1];
 71         
 72         var pixelLeft = width * (startRange / max);
 73         var pixelWidth = width * ((endRange - startRange) / max);
 74         
 75         var tag = $('<span class="sc-loaded-range" />');
 76         tag.css('left', pixelLeft);
 77         tag.css('width', pixelWidth);
 78         
 79         rangesElement.append(tag);
 80         
 81       } catch(e) {
 82       }
 83     }
 84   }.observes('*mediaView.loadedTimeRanges'),
 85 });
 86