More audio player skeletton

resources/css/app.css

@@ -533,3 +533,7 @@ table tbody .itemplaying td:first-child span {
 table tbody .itempaused td:first-child span {
 	background-image: url('../img/playicon.png');
 }
+
+.disabled {
+	cursor: not-allowed;
+}

resources/js/app.js

@@ -166,6 +166,14 @@ _
 
 				that.Views.Main.setView("playlist", that.Views.Playlist);
 
+				that.View.Main.on("action:item", function __fnAppEventMainViewActionItem (event) {
+
+				});
+
+				that.View.Main.on("action:playorder", function __fnAppEventMainViewActionItem (event) {
+
+				});
+
 				that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar (event) {
 					that.Views.App.toggleSideBar();
 					that.Views.Main.resizeView();

resources/js/modules/webaudio.js

@@ -6,13 +6,165 @@
 /*jslint devel:true */
 define([
 	"underscore"
+	, "jquery"
+	, "toolbox"
+	, "backbone"
 ]
 , function (
 _
+, $
+, Toolbox
+, Backbone
 ) {
 	"use strict";
 
-	var WebAudio	= function() {};
+	var WebAudio	= Toolbox.Base.extend(_.extend({
+		_defaultOpts:	{
+			autoplay:		"autoplay"
+			, preload:		"auto"
+			, controls:		false
+			, loop:			false
+			, src:			""
+		}
+
+		, obj:			new Audio()
+
+		, $obj:			null
+
+		, constructor:	function () {
+			var that	= this
+			;
+
+			_.bindAll(this
+// Public
+				, "loadMedia"
+// Private
+				, "_bindAudio"
+// Events
+				, "__audioProgress"
+				, "__audioError"
+				, "__audioPause"
+				, "__audioPlay"
+				, "__audioTimeUpdate"
+				, "__audioLoadStart"
+				, "__audioCanPlay"
+				, "__audioEnded"
+			);
+
+			that.$obj	= $(that.obj);
+
+			that.obj.attributes	= _.extend({}, that.obj.attributes, that._defaultOpts);
+
+			return that;
+		}
+/**
+ * PUBLIC
+**/
+		, loadMedia:		function (uri) {
+			var that	= this
+			;
+
+			that.obj.stop();
+		}
+/**
+ * PRIVATE
+**/
+		, _bindAudio:		function () {
+			var that	= this
+			;
+
+			that.$obj.unbind();
+
+			that.$obj.on("loadstart", that.__audioLoadStart);
+
+			that.$obj.on("progress", that.__audioProgress);
+
+			//that.$obj.on("suspend", that.__audioSuspend);
+
+			//that.$obj.on("abort", that.__audioAbort);
+
+			that.$obj.on("error", that.__audioError);
+
+			//that.$obj.on("emptied", that.__audioEmptied);
+
+			//that.$obj.on("stalled", that.__audioStalled);
+			that.$obj.on("pause", that.__audioPause);
+
+			that.$obj.on("play", that.__audioPlay);
+
+			//that.$obj.on("loadedmetadata", that.__audioLoadedMetaData);
+
+			//that.$obj.on("loadeddata", that.__audioLoadedData);
+
+			//that.$obj.on("waiting", that.__audioWaiting);
+
+			//that.$obj.on("playing", that.__audioPlaying);
+
+			that.$obj.on("canplay", that.__audioCanPlay);
+
+			//that.$obj.on("canplaythrough", that.__audioCanPlayThrough);
+
+			//that.$obj.on("seeking", that.__audioSeeking);
+
+			//that.$obj.on("seeked", that.__audioSeeked);
+
+			that.$obj.on("timeupdate", that.__audioTimeUpdate);
+
+			that.$obj.on("ended", that.__audioEnded);
+
+			//that.$obj.on("ratechange", that.__audioRateChanged);
+
+			//that.$obj.on("durationchange", that.__audioDurationChange);
+
+			//that.$obj.on("volumechange", that.__audioVolumeChange);
+		}
+
+/**
+ * EVENTS
+**/
+		, __audioProgress:	function (event) {
+
+		}
+		, __audioError:		function (event) {
+
+		}
+
+		, __audioPause:		function (event) {
+			var that	= this
+			;
+
+		}
+
+		, __audioPlay:		function (event) {
+			var that	= this
+			;
+
+		}
+
+		, __audioTimeUpdate:		function (event) {
+			var that	= this
+			;
+
+		}
+
+		, __audioLoadStart:		function (event) {
+			var that	= this
+			;
+
+		}
+
+		, __audioCanPlay:		function (event) {
+			var that	= this
+			;
+
+		}
+
+		, __audioEnded:		function (event) {
+			var that	= this
+			;
+
+		}
+	}, Backbone.Events));
 
 	return WebAudio;
 });

resources/js/views/player.js

@@ -26,7 +26,28 @@ _
 ) {
 	"use strict";
 
-	var Player	= Backbone.View.extend({
+	if (!_.isFunction(Array.prototype.shuffle)) {
+		Array.prototype.shuffle = function() {
+			var len	= this.length
+			,	i	= len
+			;
+
+			if ( len === 0 ) {
+				return false;
+			}
+
+			while (i--) {
+				var p = parseInt(Math.random()*len, 10);
+				var t = this[i];
+				this[i] = this[p];
+				this[p] = t;
+			}
+		};
+	}
+
+	var
+
+	Player		= Backbone.View.extend({
 		elViewport:					null
 		, $elViewport:				null
 
@@ -46,19 +67,35 @@ _
 
 		, _stateAudio:				null
 
+		, _state:					null
+
+		, _states:				{
+			stopped:				0
+			, loading:				1
+			, playing:				2
+			, paused:				3
+		}
+
 		, events:				{
 			//"click #add-friend":  "showPrompt",
-			"click div:first-child > a.buttonPrev":								"__buttonPrevious"
+			"click div:first-child > a.buttonPrev":
-			, "click div:first-child > a.buttonNext":							"__buttonNext"
+									"__buttonPrevious"
-			, "click div:first-child > a.buttonPlay":							"__buttonPlayPause"
+			, "click div:first-child > a.buttonNext":
+									"__buttonNext"
+			, "click div:first-child > a.buttonPlay":
+									"__buttonPlayPause"
 			// Volume Down
-			, "click div:first-child > .playerVolumeWrapper > a:first-child":	"__buttonVolumeDown"
+			, "click div:first-child > .playerVolumeWrapper > a:first-child":
+									"__buttonVolumeDown"
 			// Volume Up
-			, "click div:first-child > .playerVolumeWrapper > a:last-child":	"__buttonVolumeUp"
+			, "click div:first-child > .playerVolumeWrapper > a:last-child":
+									"__buttonVolumeUp"
 			// Volume click
-			, "click div:first-child > .playerVolumeWrapper > input":			"__buttonVolumeClick"
+			, "click div:first-child > .playerVolumeWrapper > input":
+									"__buttonVolumeClick"
 			// Seek input
-			, "click div:last-child > .playerProgressWrapper > progress":		"__buttonSeek"
+			, "click div:last-child > .playerProgressWrapper > progress":
+									"__buttonSeek"
 		}
 
 		, initialize:				function (options) {
@@ -66,8 +103,12 @@ _
 			;
 
 			_.bindAll(this
+// Public
+				, "setPlayIndex"
 				, "setRandomState"
 				, "setRepeatState"
+				, "playItem"
+// Events
 				, "__buttonPlayPause"
 				, "__buttonNext"
 				, "__buttonPrevious"
@@ -75,7 +116,9 @@ _
 				, "__buttonVolumeDown"
 				, "__buttonVolumeClick"
 				, "__buttonSeek"
-				, "_createWebAudio"
+// Private
+				, "_waCreate"
+				, "_waBindEvents"
 				, "__waStateChanged"
 				, "_playerEnded"
 				, "_playerLoading"
@@ -102,6 +145,8 @@ _
 
 			that.$el.append(that.elViewport);
 
+			that._waCreate();
+
 			return that;
 		}
 
@@ -112,20 +157,39 @@ _
 			var that			= this
 			;
 
+			that._playIndex		= index;
+			that._playCursor	= 0;
+
+			if (that._stateRandom) {
+				that.setRandomState(that._stateRandom);
+			}
+
+			return that._playIndex;
 		}
 
 		, setRandomState:			function (random) {
 			var that					= this
 			;
 
+			if (random === true) {
+				that._playIndex.shuffle();
+			}
+
+			// TODO: Set cursor back to the item that was playing
+
+			return that._stateRandom	= random;
 		}
 
-		, setRepeatState:			function (random) {
+		, setRepeatState:			function (repeat) {
 			var that	= this
 			;
 
+			return that._stateRepeat	= repeat;
 		}
 
+		, playItem:					function (item) {
+
+		}
 /**
  * EVENTS
 **/
@@ -175,10 +239,15 @@ _
  * PRIVATE
 **/
 // Audio Player
-		, _createWebAudio:			function () {
+		, _waCreate:				function () {
 			var that	= this
 			;
 
+			return that.webAudio	= new WebAudio();
+		}
+
+		, _waBindEvents:			function () {
+
 		}
 
 		, __waStateChanged:			function () {

resources/templates/player/layout.html

@@ -12,6 +12,6 @@
 <form action="#" class="form-search controls">
 	<div class="input-prepend">
 		<button type="submit" tabindex="-1" class="btn"><i class="icon-search"></i></button>
-		<input type="text" tabindex="1" class="span3 search-query">
+		<input type="text" tabindex="1" class="span3 search-query" x-webkit-speech>
 	</div>
 </form>