|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- function timeformat(sec) {
- var d = new Date(null);
- d.setSeconds(Math.floor(sec))
- return d.toISOString().substr(11, 8);
- }
-
- var elems = {
- is_playing: $$("#is-playing"),
- progress_text: $$("#progress-text"),
- progress: $$("#progress"),
-
- pause: $$("#pause"),
- skip_back: $$("#skip-back"),
- skip_forward: $$("#skip-forward"),
-
- mute: $$("#mute"),
- exit: $$("#exit"),
-
- volume: $$("#volume"),
- volume_text: $$("#volume-text"),
- };
-
- var state = {};
-
- /*
- * Update GUI stuff
- */
-
- function update(state) {
-
- // Playing
- if (state.playing)
- elems.is_playing.innerHTML = "Playing";
- else
- location.href = "/";
-
- // Progress text
- elems.progress_text.innerHTML =
- timeformat(state.time_pos)+"/"+
- timeformat(state.duration);
-
- // Progress bar
- elems.progress.value = state.time_pos;
- elems.progress.max = state.duration;
-
- // Buttons
- elems.pause.className = state.paused ? "active" : "";
- elems.mute.className = state.muted ? "active" : "";
-
- // Volume
- elems.volume.min = 0;
- elems.volume.max = state.volume_max;
- elems.volume.value = state.volume;
- elems.volume.step = 5;
- elems.volume_text.innerHTML = state.volume+"%";
- }
-
- function checkState() {
- post("/playback/state", null, function(err, res) {
- if (err)
- return;
-
- state = JSON.parse(res);
- update(state);
- });
- }
-
- checkState();
- setInterval(checkState, 500);
-
- /*
- * React to input
- */
-
- function playerset(key, val) {
- post("/playback/set/"+key+"/"+val, null, function() {
- checkState();
- });
- }
-
- // Set time
- elems.progress.addEventListener("click", function(evt) {
- var pos = (evt.clientX - evt.target.offsetLeft) / evt.target.clientWidth;
- pos *= evt.target.max;
- playerset("time-pos", pos);
- });
-
- // Toggle pause
- elems.pause.addEventListener("click", function() {
- if (state.paused)
- playerset("pause", "no");
- else
- playerset("pause", "yes");
- });
-
- // Back 15 seconds
- elems.skip_back.addEventListener("click", function() {
- playerset("time-pos", state.time_pos - 15);
- });
-
- // Forwards 15 seconds
- elems.skip_forward.addEventListener("click", function() {
- playerset("time-pos", state.time_pos + 15);
- });
-
- // Toggle mute
- elems.mute.addEventListener("click", function(evt) {
- if (state.muted)
- playerset("mute", "no");
- else
- playerset("mute", "yes");
- });
-
- // Exit
- elems.exit.addEventListener("click", function(evt) {
- post("/playback/exit", null, function() {});
- });
-
- // Set volume
- elems.volume.addEventListener("change", function(evt) {
- playerset("volume", evt.target.value);
- });
- elems.volume.addEventListener("keydown", function(evt) {
- if (evt.keyCode === 37 || evt.keyCode === 40)
- playerset("volume", parseInt(evt.target.value) - parseInt(evt.target.step));
- else if (evt.keyCode === 38 || evt.keyCode === 39)
- playerset("volume", parseInt(evt.target.value) + parseInt(evt.target.step));
- });
-
- window.addEventListener("keydown", function(evt) {
- console.log(evt.keyCode);
- });
|