sproutcore 1.7.1.beta → 1.8.0

data/lib/frameworks/sproutcore/frameworks/media/views/audio.js

@@ -7,22 +7,22 @@
 
 sc_require('views/controls');
 sc_require('views/mini_controls');
-/** 
+/**
   @class
-  
-  Renders a audioView using different technologies like HTML5 audio tag, 
+
+  Renders a audioView using different technologies like HTML5 audio tag,
   quicktime and flash.
-  
-  This view wraps the different technologies so you can use one standard and 
+
+  This view wraps the different technologies so you can use one standard and
   simple API to play audio.
-  
+
   You can specify and array with the order of how the technologies will degrade
-  depending on availability. For example you can set degradeList to be 
-  ['html5', 'flash'] and it will load your audio in an audio tag if the 
-  technology is available otherwise flash and if neither of the technologies 
+  depending on availability. For example you can set degradeList to be
+  ['html5', 'flash'] and it will load your audio in an audio tag if the
+  technology is available otherwise flash and if neither of the technologies
   are available it will show a message saying that your machine needs to install
   one of this technologies.
-  
+
   @extends SC.View
   @since SproutCore 1.1
 */
@@ -30,83 +30,83 @@ sc_require('views/mini_controls');
 SC.AudioView = SC.View.extend(
 /** @scope SC.AudioView.prototype */{
 
-  /** 
-    Audio view className. 
+  /**
+    Audio view className.
     @property {String}
   */
   classNames: 'sc-audio-view',
-  
-  /** 
+
+  /**
     Properties that trigger a re render of the view. If the value changes, it
     means that the audio url changed.
-    
+
     @property {Array}
   */
   displayProperties: ['value', 'shouldAutoResize'],
-  
-  /** 
-    Reference to the audio object once is created. 
+
+  /**
+    Reference to the audio object once is created.
     @property {Object}
   */
-  
+
   audioObject:null,
-  
-  /** 
+
+  /**
     Array containing the technologies and the order to load them depending
     availability
-     
+
     @property {Array}
   */
   degradeList: ['html5','quicktime', 'flash'],
-  
-  /** 
+
+  /**
     Current time in secs
     @property {Number}
   */
-  currentTime: 0, 
-  
-  /** 
+  currentTime: 0,
+
+  /**
     Duration in secs
     @property {Number}
   */
   duration: 0, //audio duration in secs
-  
-  /** 
+
+  /**
     Volume. The value should be between 0 and 1
     @property {Number}
   */
   volume:0, //volume value from 0 to 1
-  
-  /** 
+
+  /**
     Tells you if the audio is paused or not.
     @property {Boolean}
   */
   paused: YES, //is the audio paused
 
-  /** 
+  /**
     Tells you if the audio is loaded.
     @property {Boolean}
   */
 
   loaded: NO, //has the audio loaded
-  
-  /** 
+
+  /**
     Indicates if the audio has reached the end
     @property {Boolean}
   */
-  
+
   ended: NO, //did the audio finished playing
-  
-  /** 
+
+  /**
     Indicates if the audio is ready to be played.
     @property {Boolean}
   */
-  
+
   canPlay: NO, //can the audio be played
-  
+
   loadedTimeRanges:[], //loaded bits
-  
-  /** 
+
+  /**
     Formatted currentTime. (00:00)
     @property {String}
   */
@@ -116,10 +116,10 @@ SC.AudioView = SC.View.extend(
     var formattedTime = this._addZeros(Math.floor(currentTime/60))+':'+this._addZeros(Math.floor(currentTime%60))+"/"+this._addZeros(Math.floor(totaltimeInSecs/60))+':'+this._addZeros(Math.floor(totaltimeInSecs%60));
     return formattedTime;
   }.property('currentTime', 'duration').cacheable(),
-  
-  /** 
-    Renders the appropiate HTML according for the technology to use.
-    
+
+  /**
+    Renders the appropriate HTML according for the technology to use.
+
     @param {SC.RenderContext} context the render context
     @param {Boolean} firstTime YES if this is creating a layer
     @returns {void}
@@ -130,7 +130,8 @@ SC.AudioView = SC.View.extend(
       for(i=0, listLen = this.degradeList.length; i<listLen; i++){
         switch(this.degradeList[i]){
         case "html5":
-          if(SC.browser.safari){                          
+          // TODO: this doesn't seem like the best way to determine what tags to use!
+          if(SC.browser.name === SC.BROWSER.safari){
             context.push('<audio src="'+this.get('value')+'"');
             if(this.poster){
               context.push(' poster="'+this.poster+'"');
@@ -141,14 +142,15 @@ SC.AudioView = SC.View.extend(
           }
           break;
         case "quicktime":
-          if(SC.browser.msie){
+          // TODO: this doesn't seem like the best way to determine what tags to use!
+          if(SC.browser.name === SC.BROWSER.ie){
             context.push('<object id="qt_event_source" '+
-                        'classid="clsid:CB927D12-4FF7-4a9e-A169-56E4B8A75598" '+         
+                        'classid="clsid:CB927D12-4FF7-4a9e-A169-56E4B8A75598" '+
                         'codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=7,2,1,0"> '+
                         '</object> ');
           }
           context.push('<object width="100%" height="100%"');
-          if(SC.browser.msie){
+          if(SC.browser.name === SC.BROWSER.ie){
             context.push('style="behavior:url(#qt_event_source);"');
           }
           context.push('classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" '+
@@ -231,20 +233,20 @@ SC.AudioView = SC.View.extend(
   },
 
   valueObserver:function(){
-    this.set('currentTime', 0); 
-    this.set('duration', 0); 
-    this.set('volume', 0); 
-    this.set('paused', YES); 
-    this.set('loaded', NO); 
-    this.set('ended', NO); 
-    this.set('canPlay', NO); 
-    this.set('loadedTimeRanges', []); 
+    this.set('currentTime', 0);
+    this.set('duration', 0);
+    this.set('volume', 0);
+    this.set('paused', YES);
+    this.set('loaded', NO);
+    this.set('ended', NO);
+    this.set('canPlay', NO);
+    this.set('loadedTimeRanges', []);
     this.replaceLayer();
   }.observes('value'),
-  
-  /** 
+
+  /**
     In didCreateLayer we add DOM events for audio tag or quicktime.
-    
+
     @returns {void}
   */
   didCreateLayer :function(){
@@ -255,16 +257,16 @@ SC.AudioView = SC.View.extend(
       this.addQTDOMEvents();
     }
   },
-  
+
   didAppendToDocument :function(){
     if(this.loaded==="quicktime"){
       this.addQTDOMEvents();
     }
   },
-  
-  /** 
-    Adds all the neccesary audio DOM elements.
-    
+
+  /**
+    Adds all the necessary audio DOM elements.
+
     @returns {void}
   */
   addAudioDOMEvents: function() {
@@ -285,38 +287,38 @@ SC.AudioView = SC.View.extend(
 
     SC.Event.add(audioElem, 'loadstart', this, function () {
       SC.run(function() {
-        view.set('volume', audioElem.volume);        
+        view.set('volume', audioElem.volume);
       });
     });
 
     SC.Event.add(audioElem, 'play', this, function () {
       SC.run(function() {
-        view.set('paused', NO);        
+        view.set('paused', NO);
       });
     });
 
     SC.Event.add(audioElem, 'pause', this, function () {
       SC.run(function() {
-        view.set('paused', YES);        
+        view.set('paused', YES);
       });
     });
- 
+
     SC.Event.add(audioElem, 'loadedmetadata', this, function () {
       SC.run(function() {
         // view.set('audioWidth', audioElem.audioWidth);
         // view.set('audioHeight', audioElem.audioHeight);
       });
-    });    
-       
+    });
+
     SC.Event.add(audioElem, 'canplay', this, function () {
       SC.run(function() {
-        view.set('canPlay', YES);        
+        view.set('canPlay', YES);
       });
-    });     
+    });
 
     SC.Event.add(audioElem, 'ended', this, function () {
       SC.run(function() {
-        view.set('ended', YES);        
+        view.set('ended', YES);
       });
     });
 
