sproutcore 1.0.1046 → 1.0.1049.pre.1

data/frameworks/sproutcore/frameworks/media/views/controls.js

@@ -0,0 +1,90 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+/*globals SC */
+
+sc_require('views/mediaSlider');
+/** @class
+
+  (Document Your View Here)
+
+  @extends SC.View
+*/
+SC.MediaControlsView = SC.View.extend({
+
+  target: null,
+  
+  childViews: 'playButton progressView timeView minusLabelView volumeView plusLabelView theaterButton'.w(),
+  classNames: 'sc-media-controls',
+  
+  leftHandleInset:null,   //until a bug in the way bindings are handled is fixed, these have to be defined
+  rightHandleInset:null,  //for the slider to be able to have its notEmpty bindings function and drop in
+  handleWidth:null,       //their placeholder values.
+  
+  playObserver: function(){
+    if(this.getPath('target.paused')){
+      this.get('playButton').set('icon', 'play');
+    }else{
+      this.get('playButton').set('icon', 'stop');
+    }
+  }.observes('*target.paused'),
+  
+  playButton: SC.ButtonView.design({
+    title: '',
+    titleMinWidth: 35,
+    icon: 'play',
+    noStyle: YES,
+    layout: { top: 0, left: 0, width: 20, height:20},
+    action: "playPause",
+    targetBinding: "*owner.target",
+    renderStyle: 'renderImage',
+    controlStyle: ''
+  }),
+  progressView: SC.mediaSlider.design({
+    layout: { top: 0, left: 20, right: 220, height:20},
+    value:0,
+    minimum: 0,
+    step:0.1,
+    valueBinding: "*owner.target.currentTime" ,
+    maximumBinding: "*owner.target.duration",
+    mediaViewBinding: "*owner.target"
+  }),
+  
+  timeView: SC.LabelView.design({
+    layout: { top: 0, right: 160, width: 60, height:20},
+    classNames: 'time',
+    textAlign: SC.ALIGN_CENTER,
+    valueBinding: '*owner.target.time'
+  }),
+  theaterButton: SC.ButtonView.design({
+    title: '',
+    icon: 'theater',
+    renderStyle: 'renderImage',
+    controlStyle: '',
+    titleMinWidth: 35,
+    layout: { top: 0, right: 140, width: 20, height:20},
+    action: "fullScreen",
+    targetBinding: "*owner.target"
+  }),
+  minusLabelView: SC.LabelView.design({
+    layout: { top: 0, right: 120, width: 20, height:20},
+    value: '',
+    icon: 'minus'
+  }),
+  volumeView: SC.mediaSlider.design({
+    layout: { top: 0, right: 20, width: 100, height:20},
+    value:0,
+    valueBinding: "*owner.target.volume" ,
+    minimum: 0,
+    maximum: 1,
+    step: 0.01
+  }),
+  plusLabelView: SC.LabelView.design({
+    layout: { top: 0, right: 0, width: 20, height:20},
+    value: '',
+    icon: 'plus'
+  })  
+});

data/frameworks/sproutcore/frameworks/media/views/mediaSlider.js

