| 1 | define(['dojo', 'dijit', 'dijit/_Widget', 'dijit/_TemplatedMixin'],function(dojo, dijit){ |
|---|
| 2 | |
|---|
| 3 | dojo.declare("dojox.av.widget.ProgressSlider", [dijit._Widget, dijit._TemplatedMixin], { |
|---|
| 4 | // summary: |
|---|
| 5 | // A custom slider widget to use with dojox.av.widget.Player. |
|---|
| 6 | // description: |
|---|
| 7 | // Displays the current playhead position of the media. Has two |
|---|
| 8 | // progress bars: one for playhead position, and one for download |
|---|
| 9 | // progress. |
|---|
| 10 | // |
|---|
| 11 | templateString: dojo.cache("dojox.av.widget","resources/ProgressSlider.html"), |
|---|
| 12 | postCreate: function(){ |
|---|
| 13 | // summary: |
|---|
| 14 | // Initialize slider. |
|---|
| 15 | // |
|---|
| 16 | this.seeking = false; |
|---|
| 17 | this.handleWidth = dojo.marginBox(this.handle).w; |
|---|
| 18 | var dim = dojo.coords(this.domNode); |
|---|
| 19 | this.finalWidth = dim.w |
|---|
| 20 | this.width = dim.w-this.handleWidth; |
|---|
| 21 | this.x = dim.x; |
|---|
| 22 | |
|---|
| 23 | dojo.setSelectable(this.domNode, false); |
|---|
| 24 | dojo.setSelectable(this.handle, false); |
|---|
| 25 | }, |
|---|
| 26 | setMedia: function(/* Object */med, playerWidget){ |
|---|
| 27 | // summary: |
|---|
| 28 | // A common method to set the media in all Player widgets. |
|---|
| 29 | // May do connections and initializations. |
|---|
| 30 | // |
|---|
| 31 | this.playerWidget = playerWidget; |
|---|
| 32 | this.media = med; |
|---|
| 33 | dojo.connect(this.media, "onMetaData", this, function(data){ |
|---|
| 34 | if(data && data.duration){ |
|---|
| 35 | this.duration = data.duration; |
|---|
| 36 | } |
|---|
| 37 | }); |
|---|
| 38 | dojo.connect(this.media, "onEnd", this, function(){ |
|---|
| 39 | dojo.disconnect(this.posCon); |
|---|
| 40 | this.setHandle(this.duration); |
|---|
| 41 | }); |
|---|
| 42 | dojo.connect(this.media, "onStart", this, function(){ |
|---|
| 43 | this.posCon = dojo.connect(this.media, "onPosition", this, "setHandle"); |
|---|
| 44 | }); |
|---|
| 45 | |
|---|
| 46 | dojo.connect(this.media, "onDownloaded", this, function(percent){ |
|---|
| 47 | this.setLoadedPosition(percent*.01); |
|---|
| 48 | this.width = this.finalWidth * .01 * percent; |
|---|
| 49 | }); |
|---|
| 50 | |
|---|
| 51 | }, |
|---|
| 52 | onDrag: function(/* HTMLEvent */ evt){ |
|---|
| 53 | // summary: |
|---|
| 54 | // Fired when the mouse is moved. Sets the slider. |
|---|
| 55 | // |
|---|
| 56 | var x = evt.clientX - this.x; |
|---|
| 57 | if(x<0) x = 0; |
|---|
| 58 | if(x>this.width-this.handleWidth) x=this.width-this.handleWidth; |
|---|
| 59 | |
|---|
| 60 | var p = x/this.finalWidth; |
|---|
| 61 | this.media.seek( this.duration * p ); |
|---|
| 62 | dojo.style(this.handle, "marginLeft", x+"px"); |
|---|
| 63 | dojo.style(this.progressPosition, "width", x+"px"); |
|---|
| 64 | }, |
|---|
| 65 | startDrag: function(){ |
|---|
| 66 | // summary: |
|---|
| 67 | // Fired onmousedown of the slider handle. |
|---|
| 68 | // |
|---|
| 69 | dojo.setSelectable(this.playerWidget.domNode, false); |
|---|
| 70 | this.seeking = true; |
|---|
| 71 | this.cmove = dojo.connect(dojo.doc, "mousemove", this, "onDrag"); |
|---|
| 72 | this.cup = dojo.connect(dojo.doc, "mouseup", this, "endDrag"); |
|---|
| 73 | }, |
|---|
| 74 | endDrag: function(){ |
|---|
| 75 | // summary: |
|---|
| 76 | // Fired on document.onmouseup. |
|---|
| 77 | // |
|---|
| 78 | dojo.setSelectable(this.playerWidget.domNode, true); |
|---|
| 79 | this.seeking = false; |
|---|
| 80 | if(this.cmove) dojo.disconnect(this.cmove); |
|---|
| 81 | if(this.cup) dojo.disconnect(this.cup); |
|---|
| 82 | this.handleOut(); |
|---|
| 83 | }, |
|---|
| 84 | |
|---|
| 85 | setHandle: function(time){ |
|---|
| 86 | // summary: |
|---|
| 87 | // Sets the slider handle (when it is not being dragged) |
|---|
| 88 | // |
|---|
| 89 | if(!this.seeking){ |
|---|
| 90 | var w = this.width-this.handleWidth; |
|---|
| 91 | var p = time/this.duration; |
|---|
| 92 | var x = p*w; |
|---|
| 93 | |
|---|
| 94 | dojo.style(this.handle, "marginLeft", x+"px"); |
|---|
| 95 | dojo.style(this.progressPosition, "width", x+"px"); |
|---|
| 96 | } |
|---|
| 97 | }, |
|---|
| 98 | |
|---|
| 99 | setLoadedPosition: function(decimal){ |
|---|
| 100 | // summary: |
|---|
| 101 | // Sets the download progress bar to the percentage of how much |
|---|
| 102 | // the media has been downloaded. |
|---|
| 103 | dojo.style(this.progressLoaded, "width", (this.finalWidth*decimal)+"px"); |
|---|
| 104 | }, |
|---|
| 105 | |
|---|
| 106 | handleOver: function(){ |
|---|
| 107 | // summary: |
|---|
| 108 | // Highlights the slider handle on mouseover, and |
|---|
| 109 | // stays highlighted during drag. |
|---|
| 110 | // |
|---|
| 111 | dojo.addClass(this.handle, "over"); |
|---|
| 112 | }, |
|---|
| 113 | handleOut: function(){ |
|---|
| 114 | // summary: |
|---|
| 115 | // Unhighlights handle onmouseover, or on endDrag. |
|---|
| 116 | // |
|---|
| 117 | if(!this.seeking){ |
|---|
| 118 | dojo.removeClass(this.handle, "over"); |
|---|
| 119 | } |
|---|
| 120 | }, |
|---|
| 121 | onResize: function(playerDimensions){ |
|---|
| 122 | // summary: |
|---|
| 123 | // Handles player resize. Need to recalculate the width of |
|---|
| 124 | // position an download bars. |
|---|
| 125 | var dim = dojo.coords(this.domNode); |
|---|
| 126 | this.finalWidth = dim.w; |
|---|
| 127 | |
|---|
| 128 | } |
|---|
| 129 | |
|---|
| 130 | }); |
|---|
| 131 | |
|---|
| 132 | return dojox.av.widget.ProgressSlider; |
|---|
| 133 | }); |
|---|