@@ -341,52 +343,52 @@ SC.AudioView = SC.View.extend(
       //view.set('loadedData', ev.loaded);
       //console.log('progress '+ev.loaded+","+ev.total );
     });
-         
+
     // SC.Event.add(audioElem, 'suspend', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('suspend');
     //       SC.RunLoop.end();
-    //     });     
+    //     });
     // SC.Event.add(audioElem, 'load', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('load');
     //       SC.RunLoop.end();
-    //     });     
+    //     });
     //     SC.Event.add(audioElem, 'abort', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('abort');
     //       SC.RunLoop.end();
-    //     });     
+    //     });
     //     SC.Event.add(audioElem, 'error', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('error');
     //       SC.RunLoop.end();
-    //     });     
+    //     });
     //     SC.Event.add(audioElem, 'loadend', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('loadend');
     //       SC.RunLoop.end();
-    //     });     
+    //     });
     //     SC.Event.add(audioElem, 'emptied', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('emptied');
     //       SC.RunLoop.end();
-    //     });     
+    //     });
     //     SC.Event.add(audioElem, 'stalled', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('stalled');
     //       SC.RunLoop.end();
-    //     });     
+    //     });
     // SC.Event.add(audioElem, 'loadeddata', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('loadeddata');
     //       SC.RunLoop.end();
