summaryrefslogtreecommitdiff
path: root/js/dojo/dojox/av/widget
diff options
context:
space:
mode:
Diffstat (limited to 'js/dojo/dojox/av/widget')
-rw-r--r--js/dojo/dojox/av/widget/PlayButton.js75
-rw-r--r--js/dojo/dojox/av/widget/Player.js128
-rw-r--r--js/dojo/dojox/av/widget/ProgressSlider.js134
-rw-r--r--js/dojo/dojox/av/widget/Status.js115
-rw-r--r--js/dojo/dojox/av/widget/VolumeButton.js187
-rw-r--r--js/dojo/dojox/av/widget/resources/PlayButton.html3
-rw-r--r--js/dojo/dojox/av/widget/resources/Player.css203
-rw-r--r--js/dojo/dojox/av/widget/resources/Player.html20
-rw-r--r--js/dojo/dojox/av/widget/resources/ProgressSlider.html6
-rw-r--r--js/dojo/dojox/av/widget/resources/Status.html7
-rw-r--r--js/dojo/dojox/av/widget/resources/VolumeButton.html7
-rw-r--r--js/dojo/dojox/av/widget/resources/images/dojoPlayerIcons.pngbin0 -> 5737 bytes
-rw-r--r--js/dojo/dojox/av/widget/resources/images/playerIconsbin0 -> 887 bytes
-rw-r--r--js/dojo/dojox/av/widget/resources/images/player_sprite.pngbin0 -> 6076 bytes
-rw-r--r--js/dojo/dojox/av/widget/resources/images/progressLoadedBk.pngbin0 -> 153 bytes
-rw-r--r--js/dojo/dojox/av/widget/resources/images/progressPositionBk.pngbin0 -> 157 bytes
-rw-r--r--js/dojo/dojox/av/widget/resources/images/sliderHandleNorm.pngbin0 -> 336 bytes
-rw-r--r--js/dojo/dojox/av/widget/resources/images/sliderHandleOver.pngbin0 -> 248 bytes
-rw-r--r--js/dojo/dojox/av/widget/resources/images/sliderHandleSprite.pngbin0 -> 426 bytes
19 files changed, 885 insertions, 0 deletions
diff --git a/js/dojo/dojox/av/widget/PlayButton.js b/js/dojo/dojox/av/widget/PlayButton.js
new file mode 100644
index 0000000..e7f09e0
--- /dev/null
+++ b/js/dojo/dojox/av/widget/PlayButton.js
@@ -0,0 +1,75 @@
+//>>built
+define("dojox/av/widget/PlayButton", ['dojo', 'dijit', 'dijit/_Widget', 'dijit/_TemplatedMixin'],function(dojo, dijit){
+
+dojo.declare("dojox.av.widget.PlayButton", [dijit._Widget, dijit._TemplatedMixin], {
+ // summary:
+ // A Play/Pause button widget to use with dojox.av.widget.Player
+ //
+ templateString: dojo.cache("dojox.av.widget","resources/PlayButton.html"),
+ //
+ postCreate: function(){
+ // summary:
+ // Intialize button.
+ this.showPlay();
+ },
+
+ setMedia: function(/* Object */med){
+ // summary:
+ // A common method to set the media in all Player widgets.
+ // May do connections and initializations.
+ //
+ this.media = med;
+ dojo.connect(this.media, "onEnd", this, "showPlay");
+ dojo.connect(this.media, "onStart", this, "showPause");
+ },
+
+ onClick: function(){
+ // summary:
+ // Fired on play or pause click.
+ //
+ if(this._mode=="play"){
+ this.onPlay();
+ }else{
+ this.onPause();
+ }
+ },
+
+ onPlay: function(){
+ // summary:
+ // Fired on play click.
+ //
+ if(this.media){
+ this.media.play();
+ }
+ this.showPause();
+ },
+ onPause: function(){
+ // summary:
+ // Fired on pause click.
+ //
+ if(this.media){
+ this.media.pause();
+ }
+ this.showPlay();
+ },
+ showPlay: function(){
+ // summary:
+ // Toggles the pause button invisible and the play
+ // button visible..
+ //
+ this._mode = "play";
+ dojo.removeClass(this.domNode, "Pause");
+ dojo.addClass(this.domNode, "Play");
+ },
+ showPause: function(){
+ // summary:
+ // Toggles the play button invisible and the pause
+ // button visible.
+ //
+ this._mode = "pause";
+ dojo.addClass(this.domNode, "Pause");
+ dojo.removeClass(this.domNode, "Play");
+ }
+});
+return dojox.av.widget.PlayButton;
+});
diff --git a/js/dojo/dojox/av/widget/Player.js b/js/dojo/dojox/av/widget/Player.js
new file mode 100644
index 0000000..a45bd8e
--- /dev/null
+++ b/js/dojo/dojox/av/widget/Player.js
@@ -0,0 +1,128 @@
+//>>built
+define("dojox/av/widget/Player", ['dojo', 'dijit', 'dijit/_Widget', 'dijit/_TemplatedMixin'],function(dojo, dijit){
+
+dojo.experimental("dojox.av.widget.Player");
+dojo.declare("dojox.av.widget.Player", [dijit._Widget, dijit._TemplatedMixin], {
+ // summary:
+ // A Media Player UI widget for all types of dojox.av and AIR media.
+ //
+ // description:
+ // Currently for markup only. All controls should reside as child
+ // nodes within the Player node. 'controlType' is used to determine
+ // the placement of the control. If no type or an unrecoginized type
+ // is used, it will be left-aligned in the same row as the volume.
+ // Note:
+ // Be sure to use 'controlType' as a node attribute. It is not a
+ // property of the widget.
+ //
+ // example:
+ // | <div dojoType="dojox.av.widget.Player" playerWidth="100%">
+ // | <div controlType="video" initialVolume=".1"
+ // | mediaUrl="video/Grog.flv" autoPlay="true"
+ // | isDebug="false" dojoType="dojox.av.FLVideo"></div>
+ // | <div controlType="play" dojoType="dojox.av.widget.PlayButton"></div>
+ // | <div controlType="volume" dojoType="dojox.av.widget.VolumeButton"></div>
+ // | <div controlType="progress" dojoType="dojox.av.widget.ProgressSlider"></div>
+ // | <div controlType="status" dojoType="dojox.av.widget.Status"></div>
+ // | </div>
+ //
+ // playerWidth: /* Number or String */
+ // Sets the width of the player (not the video size)
+ // Number will be converted to pixels
+ // String will be used literally. EX: "320px" or "100%"
+ playerWidth: "480px",
+ //
+ // TODO:
+ //playerHeight
+ //videoWidth: 320,
+ //videoHeight: 240,
+
+ widgetsInTemplate:true,
+ templateString: dojo.cache("dojox.av.widget","resources/Player.html"),
+
+ _fillContent: function(){
+ // summary
+ // Finding and collecting child nodes
+ if(!this.items && this.srcNodeRef){
+ this.items = [];
+ var nodes = dojo.query("*", this.srcNodeRef);
+ dojo.forEach(nodes, function(n){
+ this.items.push(n);
+ }, this);
+ }
+ },
+
+ postCreate: function(){
+ // summary:
+ // Do player styling, and place child widgets in the proper location.
+ //
+ dojo.style(this.domNode, "width", this.playerWidth+(dojo.isString(this.playerWidth)?"":"px"));
+
+ if(dojo.isString(this.playerWidth) && this.playerWidth.indexOf("%")){
+ dojo.connect(window, "resize", this, "onResize");
+ }
+ this.children = [];
+ var domNode;
+ dojo.forEach(this.items, function(n, i){
+ n.id = dijit.getUniqueId("player_control");
+ switch(dojo.attr(n, "controlType")){
+ case "play":
+ this.playContainer.appendChild(n); break;
+ case "volume" :
+ this.controlsBottom.appendChild(n); break;
+ case "status" :
+ this.statusContainer.appendChild(n); break;
+ case "progress":
+ case "slider":
+ this.progressContainer.appendChild(n); break;
+ case "video":
+ this.mediaNode = n;
+ this.playerScreen.appendChild(n); break;
+ default:
+
+ }
+ this.items[i] = n.id;
+ }, this);
+
+ },
+ startup: function(){
+ // summary:
+ // Fired when all children are ready. Set the media in
+ // all children with setMedia()
+ //
+ this.media = dijit.byId(this.mediaNode.id);
+ if(!dojo.isAIR){
+ dojo.style(this.media.domNode, "width", "100%");
+ dojo.style(this.media.domNode, "height", "100%");
+ }
+ dojo.forEach(this.items, function(id){
+ if(id !== this.mediaNode.id){
+ var child = dijit.byId(id);
+ this.children.push(child);
+ if(child){
+ child.setMedia(this.media, this);
+ }
+ }
+ }, this);
+ },
+
+ onResize: function(evt){
+ // summary:
+ // If a player size is a percentage, this will fire an onResize
+ // event for all children, passing the size of the player.
+ //
+ var dim = dojo.marginBox(this.domNode);
+ if(this.media && this.media.onResize !== null){
+ this.media.onResize(dim);
+ }
+ dojo.forEach(this.children, function(child){
+ if(child.onResize){
+ child.onResize(dim);
+ }
+ });
+ }
+
+});
+
+return dojox.av.widget.Player;
+});
diff --git a/js/dojo/dojox/av/widget/ProgressSlider.js b/js/dojo/dojox/av/widget/ProgressSlider.js
new file mode 100644
index 0000000..9b9e7dd
--- /dev/null
+++ b/js/dojo/dojox/av/widget/ProgressSlider.js
@@ -0,0 +1,134 @@
+//>>built
+define("dojox/av/widget/ProgressSlider", ['dojo', 'dijit', 'dijit/_Widget', 'dijit/_TemplatedMixin'],function(dojo, dijit){
+
+dojo.declare("dojox.av.widget.ProgressSlider", [dijit._Widget, dijit._TemplatedMixin], {
+ // summary:
+ // A custom slider widget to use with dojox.av.widget.Player.
+ // description:
+ // Displays the current playhead position of the media. Has two
+ // progress bars: one for playhead position, and one for download
+ // progress.
+ //
+ templateString: dojo.cache("dojox.av.widget","resources/ProgressSlider.html"),
+ postCreate: function(){
+ // summary:
+ // Initialize slider.
+ //
+ this.seeking = false;
+ this.handleWidth = dojo.marginBox(this.handle).w;
+ var dim = dojo.coords(this.domNode);
+ this.finalWidth = dim.w
+ this.width = dim.w-this.handleWidth;
+ this.x = dim.x;
+
+ dojo.setSelectable(this.domNode, false);
+ dojo.setSelectable(this.handle, false);
+ },
+ setMedia: function(/* Object */med, playerWidget){
+ // summary:
+ // A common method to set the media in all Player widgets.
+ // May do connections and initializations.
+ //
+ this.playerWidget = playerWidget;
+ this.media = med;
+ dojo.connect(this.media, "onMetaData", this, function(data){
+ if(data && data.duration){
+ this.duration = data.duration;
+ }
+ });
+ dojo.connect(this.media, "onEnd", this, function(){
+ dojo.disconnect(this.posCon);
+ this.setHandle(this.duration);
+ });
+ dojo.connect(this.media, "onStart", this, function(){
+ this.posCon = dojo.connect(this.media, "onPosition", this, "setHandle");
+ });
+
+ dojo.connect(this.media, "onDownloaded", this, function(percent){
+ this.setLoadedPosition(percent*.01);
+ this.width = this.finalWidth * .01 * percent;
+ });
+
+ },
+ onDrag: function(/* HTMLEvent */ evt){
+ // summary:
+ // Fired when the mouse is moved. Sets the slider.
+ //
+ var x = evt.clientX - this.x;
+ if(x<0) x = 0;
+ if(x>this.width-this.handleWidth) x=this.width-this.handleWidth;
+
+ var p = x/this.finalWidth;
+ this.media.seek( this.duration * p );
+ dojo.style(this.handle, "marginLeft", x+"px");
+ dojo.style(this.progressPosition, "width", x+"px");
+ },
+ startDrag: function(){
+ // summary:
+ // Fired onmousedown of the slider handle.
+ //
+ dojo.setSelectable(this.playerWidget.domNode, false);
+ this.seeking = true;
+ this.cmove = dojo.connect(dojo.doc, "mousemove", this, "onDrag");
+ this.cup = dojo.connect(dojo.doc, "mouseup", this, "endDrag");
+ },
+ endDrag: function(){
+ // summary:
+ // Fired on document.onmouseup.
+ //
+ dojo.setSelectable(this.playerWidget.domNode, true);
+ this.seeking = false;
+ if(this.cmove) dojo.disconnect(this.cmove);
+ if(this.cup) dojo.disconnect(this.cup);
+ this.handleOut();
+ },
+
+ setHandle: function(time){
+ // summary:
+ // Sets the slider handle (when it is not being dragged)
+ //
+ if(!this.seeking){
+ var w = this.width-this.handleWidth;
+ var p = time/this.duration;
+ var x = p*w;
+
+ dojo.style(this.handle, "marginLeft", x+"px");
+ dojo.style(this.progressPosition, "width", x+"px");
+ }
+ },
+
+ setLoadedPosition: function(decimal){
+ // summary:
+ // Sets the download progress bar to the percentage of how much
+ // the media has been downloaded.
+ dojo.style(this.progressLoaded, "width", (this.finalWidth*decimal)+"px");
+ },
+
+ handleOver: function(){
+ // summary:
+ // Highlights the slider handle on mouseover, and
+ // stays highlighted during drag.
+ //
+ dojo.addClass(this.handle, "over");
+ },
+ handleOut: function(){
+ // summary:
+ // Unhighlights handle onmouseover, or on endDrag.
+ //
+ if(!this.seeking){
+ dojo.removeClass(this.handle, "over");
+ }
+ },
+ onResize: function(playerDimensions){
+ // summary:
+ // Handles player resize. Need to recalculate the width of
+ // position an download bars.
+ var dim = dojo.coords(this.domNode);
+ this.finalWidth = dim.w;
+
+ }
+
+});
+
+return dojox.av.widget.ProgressSlider;
+});
diff --git a/js/dojo/dojox/av/widget/Status.js b/js/dojo/dojox/av/widget/Status.js
new file mode 100644
index 0000000..3ea8c96
--- /dev/null
+++ b/js/dojo/dojox/av/widget/Status.js
@@ -0,0 +1,115 @@
+//>>built
+define("dojox/av/widget/Status", ['dojo', 'dijit', 'dijit/_Widget', 'dijit/_TemplatedMixin'],function(dojo, dijit){
+
+dojo.declare("dojox.av.widget.Status", [dijit._Widget, dijit._TemplatedMixin], {
+ // summary:
+ // A Status widget to use with dojox.av.widget.Player
+ //
+ // description:
+ // Displays the name of the media file, and it's current status
+ // (playing, paused, buffering, etc.) in the middle. Displays
+ // the playhead time on the left and the duration on the right.
+ //
+ templateString: dojo.cache("dojox.av.widget","resources/Status.html"),
+
+ setMedia: function(/* Object */med){
+ // summary:
+ // A common method to set the media in all Player widgets.
+ // May do connections and initializations.
+ //
+ this.media = med;
+ dojo.connect(this.media, "onMetaData", this, function(data){
+ this.duration = data.duration;
+ this.durNode.innerHTML = this.toSeconds(this.duration);
+ });
+ dojo.connect(this.media, "onPosition", this, function(time){
+ this.timeNode.innerHTML = this.toSeconds(time);
+ });
+
+ var cons = ["onMetaData", "onPosition", "onStart", "onBuffer", "onPlay", "onPaused", "onStop", "onEnd", "onError", "onLoad"];
+ dojo.forEach(cons, function(c){
+ dojo.connect(this.media, c, this, c);
+ }, this);
+
+ },
+ onMetaData: function(data){
+ this.duration = data.duration;
+ this.durNode.innerHTML = this.toSeconds(this.duration);
+ if(this.media.title){
+ this.title = this.media.title;
+ }else{
+ var a = this.media.mediaUrl.split("/");
+ var b = a[a.length-1].split(".")[0];
+ this.title = b;
+ }
+ },
+ onBuffer: function(isBuffering){
+ this.isBuffering = isBuffering;
+ console.warn("status onBuffer", this.isBuffering);
+ if(this.isBuffering){
+ this.setStatus("buffering...");
+ }else{
+ this.setStatus("Playing");
+ }
+ },
+ onPosition:function(time){
+ //console.log("onPosition:", time)
+ // this.timeNode.innerHTML = this.toSeconds(time);
+ },
+ onStart: function(){
+ this.setStatus("Starting");
+ },
+ onPlay: function(){
+ this.setStatus("Playing");
+ },
+ onPaused: function(){
+ this.setStatus("Paused");
+ },
+ onStop: function(){
+ this.setStatus("Stopped");
+ },
+ onEnd: function(){
+ this.setStatus("Stopped");
+ },
+ onError: function(evt){
+ console.log("status error:", evt)
+ var msg = evt.info.code;
+ if(msg == "NetStream.Play.StreamNotFound"){
+ msg = "Stream Not Found"
+ }
+ this.setStatus("ERROR: "+ msg, true);
+ },
+ onLoad: function(){
+ this.setStatus("Loading...");
+ },
+
+ setStatus: function(str, isError){
+ if(isError){
+ dojo.addClass(this.titleNode, "statusError");
+ }else{
+ dojo.removeClass(this.titleNode, "statusError");
+ if(this.isBuffering){
+ str = "buffering...";
+ }
+ }
+ //console.log(this.titleNode, "title:",this.title, "str:",str)
+ this.titleNode.innerHTML = '<span class="statusTitle">'+this.title+'</span> <span class="statusInfo">'+str+'</span>';
+ },
+
+ toSeconds: function(time){
+ var ts = time.toString()
+
+ if(ts.indexOf(".")<0){
+ ts += ".00"
+ }else if(ts.length - ts.indexOf(".")==2){
+ ts+="0"
+ }else if(ts.length - ts.indexOf(".")>2){
+ ts = ts.substring(0, ts.indexOf(".")+3)
+ }
+ return ts;
+ }
+
+});
+
+return dojox.av.widget.Status;
+});
diff --git a/js/dojo/dojox/av/widget/VolumeButton.js b/js/dojo/dojox/av/widget/VolumeButton.js
new file mode 100644
index 0000000..a6ee77c
--- /dev/null
+++ b/js/dojo/dojox/av/widget/VolumeButton.js
@@ -0,0 +1,187 @@
+//>>built
+define("dojox/av/widget/VolumeButton", ['dojo', 'dijit', 'dijit/_Widget', 'dijit/_TemplatedMixin', 'dijit/form/Button'],function(dojo, dijit){
+
+dojo.declare("dojox.av.widget.VolumeButton", [dijit._Widget, dijit._TemplatedMixin], {
+ // summary:
+ // A volume widget to use with dojox.av.widget.Player
+ //
+ // description:
+ // Controls and displays the volume of the media. This widget
+ // opens a slider on click that is used to adjust the volume.
+ // The icon changes according to the volume level.
+ //
+ templateString: dojo.cache("dojox.av.widget","resources/VolumeButton.html"),
+ //
+ postCreate: function(){
+ // summary:
+ // Initialize the widget.
+ //
+ this.handleWidth = dojo.marginBox(this.handle).w;
+ this.width = dojo.marginBox(this.volumeSlider).w;
+ this.slotWidth = 100;
+ dojo.setSelectable(this.handle, false);
+ this.volumeSlider = this.domNode.removeChild(this.volumeSlider);
+ },
+ setMedia: function(/* Object */med){
+ // summary:
+ // A common method to set the media in all Player widgets.
+ // May do connections and initializations.
+ //
+ this.media = med;
+ this.updateIcon();
+ },
+ updateIcon: function(/*Float*/ vol){
+ // summary:
+ // Changes the icon on the button according to volume level.
+ //
+ vol = (vol===undefined) ? this.media.volume() : vol;
+ if(vol===0){
+ dojo.attr(this.domNode, "class", "Volume mute");
+ }else if(vol<.334){
+ dojo.attr(this.domNode, "class", "Volume low");
+ }else if(vol<.667){
+ dojo.attr(this.domNode, "class", "Volume med");
+ }else{
+ dojo.attr(this.domNode, "class", "Volume high");
+ }
+ },
+
+ onShowVolume: function(/*DOMEvent*/evt){
+ // summary:
+ // Shows the volume slider.
+ //
+ if(this.showing==undefined){
+ dojo.body().appendChild(this.volumeSlider);
+ this.showing = false;
+ }
+ if(!this.showing){
+
+ var TOPMARG = 2;
+ var LEFTMARG = 7;
+ var vol = this.media.volume();
+ var dim = this._getVolumeDim();
+ var hand = this._getHandleDim();
+ this.x = dim.x - this.width;
+
+
+
+ dojo.style(this.volumeSlider, "display", "");
+ dojo.style(this.volumeSlider, "top", dim.y+"px");
+ dojo.style(this.volumeSlider, "left", (this.x)+"px");
+
+ var x = (this.slotWidth * vol);
+
+ dojo.style(this.handle, "top", (TOPMARG+(hand.w/2))+"px");
+ dojo.style(this.handle, "left", (x+LEFTMARG+(hand.h/2))+"px");
+
+ this.showing = true;
+ //this.startDrag();
+
+ this.clickOff = dojo.connect(dojo.doc, "onmousedown", this, "onDocClick");
+ }else{
+ this.onHideVolume();
+ }
+ },
+ onDocClick: function(/*DOMEvent*/evt){
+ // summary:
+ // Fired on document.onmousedown. Checks if clicked inside
+ // of this widget or not.
+ //
+ if(!dojo.isDescendant(evt.target, this.domNode) && !dojo.isDescendant(evt.target, this.volumeSlider)){
+ this.onHideVolume();
+ }
+ },
+
+ onHideVolume: function(){
+ // summary:
+ // Hides volume slider.
+ //
+ this.endDrag();
+ dojo.style(this.volumeSlider, "display", "none");
+ this.showing = false;
+ },
+
+ onDrag: function(/*DOMEvent*/evt){
+ // summary:
+ // Fired on mousemove. Updates volume and position of
+ // slider handle.
+ var beg = this.handleWidth/2;
+ var end = beg + this.slotWidth
+ var x = evt.clientX - this.x;
+ if(x<beg) x = beg;
+ if(x>end) x=end;
+ dojo.style(this.handle, "left", (x)+"px");
+
+ var p = (x-beg)/(end-beg);
+ this.media.volume(p);
+ this.updateIcon(p);
+ },
+ startDrag: function(){
+ // summary:
+ // Fired on mousedown of the slider handle.
+ //
+ this.isDragging = true;
+ this.cmove = dojo.connect(dojo.doc, "mousemove", this, "onDrag");
+ this.cup = dojo.connect(dojo.doc, "mouseup", this, "endDrag");
+ },
+ endDrag: function(){
+ // summary:
+ // Fired on mouseup of the slider handle.
+ //
+ this.isDragging = false;
+ if(this.cmove) dojo.disconnect(this.cmove);
+ if(this.cup) dojo.disconnect(this.cup);
+ this.handleOut();
+ },
+
+ handleOver: function(){
+ // summary:
+ // Highlights the slider handle on mouseover, and
+ // stays highlighted during drag.
+ //
+ dojo.addClass(this.handle, "over");
+ },
+ handleOut: function(){
+ // summary:
+ // Unhighlights handle onmouseover, or on endDrag.
+ //
+ if(!this.isDragging){
+ dojo.removeClass(this.handle, "over");
+ }
+ },
+
+ _getVolumeDim: function(){
+ // summary:
+ // Gets dimensions of slider background node.
+ // Only uses dojo.coords once, unless the page
+ // or player is resized.
+ //
+ if(this._domCoords){
+ return this._domCoords;
+ }
+ this._domCoords = dojo.coords(this.domNode);
+ return this._domCoords;
+ },
+ _getHandleDim: function(){
+ // summary:
+ // Gets dimensions of slider handle.
+ // Only uses dojo.marginBox once.
+ if(this._handleCoords){
+ return this._handleCoords;
+ }
+ this._handleCoords = dojo.marginBox(this.handle);
+ return this._handleCoords;
+ },
+
+ onResize: function(/*Object*/playerDimensions){
+ // summary:
+ // Fired on player resize. Zeros dimensions
+ // so that it can be calculated again.
+ //
+ this.onHideVolume();
+ this._domCoords = null;
+ }
+});
+
+return dojox.av.widget.VolumeButton;
+});
diff --git a/js/dojo/dojox/av/widget/resources/PlayButton.html b/js/dojo/dojox/av/widget/resources/PlayButton.html
new file mode 100644
index 0000000..cd7c127
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/PlayButton.html
@@ -0,0 +1,3 @@
+<div class="PlayPauseToggle Pause" dojoAttachEvent="click:onClick">
+ <div class="icon"></div>
+</div> \ No newline at end of file
diff --git a/js/dojo/dojox/av/widget/resources/Player.css b/js/dojo/dojox/av/widget/resources/Player.css
new file mode 100644
index 0000000..3029e68
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/Player.css
@@ -0,0 +1,203 @@
+.playerContainer{
+ width:480px;
+ background:#76C8C4;
+ text-align:center;
+}
+.PlayerScreen{
+ background:#00FFFF;
+ width:320px;
+ height:240px;
+ margin-left:auto;
+ margin-right:auto;
+}
+.Controls{
+ height:85px;
+ background:#333333;
+ text-align:left;
+ width:100%;
+}
+.ControlsRight{
+ vertical-align:top;
+}
+.ControlsBottom{
+ vertical-align:bottom;
+}
+.StatusContainer{
+ width:100%;
+ height:100%;
+}
+.PlayContainer{
+ width:60px;
+ height:60px;
+}
+
+
+.Progress{
+ height:10px;
+}
+
+.Time, .Duration, .Status{
+ height:16px;
+ margin-top:0px;
+ color:#F5FFC8;
+ width:100%;
+}
+
+.Time{
+ padding-left:2px;
+}
+
+.Duration{
+ padding-right:2px;
+ text-align:right;
+}
+.StatusContainer{
+ padding:0;
+ border-collapse:collapse;
+}
+.Status{
+ height:20px;
+ background:#ff0000;
+ table-layout:fixed;
+}
+.Status.statusError .statusTitle, .Status.statusError .statusInfo{
+ color:#FF0000;
+}
+.Status .statusTitle{
+ font-weight:bold;
+ color:#A5B3E9;
+}
+.Status .statusInfo{
+ font-weight:normal;
+ color:#3770D6;
+}
+
+.Time, .Duration, .Status{
+ font-family:Verdana, Arial, Helvetica, sans-serif;
+ font-size:9px;
+ background:#000000;
+}
+
+.Time, .Duration{
+ width:60px;
+}
+
+.Volume{
+ width:30px;
+ height:30px;
+ float:right;
+ margin-right:2px;
+ margin-top:auto;
+ background-image:url(images/player_sprite.png);
+ background-repeat:no-repeat;
+ background-position:-1px -62px;
+ cursor:pointer;
+}
+.Volume:hover{
+ background-position:-33px -62px;
+}
+.PlayPauseToggle{
+ width:60px;
+ height:60px;
+ background-image:url(images/player_sprite.png);
+ background-repeat:no-repeat;
+ background-position:-1px -1px;
+ cursor:pointer;
+ vertical-align:middle;
+ line-height:60px;
+}
+.PlayPauseToggle:hover{
+ background-position:-63px -1px;
+ cursor:pointer;
+}
+.icon{
+ background-image:url(images/dojoPlayerIcons.png);
+ background-repeat:no-repeat;
+ width:22px;
+ height:22px;
+}
+
+.PlayPauseToggle .icon{
+ position:relative;
+ top:19px;
+ left:19px;
+ background-position:-1px -1px;
+}
+.PlayPauseToggle.Play .icon{
+ background-position:-1px -1px;
+}
+.PlayPauseToggle.Pause .icon{
+ background-position:-24px -1px;
+}
+
+
+
+.Progress{
+
+}
+.Progress, .ProgressLoaded, .ProgressPosition, .ProgressHandle{
+ height:10px;
+}
+.ProgressLoaded, .ProgressPosition, .ProgressHandle{
+ position:absolute;
+}
+.ProgressLoaded{
+background:url(images/progressLoadedBk.png) repeat-x;
+}
+.ProgressHandle{
+ background-image:url(images/sliderHandleSprite.png);
+ background-position:0px 0px;
+ width:15px;
+ margin-left:0px;
+ cursor:pointer;
+}
+.ProgressHandle.over{
+ background-position:-15px 0px;
+}
+.ProgressPosition{
+ background:url(images/progressPositionBk.png) repeat-x;
+ width:0px;
+}
+.VolumeSlider{
+ position:absolute;
+}
+.VolumeSliderBack{
+ width:128px;
+ height:30px;
+ background-image:url(images/player_sprite.png);
+ background-repeat:no-repeat;
+ background-position:-1px -95px;
+}
+.VolumeSliderHandle{
+ position:absolute;
+ width:12px;
+ height:14px;
+ background-image:url(images/player_sprite.png);
+ background-repeat:no-repeat;
+ background-position:-1px -140px;
+ cursor:pointer;
+}
+.VolumeSliderHandle.over{
+ background-position:-15px -138px;
+ cursor:pointer;
+}
+.Volume .icon{
+ background-position:-60px -43px;
+ width:18px;
+ height:16px;
+ position:relative;
+ top:7px;
+ left:7px;
+}
+.Volume.mute .icon{
+ background-position:-1px -43px;
+}
+.Volume.low .icon{
+ background-position:-20px -43px;
+}
+.Volume.med .icon{
+ background-position:-40px -43px;
+}
+.Volume.high .icon{
+ background-position:-60px -43px;
+} \ No newline at end of file
diff --git a/js/dojo/dojox/av/widget/resources/Player.html b/js/dojo/dojox/av/widget/resources/Player.html
new file mode 100644
index 0000000..6d464df
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/Player.html
@@ -0,0 +1,20 @@
+<div class="playerContainer">
+ <div class="PlayerScreen" dojoAttachPoint="playerScreen"></div>
+ <table class="Controls">
+ <tr>
+ <td colspan="2" dojoAttachPoint="progressContainer"></td>
+ </tr>
+ <tr>
+ <td class="PlayContainer" dojoAttachPoint="playContainer"></td>
+ <td class="ControlsRight">
+ <table class="StatusContainer">
+ <tr dojoAttachPoint="statusContainer">
+ </tr>
+ <tr>
+ <td colspan="3" class="ControlsBottom" dojoAttachPoint="controlsBottom"></td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+</div>
diff --git a/js/dojo/dojox/av/widget/resources/ProgressSlider.html b/js/dojo/dojox/av/widget/resources/ProgressSlider.html
new file mode 100644
index 0000000..2691e02
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/ProgressSlider.html
@@ -0,0 +1,6 @@
+<div class="Progress" dojoAttachEvent="mousedown:startDrag">
+
+ <div class="ProgressLoaded" dojoAttachPoint="progressLoaded"></div>
+ <div class="ProgressPosition" dojoAttachPoint="progressPosition"></div>
+ <div class="ProgressHandle" dojoAttachPoint="handle" dojoAttachEvent="mouseover:handleOver, mouseout:handleOut"></div>
+</div> \ No newline at end of file
diff --git a/js/dojo/dojox/av/widget/resources/Status.html b/js/dojo/dojox/av/widget/resources/Status.html
new file mode 100644
index 0000000..63e411b
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/Status.html
@@ -0,0 +1,7 @@
+<table class="Status">
+ <tr>
+ <td class="Time"><span dojoAttachPoint="timeNode">0.00</span></td>
+ <td class="Status"><div dojoAttachPoint="titleNode">Loading...</div></td>
+ <td class="Duration"><span dojoAttachPoint="durNode">0.00</span></td>
+ </tr>
+</table>
diff --git a/js/dojo/dojox/av/widget/resources/VolumeButton.html b/js/dojo/dojox/av/widget/resources/VolumeButton.html
new file mode 100644
index 0000000..f5d3eb9
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/VolumeButton.html
@@ -0,0 +1,7 @@
+<div class="Volume" dojoAttachEvent="mousedown:onShowVolume">
+ <div class="VolumeSlider" dojoAttachPoint="volumeSlider">
+ <div class="VolumeSliderBack" dojoAttachPoint="volumeSliderBack"></div>
+ <div class="VolumeSliderHandle" dojoAttachPoint="handle" dojoAttachEvent="mousedown:startDrag, mouseup:endDrag, mouseover:handleOver, mouseout:handleOut"></div>
+ </div>
+ <div class="icon"></div>
+</div> \ No newline at end of file
diff --git a/js/dojo/dojox/av/widget/resources/images/dojoPlayerIcons.png b/js/dojo/dojox/av/widget/resources/images/dojoPlayerIcons.png
new file mode 100644
index 0000000..ea3aaf9
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/images/dojoPlayerIcons.png
Binary files differ
diff --git a/js/dojo/dojox/av/widget/resources/images/playerIcons b/js/dojo/dojox/av/widget/resources/images/playerIcons
new file mode 100644
index 0000000..0a0ff8c
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/images/playerIcons
Binary files differ
diff --git a/js/dojo/dojox/av/widget/resources/images/player_sprite.png b/js/dojo/dojox/av/widget/resources/images/player_sprite.png
new file mode 100644
index 0000000..01f721c
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/images/player_sprite.png
Binary files differ
diff --git a/js/dojo/dojox/av/widget/resources/images/progressLoadedBk.png b/js/dojo/dojox/av/widget/resources/images/progressLoadedBk.png
new file mode 100644
index 0000000..b3bca11
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/images/progressLoadedBk.png
Binary files differ
diff --git a/js/dojo/dojox/av/widget/resources/images/progressPositionBk.png b/js/dojo/dojox/av/widget/resources/images/progressPositionBk.png
new file mode 100644
index 0000000..9cbae27
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/images/progressPositionBk.png
Binary files differ
diff --git a/js/dojo/dojox/av/widget/resources/images/sliderHandleNorm.png b/js/dojo/dojox/av/widget/resources/images/sliderHandleNorm.png
new file mode 100644
index 0000000..fda2e9f
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/images/sliderHandleNorm.png
Binary files differ
diff --git a/js/dojo/dojox/av/widget/resources/images/sliderHandleOver.png b/js/dojo/dojox/av/widget/resources/images/sliderHandleOver.png
new file mode 100644
index 0000000..b3bec9f
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/images/sliderHandleOver.png
Binary files differ
diff --git a/js/dojo/dojox/av/widget/resources/images/sliderHandleSprite.png b/js/dojo/dojox/av/widget/resources/images/sliderHandleSprite.png
new file mode 100644
index 0000000..fe639ff
--- /dev/null
+++ b/js/dojo/dojox/av/widget/resources/images/sliderHandleSprite.png
Binary files differ