aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorKamil Cholewiński <harry666t@gmail.com>2015-04-30 11:03:07 +0200
committerKamil Cholewiński <harry666t@gmail.com>2015-04-30 11:03:07 +0200
commit615764140a170e3b6b5aea9e63594274993d816f (patch)
tree5aef3d481a3bf887d5adcf66fabe0b10a89e4578
parent3daa1af52921a5cbcde0a6c93d97f9c4f662c310 (diff)
downloadmpw-615764140a170e3b6b5aea9e63594274993d816f.zip
mpw-615764140a170e3b6b5aea9e63594274993d816f.tar.gz
mpw-615764140a170e3b6b5aea9e63594274993d816f.tar.bz2
Add a tiny bit of JS to enable keyboard navigation
-rw-r--r--mpw.py19
-rw-r--r--readme.md9
-rw-r--r--static/keyboard.js68
-rw-r--r--templates/base.html44
4 files changed, 131 insertions, 9 deletions
diff --git a/mpw.py b/mpw.py
index 5baf561..14ae8e8 100644
--- a/mpw.py
+++ b/mpw.py
@@ -1,6 +1,7 @@
import flask
import mpd
import os
+import re
import uuid
@@ -235,6 +236,24 @@ def favicon():
)
+@app.route("/keyboard.js")
+def keyboard_js():
+ return flask.send_from_directory(
+ os.path.join(app.root_path, "static"),
+ "keyboard.js",
+ mimetype="application/javascript",
+ )
+
+
+@app.template_filter()
+def slugify(s):
+ s = s.lower()
+ s = re.sub(r"[^\w\d\-]", "-", s)
+ s = re.sub("-+", "-", s)
+ s = re.sub("(^-)|(-$)", "", s)
+ return s
+
+
if __name__ == "__main__":
import argparse
argparser = argparse.ArgumentParser()
diff --git a/readme.md b/readme.md
index 35ae081..6b09992 100644
--- a/readme.md
+++ b/readme.md
@@ -6,11 +6,14 @@ Small [MPD](http://www.musicpd.org/) web client.
Recommended to only ever use on a trusted LAN and/or local machine.
-Since it doesn't use any Javascript, or any other fancy advanced HTML
-features, it will probably work on every single web browser in the
-world. Tested on [Firefox](https://www.mozilla.org/en-US/firefox/),
+Since it doesn't use any fancy advanced HTML features, it will
+probably work on every single web browser in the world. Tested on
+[Firefox](https://www.mozilla.org/en-US/firefox/),
[elinks](http://elinks.or.cz/), [dillo](http://www.dillo.org/).
+It uses some simple JS to enable keyboard shortcuts, and a tiny bit of
+CSS to make things like playlists more readable.
+
Tech stack:
- [Python 3.4](https://www.python.org/)
diff --git a/static/keyboard.js b/static/keyboard.js
new file mode 100644
index 0000000..a01ccc4
--- /dev/null
+++ b/static/keyboard.js
@@ -0,0 +1,68 @@
+"use strict";
+var $=$?$:{};
+var handle_state = null;
+
+function key_main(event) {
+ switch (event.key) {
+ case "g":
+ handle_state = key_go;
+ return;
+
+ case "j":
+ $('html, body').animate({scrollTop: $(document).height()}, 0);
+ return;
+ case "k":
+ $('html, body').animate({scrollTop: 0}, 0);
+ return;
+
+ case "h":
+ $('#controls-prev').click();
+ return;
+ case "l":
+ $('#controls-next').click();
+ return;
+
+ case "p":
+ $('#controls-play-pause').click();
+ return;
+ case "s":
+ $('#controls-stop').click();
+ return;
+
+ case "x":
+ $('#playlist-clear-old').click();
+ return;
+
+ default:
+ console.log(event.key);
+ }
+}
+
+function key_go(event) {
+ switch (event.key) {
+ case "p":
+ window.location = "/";
+ break;
+ case "b":
+ window.location = "/browse/";
+ break;
+
+ case "a":
+ $('#settings-autorefresh').click();
+ break;
+ case "f":
+ $('#settings-fancy').click();
+ break;
+
+ default:
+ console.log(event.key);
+ }
+ handle_state = key_main;
+}
+
+$(document).ready(function() {
+ handle_state = key_main;
+ $(document).keydown(function (event) {
+ handle_state(event);
+ });
+});
diff --git a/templates/base.html b/templates/base.html
index ef72b80..78c4657 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,7 +1,8 @@
-{% macro button(action, label) -%}
+{% macro button(action, label, id=None) -%}
<div class="button">
<form action="{{ action }}" method="post">
- <input value="{{ label }}" type="submit" />
+ <input id="{{ id or (action | slugify) }}"
+ value="{{ label }}" type="submit" />
</form>
</div>
{%- endmacro %}
@@ -26,6 +27,9 @@
{{ status_line }}
{% endblock %}
</title>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script src="/keyboard.js">
+ </script>
<style>
.playback { padding: 10px; }
.controls { display: table; }
@@ -34,6 +38,8 @@
tr.odd { background-color: #fafafa; }
tr#now { background-color: #dadada; }
tr:hover { color: #444; }
+ .cheat { background-color: #fafafa; }
+ .cheat code { background-color: #dadada; }
</style>
</head>
<body>
@@ -105,20 +111,46 @@
Quick settings!
<span>Autorefresh
{% if autorefresh > 0 %}
- {{ button("/settings/autorefresh/0", "Disable") }}
+ {{ button("/settings/autorefresh/0", "Disable",
+ "settings-autorefresh") }}
{% else %}
- {{ button("/settings/autorefresh/30", "Enable (30s)") }}
+ {{ button("/settings/autorefresh/30", "Enable (30s)",
+ "settings-autorefresh") }}
{% endif %}
</span>
<span>Symbols
{% if symbols_mode == "simple" %}
- {{ button("/settings/symbols/fancy", "Go fancy") }}
+ {{ button("/settings/symbols/fancy", "Go fancy",
+ "settings-fancy") }}
{% else %}
- {{ button("/settings/symbols/simple", "Go simple") }}
+ {{ button("/settings/symbols/simple", "Go simple"
+ "settings-fancy") }}
{% endif %}
</span>
</div>
{% endblock %}
+ {% block cheats %}
+ <hr />
+ <div class="cheats">
+ Cheats!
+ {% set cheats = [
+ ("p", "Pause"),
+ ("s", "Stop"),
+ ("j", "bottom"),
+ ("k", "top"),
+ ("h", "previous"),
+ ("l", "next"),
+ ("x", "clear old"),
+ ("gp", "Go Playlist"),
+ ("gb", "Go Browse"),
+ ("ga", "Go Autorefresh"),
+ ("gf", "Go Fancy"),
+ ] %}
+ {% for key, label in cheats %}
+ <span class="cheat"><code>{{ key }}</code> {{ label }}</span>
+ {% endfor %}
+ </div>
+ {% endblock %}
</body>
</html>
{# -*- mode: jinja2; -*- #}