From a6081c2b65b0463fdc640875833527f41fa9ded6 Mon Sep 17 00:00:00 2001
From: undisclosed
Date: Sun, 22 Jan 2023 16:11:12 +0000
Subject: [PATCH] Erste Version fertig: JavaScript-Player fuer 'hier spielen' bei Abspiellisten

---
 src/de/uhilger/tango/api/ListHandler.java |   28 ++++++++
 www/js/app.js                             |  133 ++++++++++++-------------------------------
 2 files changed, 64 insertions(+), 97 deletions(-)

diff --git a/src/de/uhilger/tango/api/ListHandler.java b/src/de/uhilger/tango/api/ListHandler.java
index 0cd7b3b..c3ab471 100644
--- a/src/de/uhilger/tango/api/ListHandler.java
+++ b/src/de/uhilger/tango/api/ListHandler.java
@@ -34,11 +34,13 @@
  * Der ListHandler bearbeitet HTTP-Anfragen zu Abspiellisten
  * 
  * GET /mz/api/alist/[pl-name]          die Titel-Objekte der Liste [pl-name] liefern
+ * GET /mz/api/alist/[pl-name]/m3u      eine einfache Playlist im M3U-Format ausgeben
+ * GET /mz/api/alist/[pl-name]/[nr]     den Titel mit der Nummer [nr] abrufen
+ * 
  * PUT /mz/api/alist/[pl-name]          den Titel im Body anfuegen an die Liste [pl-name]
  * PUT /mz/api/alist/[pl-name]/[nr]     an der Position nr der Liste [pl-name] den Titel im Body einfuegen
  * PUT /mz/api/alist/[pl-name]/[nrVon]/[nrNach]   den Titel von seiner aktuellen Position an eine 
  *                                                 andere Position der Liste [pl-name] verschieben
- * GET /mz/api/alist/[pl-name]/m3u
  * DELETE /mz/api/alist/[pl-name]/[nr]  den Titel an der Position [nr] aus der Liste [pl-name] entfernen  
  * DELETE /mz/api/alist/[pl-name]/alle  alle Titel aus der Liste [pl-name] entfernen  
  * 
@@ -71,7 +73,12 @@
         headers.add("Content-Type", "application/m3u");
         return getM3u(e, elems[4]);
       } else {
-        return "ungueltig";
+        try {
+          int index = Integer.parseInt(elems[5]);
+          return getTitel(elems[4], index);
+        } catch(NumberFormatException ex) {
+          return "ungueltig";
+        }
       }
     } else {
       String plname = elems[elems.length - 1];
@@ -122,6 +129,23 @@
     return response;
   }
   
