Restored most keyboard shortcuts from Subsonic

Signed-off-by: François-Xavier Thomas <fx.thomas@gmail.com>

libresonic-main/src/main/webapp/WEB-INF/jsp/head.jsp

@@ -10,3 +10,31 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic" type="text/css"/>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,300italic,500italic,700,700italic,100,100italic" type="text/css"/>
 <title>Libresonic</title>
+
+<script type="text/javascript" src="<c:url value="/script/mousetrap-1.6.0.js"/>"></script>
+<script type="text/javascript">
+
+    Mousetrap.bind('space', function() { parent.frames.playQueue.onToggleStartStop(); return false; });
+    Mousetrap.bind('left',  function() { parent.frames.playQueue.onPrevious(); });
+    Mousetrap.bind('right', function() { parent.frames.playQueue.onNext(); });
+    Mousetrap.bind('*',     function() { parent.frames.playQueue.onStarCurrent(); });
+    Mousetrap.bind('plus',  function() { parent.frames.playQueue.onGainAdd(+5); });
+    Mousetrap.bind('-',     function() { parent.frames.playQueue.onGainAdd(-5); });
+    Mousetrap.bind('q',     function() { parent.frames.playQueue.onTogglePlayQueue(); });
+
+    Mousetrap.bind('/',     function() { parent.frames.upper.$("#query").focus(); });
+    Mousetrap.bind('m',     function() { parent.frames.upper.toggleLeftFrameVisible(); });
+
+    Mousetrap.bind('g h', function() { parent.frames.main.location.href = "home.view?"; });
+    Mousetrap.bind('g p', function() { parent.frames.main.location.href = "playlists.view?"; });
+    Mousetrap.bind('g o', function() { parent.frames.main.location.href = "podcastChannels.view?"; });
+    Mousetrap.bind('g s', function() { parent.frames.main.location.href = "settings.view?"; });
+    Mousetrap.bind('g t', function() { parent.frames.main.location.href = "starred.view?"; });
+    Mousetrap.bind('g r', function() { parent.frames.main.location.href = "more.view?"; });
+    Mousetrap.bind('g a', function() { parent.frames.main.location.href = "help.view?"; });
+    Mousetrap.bind('?',   function() { parent.frames.main.location.href = "more.view#shortcuts"; });
+
+    // Mousetrap.bind('shift+left', function() { getPlayerWindow().keyboardShortcut("seekBackward") });
+    // Mousetrap.bind('shift+right', function() { getPlayerWindow().keyboardShortcut("seekForward") });
+
+</script>

libresonic-main/src/main/webapp/WEB-INF/jsp/playQueue.jsp

@@ -37,6 +37,7 @@
     var songs = null;
     var currentStreamUrl = null;
     var repeatEnabled = false;
+    var isVisible = ${model.autoHidePlayQueue ? 'false' : 'true'};
     var CastPlayer = new CastPlayer();
     var ignore = false;
 
@@ -86,17 +87,30 @@
         getPlayQueue();
     }
 
