pifi 0.1.0

data/lib/pifi/public/js/app.js

@@ -0,0 +1,298 @@
+"use strict";
+
+var state = null;
+
+var view = {
+  init: function() {
+    this.volTimeout = null;
+
+    // Set initial "loading" screen
+    this.hide(lang.loading);
+
+    this.setStaticStr();
+    this.addListeners();
+  },
+
+  render: function() {
+    this.renderPlaying();
+    this.renderTitle();
+    this.renderProgress();
+    this.renderProgressBar();
+    this.renderVolButtons();
+    this.setView();
+  },
+
+  renderPlaying: function() {
+    if (state.playing) {
+      $("#playing").text(lang.playing);
+      $("#span-ps")
+        .addClass("glyphicon-stop")
+        .removeClass("glyphicon-play");
+      $("#btn-ps")
+        .addClass("btn-danger")
+        .removeClass("btn-default");
+    } else {
+      $("#playing").text(lang.notPlaying);
+      $("#span-ps")
+        .addClass("glyphicon-play")
+        .removeClass("glyphicon-stop");
+      $("#btn-ps")
+        .addClass("btn-default")
+        .removeClass("btn-danger");
+    }
+  },
+
+  renderTitle: function() {
+    $("#title").text(state.title);
+    $("#artist").text(state.artist);
+    if (state.local) {
+      $("#title").addClass("text-uppercase");
+    } else {
+      $("#title").removeClass("text-uppercase");
+    }
+  },
+
+  renderProgress: function() {
+    if (state.local && state.playing) {
+      $("#elapsed").text(this.toMinSec(state.elapsed));
+      $("#length").text(this.toMinSec(state.length));
+      $("#progress").show();
+    } else {
+      $("#progress").hide();
+    }
+  },
+
+  renderProgressBar: function() {
+    if (state.local && state.playing) {
+      var progress = state.elapsed / state.length;
+      $("#progress-bar").css("width", progress * 100 + "%");
+    } else {
+      $("#progress-bar").css("width", "0%");
+    }
+  },
+
+  renderVolButtons: function() {
+    // Only show buttons if volume is available
+    if (state.vol < 0) {
+      $("#btn-vdown, #btn-vup").attr("disabled", true);
+    } else {
+      $("#btn-vdown, #btn-vup").attr("disabled", false);
+    }
+  },
+
+  setView() {
+    if (state.con_mpd && this.hidden) {
+      this.unhide(state.playing);
+    } else if (!state.con_mpd) {
+      this.hide(lang.disconnectedMpd);
+    }
+  },
+
+  setStaticStr: function() {
+    $("#lbl-random").text(lang.sBtnRandom);
+    $("#lbl-radios").text(lang.sBtnRadios);
+    $("#lbl-player").text(lang.sBtnPlayer);
+    $("#radios-welcome").text(lang.sRadiosWelcome);
+    $("#insert").text(lang.sInsert);
+  },
+
+  showPlayer: function() {
+    $(".view").hide();
+    $("#player").show();
+  },
+
+  showRadios: function() {
+    $(".view").hide();
+    $("#radios").show();
+  },
+
+  showAlert: function(text, textMore) {
+    if (textMore === undefined) {
+      textMore = "";
+    }
+
+    $("#alert-text-main").text(text);
+    $("#alert-text-more").text(textMore);
+
+    $(".view").hide();
+    $("#alert").show();
+  },
+
+  hide: function(text) {
+    this.showAlert(text);
+    this.hidden = true;
+  },
+
+  unhide: function(playing) {
+    if (playing) {
+      view.showPlayer();
+    } else {
+      view.showRadios();
+    }
+    this.hidden = false;
+  },
+
+  osdVol: function(vol) {
+    $("#osd-text").text(vol);
+    $("#player-bottom").hide();
+    $("#osd").show();
+
+    clearTimeout(this.volTimeout);
+    this.volTimeout = setTimeout(function() {
+      $("#osd").hide();
+      $("#player-bottom").show();
+    }, timeConst.volOsd);
+  },
+
+  addListeners: function() {
+    // Prevent href="#" to be executed
+    $('a[href="#"]').click(function(event) {
+      return false;
+    });
+
+    $("#btn-vup").click(function(event) {
+      controller.clickVol("+5");
+    });
+
+    $("#btn-vdown").click(function(event) {
+      controller.clickVol("-5");
+    });
+
+    $("#btn-ps").click(function(event) {
+      controller.clickPs();
+    });
+
+    $("#btn-random").click(function(event) {
+      controller.clickRandom();
+    });
+
+    $("#btn-radios").click(function(event) {
+      view.showRadios();
+    });
+
+    $("#btn-player").click(function(event) {
+      view.showPlayer();
+    });
+
+    $(".radio-name").click(function(event) {
+      var name = $(this).text();
+      controller.clickRadio(name);
+    });
+
+    $("#insert").click(function(event) {
+      var url = prompt(lang.urlInsert);
+      controller.clickInsert(url);
+    });
+  },
+
+  toMinSec: function(sec) {
+    return new Date(sec * 1000).toISOString().substr(14, 5);
+  }
+};
+
+var controller = {
+  PLAYER_API: "/api/player",
+
+  init: function() {
+    view.init();
+    this.updateState(true);
+  },
+
+  updateState: function(repeat) {
+    var self = controller;
+    var fetchState = $.get(self.PLAYER_API)
+      .done(function(response) {
+        state = response;
+        view.render();
+      })
+      .fail(function() {
+        view.hide(lang.disconnectedNet);
+      });
+
+    if (repeat) {
+      fetchState.always(function() {
+        setTimeout(controller.updateState, timeConst.update, true);
+      });
+    }
+  },
+
+  clickRandom: function() {
+    var text;
+    var waitTime;
+
+    // Define which alert to show based on player state
+    if (state.playing && state.local) {
+      text = lang.randomNext;
+      waitTime = timeConst.randomNext;
+    } else {
+      text = lang.randomFirst;
+      waitTime = timeConst.randomFirst;
+    }
+    view.showAlert(text);
+
+    $.post(this.PLAYER_API, { method: "play_random" }).always(function() {
+      setTimeout(view.showPlayer, waitTime);
+    });
+  },
+
+  clickVol: function(delta) {
+    $.post(this.PLAYER_API, { method: "change_vol", params: delta }).done(
+      function(response) {
+        view.osdVol(response + "%");
+      }
+    );
+  },
+
+  clickPs: function() {
+    var method = state.playing ? "stop" : "play";
+    $.post(this.PLAYER_API, { method: method }).done(function() {
+      controller.updateState(false);
+    });
+  },
+
+  clickRadio: function(name) {
+    if (name === state.title && !state.local && state.playing) {
+      view.showPlayer();
+    } else {
+      this.playStream(true, name);
+    }
+  },
+
+  clickInsert: function(url) {
+    if (url !== null && url !== "") {
+      this.playStream(false, url.trim());
+    }
+  },
+
+  playStream: function(isName, value) {
+    view.showAlert(lang.streamTrying, value);
+
+    if (isName) {
+      var data = { method: "play_radios", params: value };
+    } else {
+      var data = { method: "play_urls", params: value };
+    }
+
+    $.post(this.PLAYER_API, data)
+      .done(function() {
+        setTimeout(view.showPlayer, timeConst.playStream);
+      })
+      .fail(function(response) {
+        view.showAlert(lang.streamError, response.responseText);
+        setTimeout(view.showRadios, timeConst.error);
+      });
+  }
+};
+
+var timeConst = {
+  playStream: 2000,
+  error: 3000,
+  randomNext: 1500,
+  randomFirst: 5000,
+  volOsd: 1300,
+  update: 1000
+};
+
+$(document).ready(function() {
+  controller.init();
+});

