localhots
/
oldhaven
1
0
Fork 0
Code Releases Activity

Huge player update. Closes #36, closes #33. #37 is almost done

This commit is contained in:
magnolia-fan 2011-04-13 01:19:53 +04:00
parent eb243dcd0e
commit 3a40da1dbe
10 changed files with 391 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/views/layouts/application.html.erb
View File

@ -13,28 +13,28 @@
<div class="inner-1"> <div class="inner-1">
<div id="player"> <div id="player">
<audio autoplay preload></audio> <audio autoplay preload></audio>
<div class="prev"><img src="/images/player/prev.svg" alt="prev" /></div> <div class="prev" title="Play Previous Track"><img src="/images/player/prev.svg" alt="prv" /></div>
<div class="play"><img src="/images/player/play.svg" alt="play" /></div> <div class="play" title="Play"><img src="/images/player/play.svg" alt="ply" /></div>
<div class="pause" style="display:none"><img src="/images/player/pause.svg" alt="pause" /></div> <div class="pause" title="Pause" style="display:none"><img src="/images/player/pause.svg" alt="pause" /></div>
<div class="next"><img src="/images/player/next.svg" alt="pause" /></div> <div class="next" title="Play Next Track"><img src="/images/player/next.svg" alt="pse" /></div>
<div class="time-played">0:00</div> <div class="time-played">0:00</div>
<div class="progress"> <div class="progress">
<div class="track-title">No track</div> <div class="track-title">No track</div>
<div class="progress-bar"> <div class="progress-bar">
<div class="progress-loaded"> <div class="progress-loaded">
<div class="progress-point"></div> <div title="Drag It Now!" class="progress-point"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="time-left">0:00</div> <div class="time-left">0:00</div>
<div title="Play Tracks In Random Order" class="shuffle"><img src="/images/player/shuffle.svg" alt="shu" /></div>
<div title="Repeat Playlist" class="repeat"><img src="/images/player/shuffle.svg" alt="rep" /></div>
<div title="Show/Hide Playlist" class="playlist"><img src="/images/player/playlist.svg" alt="pls" /></div>
</div> </div>
<div id="playlist"> <div id="playlist">
<div class="show-button"></div> <ul class="list"></ul>
<ul style="display:none;">
</ul>
</div> </div>
<%= yield %> <%= yield %>
<a href="" onclick="addToPlaylist('Artist', 'Track', 123, 123);return(false);">add</a>
</div> </div>
</div> </div>
</body> </body>

1
public/images/player/pause.svg
View File

@ -1,5 +1,4 @@
<?xml version="1.0" standalone="no"?> <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1000" height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg width="1000" height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="50" width="400" height="1000" style="fill:rgb(200,200,200);"/> <rect x="50" width="400" height="1000" style="fill:rgb(200,200,200);"/>
<rect x="600" width="400" height="1000" style="fill:rgb(200,200,200);"/> <rect x="600" width="400" height="1000" style="fill:rgb(200,200,200);"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 372 B

After

Width:  |  Height:  |  Size: 273 B

10
public/images/player/playlist.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" standalone="no"?>
<svg width="700" height="920" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" rx="50" ry="50" width="600" height="820" style="stroke:rgb(200,200,200);stroke-width:50;"/>
<rect x="150" y="150" width="400" height="50" style="fill:rgb(200,200,200);"/>
<rect x="150" y="265" width="400" height="50" style="fill:rgb(200,200,200);"/>
<rect x="150" y="380" width="400" height="50" style="fill:rgb(200,200,200);"/>
<rect x="150" y="495" width="400" height="50" style="fill:rgb(200,200,200);"/>
<rect x="150" y="610" width="400" height="50" style="fill:rgb(200,200,200);"/>
<rect x="150" y="725" width="400" height="50" style="fill:rgb(200,200,200);"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 718 B

41
public/images/player/shuffle.svg Normal file
View File

@ -0,0 +1,41 @@
<?xml version="1.0" standalone="no"?>
<svg width="700" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M100 400
L250 400
C300 400
325 375
350 325
L400 225
C425 175
450 150
500 150
L600 150
M100 150
L250 150
C300 150
325 175
350 225
L400 325
C425 375
450 400
500 400
L600 400
" style="stroke:rgb(200,200,200);stroke-width:70;" />
<path d="M295 300 L371 150" style="stroke:rgb(0,0,0);stroke-width:50;" />
<path d="M379 400 L455 250" style="stroke:rgb(0,0,0);stroke-width:50;" />
<polygon points="599,70 680,150 599,230" style="fill:rgb(200,200,200);"/>
<polygon points="599,320 680,400 599,480" style="fill:rgb(200,200,200);"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 757 B