+  private String getTitel(String plname, int index) {
+    FileStorage fs = new FileStorage(conf);
+    Entity entity = fs.read(FileStorage.ST_ABSPIELLISTE, plname);
+    String response = "eom";
+    if(entity instanceof Abspielliste) {
+      Abspielliste aliste = (Abspielliste) entity;
+      //String titelJson = bodyLesen(e);
+      List<Titel> titelListe = aliste.getTitel();
+      if(index < titelListe.size()) {
+        Titel titel = aliste.getTitel().get(index);
+        Gson gson = new Gson();
+        response = gson.toJson(titel);
+      }
+    }
+    return response;    
+  }
+  
   /**
    * Den Titel im Body von seiner aktuellen Position an die angegebene 
    * Position setzen. Der Titel an der angegebenen Position rueckt nach 
diff --git a/www/js/app.js b/www/js/app.js
index e083851..a21de07 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -11,6 +11,7 @@
   var audioCtx;
   var playState; // 'pause' oder 'play' oder 'stop'
   var audioElem;
+  var playingList;
 
   this.init = function () {
     self.mediaPfad = '/';
@@ -496,11 +497,6 @@
   this.kommando = function(kommando) {
     console.log(kommando);
     if(self.playingIndex > -1) {
-      //const audioElements = document.querySelectorAll('.entity-eintrag');
-      //const audioElements = document.querySelectorAll("audio");
-      //const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-      //const track = self.audioCtx.createMediaElementSource(audioElements[self.playingIndex]);
-      //track.connect(self.audioCtx.destination);
       if(kommando === 'stop') {
         self.audioElem.pause();
         self.audioElem.currentTime = 0;
@@ -562,111 +558,58 @@
       console.log(
         "play playlist.value: " + document.querySelector('#playlist').value + 
         ", abspieler.value: " + document.querySelector('#abspieler').value);
-      // hier noch URL fuer Stream der Abspielliste abrufen
-      // Es muss auch noch die Funktion auf dem Server gabut werden, die 
-      // eine Abspielliste als Stream liefert
-      //url = 'Stream fuer Abspielliste ' + lst + ' noch nicht gebaut.';
-      //self.hier_spielen_liste();
       self.playingIndex = -1;
       self.nextTrack();
     }
-    //console.log('url: ' + url);
-    //window.open(url);
   };  
   
-  this.hier_spielen_liste = function() {
-    const elements = document.querySelectorAll('.entity-eintrag');
-
-    //var i = 0;
-    //var ersterTitel;
-    //elements.forEach(function (element) {
-    //  const attr = element.attributes;
-    //  var titel = host + attr.getNamedItem('data-kat').value + 
-    //          attr.getNamedItem('data-pfad').value + attr.getNamedItem('data-datei').value;
-    //  console.log(titel);
-      // + element.data-pfad + element.data-datei);
-    //  if(i++ === 0) {
-    //    ersterTitel = titel;
-    //  }
-    //});
-    
-    
-    // Web Audio API Player ab hier
-    
-    //const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-
-    //const AudioContext = window.AudioContext || window.webkitAudioContext;
-    //const audioContext = new AudioContext();    
-    
-    // get the audio elements
-    self.playingIndex = -1;
-    //const audioElements = document.querySelectorAll("audio");
-
-    // pass it into the audio context
-    //const track = audioCtx.createMediaElementSource(audioElements[self.playingIndex]);
-    //track.connect(audioCtx.destination);
-    
-    //audioElements[self.playingIndex].addEventListener(
-    //  "ended",
-    //  () => {
-    //    
-    //  },
-    //  false
-    //);    
-    
-    //audioElements[self.playingIndex].play();
-    self.nextTrack();
-  };
-  
   this.nextTrack = function() {
-    // ...
-    // mySound = new Audio('sound.mp3');
-    // mySound.play()
-    // const audioElements = document.querySelectorAll("audio");
-    const audioElements = document.querySelectorAll('.entity-eintrag');
+    /*
+      
+      {
+        "katalogUrl":"/media",
+        "pfad":"/Musik/M/Bruno-Mars/",
+        "name":"04-Uptown-Funk.mp3",
+        "interpret":"Mark Ronson feat Bruno Mars",
+        "titelAnzName":"Uptown Funk",
+        "album":"Uptown Special Explicit"
+      }
     
-    
-    
+     */
+    //const plname = document.querySelector('#playlist').value;
     if(self.playingIndex > -1) {
       self.audioElem.removeEventListener("ended", self.nextTrack);
-      //audioElements[self.playingIndex].removeEventListener("ended", self.nextTrack);
-      //const element = audioElements[self.playingIndex];
-      //const attr = element.attributes;
-      //var titel = host + attr.getNamedItem('data-kat').value + 
-      //        attr.getNamedItem('data-pfad').value + attr.getNamedItem('data-datei').value;
-      //const titelElem = new Audio(titel);        
+    } else {
+      self.playingList = document.querySelector('#playlist').value;
     }
-    // <audio class='audio-elem' src='/tango{{katalogUrl}}{{pfad}}{{name}}'></audio>
     self.playingIndex++;
-    if(self.playingIndex < audioElements.length) {
-      //const element = audioElements[self.playingIndex];
-      //const attr = element.attributes;
-      //var titel = host + attr.getNamedItem('data-kat').value + 
-      //        attr.getNamedItem('data-pfad').value + attr.getNamedItem('data-datei').value;
-      const titel = self.getTitelFromAudioElement(audioElements, self.playingIndex);
-      console.log("titel: " + titel);
-      //const titelElem = new Audio(titel);        
-      self.audioElem = new Audio(titel);
-      
-      self.audioElem.addEventListener("ended", self.nextTrack);
-      self.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-      const track = self.audioCtx.createMediaElementSource(self.audioElem);
-      track.connect(self.audioCtx.destination);
-      self.audioElem.play();
-      self.playState = 'play';
-      
-      
-      //const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-    }
+    const url = 'api/alist/' + self.playingList + "/" + self.playingIndex;
+    self.http_get(url, function(responseText){
+      if(responseText === 'eom') {
+        // ende
+        self.audioElem.removeEventListener("ended", self.nextTrack);
+        self.playingIndex = -1;
+        self.playState = 'stop';
+      } else {
+        const titel = JSON.parse(responseText);
+        console.log("titel: " + titel.name);
+        const titelUrl = self.getTitelFromJSONObj(titel);
+        //const titelElem = new Audio(titel);        
+        self.audioElem = new Audio(titelUrl);
+        self.audioElem.addEventListener("ended", self.nextTrack);
+        self.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        const track = self.audioCtx.createMediaElementSource(self.audioElem);
+        track.connect(self.audioCtx.destination);
+        self.audioElem.play();
+        self.playState = 'play';        
+      }
+    });
   };
   
-  this.getTitelFromAudioElement = function(audioElements, index) {
+  this.getTitelFromJSONObj = function(titelObj) {
     //const audioElements = document.querySelectorAll('.entity-eintrag');
     const host = 'http://' + window.location.host + '/tango';
-    const element = audioElements[index];
-    const attr = element.attributes;
-    const titel = host + attr.getNamedItem('data-kat').value + 
-              attr.getNamedItem('data-pfad').value + attr.getNamedItem('data-datei').value;
+    const titel = host + titelObj.katalogUrl + titelObj.pfad + titelObj.name;
     return titel;
   };
   

--
Gitblit v1.9.3