data/lib/pifi/public/js/lang/en-us.js

@@ -0,0 +1,19 @@
+var lang = {
+  playing: "Playing",
+  notPlaying: "Stopped",
+  streamError: "Failed to play this stream",
+  streamTrying: "Tunning...",
+  urlInsert: "Type the URL",
+  randomNext: "Next song",
+  randomFirst: "Starting library playback...",
+  disconnectedMpd: "Disconnected from MPD",
+  disconnectedNet: "No connection",
+  loading: "Loading...",
+
+  // Static
+  sBtnRandom: "Random",
+  sBtnRadios: "Radios",
+  sBtnPlayer: "Player",
+  sRadiosWelcome: "Choose a radio station",
+  sInsert: "Type a URL..."
+};

data/lib/pifi/public/js/lang/fr-fr.js

@@ -0,0 +1,19 @@
+var lang = {
+  playing: "Lecture",
+  notPlaying: "Arrêté",
+  streamError: "Échec à l'ajout du flux",
+  streamTrying: "Mise en tampon…",
+  urlInsert: "Entrez l'URL",
+  randomNext: "Titre suivant",
+  randomFirst: "Ajout des titres…",
+  disconnectedMpd: "Déconnecté de MPD",
+  disconnectedNet: "Pas de connexion",
+  loading: "Chargement",
+
+  // Static
+  sBtnRandom: "Aléatoire",
+  sBtnRadios: "Radios",
+  sBtnPlayer: "Lecteur",
+  sRadiosWelcome: "Choisir une station de radio",
+  sInsert: "Entrez l'URL…"
+};