@@ -0,0 +1,243 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+/*globals SC */
+
+/** @class
+
+  (Document Your View Here)
+
+  @extends SC.View
+*/
+SC.mediaSlider = SC.SliderView.extend({
+  
+  mediaView: null,
+
+  leftHandleInsetBinding: "*owner.leftHandleInset",
+  
+  rightHandleInsetBinding: "*owner.rightHandleInset",
+  
+  handleWidthBinding: "*owner.handleWidth",
+                                                             
+  //for some reason, when the observer was hooked to this bound property,
+  //it wouldn't fire even when the original setter was in an SC run loop!
+  //what gives and/or what was I doing wrong? The observer is now direct.
+  // loadedTimeRangesBinding: "*mediaView.loadedTimeRanges", 
+  
+  loadedRangesSelector: "span.sc-loaded-ranges",
+  
+  _defaults: {
+    //these are necessary because I couldn't get SC.Binding.notEmpty to
+    //work without values defined in the parent, which is a situation
+    //I'd rather leave optional.
+    leftHandleInset:-1,
+    rightHandleInset:-8,
+    handleWidth:16
+  },           
+
+  render: function(context, firstTime) {
+    //sc_super(); we are overriding the ENTIRE previous render method,
+    //so instead of calling sc_super, we want to skip the function
+    //immediately above this one and go two levels up.
+    arguments.callee.base.base.apply(this,arguments);
+    
+    //some variables
+    var min = this.get('minimum'),
+        max = this.get('maximum'),
+        value = this.get('value'),
+        step = this.get('step'),
+        width = this.get('frame').width,
+        left, loc, minLoc, maxLoc, i,
+        blankImage = SC.BLANK_IMAGE_URL;
+                                
+    //process the defaults if we haven't.
+    if(!this._defaultsEnsured) {
+      this._defaultsEnsured = YES;
+      for(i in this._defaults) {
+        if(SC.none(this.get(i))) {
+          this.set(i,this._defaults[i]);
+        }
+      }
+    }
+
+    // determine the constrained value.  Must fit within min & max
+    value = Math.min(Math.max(value, min), max);
+
+    // limit to step value
+    if (!SC.none(step) && step !== 0) {
+      value = Math.round(value / step) * step;
+    }
+    
+    // get a pointer to the actual handle DOM element, and, if we have no
+    // width information for it, try to use its offsetWidth.
+    if(!firstTime) {
+      var handle = this.handleElement ||
+                  (this.handleElement=this.$(this.get('handleSelector'))[0]);
+      if(!this.handleWidth){
+        this.handleWidth = this.handleElement.offsetWidth || this.handleWidth;
+      }
+    }
+    
+    //derive the extremes
+    maxLoc = width-this.handleWidth/2-this.rightHandleInset;
+    minLoc = this.handleWidth/2+this.leftHandleInset;
+    
+    if(min==max) loc=minLoc;
+    else loc = (value - min) / (max - min) * (maxLoc - minLoc) + minLoc;
+    
+    left = loc + this.leftHandleInset - this.handleWidth/2;
+    
+    //console.log("RENDERING: max is "+max+" and min is "+min+" and value is "+value+" out of "+max+", left is "+left+" and loc is "+loc+" and handleWidth is "+this.handleWidth);
+    
+    if(!firstTime) {
+      //if all our elements are already created, just edit them instead of
+      //blowing them away and starting over.
+      handle.style.left = left + "px";
+    } else {
+      context.push('<span class="sc-inner">',
+                    '<span class="sc-leftcap"></span>',
+                    '<span class="sc-rightcap"></span>',  
+                    '<span class="sc-track"></span>',
+                    '<span class="sc-loaded-ranges"></span>',
+                    '<img src="', blankImage, 
+                    '" class="sc-handle" style="left: ', left, 'px" />',
+                   '</span>');
+    }
+    
+    //next, we take care of the loaded ranges of time that will darken
+    //the slider. This should happen whether it's the first render or not!
+    this.renderLoadedTimeRanges();
+  },
+
+  renderLoadedTimeRanges: function() {
+      //first, get our quick variables we know we'll need...
+      var max = this.get('maximum'),
+          min = this.get('minimum'),
+          width = this.get('frame').width,
+          i;
+      //get our ranges, which will be an array of Numbers with twice as many
+      //elements as there are ranges. odd indices are starts, and evens are the
+      //ends that correspond to the start times immediately preceding them.
+      //only act if we have the ranges array. if it doesn't exist, don't bother
+      //to render the loaded ranges.
+      var mediaView = this.get('mediaView');
+      if(!mediaView) return;
+      var ranges = mediaView.get('loadedTimeRanges');
+      if(!ranges) return;
+      //make sure we have the pointer to our element which will house all the
+      //clones of the loaded-style background:
+      if(!this.loadedRangesElement){
+        this.loadedRangesElement = this.$(this.get('loadedRangesSelector'))[0];
+      }
+      //now, make sure we have a loaded-style slider background template, which
+      //will be cloned as many times as is necessary to render all loaded ranges:
+      if(!this.loadedBGTemplate) {
+        this.loadedBGTemplate = document.createElement('span');
+        this.loadedBGTemplate.className = "sc-loaded-range";
+        this.loadedBGTemplate.innerHTML = [
+          '<span class="sc-loaded-range-inner">',
+            '<span class="sc-leftcap loaded"></span>',
+            '<span class="sc-rightcap loaded"></span>',  
+            '<span class="sc-track loaded"></span>',
+          '</span>'
+        ].join('');
+      }
+      //now, make sure we have our cache of clones of the slider background
+      //template. we don't want to be spawning new HTML elements every time
+      //we render, so we will use this pool of them.
+      if(!this.loadedRangeElements) this.loadedRangeElements = [];
+      //now, for each range, obtain or create a clone of the background
+      //template, and style it such that the inner element lands
+      //exactly on top of the original slider background, but clipped
+      //by the outer element.
+      for(i=0; i<ranges.length/2; i++) {
+        var clone = this.loadedRangeElements[i] || 
+                   (this.loadedRangeElements[i] = this.loadedBGTemplate.cloneNode(true));
+        var leftClip  = Math.round(((ranges[ 2*i ]+min)/max) * width);
+        var rightClip = Math.round(((ranges[2*i+1]+min)/max) * width);
+        clone.style.left = leftClip+"px";
+        clone.style.width = rightClip-leftClip+"px";
+        clone.firstChild.style.left = 0-leftClip+"px";
+        clone.firstChild.style.width = width+"px";
+        if(!clone.parentNode) this.loadedRangesElement.appendChild(clone);
+      }
+      //now, make sure there aren't any EXTRA clones of the darkened background
+      //still hanging around. loop through the end of the loadedRangeElements
+      //list at indices greater than ranges.length/2, and remove the elements.
+      for(i=ranges.length/2; i<this.loadedRangeElements.length; i++) {
+        if(this.loadedRangeElements[i].parentNode) {
+          this.loadedRangeElements[i].parentNode.removeChild(this.loadedRangeElements[i]);
+        }
+      }
+      
+      //console.log('rendered loaded time ranges for '+ranges);
+  }.observes('*mediaView.loadedTimeRanges'),
+
+  _triggerHandle: function(evt, firstEvent) {
+    var width = this.get('frame').width,
+        min = this.get('minimum'), max=this.get('maximum'),  
+        step = this.get('step'), v=this.get('value'), loc, maxLoc, minLoc,
+        handle = this.handleElement ||
+                (this.handleElement=this.$(this.get('handleSelector'))[0]);
+    
+    //try to get a handleWidth from offsetWidth (if we don't already have a handleWidth);
+    //but make sure to favor zero over something like NaN we might get...
+    if(!this.handleWidth){
+      this.handleWidth = this.handleElement.offsetWidth || this.handleWidth;
+    }
+    //get the location of the cursor relative to the view
+    if(firstEvent){    
+      loc = this.convertFrameFromView({ x: evt.pageX }).x;
+      this._evtDiff = evt.pageX - loc;
+    }else{
+      loc = evt.pageX-this._evtDiff;
+    }
+
+    //derive the extremes
+    maxLoc = width-this.handleWidth/2-this.rightHandleInset;
+    minLoc = this.handleWidth/2+this.leftHandleInset;
+
+    //constrain loc to at least half a knob-width from either extreme.
+    loc = Math.max(Math.min(loc,maxLoc),minLoc);
+    
+    // convert to fraction of available width
+    loc = (loc-minLoc) / (maxLoc-minLoc);
+    
+    // convert to value using minimum/maximum then constrain to steps
+    loc = min + ((max-min)*loc);
+    if (step !== 0) loc = Math.round(loc / step) * step ;
+
+    // if changes by more than a rounding amount, set v.
+    if (Math.abs(v-loc)>=0.01) this.set('value', loc); // adjust 
+    return YES ;
+  },
+
+  mouseDown: function(evt) {
+    var media=this.get('mediaView');
+    if(media) media.startSeek();
+    return sc_super();
+  },
+
+  mouseUp: function(evt) {
+    var media=this.get('mediaView');
+    if(media) media.endSeek();
+    return sc_super();
+  }, 
+  
+  mouseWheel: function(){
+    var media, ret;
+    SC.RunLoop.begin();
+    media=this.get('mediaView');
+    if(media) media.startSeek();
+    ret = sc_super();
+    SC.RunLoop.end();
+    SC.RunLoop.begin();
+    if(media) media.endSeek();
+    SC.RunLoop.end();
+    return ret;
+  }  
+});
+