-    //     });     
+    //     });
     //     SC.Event.add(audioElem, 'waiting', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('waiting');
     //       SC.RunLoop.end();
-    //     });     
+    //     });
     //     SC.Event.add(audioElem, 'playing', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('playing');
@@ -396,12 +398,12 @@ SC.AudioView = SC.View.extend(
     //       SC.RunLoop.begin();
     //       console.log('canplaythrough');
     //       SC.RunLoop.end();
-    //     });     
+    //     });
     //     SC.Event.add(audioElem, 'seeking', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('seeking');
     //       SC.RunLoop.end();
-    //     });     
+    //     });
     //     SC.Event.add(audioElem, 'seeked', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('seeked');
@@ -411,17 +413,17 @@ SC.AudioView = SC.View.extend(
     //       SC.RunLoop.begin();
     //       console.log('ratechange');
     //       SC.RunLoop.end();
-    //     });     
+    //     });
     //     SC.Event.add(audioElem, 'volumechange', this, function () {
     //       SC.RunLoop.begin();
     //       console.log('volumechange');
     //       SC.RunLoop.end();
     //     });
-    
+
   },
-  
-  /** 
-     Adds all the neccesary quicktime DOM elements.
+
+  /**
+     Adds all the necessary quicktime DOM elements.
 
      @returns {void}
    */
@@ -431,7 +433,7 @@ SC.AudioView = SC.View.extend(
         view=this,
         dimensions;
     try{
-      media.GetVolume(); 
+      media.GetVolume();
       // add media.GetTimeScale(); ?
     }catch(e){
       SC.Logger.log('loaded fail trying later');
@@ -441,34 +443,34 @@ SC.AudioView = SC.View.extend(
     this.set('audioObject', media);
     view.set('duration', media.GetDuration()/media.GetTimeScale());
     view.set('volume', media.GetVolume()/256);
-    
+
     SC.Event.add(audioElem, 'qt_durationchange', this, function () {
       SC.run(function() {
         view.set('duration', media.GetDuration()/media.GetTimeScale());
       });
     });
-    
+
     SC.Event.add(audioElem, 'qt_begin', this, function () {
       SC.run(function() {
-        view.set('volume', media.GetVolume()/256);        
+        view.set('volume', media.GetVolume()/256);
       });
     });
-    
+
     SC.Event.add(audioElem, 'qt_loadedmetadata', this, function () {
       SC.run(function() {
-        view.set('duration', media.GetDuration()/media.GetTimeScale());        
+        view.set('duration', media.GetDuration()/media.GetTimeScale());
       });
     });
-    
+
     SC.Event.add(audioElem, 'qt_canplay', this, function () {
       SC.run(function() {
-        view.set('canPlay', YES);        
+        view.set('canPlay', YES);
       });
     });
-    
+
     SC.Event.add(audioElem, 'qt_ended', this, function () {
       SC.run(function() {
-        view.set('ended', YES);        
+        view.set('ended', YES);
       });
     });
 
@@ -517,11 +519,11 @@ SC.AudioView = SC.View.extend(
       //         SC.RunLoop.end();
     // });
   },
-  
-  
-  /** 
+
+
+  /**
      For Quicktime we need to simulated the timer as there is no data,
-     coming back from the plugin that reports back the currentTime of the 
+     coming back from the plugin that reports back the currentTime of the
      audio.
 
      @returns {void}
@@ -532,11 +534,11 @@ SC.AudioView = SC.View.extend(
       this.invokeLater(this._qtTimer, 1000);
     }
   }.observes('paused'),
-  
-  /** 
-    Called when currentTime changes. Notifies the differnt technologies 
+
+  /**
+    Called when currentTime changes. Notifies the different technologies 
     then new currentTime.
-    
+
     @returns {void}
   */
   seek:function(){
@@ -552,11 +554,11 @@ SC.AudioView = SC.View.extend(
       if(this.get('paused')) media.setTime(this.get('currentTime'));
     }
   }.observes('currentTime'),
-  
-  /** 
+
+  /**
     Should be called once the progress view is clicked to stop the event and
     later start seeking.
-    
+
     @returns {void}
   */
   startSeek: function(){
@@ -566,11 +568,11 @@ SC.AudioView = SC.View.extend(
       this._wasPlaying = true;
     }
   },
-  
-  /** 
+
+  /**
     Should be called once the progress view gets a mouseUp. It will get the
     player to continue playing if it was playing before starting the seek.
-    
+
     @returns {void}
   */
   endSeek: function(){
@@ -580,11 +582,11 @@ SC.AudioView = SC.View.extend(
       this._wasPlaying = false;
     }
   },
-  
-  
-  /** 
+
+
+  /**
     Set the volume of the audio.
-    
+
     @returns {void}
   */
   setVolume:function(){
@@ -593,8 +595,8 @@ SC.AudioView = SC.View.extend(
     if(this.loaded==="quicktime") media.SetVolume(this.get('volume')*256);
     if(this.loaded==="flash") media.setVolume(this.get('volume'));
   }.observes('volume'),
-  
-  /** 
+
+  /**
     Calls the right play method depending on the technology.
     @returns {void}
   */
@@ -605,8 +607,8 @@ SC.AudioView = SC.View.extend(
     if(this.loaded==="flash") media.playVideo();
     this.set('paused', NO);
   },
-  
-  /** 
+
+  /**
     Calls the right stop method depending on the technology.
     @returns {void}
   */
@@ -617,8 +619,8 @@ SC.AudioView = SC.View.extend(
     if(this.loaded==="flash")  media.pauseVideo();
     this.set('paused', YES);
   },
-  
-  /** 
+
+  /**
     Plays or stops the audio.
     @returns {void}
   */
@@ -627,10 +629,10 @@ SC.AudioView = SC.View.extend(
       this.play();
     }else{
       this.stop();
-    }   
+    }
   },
-   
-  /** 
+
+  /**
     Enables captions if available
     @returns {void}
   */
@@ -645,16 +647,16 @@ SC.AudioView = SC.View.extend(
         }else{
           this.SetTrackEnabled(this._closedCaptionTrackIndex,false);
           this.set('captionsEnabled', NO);
-        }   
+        }
       }catch(a){}
     }
     return;
   },