data/lib/pifi/public/js/lang/nl-nl.js

@@ -0,0 +1,19 @@
+var lang = {
+  playing: "Aan het afspelen",
+  notPlaying: "Gestopt",
+  streamError: "Kan deze stream niet afspelen",
+  streamTrying: "Bezig met verbinden...",
+  urlInsert: "Voer een url in",
+  randomNext: "Volgend nummer",
+  randomFirst: "Bezig met voorbereiden van verzameling...",
+  disconnectedMpd: "Niet verbonden met MPD",
+  disconnectedNet: "Geen verbinding",
+  loading: "Bezig met laden...",
+
+  // Static
+  sBtnRandom: "Willekeurig",
+  sBtnRadios: "Radio's",
+  sBtnPlayer: "Speler",
+  sRadiosWelcome: "Kies een radiostation",
+  sInsert: "Voer een url in..."
+};

data/lib/pifi/public/js/lang/pt-br.js

@@ -0,0 +1,19 @@
+var lang = {
+  playing: "Tocando",
+  notPlaying: "Parado",
+  streamError: "Não foi possível tocar essa rádio",
+  streamTrying: "Sintonizando...",
+  urlInsert: "Insira a URL",
+  randomNext: "Próxima música",
+  randomFirst: "Iniciando reprodução da biblioteca...",
+  disconnectedMpd: "Desconectado do MPD",
+  disconnectedNet: "Sem conexão",
+  loading: "Carregando...",
+
+  // Static
+  sBtnRandom: "Aleatório",
+  sBtnRadios: "Rádios",
+  sBtnPlayer: "Controles",
+  sRadiosWelcome: "Escolha uma emissora",
+  sInsert: "Tocar URL..."
+};

