Abspielen starten und stoppen mit Raspi

ulrich

2018-01-07 abef80b1a63026e2fb7b9584b0ebfb8841d9fe94

Abspielen starten und stoppen mit Raspi

 README.md

@@ -125,7 +125,7 @@
Ist die Fernbedienung pirc auf einem Raspberry Pi installiert, lautet das Kommando zum Abspielen des Webradiosenders radiobob (vgl. Senderliste weiter unten) wie folgt

````
http://raspi:8080/pirc/sys/rpc?c=de.uhilger.pirc.App&m=abspielen&p=http://bob.hoerradar.de/radiobob-live-mp3-hq
http://raspi:8080/pirc/sys/rpc?c=de.uhilger.pirc.App&m=abspielen&p=http://bob.hoerradar.de/radiobob-live-mp3-hq&p=
````

Das obige Kommando geht davon aus, dass der betreffende Raspberry Pi unter dem Namen `raspi` auf Port `8080` über `HTTP` erreichbar ist und dass auf dem Pi die Anwendung pirc unter dem Kontextnamen `pirc` installiert wurde. Es bewirkt, dass auf dem betreffenden Raspberry Pi eine Instanz des omxplayer gestartet wird und diese fortlaufend den Webradio-Stream unter der angegebenen Adresse abspielt.

 app.css

@@ -164,6 +164,11 @@
.abspieler-auswahl {
  width: 70%;
}

#abspielen-stoppen {
  margin-left: 0.4em;
}

/* Sender */

.sender-behaelter {

 app.js

@@ -10,19 +10,24 @@
var TPL_ABSPIELER = 'abspieler';
var templateCache = {}; // mustache templates
var prefsRendered = false;
var senderKlickModus = "0"; // 1=abspielen, 2=bearbeiten, 3=loeschen
var senderKlickModus = "1"; // 1=abspielen, 2=bearbeiten, 3=loeschen
var ID_UNDEFINED = -1;
var suchTimeout;

function app_init() {
  $('.sued').text('Initialisieren..');
  $('.dialog').hide();
  $('.ost').hide();

  // Menü initialisieren
  app_menu_init(
    "data/menu/",
    "hauptmenue.json",
    "../jslib/app-menu/app-menu.tpl",
    ".west",
    "8em");

  // Templates laden
  app_get_template('data/tpl/dlg-msg.tpl', TPL_DLG_MSG);
  app_get_template('data/tpl/dlg-info.tpl', TPL_DLG_INFO);
  app_get_template('data/tpl/sender.tpl', TPL_SENDER);
@@ -32,19 +37,22 @@
  app_get_template('data/tpl/kachel.tpl', TPL_SENDER_KACHEL);
  app_get_template('data/tpl/abspieler.tpl', TPL_ABSPIELER);

  var $hamburger = $(".hamburger");
  $hamburger.on("click", function(e) {
  // Klicks auf das Hamburger-Menü-Icon an eine Funktion leiten
  $(".hamburger").on("click", function(e) {
    app_menue_umschalten();
  });

  // Eingaben ins Suchfeld an eine Funktion leiten
  $(".sendersuche-eingabe").on('keyup', function() {
    clearTimeout(suchTimeout);
    suchTimeout = setTimeout('app_sendersuche()', 500);
  });
  $('.sued').text('Bereit.');

  // Abspieler und Sender laden
  setTimeout(function() {
    app_get_abspieler();
    app_get_sender();
    $('.sued').text('Bereit.');
  }, 200);
}

@@ -61,36 +69,74 @@
}

function app_menue_umschalten() {
  var $hamburger = $(".hamburger");
  $hamburger.toggleClass("is-active"); // hamburger-icon umschalten
  $(".hamburger").toggleClass("is-active"); // hamburger-icon umschalten
  app_menu_toggle(); // menue oeffnen/schliessen
}
/* Abspieler und abspielen */

function app_get_abspiel_ziel() {
  var opt = $(".abspieler-auswahl :selected");
  var atyp = opt.attr("atyp");
  var aname = opt.text();
  var aurl = opt.attr("aurl");
  return new Abspieler(-1, aname, aurl, atyp, "", "selected");
}

/*
  Abspiel-URL für Raspi:
  http://raspi:8080/pirc/sys/rpc?c=de.uhilger.pirc.App&m=abspielen&p=http://bob.hoerradar.de/radiobob-live-mp3-hq&p=
*/
function app_abspielen(sender, abspieler) {
  if(abspieler.typ === 'pirc') {
    var url =
      abspieler.url +
      '/sys/rpc?c=de.uhilger.pirc.App&m=abspielen&p=' +
      sender.url +
      '&p=';
    app_radio_kommando_senden(url);
  } else {
    // 'hier abspielen' muss noch gebaut werden
  }
}

function app_abspielen_stoppen() {
  var abspieler = app_get_abspiel_ziel();
  if(abspieler.typ === 'pirc') {
    var url =
      abspieler.url +
      '/sys/rpc?c=de.uhilger.pirc.App&m=kommando&p=q';
    app_radio_kommando_senden(url);
  } else {
    // 'hier abspielen' stoppen muss noch gebaut werden
  }
}

/* Senderliste */

function app_kachel_anpassen(sender) {
  var kachel = $( "div[sid='" + sender.id + "']" );
  $(kachel).find(".sender-name").text(sender.name);
  $(kachel).attr("data-verweis", sender.url);
  $(kachel).find("img").attr("src", sender.logo);
  kachel.find(".sender-name").text(sender.name);
  kachel.attr("data-verweis", sender.url);
  kachel.find("img").attr("src", sender.logo);
}

function app_kachel_neu(sender) {
  var html = Mustache.render(templateCache[TPL_SENDER_KACHEL], sender);
  $("#sender").append(html);
  var kachel = $( "div[sid='" + sender.id + "']" );
  $(kachel).on('click', app_kachel_klick);
  kachel.on('click', app_kachel_klick);
}

function app_kachel_klick() {
  var kachel = $( this );
  var senderId = $(kachel).attr("sid");
  var senderName = $(kachel).find(".sender-name").text();
  var senderUrl = $(kachel).attr("data-verweis");
  var senderLogo = $(kachel).find("img").attr("src");
  var senderId = kachel.attr("sid");
  var senderName = kachel.find(".sender-name").text();
  var senderUrl = kachel.attr("data-verweis");
  var senderLogo = kachel.find("img").attr("src");
  var s = new Sender(senderId, senderName, senderUrl, senderLogo);
  switch (senderKlickModus) {
      case "1":
        app_abspielen(s, app_get_abspiel_ziel());
        break;
      case "2":
        $(".dlg-behaelter").html(
@@ -112,7 +158,6 @@
        );
        break;
  }

}

/* --- Menüfunktionen --- */
@@ -166,11 +211,12 @@
/* --- Dialogfunktionen --- */

function app_dialog_zeigen(vorlage, inhalt) {
  $(".dialog").html(Mustache.render(vorlage, inhalt));
  var dlg = $(".dialog");
  dlg.html(Mustache.render(vorlage, inhalt));
  $(".close-btn").on('click', function() {
    app_dialog_schliessen();
  });
  $('.dialog').slideDown(300);
  dlg.slideDown(300);
}

function app_sender_dialog_lesen(senderId) {
@@ -181,7 +227,7 @@
}

function app_dialog_schliessen() {
  senderKlickModus = "0";
  senderKlickModus = "1";
  $('.close-btn').off('click');
  $('.dialog').slideUp(300);
}
@@ -195,9 +241,10 @@
  timeout - die Anzahl Millisekunden, die eine Meldung zu sehen sein soll
*/
function app_meldung_mit_timeout(meldung, timeout) {
  $('.sued').text(meldung);
  var s = $('.sued');
  s.text(meldung);
  setTimeout(function() {
    $('.sued').text('Bereit.');
    s.text('Bereit.');
  }, timeout);
}

@@ -224,6 +271,7 @@
  }).done(function( abspielerliste ) {
    $(".abspieler-behaelter").html(
      Mustache.render(templateCache[TPL_ABSPIELER], abspielerliste));
    $("#abspielen-stoppen").on('click', app_abspielen_stoppen);
  });
}