15
public/javascripts/jquery-rand.min.js vendored Normal file
View File

@ -0,0 +1,15 @@
/*
* jQuery.fn.rand();
*
* Return a random, but defined numbers of elements from a jQuery Object.
* $('element').rand(); // returns one element from the jQuery Object.
* $('element').rand(4); // returns four elements from the jQuery Object.
*
* Version 0.8.5
* www.labs.skengdon.com/rand
* www.labs.skengdon.com/rand/js/rand.min.js
*
* And:
* http://phpjs.org/functions/array_rand:332
*/
;(function($){$.fn.rand=function(number){var array_rand=function(input,num_req){var indexes=[];var ticks=num_req||1;var checkDuplicate=function(input,value){var exist=false,index=0;while(index<input.length){if(input[index]===value){exist=true;break;};index++;};return exist;};while(true){var rand=Math.floor((Math.random()*input.length));if(indexes.length===ticks){break;};if(!checkDuplicate(indexes,rand)){indexes.push(rand);}};return((ticks==1)?indexes.join():indexes);};if(typeof number!=='number')var number=1;if(number>this.length)number=this.length;var numbers=array_rand(this,number);var $return=[];for(var i=0;i<number;i++){$return[i]=this.get(numbers[i]);};return $($return);};}(jQuery));

11
public/javascripts/jquery.jscrollpane.min.js vendored Normal file
View File