data/lib/pifi/public/safari-pinned-tab.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1582 6765 c-12 -9 -29 -29 -37 -45 -34 -66 -13 -106 89 -173 45 -28
+89 -56 99 -62 136 -77 3670 -2321 3661 -2325 -10 -4 -2604 -5 -2649 -1 -6 1
+-10 68 -11 180 -1 167 -2 180 -23 209 -12 17 -32 34 -44 38 -29 10 -1128 11
+-1165 2 -15 -4 -39 -19 -53 -34 -23 -25 -24 -30 -27 -207 -2 -100 -5 -184 -7
+-186 -3 -2 -123 -5 -267 -6 -257 -2 -265 -2 -337 -28 -97 -35 -158 -75 -227
+-150 -65 -70 -118 -173 -135 -262 -13 -65 -17 -2956 -5 -3029 22 -130 75 -231
+170 -319 55 -52 106 -84 185 -115 l66 -27 2635 0 2635 0 69 28 c136 54 255
+165 308 287 53 122 51 48 51 1640 0 1061 -4 1492 -12 1535 -27 142 -116 273
+-243 356 -91 59 -176 81 -336 84 -119 3 -148 7 -175 23 -17 10 -167 104 -332
+209 -1179 746 -1978 1250 -1997 1261 -13 7 -127 79 -255 160 -128 81 -371 234
+-540 341 -169 107 -337 213 -373 236 -614 395 -662 420 -718 380z m381 -2394
+c11 -2 9 -211 -3 -212 -5 0 -79 -1 -162 -2 l-153 0 -3 98 c-1 54 -1 103 1 109
+3 8 55 11 158 10 85 -1 157 -2 162 -3z m549 -11 c2 -8 4 -57 3 -109 l0 -94
+-162 -1 -162 -1 -3 75 c-2 41 -2 91 0 110 l3 35 159 0 c134 0 159 -2 162 -15z
+m1639 -429 c1 -3 2 -790 3 -1748 l2 -1743 -26 -1 c-14 0 -736 0 -1605 0 -1183
+-1 -1592 2 -1625 11 -99 26 -184 103 -223 203 -20 51 -20 67 -21 1507 -1 800
+3 1477 7 1504 22 131 130 242 257 266 44 8 3230 10 3231 1z m1984 -16 c34 -12
+70 -38 111 -79 107 -108 98 42 98 -1621 1 -792 -2 -1464 -6 -1493 -15 -121
+-101 -225 -220 -268 -38 -14 -149 -16 -885 -16 -463 0 -845 2 -850 5 -6 4 -10
+3428 -4 3483 1 9 219 11 854 10 803 -2 855 -3 902 -21z"/>
+<path d="M2289 3716 c-2 -2 -33 -6 -69 -10 -53 -5 -175 -30 -250 -50 -115 -32
+-313 -126 -432 -208 -130 -88 -315 -275 -402 -406 -347 -525 -347 -1185 0
+-1708 147 -222 362 -407 608 -525 104 -49 254 -103 319 -113 20 -3 56 -10 79
+-15 153 -34 402 -30 579 9 512 111 927 465 1114 949 104 268 128 578 69 866
+-68 326 -247 622 -523 863 -89 78 -370 242 -414 242 -9 0 -18 4 -21 9 -3 5
+-16 11 -28 14 -13 3 -54 15 -93 26 -118 36 -233 53 -386 56 -81 2 -148 3 -150
+1z m386 -244 c461 -105 813 -414 969 -850 68 -190 90 -448 56 -647 -107 -623
+-632 -1081 -1259 -1098 -551 -16 -1055 321 -1261 842 -29 74 -68 232 -76 311
+-13 118 -8 301 11 390 3 14 7 37 10 52 25 137 131 368 229 498 208 277 501
+454 856 515 111 19 352 12 465 -13z"/>
+<path d="M2335 2728 c-260 -33 -455 -243 -472 -508 -20 -324 237 -587 562
+-575 300 10 525 244 525 545 0 327 -289 580 -615 538z m206 -245 c212 -93 257
+-377 85 -537 -90 -84 -245 -107 -357 -55 -189 89 -248 334 -119 498 94 119
+250 156 391 94z"/>
+<path d="M4765 3706 c-63 -29 -60 27 -61 -961 -1 -528 3 -910 8 -925 5 -14 21
+-35 36 -47 l27 -22 571 -1 c382 0 581 4 602 11 17 6 39 23 49 37 16 25 17 80
+18 922 1 744 -1 901 -13 932 -26 70 -12 68 -644 68 -449 -1 -569 -4 -593 -14z
+m1031 -971 l0 -765 -437 0 -437 0 1 110 0 109 289 0 c248 -1 293 2 313 15 50
+33 65 104 33 155 -28 45 -52 48 -351 48 l-282 0 -2 547 -1 546 437 0 437 0 0
+-765z"/>
+<path d="M5255 3282 c-55 -5 -102 -43 -111 -88 -9 -49 16 -101 59 -119 41 -17
+292 -15 323 3 31 16 57 77 49 112 -10 43 -42 79 -78 85 -40 7 -189 11 -242 7z"/>
+<path d="M5221 2838 c-37 -10 -81 -61 -81 -95 0 -38 28 -88 57 -104 18 -10 65
+-14 167 -13 125 0 145 2 169 19 65 48 55 148 -18 188 -23 12 -250 16 -294 5z"/>
+<path d="M5257 1519 c-149 -35 -290 -175 -322 -319 -34 -151 9 -305 115 -411
+88 -89 188 -131 310 -131 327 1 535 346 386 640 -51 100 -174 195 -287 221
+-53 13 -150 12 -202 0z m180 -221 c51 -22 83 -49 108 -91 65 -112 24 -252 -91
+-308 -146 -70 -314 38 -314 203 0 37 40 126 68 151 60 52 164 73 229 45z"/>
+</g>
+</svg>