@@ -239,6 +287,35 @@
  } else {
    app_dialog_zeigen(vorlage, '');
  }
}

function app_radio_kommando_senden(kommando) {
  $.ajax({
    url: kommando,
    type: "GET",
    dataType : "text",
    crossDomain: true
  }).done(function( antwort ) {
    /*
      der folgende Schritt wird nicht erreicht, weil beim Aufruf
      aus dem Browser heraus keine Adresse aufgerufen werden darf,
      die nicht von der Domain kommt, von der aus das radio-ui
      ausgeliefert wird.

      Kommt das radio-ui z.B. von der Domain uhilger.de, wird ein Aufruf
      zur Domain raspi-az blockiert.

      Das laesst sich vermeiden, wenn der Server den Aufruf zum Raspi
      uebernimmt.

      Interessanterweise kommt der Aufruf zum Raspi durch und löst auch
      das Abspielen des Radiosenders aus. Nur die Antwort vom Raspi wird
      blockiert und hier nicht ausgegeben.
    */
    app_meldung_mit_timeout(antwort, 2000);
  }).fail(function(xhr, status, errorThrown ) {
    app_meldung_mit_timeout(errorThrown + " " + status, 2000);
  });
}

/*
@@ -264,3 +341,12 @@
  this.url = u;
  this.logo = l;
}

function Abspieler(i, n, u, t, b, z) {
  this.id = i;
  this.name = n;
  this.url = u;
  this.typ = t;
  this.bild = b;
  this.zustand = z;
}

 data/abspieler.json

@@ -13,18 +13,18 @@
      {
        "abspielerid": 2,
        "abspielername": "Raspberry Pi Wohnzimmer",
        "abspielerurl": "",
        "abspielerurl": "http://raspi-wz:8080/pirc",
        "abspielertyp":"pirc",
        "abspielerbild": "",
        "abspielerzustand":"selected"
        "abspielerzustand":""
      },
      {
        "abspielerid": 3,
        "abspielername": "Raspberry Pi Arbeitszimmer",
        "abspielerurl": "",
        "abspielerurl": "http://raspi-az:8080/pirc",
        "abspielertyp":"pirc",
        "abspielerbild": "",
        "abspielerzustand":""
        "abspielerzustand":"selected"
      }
    ]
  }

 data/tpl/abspieler.tpl

@@ -2,7 +2,8 @@
<select name="abspieler" size="1" class="abspieler-auswahl">
  {{#abspielerliste}}
    {{#inhalt}}
    <option {{abspielerzustand}} atyp="{{abspielertyp}}">{{abspielername}}</option>
    <option {{abspielerzustand}} atyp="{{abspielertyp}}" aurl="{{abspielerurl}}">{{abspielername}}</option>
    {{/inhalt}}
  {{/abspielerliste}}
</select>
<button type="button" id="abspielen-stoppen">Stopp</button>

 hamburger.css

@@ -9,7 +9,6 @@
 */

.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
@@ -38,7 +37,7 @@
.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
  margin: 0;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
@@ -71,7 +70,7 @@
.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic .hamburger-inner::before {