@ -0,0 +1,11 @@
/*
* jScrollPane - v2.0.0beta10 - 2011-04-04
* http://jscrollpane.kelvinluck.com/
*
* Copyright (c) 2010 Kelvin Luck
* Dual licensed under the MIT and GPL licenses.
*/
(function(b,a,c){b.fn.jScrollPane=function(f){function d(E,P){var aA,R=this,Z,al,w,an,U,aa,z,r,aB,aG,aw,j,J,i,k,ab,V,ar,Y,u,B,at,ag,ao,H,m,av,az,y,ax,aJ,g,M,ak=true,Q=true,aI=false,l=false,aq=E.clone(false,false).empty(),ad=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aJ=E.css("paddingTop")+" "+E.css("paddingRight")+" "+E.css("paddingBottom")+" "+E.css("paddingLeft");g=(parseInt(E.css("paddingLeft"),10)||0)+(parseInt(E.css("paddingRight"),10)||0);function au(aU){var aS,aT,aN,aP,aO,aL,aK,aR,aQ=false,aM=false;aA=aU;if(Z===c){aK=E.scrollTop();aR=E.scrollLeft();E.css({overflow:"hidden",padding:0});al=E.innerWidth()+g;w=E.innerHeight();E.width(al);Z=b('<div class="jspPane" />').css("padding",aJ).append(E.children());an=b('<div class="jspContainer" />').css({width:al+"px",height:w+"px"}).append(Z).appendTo(E)}else{E.css("width","");aQ=aA.stickToBottom&&L();aM=aA.stickToRight&&C();aL=E.innerWidth()+g!=al||E.outerHeight()!=w;if(aL){al=E.innerWidth()+g;w=E.innerHeight();an.css({width:al+"px",height:w+"px"})}if(!aL&&M==U&&Z.outerHeight()==aa){E.width(al);return}M=U;Z.css("width","");E.width(al);an.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}if(aU.contentWidth){U=aU.contentWidth}else{aS=Z.clone(false,false).css("position","absolute");aT=b('<div style="width:1px; position: relative;" />').append(aS);b("body").append(aT);U=Math.max(Z.outerWidth(),aS.outerWidth());aT.remove()}aa=Z.outerHeight();z=U/al;r=aa/w;aB=r>1;aG=z>1;if(!(aG||aB)){E.removeClass("jspScrollable");Z.css({top:0,width:an.width()-g});o();F();S();x();aj()}else{E.addClass("jspScrollable");aN=aA.maintainPosition&&(J||ab);if(aN){aP=aE();aO=aC()}aH();A();G();if(aN){O(aM?(U-al):aP,false);N(aQ?(aa-w):aO,false)}K();ah();ap();if(aA.enableKeyboardNavigation){T()}if(aA.clickOnTrack){q()}D();if(aA.hijackInternalLinks){n()}}if(aA.autoReinitialise&&!ax){ax=setInterval(function(){au(aA)},aA.autoReinitialiseDelay)}else{if(!aA.autoReinitialise&&ax){clearInterval(ax)}}aK&&E.scrollTop(0)&&N(aK,false);aR&&E.scrollLeft(0)&&O(aR,false);E.trigger("jsp-initialised",[aG||aB])}function aH(){if(aB){an.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));V=an.find(">.jspVerticalBar");ar=V.find(">.jspTrack");aw=ar.find(">.jspDrag");if(aA.showArrows){at=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aF(0,-1)).bind("click.jsp",aD);ag=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aF(0,1)).bind("click.jsp",aD);if(aA.arrowScrollOnHover){at.bind("mouseover.jsp",aF(0,-1,at));ag.bind("mouseover.jsp",aF(0,1,ag))}am(ar,aA.verticalArrowPositions,at,ag)}u=w;an.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){u-=b(this).outerHeight()});aw.hover(function(){aw.addClass("jspHover")},function(){aw.removeClass("jspHover")}).bind("mousedown.jsp",function(aK){b("html").bind("dragstart.jsp selectstart.jsp",aD);aw.addClass("jspActive");var s=aK.pageY-aw.position().top;b("html").bind("mousemove.jsp",function(aL){W(aL.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",ay);return false});p()}}function p(){ar.height(u+"px");J=0;Y=aA.verticalGutter+ar.outerWidth();Z.width(al-Y-g);try{if(V.position().left===0){Z.css("margin-left",Y+"px")}}catch(s){}}function A(){if(aG){an.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));ao=an.find(">.jspHorizontalBar");H=ao.find(">.jspTrack");i=H.find(">.jspDrag");if(aA.showArrows){az=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aF(-1,0)).bind("click.jsp",aD);
y=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aF(1,0)).bind("click.jsp",aD);if(aA.arrowScrollOnHover){az.bind("mouseover.jsp",aF(-1,0,az));y.bind("mouseover.jsp",aF(1,0,y))}am(H,aA.horizontalArrowPositions,az,y)}i.hover(function(){i.addClass("jspHover")},function(){i.removeClass("jspHover")}).bind("mousedown.jsp",function(aK){b("html").bind("dragstart.jsp selectstart.jsp",aD);i.addClass("jspActive");var s=aK.pageX-i.position().left;b("html").bind("mousemove.jsp",function(aL){X(aL.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",ay);return false});m=an.innerWidth();ai()}}function ai(){an.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){m-=b(this).outerWidth()});H.width(m+"px");ab=0}function G(){if(aG&&aB){var aK=H.outerHeight(),s=ar.outerWidth();u-=aK;b(ao).find(">.jspCap:visible,>.jspArrow").each(function(){m+=b(this).outerWidth()});m-=s;w-=s;al-=aK;H.parent().append(b('<div class="jspCorner" />').css("width",aK+"px"));p();ai()}if(aG){Z.width((an.outerWidth()-g)+"px")}aa=Z.outerHeight();r=aa/w;if(aG){av=Math.ceil(1/z*m);if(av>aA.horizontalDragMaxWidth){av=aA.horizontalDragMaxWidth}else{if(av<aA.horizontalDragMinWidth){av=aA.horizontalDragMinWidth}}i.width(av+"px");k=m-av;af(ab)}if(aB){B=Math.ceil(1/r*u);if(B>aA.verticalDragMaxHeight){B=aA.verticalDragMaxHeight}else{if(B<aA.verticalDragMinHeight){B=aA.verticalDragMinHeight}}aw.height(B+"px");j=u-B;ae(J)}}function am(aL,aN,aK,s){var aP="before",aM="after",aO;if(aN=="os"){aN=/Mac/.test(navigator.platform)?"after":"split"}if(aN==aP){aM=aN}else{if(aN==aM){aP=aN;aO=aK;aK=s;s=aO}}aL[aP](aK)[aM](s)}function aF(aK,s,aL){return function(){I(aK,s,this,aL);this.blur();return false}}function I(aN,aM,aQ,aP){aQ=b(aQ).addClass("jspActive");var aO,aL,aK=true,s=function(){if(aN!==0){R.scrollByX(aN*aA.arrowButtonSpeed)}if(aM!==0){R.scrollByY(aM*aA.arrowButtonSpeed)}aL=setTimeout(s,aK?aA.initialDelay:aA.arrowRepeatFreq);aK=false};s();aO=aP?"mouseout.jsp":"mouseup.jsp";aP=aP||b("html");aP.bind(aO,function(){aQ.removeClass("jspActive");aL&&clearTimeout(aL);aL=null;aP.unbind(aO)})}function q(){x();if(aB){ar.bind("mousedown.jsp",function(aP){if(aP.originalTarget===c||aP.originalTarget==aP.currentTarget){var aN=b(this),aQ=aN.offset(),aO=aP.pageY-aQ.top-J,aL,aK=true,s=function(){var aT=aN.offset(),aU=aP.pageY-aT.top-B/2,aR=w*aA.scrollPagePercent,aS=j*aR/(aa-w);if(aO<0){if(J-aS>aU){R.scrollByY(-aR)}else{W(aU)}}else{if(aO>0){if(J+aS<aU){R.scrollByY(aR)}else{W(aU)}}else{aM();return}}aL=setTimeout(s,aK?aA.initialDelay:aA.trackClickRepeatFreq);aK=false},aM=function(){aL&&clearTimeout(aL);aL=null;b(document).unbind("mouseup.jsp",aM)};s();b(document).bind("mouseup.jsp",aM);return false}})}if(aG){H.bind("mousedown.jsp",function(aP){if(aP.originalTarget===c||aP.originalTarget==aP.currentTarget){var aN=b(this),aQ=aN.offset(),aO=aP.pageX-aQ.left-ab,aL,aK=true,s=function(){var aT=aN.offset(),aU=aP.pageX-aT.left-av/2,aR=al*aA.scrollPagePercent,aS=k*aR/(U-al);if(aO<0){if(ab-aS>aU){R.scrollByX(-aR)}else{X(aU)}}else{if(aO>0){if(ab+aS<aU){R.scrollByX(aR)}else{X(aU)}}else{aM();return}}aL=setTimeout(s,aK?aA.initialDelay:aA.trackClickRepeatFreq);aK=false},aM=function(){aL&&clearTimeout(aL);aL=null;b(document).unbind("mouseup.jsp",aM)};s();b(document).bind("mouseup.jsp",aM);return false}})}}function x(){if(H){H.unbind("mousedown.jsp")}if(ar){ar.unbind("mousedown.jsp")}}function ay(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(aw){aw.removeClass("jspActive")}if(i){i.removeClass("jspActive")}}function W(s,aK){if(!aB){return}if(s<0){s=0}else{if(s>j){s=j}}if(aK===c){aK=aA.animateScroll}if(aK){R.animate(aw,"top",s,ae)}else{aw.css("top",s);ae(s)}}function ae(aK){if(aK===c){aK=aw.position().top}an.scrollTop(0);J=aK;var aN=J===0,aL=J==j,aM=aK/j,s=-aM*(aa-w);if(ak!=aN||aI!=aL){ak=aN;aI=aL;E.trigger("jsp-arrow-change",[ak,aI,Q,l])}v(aN,aL);Z.css("top",s);E.trigger("jsp-scroll-y",[-s,aN,aL]).trigger("scroll")}function X(aK,s){if(!aG){return
}if(aK<0){aK=0}else{if(aK>k){aK=k}}if(s===c){s=aA.animateScroll}if(s){R.animate(i,"left",aK,af)}else{i.css("left",aK);af(aK)}}function af(aK){if(aK===c){aK=i.position().left}an.scrollTop(0);ab=aK;var aN=ab===0,aM=ab==k,aL=aK/k,s=-aL*(U-al);if(Q!=aN||l!=aM){Q=aN;l=aM;E.trigger("jsp-arrow-change",[ak,aI,Q,l])}t(aN,aM);Z.css("left",s);E.trigger("jsp-scroll-x",[-s,aN,aM]).trigger("scroll")}function v(aK,s){if(aA.showArrows){at[aK?"addClass":"removeClass"]("jspDisabled");ag[s?"addClass":"removeClass"]("jspDisabled")}}function t(aK,s){if(aA.showArrows){az[aK?"addClass":"removeClass"]("jspDisabled");y[s?"addClass":"removeClass"]("jspDisabled")}}function N(s,aK){var aL=s/(aa-w);W(aL*j,aK)}function O(aK,s){var aL=aK/(U-al);X(aL*k,s)}function ac(aX,aS,aL){var aP,aM,aN,s=0,aW=0,aK,aR,aQ,aU,aT,aV;try{aP=b(aX)}catch(aO){return}aM=aP.outerHeight();aN=aP.outerWidth();an.scrollTop(0);an.scrollLeft(0);while(!aP.is(".jspPane")){s+=aP.position().top;aW+=aP.position().left;aP=aP.offsetParent();if(/^body|html$/i.test(aP[0].nodeName)){return}}aK=aC();aQ=aK+w;if(s<aK||aS){aT=s-aA.verticalGutter}else{if(s+aM>aQ){aT=s-w+aM+aA.verticalGutter}}if(aT){N(aT,aL)}aR=aE();aU=aR+al;if(aW<aR||aS){aV=aW-aA.horizontalGutter}else{if(aW+aN>aU){aV=aW-al+aN+aA.horizontalGutter}}if(aV){O(aV,aL)}}function aE(){return -Z.position().left}function aC(){return -Z.position().top}function L(){var s=aa-w;return(s>20)&&(s-aC()<10)}function C(){var s=U-al;return(s>20)&&(s-aE()<10)}function ah(){an.unbind(ad).bind(ad,function(aN,aO,aM,aK){var aL=ab,s=J;R.scrollBy(aM*aA.mouseWheelSpeed,-aK*aA.mouseWheelSpeed,false);return aL==ab&&s==J})}function o(){an.unbind(ad)}function aD(){return false}function K(){Z.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ac(s.target,false)})}function F(){Z.find(":input,a").unbind("focus.jsp")}function T(){var s,aK,aM=[];aG&&aM.push(ao[0]);aB&&aM.push(V[0]);Z.focus(function(){E.focus()});E.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aP){if(aP.target!==this&&!(aM.length&&b(aP.target).closest(aM).length)){return}var aO=ab,aN=J;switch(aP.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aP.keyCode;aL();break;case 35:N(aa-w);s=null;break;case 36:N(0);s=null;break}aK=aP.keyCode==s&&aO!=ab||aN!=J;return !aK}).bind("keypress.jsp",function(aN){if(aN.keyCode==s){aL()}return !aK});if(aA.hideFocus){E.css("outline","none");if("hideFocus" in an[0]){E.attr("hideFocus",true)}}else{E.css("outline","");if("hideFocus" in an[0]){E.attr("hideFocus",false)}}function aL(){var aO=ab,aN=J;switch(s){case 40:R.scrollByY(aA.keyboardSpeed,false);break;case 38:R.scrollByY(-aA.keyboardSpeed,false);break;case 34:case 32:R.scrollByY(w*aA.scrollPagePercent,false);break;case 33:R.scrollByY(-w*aA.scrollPagePercent,false);break;case 39:R.scrollByX(aA.keyboardSpeed,false);break;case 37:R.scrollByX(-aA.keyboardSpeed,false);break}aK=aO!=ab||aN!=J;return aK}}function S(){E.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function D(){if(location.hash&&location.hash.length>1){var aL,aK;try{aL=b(location.hash)}catch(s){return}if(aL.length&&Z.find(location.hash)){if(an.scrollTop()===0){aK=setInterval(function(){if(an.scrollTop()>0){ac(location.hash,true);b(document).scrollTop(an.position().top);clearInterval(aK)}},50)}else{ac(location.hash,true);b(document).scrollTop(an.position().top)}}}}function aj(){b("a.jspHijack").unbind("click.jsp-hijack").removeClass("jspHijack")}function n(){aj();b("a[href^=#]").addClass("jspHijack").bind("click.jsp-hijack",function(){var s=this.href.split("#"),aK;if(s.length>1){aK=s[1];if(aK.length>0&&Z.find("#"+aK).length>0){ac("#"+aK,true);return false}}})}function ap(){var aL,aK,aN,aM,aO,s=false;an.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aP){var aQ=aP.originalEvent.touches[0];aL=aE();aK=aC();aN=aQ.pageX;aM=aQ.pageY;aO=false;s=true}).bind("touchmove.jsp",function(aS){if(!s){return}var aR=aS.originalEvent.touches[0],aQ=ab,aP=J;
R.scrollTo(aL+aN-aR.pageX,aK+aM-aR.pageY);aO=aO||Math.abs(aN-aR.pageX)>5||Math.abs(aM-aR.pageY)>5;return aQ==ab&&aP==J}).bind("touchend.jsp",function(aP){s=false}).bind("click.jsp-touchclick",function(aP){if(aO){aO=false;return false}})}function h(){var s=aC(),aK=aE();E.removeClass("jspScrollable").unbind(".jsp");E.replaceWith(aq.append(Z.children()));aq.scrollTop(s);aq.scrollLeft(aK)}b.extend(R,{reinitialise:function(aK){aK=b.extend({},aA,aK);au(aK)},scrollToElement:function(aL,aK,s){ac(aL,aK,s)},scrollTo:function(aL,s,aK){O(aL,aK);N(s,aK)},scrollToX:function(aK,s){O(aK,s)},scrollToY:function(s,aK){N(s,aK)},scrollToPercentX:function(aK,s){O(aK*(U-al),s)},scrollToPercentY:function(aK,s){N(aK*(aa-w),s)},scrollBy:function(aK,s,aL){R.scrollByX(aK,aL);R.scrollByY(s,aL)},scrollByX:function(s,aL){var aK=aE()+s,aM=aK/(U-al);X(aM*k,aL)},scrollByY:function(s,aL){var aK=aC()+s,aM=aK/(aa-w);W(aM*j,aL)},positionDragX:function(s,aK){X(s,aK)},positionDragY:function(aK,s){X(aK,s)},animate:function(aK,aN,s,aM){var aL={};aL[aN]=s;aK.animate(aL,{duration:aA.animateDuration,ease:aA.animateEase,queue:false,step:aM})},getContentPositionX:function(){return aE()},getContentPositionY:function(){return aC()},getContentWidth:function(){return U},getContentHeight:function(){return aa},getPercentScrolledX:function(){return aE()/(U-al)},getPercentScrolledY:function(){return aC()/(aa-w)},getIsScrollableH:function(){return aG},getIsScrollableV:function(){return aB},getContentPane:function(){return Z},scrollToBottom:function(s){W(j,s)},hijackInternalLinks:function(){n()},destroy:function(){h()}});au(P)}f=b.extend({},b.fn.jScrollPane.defaults,f);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){f[this]=f[this]||f.speed});var e;this.each(function(){var g=b(this),h=g.data("jsp");if(h){h.reinitialise(f)}else{h=new d(g,f);g.data("jsp",h)}e=e?e.add(g):g});return e};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);

