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 sc_require('views/media_slider');
 10 /** @class
 11 
 12   (Document Your View Here)
 13 
 14   @extends SC.View
 15 */
 16 SC.MediaControlsView = SC.View.extend(
 17 /** @scope SC.MediaControlsView.prototype */{
 18 
 19   target: null,
 20 
 21   childViews: ['playButton', 'progressView', 'timeView', 'minusLabelView', 'volumeView', 'plusLabelView', 'theaterButton'],
 22   classNames: ['sc-media-controls'],
 23 
 24   playObserver: function(){
 25     if(this.getPath('target.paused')){
 26       this.get('playButton').set('icon', 'play');
 27     }else{
 28       this.get('playButton').set('icon', 'stop');
 29     }
 30   }.observes('*target.paused'),
 31 
 32   playButton: SC.ButtonView.extend({
 33     title: '',
 34     icon: 'play',
 35     layout: { top: 0, left: 0, width: 20, height:20},
 36     action: "playPause",
 37     targetBinding: ".parentView.target"
 38   }),
 39 
 40   progressView: SC.MediaSlider.extend({
 41     layout: { top: 0, left: 25, right: 230, height:20},
 42     value:0,
 43     minimum: 0,
 44     step:0.1,
 45     valueBinding: ".parentView*target.currentTime" ,
 46     maximumBinding: ".parentView*target.duration",
 47     mediaViewBinding: ".parentView.target"
 48   }),
 49 
 50   timeView: SC.LabelView.extend({
 51     layout: { top: 0, right: 160, width: 60, height:20},
 52     classNames: 'time',
 53     valueBinding: '.parentView*target.time'
 54   }),
 55 
 56   theaterButton: SC.ButtonView.extend({
 57     title: '',
 58     icon: 'theater',
 59     titleMinWidth: 35,
 60     layout: { top: 0, right: 140, width: 20, height:20},
 61     action: "fullScreen",
 62     targetBinding: ".parentView.target"
 63   }),
 64 
 65   minusLabelView: SC.LabelView.extend({
 66     layout: { top: 0, right: 120, width: 20, height:20},
 67     value: '',
 68     icon: 'minus'
 69   }),
 70 
 71   volumeView: SC.MediaSlider.extend({
 72     layout: { top: 0, right: 25, width: 90, height:20},
 73     value:0,
 74     valueBinding: ".parentView*target.volume" ,
 75     minimum: 0,
 76     maximum: 1,
 77     step: 0.01
 78   }),
 79 
 80   plusLabelView: SC.LabelView.extend({
 81     layout: { top: 0, right: 0, width: 20, height:20},
 82     value: '',
 83     icon: 'plus'
 84   })
 85 });
 86