-  
+
   /*private*/
-  
-  
-  /** 
+
+
+  /**
     Gets the right audio object depending on the browser.
     @returns {void}
   */
@@ -663,14 +665,14 @@ SC.AudioView = SC.View.extend(
     if(this.loaded==="quicktime") return document['qt_'+SC.guidFor(this)];
     if(this.loaded==="flash") {
       var movieName='flash_'+SC.guidFor(this);
-      if (window.document[movieName]) 
+      if (window.document[movieName])
       {
         return window.document[movieName];
       }
       if (navigator.appName.indexOf("Microsoft Internet")==-1)
       {
         if (document.embeds && document.embeds[movieName]) {
-          return document.embeds[movieName]; 
+          return document.embeds[movieName];
         }
       }
       else
@@ -679,15 +681,15 @@ SC.AudioView = SC.View.extend(
       }
     }
   },
-  
+
   _addZeros:function(value){
     if(value.toString().length<2) return "0"+value;
     return value;
   }
-  
+
 });
 
-/** 
+/**
   Hash to store references to the different flash audios.
 */
 SC.AudioView.flashViews={};
@@ -722,19 +724,19 @@ SC.AudioView.logFlash = function(message) {
 
 SC.AudioPlayerView = SC.View.extend({
   classNames: 'sc-audio-view',
-  
+
   childViews: ['audioView', 'mini'],
-  
+
   value: null,
-  
+
   degradeList: null,
-  
+
   audioView:SC.AudioView.design({
     layout: { top: 0, left:0, width:100, height:100},
     degradeListBinding: '*parentView.degradeList',
     valueBinding: '*parentView.value'
   }),
-  
+
   mini: SC.MiniMediaControlsView.design({
      layout: { bottom:0, left: 0, right: 0, height: 20 },
      targetBinding: '*parentView.audioView'