// ========================================================================== // Project: SproutCore - JavaScript Application Framework // Copyright: ©2006-2011 Strobe Inc. and contributors. // Portions ©2008-2011 Apple Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ========================================================================== /*globals SC */

sc_require('views/media_slider'); /** @class

(Document Your View Here)

@extends SC.View

*/ SC.MediaControlsView = SC.View.extend( /** @scope SC.MediaControlsView.prototype */{

target: null,

childViews: ['playButton', 'progressView', 'timeView', 'minusLabelView', 'volumeView', 'plusLabelView', 'theaterButton'],
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.extend({
  title: '',
  icon: 'play',
  layout: { top: 0, left: 0, width: 20, height:20},
  action: "playPause",
  targetBinding: ".parentView.target"
}),

progressView: SC.MediaSlider.extend({
  layout: { top: 0, left: 25, right: 230, height:20},
  value:0,
  minimum: 0,
  step:0.1,
  valueBinding: ".parentView*target.currentTime" ,
  maximumBinding: ".parentView*target.duration",
  mediaViewBinding: ".parentView.target"
}),

timeView: SC.LabelView.extend({
  layout: { top: 0, right: 160, width: 60, height:20},
  classNames: 'time',
  valueBinding: '.parentView*target.time'
}),

theaterButton: SC.ButtonView.extend({
  title: '',
  icon: 'theater',
  titleMinWidth: 35,
  layout: { top: 0, right: 140, width: 20, height:20},
  action: "fullScreen",
  targetBinding: ".parentView.target"
}),

minusLabelView: SC.LabelView.extend({
  layout: { top: 0, right: 120, width: 20, height:20},
  value: '',
  icon: 'minus'
}),

volumeView: SC.MediaSlider.extend({
  layout: { top: 0, right: 25, width: 90, height:20},
  value:0,
  valueBinding: ".parentView*target.volume" ,
  minimum: 0,
  maximum: 1,
  step: 0.01
}),

plusLabelView: SC.LabelView.extend({
  layout: { top: 0, right: 0, width: 20, height:20},
  value: '',
  icon: 'plus'
})

});