[483] | 1 | define(['dojo', 'dijit', 'dijit/_Widget', 'dijit/_TemplatedMixin'],function(dojo, dijit, _Widget, _TemplatedMixin){ |
---|
| 2 | |
---|
| 3 | dojo.experimental("dojox.av.widget.Player"); |
---|
| 4 | |
---|
| 5 | return dojo.declare("dojox.av.widget.Player", [_Widget, _TemplatedMixin], { |
---|
| 6 | // summary: |
---|
| 7 | // A Media Player UI widget for all types of dojox.av and AIR media. |
---|
| 8 | // description: |
---|
| 9 | // Currently for markup only. All controls should reside as child |
---|
| 10 | // nodes within the Player node. 'controlType' is used to determine |
---|
| 11 | // the placement of the control. If no type or an unrecognized type |
---|
| 12 | // is used, it will be left-aligned in the same row as the volume. |
---|
| 13 | // |
---|
| 14 | // Note: |
---|
| 15 | // Be sure to use 'controlType' as a node attribute. It is not a |
---|
| 16 | // property of the widget. |
---|
| 17 | // example: |
---|
| 18 | // | <div dojoType="dojox.av.widget.Player" playerWidth="100%"> |
---|
| 19 | // | <div controlType="video" initialVolume=".1" |
---|
| 20 | // | mediaUrl="video/Grog.flv" autoPlay="true" |
---|
| 21 | // | isDebug="false" dojoType="dojox.av.FLVideo"></div> |
---|
| 22 | // | <div controlType="play" dojoType="dojox.av.widget.PlayButton"></div> |
---|
| 23 | // | <div controlType="volume" dojoType="dojox.av.widget.VolumeButton"></div> |
---|
| 24 | // | <div controlType="progress" dojoType="dojox.av.widget.ProgressSlider"></div> |
---|
| 25 | // | <div controlType="status" dojoType="dojox.av.widget.Status"></div> |
---|
| 26 | // | </div> |
---|
| 27 | |
---|
| 28 | // playerWidth: Number|String |
---|
| 29 | // Sets the width of the player (not the video size) |
---|
| 30 | // Number will be converted to pixels |
---|
| 31 | // String will be used literally. EX: "320px" or "100%" |
---|
| 32 | playerWidth: "480px", |
---|
| 33 | |
---|
| 34 | // TODO: |
---|
| 35 | //playerHeight |
---|
| 36 | //videoWidth: 320, |
---|
| 37 | //videoHeight: 240, |
---|
| 38 | |
---|
| 39 | widgetsInTemplate:true, |
---|
| 40 | templateString: dojo.cache("dojox.av.widget","resources/Player.html"), |
---|
| 41 | |
---|
| 42 | _fillContent: function(){ |
---|
| 43 | // summary: |
---|
| 44 | // Finding and collecting child nodes |
---|
| 45 | if(!this.items && this.srcNodeRef){ |
---|
| 46 | this.items = []; |
---|
| 47 | var nodes = dojo.query("*", this.srcNodeRef); |
---|
| 48 | dojo.forEach(nodes, function(n){ |
---|
| 49 | this.items.push(n); |
---|
| 50 | }, this); |
---|
| 51 | } |
---|
| 52 | }, |
---|
| 53 | |
---|
| 54 | postCreate: function(){ |
---|
| 55 | // summary: |
---|
| 56 | // Do player styling, and place child widgets in the proper location. |
---|
| 57 | |
---|
| 58 | dojo.style(this.domNode, "width", this.playerWidth+(dojo.isString(this.playerWidth)?"":"px")); |
---|
| 59 | |
---|
| 60 | if(dojo.isString(this.playerWidth) && this.playerWidth.indexOf("%")){ |
---|
| 61 | dojo.connect(window, "resize", this, "onResize"); |
---|
| 62 | } |
---|
| 63 | this.children = []; |
---|
| 64 | var domNode; |
---|
| 65 | dojo.forEach(this.items, function(n, i){ |
---|
| 66 | n.id = dijit.getUniqueId("player_control"); |
---|
| 67 | switch(dojo.attr(n, "controlType")){ |
---|
| 68 | case "play": |
---|
| 69 | this.playContainer.appendChild(n); break; |
---|
| 70 | case "volume" : |
---|
| 71 | this.controlsBottom.appendChild(n); break; |
---|
| 72 | case "status" : |
---|
| 73 | this.statusContainer.appendChild(n); break; |
---|
| 74 | case "progress": |
---|
| 75 | case "slider": |
---|
| 76 | this.progressContainer.appendChild(n); break; |
---|
| 77 | case "video": |
---|
| 78 | this.mediaNode = n; |
---|
| 79 | this.playerScreen.appendChild(n); break; |
---|
| 80 | default: |
---|
| 81 | |
---|
| 82 | } |
---|
| 83 | this.items[i] = n.id; |
---|
| 84 | }, this); |
---|
| 85 | |
---|
| 86 | }, |
---|
| 87 | startup: function(){ |
---|
| 88 | // summary: |
---|
| 89 | // Fired when all children are ready. Set the media in |
---|
| 90 | // all children with setMedia() |
---|
| 91 | |
---|
| 92 | this.media = dijit.byId(this.mediaNode.id); |
---|
| 93 | if(!dojo.isAIR){ |
---|
| 94 | dojo.style(this.media.domNode, "width", "100%"); |
---|
| 95 | dojo.style(this.media.domNode, "height", "100%"); |
---|
| 96 | } |
---|
| 97 | dojo.forEach(this.items, function(id){ |
---|
| 98 | if(id !== this.mediaNode.id){ |
---|
| 99 | var child = dijit.byId(id); |
---|
| 100 | this.children.push(child); |
---|
| 101 | if(child){ |
---|
| 102 | child.setMedia(this.media, this); |
---|
| 103 | } |
---|
| 104 | } |
---|
| 105 | }, this); |
---|
| 106 | }, |
---|
| 107 | |
---|
| 108 | onResize: function(evt){ |
---|
| 109 | // summary: |
---|
| 110 | // If a player size is a percentage, this will fire an onResize |
---|
| 111 | // event for all children, passing the size of the player. |
---|
| 112 | |
---|
| 113 | var dim = dojo.marginBox(this.domNode); |
---|
| 114 | if(this.media && this.media.onResize !== null){ |
---|
| 115 | this.media.onResize(dim); |
---|
| 116 | } |
---|
| 117 | dojo.forEach(this.children, function(child){ |
---|
| 118 | if(child.onResize){ |
---|
| 119 | child.onResize(dim); |
---|
| 120 | } |
---|
| 121 | }); |
---|
| 122 | } |
---|
| 123 | |
---|
| 124 | }); |
---|
| 125 | |
---|
| 126 | }); |
---|