-    function initAutoHide() {
+    function onHidePlayQueue() {
-        $(window).mouseleave(function (event) {
-            if (event.clientY < 30) {
       setFrameHeight(50);
+      isVisible = false;
     }
-        });
 
-        $(window).mouseenter(function () {
+    function onShowPlayQueue() {
       var height = $("body").height() + 25;
       height = Math.min(height, window.top.innerHeight * 0.8);
       setFrameHeight(height);
+      isVisible = true;
+    }
+
+    function onTogglePlayQueue() {
+      if (isVisible) onHidePlayQueue();
+      else onShowPlayQueue();
+    }
+
+    function initAutoHide() {
+        $(window).mouseleave(function (event) {
+            if (event.clientY < 30) onHidePlayQueue();
+        });
+
+        $(window).mouseenter(function () {
+            onShowPlayQueue();
         });
     }
 
@@ -155,12 +169,56 @@
             playQueueService.clear(playQueueCallback);
         }
     }
+
+    /**
+     * Start playing from the current playlist
+     */
     function onStart() {
+        if (CastPlayer.castSession) {
+            CastPlayer.playCast();
+        } else if (jwplayer()) {
+            if (jwplayer().getState() == "IDLE") {
+                skip(0);
+            } else if (jwplayer().getState() == "PAUSED") {
+                jwplayer().play(true);
+            }
+        } else {
             playQueueService.start(playQueueCallback);
         }
+    }
+
+    /**
+     * Pause playing
+     */
     function onStop() {
+        if (CastPlayer.castSession) {
+            CastPlayer.pauseCast();
+        } else if (jwplayer()) {
+            jwplayer().pause(true);
+        } else {
             playQueueService.stop(playQueueCallback);
         }
+    }
+
+    /**
+     * Toggle play/pause
+     *
+     * FIXME: Only works for the Web player for now
+     */
+    function onToggleStartStop() {
+        var playing = false;
+        if (CastPlayer.castSession) {
+            playing = CastPlayer.mediaSession && CastPlayer.mediaSession.playerState == chrome.cast.media.PlayerState.PLAYING;
+        } else if (jwplayer()) {
+            playing = jwplayer().getState() == "PLAYING";
+        } else {
+            // FIXME for playQueueService
+        }
+
+        if (playing) onStop();
+        else onStart();
+    }
+
     function onGain(gain) {
         playQueueService.setGain(gain);
     }
@@ -172,6 +230,24 @@
         var value = parseInt($("#castVolume").slider("option", "value"));
         CastPlayer.setCastVolume(value / 100, false);
     }
+
+    /**
+     * Increase or decrease volume by a certain amount
+     *
+     * @param amount to add or remove from the current volume
+     */
+    function onGainAdd(gain) {
+        if (CastPlayer.castSession) {
+            var volume = parseInt($("#castVolume").slider("option", "value")) + gain;
+            $("#castVolume").slider("option", "value", volume);
+        } else if (jwplayer()) {
+            jwplayer().setVolume(jwplayer().getVolume() + gain);
+        } else {
+            var value = parseInt($("#jukeboxVolume").slider("option", "value"));
+            $("#jukeboxVolume").slider("option", "value", volume);
+        }
+    }
+
     function onSkip(index) {
     <c:choose>
     <c:when test="${model.player.web}">
@@ -188,10 +264,10 @@
         if (wrap) {
             index = index % songs.length;
         }
-        skip(index);
+        onSkip(index);
     }
     function onPrevious() {
-        skip(parseInt(getCurrentSongIndex()) - 1);
+        onSkip(parseInt(getCurrentSongIndex()) - 1);
     }
     function onPlay(id) {
         playQueueService.play(id, playQueueCallback);
@@ -235,6 +311,9 @@
     function onStar(index) {
         playQueueService.toggleStar(index, playQueueCallback);
     }
+    function onStarCurrent() {
+        onStar(getCurrentSongIndex());
+    }
     function onRemove(index) {
         playQueueService.remove(index, playQueueCallback);
     }

libresonic-main/src/main/webapp/WEB-INF/jsp/top.jsp

@@ -10,6 +10,7 @@
     <script type="text/javascript">
         var previousQuery = "";
         var instantSearchTimeout;
+        var showSideBar = ${model.showSideBar ? 'true' : 'false'};
 
         function triggerInstantSearch() {
             if (instantSearchTimeout) {
@@ -31,6 +32,7 @@
             $("#hide-left-frame").show();
             toggleLeftFrame(230);
             multiService.setShowSideBar(true);
+            showSideBar = true;
         }
 
         function hideLeftFrame() {
@@ -38,6 +40,12 @@
             $("#show-left-frame").show();
             toggleLeftFrame(0);
             multiService.setShowSideBar(false);
+            showSideBar = false;
+        }
+
+        function toggleLeftFrameVisible() {
+            if (showSideBar) hideLeftFrame();
+            else showLeftFrame();
         }
 
         function toggleLeftFrame(width) {

libresonic-main/src/main/webapp/script/mousetrap-1.6.0.js

@@ -0,0 +1,11 @@
+/* mousetrap v1.6.0 craig.is/killing/mice */
+(function(r,t,g){function u(a,b,h){a.addEventListener?a.addEventListener(b,h,!1):a.attachEvent("on"+b,h)}function y(a){if("keypress"==a.type){var b=String.fromCharCode(a.which);a.shiftKey||(b=b.toLowerCase());return b}return k[a.which]?k[a.which]:p[a.which]?p[a.which]:String.fromCharCode(a.which).toLowerCase()}function D(a){var b=[];a.shiftKey&&b.push("shift");a.altKey&&b.push("alt");a.ctrlKey&&b.push("ctrl");a.metaKey&&b.push("meta");return b}function v(a){return"shift"==a||"ctrl"==a||"alt"==a||
+"meta"==a}function z(a,b){var h,c,e,g=[];h=a;"+"===h?h=["+"]:(h=h.replace(/\+{2}/g,"+plus"),h=h.split("+"));for(e=0;e<h.length;++e)c=h[e],A[c]&&(c=A[c]),b&&"keypress"!=b&&B[c]&&(c=B[c],g.push("shift")),v(c)&&g.push(c);h=c;e=b;if(!e){if(!n){n={};for(var l in k)95<l&&112>l||k.hasOwnProperty(l)&&(n[k[l]]=l)}e=n[h]?"keydown":"keypress"}"keypress"==e&&g.length&&(e="keydown");return{key:c,modifiers:g,action:e}}function C(a,b){return null===a||a===t?!1:a===b?!0:C(a.parentNode,b)}function c(a){function b(a){a=
+a||{};var b=!1,m;for(m in n)a[m]?b=!0:n[m]=0;b||(w=!1)}function h(a,b,m,f,c,h){var g,e,k=[],l=m.type;if(!d._callbacks[a])return[];"keyup"==l&&v(a)&&(b=[a]);for(g=0;g<d._callbacks[a].length;++g)if(e=d._callbacks[a][g],(f||!e.seq||n[e.seq]==e.level)&&l==e.action){var q;(q="keypress"==l&&!m.metaKey&&!m.ctrlKey)||(q=e.modifiers,q=b.sort().join(",")===q.sort().join(","));q&&(q=f&&e.seq==f&&e.level==h,(!f&&e.combo==c||q)&&d._callbacks[a].splice(g,1),k.push(e))}return k}function g(a,b,m,f){d.stopCallback(b,
+b.target||b.srcElement,m,f)||!1!==a(b,m)||(b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopPropagation?b.stopPropagation():b.cancelBubble=!0)}function e(a){"number"!==typeof a.which&&(a.which=a.keyCode);var b=y(a);b&&("keyup"==a.type&&x===b?x=!1:d.handleKey(b,D(a),a))}function k(a,c,m,f){function e(c){return function(){w=c;++n[a];clearTimeout(r);r=setTimeout(b,1E3)}}function h(c){g(m,c,a);"keyup"!==f&&(x=y(c));setTimeout(b,10)}for(var d=n[a]=0;d<c.length;++d){var p=d+1===c.length?h:e(f||
+z(c[d+1]).action);l(c[d],p,f,a,d)}}function l(a,b,c,f,e){d._directMap[a+":"+c]=b;a=a.replace(/\s+/g," ");var g=a.split(" ");1<g.length?k(a,g,b,c):(c=z(a,c),d._callbacks[c.key]=d._callbacks[c.key]||[],h(c.key,c.modifiers,{type:c.action},f,a,e),d._callbacks[c.key][f?"unshift":"push"]({callback:b,modifiers:c.modifiers,action:c.action,seq:f,level:e,combo:a}))}var d=this;a=a||t;if(!(d instanceof c))return new c(a);d.target=a;d._callbacks={};d._directMap={};var n={},r,x=!1,p=!1,w=!1;d._handleKey=function(a,
+c,e){var f=h(a,c,e),d;c={};var k=0,l=!1;for(d=0;d<f.length;++d)f[d].seq&&(k=Math.max(k,f[d].level));for(d=0;d<f.length;++d)f[d].seq?f[d].level==k&&(l=!0,c[f[d].seq]=1,g(f[d].callback,e,f[d].combo,f[d].seq)):l||g(f[d].callback,e,f[d].combo);f="keypress"==e.type&&p;e.type!=w||v(a)||f||b(c);p=l&&"keydown"==e.type};d._bindMultiple=function(a,b,c){for(var d=0;d<a.length;++d)l(a[d],b,c)};u(a,"keypress",e);u(a,"keydown",e);u(a,"keyup",e)}if(r){var k={8:"backspace",9:"tab",13:"enter",16:"shift",17:"ctrl",
+18:"alt",20:"capslock",27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"ins",46:"del",91:"meta",93:"meta",224:"meta"},p={106:"*",107:"+",109:"-",110:".",111:"/",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},B={"~":"`","!":"1","@":"2","#":"3",$:"4","%":"5","^":"6","&":"7","*":"8","(":"9",")":"0",_:"-","+":"=",":":";",'"':"'","<":",",">":".","?":"/","|":"\\"},A={option:"alt",command:"meta","return":"enter",
+escape:"esc",plus:"+",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},n;for(g=1;20>g;++g)k[111+g]="f"+g;for(g=0;9>=g;++g)k[g+96]=g;c.prototype.bind=function(a,b,c){a=a instanceof Array?a:[a];this._bindMultiple.call(this,a,b,c);return this};c.prototype.unbind=function(a,b){return this.bind.call(this,a,function(){},b)};c.prototype.trigger=function(a,b){if(this._directMap[a+":"+b])this._directMap[a+":"+b]({},a);return this};c.prototype.reset=function(){this._callbacks={};this._directMap=
+{};return this};c.prototype.stopCallback=function(a,b){return-1<(" "+b.className+" ").indexOf(" mousetrap ")||C(b,this.target)?!1:"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable};c.prototype.handleKey=function(){return this._handleKey.apply(this,arguments)};c.addKeycodes=function(a){for(var b in a)a.hasOwnProperty(b)&&(k[b]=a[b]);n=null};c.init=function(){var a=c(t),b;for(b in a)"_"!==b.charAt(0)&&(c[b]=function(b){return function(){return a[b].apply(a,arguments)}}(b))};
+c.init();r.Mousetrap=c;"undefined"!==typeof module&&module.exports&&(module.exports=c);"function"===typeof define&&define.amd&&define(function(){return c})}})("undefined"!==typeof window?window:null,"undefined"!==typeof window?document:null);