78
public/javascripts/jquery.mousewheel.js Normal file
View File

@ -0,0 +1,78 @@
/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.4
*
* Requires: 1.2.2+
*/
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
if ( event.detail ) { delta = -event.detail/3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return $.event.handle.apply(this, args);
}
})(jQuery);

72
public/javascripts/player.js
View File

@ -1,6 +1,17 @@
var audio; var audio;
var utid; var utid;
$(function(){ $(function(){
$.extend($.fn.disableTextSelect = function() {
return this.each(function(){
if ($.browser.mozilla) {//Firefox
$(this).css('MozUserSelect','none');
} else if ($.browser.msie) {//IE
$(this).bind('selectstart',function(){return false;});
} else {//Opera, etc.
$(this).mousedown(function(){return false;});
}
});
});
audio = document.getElementsByTagName('audio')[0]; audio = document.getElementsByTagName('audio')[0];
$('#player .play').click(function(){ $('#player .play').click(function(){
if (! audio.src) return; if (! audio.src) return;
@ -8,14 +19,13 @@ $(function(){
utid = window.setTimeout(updatePlayer, 100); utid = window.setTimeout(updatePlayer, 100);
$('#player .pause').show(); $('#player .pause').show();
$('#player .play').hide(); $('#player .play').hide();
}) }).disableTextSelect();
$('#player .pause').click(function(){ $('#player .pause').click(function(){
audio.pause(); audio.pause();
clearTimeout(utid); clearTimeout(utid);
$('#player .pause').hide(); $('#player .pause').hide();
$('#player .play').show(); $('#player .play').show();
}) }).disableTextSelect();
$('.tracks .play').click(function(){ $('.tracks .play').click(function(){
addToPlaylist( addToPlaylist(
$('h1.artist').html(), $('h1.artist').html(),
@ -24,9 +34,20 @@ $(function(){
$(this).parent().attr('id') $(this).parent().attr('id')
); );
}) })
$('#playlist .show-button').click(function(){ $('#player .prev').click(function(){
$('#playlist ul').toggle(); playPrev();
}).disableTextSelect();
$('#player .next').click(function(){
playNext();
}).disableTextSelect();
$('#player .shuffle, #player .repeat').click(function(){
$(this).toggleClass('on');
}).disableTextSelect();
$('#player .playlist').click(function(){
$('#playlist').toggle();
//$('#playlist').data('jsp').reinitialise();
}) })
$('#playlist').hide();
}) })
function updatePlayer() { function updatePlayer() {
duration = audio.duration; duration = audio.duration;
@ -36,10 +57,10 @@ function updatePlayer() {
} }
loaded = 0; loaded = 0;
if ((audio.buffered != undefined) && (audio.buffered.length != 0)) { if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
loaded = Math.round((audio.buffered.end(0) / audio.duration) * 730); loaded = Math.round((audio.buffered.end(0) / audio.duration) * 390);
$('#player .time-played').html(formatTime(cur_time)); $('#player .time-played').html(formatTime(cur_time));
$('#player .time-left').html(formatTime(duration - cur_time)); $('#player .time-left').html(formatTime(duration - cur_time));
progress = Math.round((cur_time / duration) * 730); progress = Math.round((cur_time / duration) * 390);
$('#player .progress-loaded').css('width', loaded +'px') $('#player .progress-loaded').css('width', loaded +'px')
$('#player .progress-point').css('margin-left', progress +'px') $('#player .progress-point').css('margin-left', progress +'px')
} }
@ -58,25 +79,46 @@ function playTrack(artist, track, id) {
$('#player .time-left').html('0:00'); $('#player .time-left').html('0:00');
$('#player .progress-loaded').css('width', 0 +'px') $('#player .progress-loaded').css('width', 0 +'px')
$('#player .progress-point').css('margin-left', 0 +'px') $('#player .progress-point').css('margin-left', 0 +'px')
$('#playlist li').removeClass('now-playing');
$('#playlist li[data-id="'+ id +'"]').addClass('now-playing');
$('#player .play').trigger('click'); $('#player .play').trigger('click');
} }
function playNext() { function playPrev() {
$('#playlist ul li.now-playing').next().trigger('click'); if ($('#playlist ul.list li').length == 0) return false;
if ($('#playlist ul.list li.now-playing').prev().length == 0) {
$('#playlist ul.list li:last').dblclick();
} else {
$('#playlist ul.list li.now-playing').prev().dblclick();
}
}
function playNext(auto) {
if ($('#playlist ul.list li').length == 0) return false;
if ($('#player .shuffle').hasClass('on')) {
$('#playlist ul.list li').rand().dblclick();
}
if ($('#playlist ul.list li.now-playing').next().length == 0) {
$('#playlist ul.list li:first').dblclick();
} else {
$('#playlist ul.list li.now-playing').next().dblclick();
}
} }
function addToPlaylist(artist, track, length, id) { function addToPlaylist(artist, track, length, id) {
$('#playlist ul').append($( $('#playlist ul.list').append($(
'<li data-id="'+ id +'">'+ '<li data-id="'+ id +'">'+
'<span class="artist">'+ artist +'</span> &mdash; '+ '<span class="artist">'+ artist +'</span> &mdash; '+
'<span class="track">'+ track +'</span>'+ '<span class="track">'+ track +'</span>'+
'<span class="length" data-seconds="'+ length +'">'+ formatTime(length) +'</span>'+ '<span class="length" data-seconds="'+ length +'">'+ formatTime(length) +'</span>'+
'</li>' '</li>'
)); ));
$('#playlist ul li[data-id="'+ id +'"]').click(function(){ $('#playlist ul.list li').disableTextSelect();
$('#playlist ul.list li[data-id="'+ id +'"]').dblclick(function(){
playTrack(artist, track, id); playTrack(artist, track, id);
$('#playlist li').removeClass('now-playing');
$(this).addClass('now-playing');
}) })
if ($('#playlist ul li').length == 1) { if ($('#playlist ul.list li').length == 1) {
playTrack(artist, track, id); $('#playlist ul.list li:first').dblclick();
} }
if ($('#playlist ul.list li').length > 6) {
$('#playlist').jScrollPane();
}
} }

113
public/stylesheets/jquery.jscrollpane.css Normal file
View File

@ -0,0 +1,113 @@
/*
* CSS Styles that are needed by jScrollPane for it to operate correctly.
*
* Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
* may not operate correctly without them.
*/
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #111;
position: relative;
}
.jspDrag
{
background: #555;
position: relative;
top: 0;
left: 0;
cursor: default;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}

81
public/stylesheets/player.css
View File

@ -1,10 +1,10 @@
#player { #player {
position: fixed; position: fixed;
width: 1000px; width: 750px;
height: 50px; height: 50px;
left: 50%; left: 50%;
top: 0; top: 0;
margin-left: -500px; margin-left: -375px;
background-color: #000; background-color: #000;
font-size: 12px; font-size: 12px;
} }
@ -50,7 +50,7 @@
margin-left: 20px; margin-left: 20px;
} }
#player .next { #player .next {
margin-right: 20px; margin-right: 6px;
} }
#player .time-played, #player .time-left { #player .time-played, #player .time-left {
float: left; float: left;
@ -65,11 +65,11 @@
float: left; float: left;
margin-top: 25px; margin-top: 25px;
height: 25px; height: 25px;
width: 740px; width: 400px;
} }
#player .track-title { #player .track-title {
float: left; float: left;
width: 730px; width: 390px;
height: 25px; height: 25px;
margin-left: 5px; margin-left: 5px;
margin-top: -25px; margin-top: -25px;
@ -80,7 +80,7 @@
float: left; float: left;
margin: 11px 5px; margin: 11px 5px;
background-color: #013; background-color: #013;
width: 730px; width: 390px;
height: 3px; height: 3px;
} }
#player .progress-loaded { #player .progress-loaded {
@ -100,41 +100,74 @@
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
} }
#player .shuffle, #player .repeat, #player .playlist {
float: left;
cursor: pointer;
}
#player .shuffle {
margin: 17px 0 0 0;
}
#player .shuffle img {
width: 20px;
}
#player .repeat {
margin: 17px 0 0 15px;
}
#player .repeat img {
width: 20px;
}
#player .playlist {
margin: 12px 0 0 15px;
}
#player .playlist img {
width: 20px;
}
#player .shuffle, #player .repeat {
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
-webkit-opacity: 0.5;
filter:alpha(opacity=50);
}
#player .shuffle.on, #player .repeat.on {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
filter:alpha(opacity=100);
}
#playlist { #playlist {
position: fixed; position: fixed;
top: 50px; top: 50px;
left: 50%; left: 50%;
width: 1000px; width: 750px;
margin-left: -500px; margin-left: -375px;
background-color: #000; background-color: #000;
opacity: 60; opacity: 0.9;
-moz-opacity: 60; -moz-opacity: 0.9;
-khtml-opacity: 60; -khtml-opacity: 0.9;
-webkit-opacity: 60; -webkit-opacity: 0.9;
} filter:alpha(opacity=90);
#playlist .show-button { overflow-y: auto;
width: 100%; max-height: 10em;
height: 10px;
background-color: #222;
cursor: pointer;
} }
#playlist ul { #playlist ul {
margin: 0.2em 0.3em; margin: 0.2em 0.3em;
padding: 0; padding: 0;
max-height: 10em; position: relative;
overflow-y: scroll;
} }
#playlist ul li { #playlist ul li {
margin: 0; margin: 0;
padding: 0.2em 0; padding: 0.4em 0;
display: block; display: block;
width: 100%; width: 100%;
font-size: 0.8em; font-size: 0.75em;
color: #FFF; color: #FFF;
} }
#playlist ul li:hover { #playlist ul li:hover {
background-color: #222; background-color: #050505;
cursor: pointer; cursor: default;
} }
#playlist ul li.now-playing { #playlist ul li.now-playing {
background-color: #013; background-color: #013;