data/frameworks/sproutcore/frameworks/media/views/miniControls.js

@@ -0,0 +1,63 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+/*globals SC */
+
+sc_require('views/mediaSlider');
+/** @class
+
+  (Document Your View Here)
+
+  @extends SC.View
+*/
+SC.MiniMediaControlsView = SC.View.extend({
+
+  target: null,
+  
+  childViews: 'playButton timeView minusLabelView volumeView'.w(),
+  classNames: 'sc-media-controls',
+  
+  playObserver: function(){
+    if(this.getPath('target.paused')){
+      this.get('playButton').set('icon', 'play');
+    }else{
+      this.get('playButton').set('icon', 'stop');
+    }
+  }.observes('*target.paused'),
+  
+  
+  playButton: SC.ButtonView.design({
+    title: '',
+    titleMinWidth: 35,
+    icon: 'play',
+    noStyle: YES,
+    layout: { top: 0, left: 0, width: 20, height:20},
+    action: "playPause",
+    targetBinding: "*owner.target",
+    renderStyle: 'renderImage',
+    controlStyle: ''
+  }),
+  
+  timeView: SC.LabelView.design({
+    layout: { top: 0, left: 20, width: 60, height:20},
+    classNames: 'time',
+    textAlign: SC.ALIGN_CENTER,
+    valueBinding: '*owner.target.time'
+  }),
+  minusLabelView: SC.LabelView.design({
+    layout: { top: 0, left: 80, width: 20, height:20},
+    value: '',
+    icon: 'minus'
+  }),
+  volumeView: SC.SliderView.design({
+    layout: { top: 0, left: 100, width: 100, height:20},
+    value:0,
+    valueBinding: "*owner.target.volume" ,
+    minimum: 0,
+    maximum: 1,
+    step: 0.01
+  })
+});

