From 5e69c790a4b3fa16c382b2c9208e506989e62cd3 Mon Sep 17 00:00:00 2001 From: Matthieu Lalonde Date: Fri, 9 Nov 2012 16:52:20 -0500 Subject: [PATCH] More audio player skeletton --- resources/css/app.css | 4 + resources/js/app.js | 20 +++- resources/js/modules/webaudio.js | 154 ++++++++++++++++++++++++- resources/js/views/player.js | 95 ++++++++++++--- resources/templates/player/layout.html | 2 +- 5 files changed, 254 insertions(+), 21 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index 36a5d0e..f80700b 100644 --- a/resources/css/app.css +++ b/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; +} \ No newline at end of file diff --git a/resources/js/app.js b/resources/js/app.js index c01c1c1..26d0174 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -166,22 +166,30 @@ _ that.Views.Main.setView("playlist", that.Views.Playlist); - that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar(event) { + 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(); }); - that.Views.Footer.on("toggle:random", function __fnAppEventTogglerRandom(event) { + that.Views.Footer.on("toggle:random", function __fnAppEventTogglerRandom (event) { // TODO:... }); - that.Views.Footer.on("toggle:repeat", function __fnAppEventTogglerRepeater(event) { + that.Views.Footer.on("toggle:repeat", function __fnAppEventTogglerRepeater (event) { // TODO:... }); that.Views.Footer.on("show:about", that.__showModalAbout); - that.Views.SideBar.on("add:playlist-item", function __fnAppEventPlaylistAddItem(event) { + that.Views.SideBar.on("add:playlist-item", function __fnAppEventPlaylistAddItem (event) { var listItem = that.servers.get(event.hostname).client.collections.databases[event.dbId].get("dmap_listing").get(event.item).attributes ; @@ -195,14 +203,14 @@ _ , order: new Date().toString() }); - that.playlist.on("add", function __fnAppSavePlaylistModel(model) { + that.playlist.on("add", function __fnAppSavePlaylistModel (model) { model.save(); }); that.playlist.add(listItem); }); - that.Views.App.$el.delegate("div.modal", "hidden", function __fnAppEventRemoveModals(event) { + that.Views.App.$el.delegate("div.modal", "hidden", function __fnAppEventRemoveModals (event) { $(event.target).remove(); }); diff --git a/resources/js/modules/webaudio.js b/resources/js/modules/webaudio.js index cb432e1..1371115 100644 --- a/resources/js/modules/webaudio.js +++ b/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; }); \ No newline at end of file diff --git a/resources/js/views/player.js b/resources/js/views/player.js index b0a0624..0dee3cb 100644 --- a/resources/js/views/player.js +++ b/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.buttonNext": "__buttonNext" - , "click div:first-child > a.buttonPlay": "__buttonPlayPause" + "click div:first-child > a.buttonPrev": + "__buttonPrevious" + , "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; } @@ -109,23 +154,42 @@ _ * PUBLIC **/ , setPlayIndex: function (index) { - var that = this + 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 + 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 () { diff --git a/resources/templates/player/layout.html b/resources/templates/player/layout.html index 0a5431f..c64eaea 100644 --- a/resources/templates/player/layout.html +++ b/resources/templates/player/layout.html @@ -12,6 +12,6 @@
- +
\ No newline at end of file