data/frameworks/sproutcore/frameworks/media/views/simpleControls.js

@@ -0,0 +1,55 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+/*globals SC */
+
+sc_require('views/mediaSlider');
+/** @class
+
+  (Document Your View Here)
+
+  @extends SC.View
+*/
+SC.SimpleMediaControlsView = SC.View.extend({
+
+  target: null,
+  
+  childViews: 'playButton progressView'.w(),
+  classNames: 'sc-media-controls',
+  
+  leftHandleInset:null,   //until a bug in the way bindings are handled is fixed, these have to be defined
+  rightHandleInset:null,  //for the slider to be able to have its notEmpty bindings function and drop in
+  handleWidth:null,       //their placeholder values.
+  
+  playObserver: function(){
+    if(this.getPath('target.paused')){
+      this.get('playButton').set('icon', 'play');
+    }else{
+      this.get('playButton').set('icon', 'stop');
+    }
+  }.observes('*target.paused'),
+  
+  playButton: SC.ButtonView.design({
+    title: '',
+    titleMinWidth: 35,
+    icon: 'play',
+    noStyle: YES,
+    layout: { top: 0, left: 0, width: 20, height:20 },
+    action: "playPause",
+    targetBinding: "*owner.target",
+    renderStyle: 'renderImage',
+    theme: ''
+  }),
+  progressView: SC.mediaSlider.design({
+    layout: { top: 0, left: 25, right: 0, height:20 },
+    value:0,
+    minimum: 0,
+    step:0.1,
+    valueBinding: "*owner.target.currentTime" ,
+    maximumBinding: "*owner.target.duration",
+    mediaViewBinding: "*owner.target"
+  })
+});