From 1ef98569623b58f8b4e2b5863cea02bfb1e91a98 Mon Sep 17 00:00:00 2001
From: ulrich
Date: Thu, 21 Nov 2024 22:38:22 +0000
Subject: [PATCH] 'Hier spielen' berichtigt

---
 www/js/app.js |  289 ++++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 250 insertions(+), 39 deletions(-)

diff --git a/www/js/app.js b/www/js/app.js
index eb87169..fafbd3d 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -4,9 +4,14 @@
   var cache; // mustache templates
   var ortPfad;
   var mediaPfad;
-  var katUrl;
-  var selTitel;
+  //var katUrl;
+  //var selTitel;
   var katName;
+  var playingIndex;
+  var audioCtx;
+  var playState; // 'pause' oder 'play' oder 'stop'
+  var audioElem;
+  var playingList;
 
   this.init = function () {
     self.mediaPfad = '/';
@@ -36,9 +41,9 @@
     
     self.fusszeile_umschalten();
     self.seitenleiste_umschalten();
-    self.dialog_unten_zeigen();
+    self.dialog_unten_zeigen();    
   };
-  
+    
   /* ---------------- Entitaets-Listen ----------------- */
   
   this.livestream_selection = function() {
@@ -108,7 +113,8 @@
         self.mediaPfad = neuerPfad;
         self.media_liste();
       });
-      var url = '/tango' + self.ortPfad + self.mediaPfad;
+      //var url = '/tango' + self.ortPfad + self.mediaPfad;
+      var url = '.' + self.ortPfad + self.mediaPfad;
       if(!url.endsWith('/')) {
         url = url + '/';
       }
@@ -358,7 +364,10 @@
       self.addEvtListener('#pause-btn', 'click', function() {
         self.kommando('pause');
       });
-      self.addEvtListener('#weiter-btn', 'click', self.weiter);
+      //self.addEvtListener('#weiter-btn', 'click', self.weiter);
+      self.addEvtListener('#weiter-btn', 'click', function() {
+        self.kommando('next');
+      });
 
       self.addEvtListener('#hier-btn', 'click', self.hier_spielen);
       
@@ -373,7 +382,14 @@
       self.addEvtListener('#plst-btn', 'click', self.titel_liste);
       self.addEvtListener('#live-btn', 'click', self.livestream_selection);
       self.addEvtListener('#switch-btn', 'click', self.geraet_schalt_liste);
-    
+
+      self.addEvtListener('#voldn-btn', 'click', function() {
+        self.kommando('voldn');
+      });
+      self.addEvtListener('#volup-btn', 'click', function() {
+        self.kommando('volup');
+      });
+      
       self.media_liste();
     });
   };
@@ -394,6 +410,47 @@
           self.removeClassMulti('selected');
           t.classList.add('selected');
         });
+        self.addEvtListener('.entity-eintrag', 'dragstart', function (e) {
+          //console.log("drag started");          
+          e.dataTransfer.setData('text/plain', e.target.textContent);
+          setTimeout(() => {
+                  e.target.classList.add('hide');
+                  e.target.classList.add('drag-elem');
+          }, 0);          
+        });
+        self.addEvtListener('.entity-eintrag', 'dragenter', function (e) {
+          e.preventDefault();
+          //console.log("drag enter");
+          e.target.classList.add('drag-over');
+        });
+        self.addEvtListener('.entity-eintrag', 'dragover', function (e) {
+          e.preventDefault();
+          //console.log("drag over");
+          e.target.classList.add('drag-over');
+        });
+        self.addEvtListener('.entity-eintrag', 'dragleave', function (e) {
+          //console.log("drag leave");
+          e.target.classList.remove('drag-over');
+        });
+        self.addEvtListener('.entity-eintrag', 'drop', function (e) {     
+          e.preventDefault();
+          //console.log("drop");
+          //console.log("index: " + self.getIndexBySelector('drag-over'));
+          const pos = self.getIndexBySelector('drag-elem');
+          const zielPos = self.getIndexBySelector('drag-over');
+          const titeltext = e.dataTransfer.getData('text/plain');
+          const draggable = document.querySelector(".drag-elem");
+          draggable.classList.remove("drag-elem");
+          e.target.classList.remove('drag-over');
+          var plname = document.querySelector('#playlist').value;
+          self.http_put('api/alist/' + plname + "/" + pos + "/" + zielPos, '', function(responseText) {
+            //self.meldung_mit_timeout(responseText, 1500);
+          });
+          ulElem = draggable.parentElement;
+          ulElem.removeChild(draggable);          
+          e.target.insertAdjacentElement('beforebegin', draggable);
+          draggable.classList.remove('hide');
+        });             
       });
     });
   };  
@@ -428,23 +485,71 @@
     }
   };
   
+  /*
+   * DEPRECATED
+   */
   this.weiter = function() {
-    var bereichName = document.querySelector('.bereich-name').textContent;
-    if(bereichName === '') {
-      var titel = self.titelErmitteln(document.querySelector(".selected"));
-      var playername = document.querySelector('#abspieler').value;
-      console.log('plname: ' + playername + ' url: ' + titel.katalogUrl + titel.pfad + titel.name);
-      self.http_post('api/strg/' + playername + '/weiter/titel', JSON.stringify(titel), function(responseText) {
-        self.meldung_mit_timeout(responseText, 1500);
-      });   
-    }
+    //var bereichName = document.querySelector('.bereich-name').textContent;
+    //if(bereichName === '') {
+    //  var titel = self.titelErmitteln(document.querySelector(".selected"));
+    //  var playername = document.querySelector('#abspieler').value;
+    //  console.log('plname: ' + playername + ' url: ' + titel.katalogUrl + titel.pfad + titel.name);
+    //  self.http_post('api/strg/' + playername + '/weiter/titel', JSON.stringify(titel), function(responseText) {
+    //    self.meldung_mit_timeout(responseText, 1500);
+    //  });   
+    //}
   };
   
+  /*
+   * Ein Abspieler-Kommando ausfuehren. Der Client entscheidet anhand
+   * des Indikators self.playingIndex, ob 'hier spielen' gewaehlt wurde 
+   * (playingIndex groesser -1) oder das Kommando an den Server gehen soll.
+   * 
+   * self.kommendo('play') wird nur von der Schaltflaeche 'hier spielen' gerufen.
+   * Die Schaltflaeche Play ist mit self.play verknuepft (s.o.) und spielt Listen 
+   * oder Titel ueber des Server und Calypso.
+   * 
+   * @param {type} kommando stop, pause, next, play
+   * @returns nichts
+   */
   this.kommando = function(kommando) {
-    var abs = document.querySelector('#abspieler').value;
-    self.http_get('api/strg/' + abs + '/' + kommando, function(responseText) {
-      self.meldung_mit_timeout(responseText, 1500);
-    });
+    console.log(kommando);
+    if(self.playingIndex > -1) {
+      if(kommando === 'stop') {
+        self.audioElem.pause();
+        self.audioElem.currentTime = 0;
+        self.audioElem.removeEventListener("ended", self.nextTrack);
+        self.playingIndex = -1;
+        self.playState = 'stop';
+      } else if(kommando === 'next') {
+        const curidx = self.playingIndex;
+        self.kommando('stop');
+        self.playingIndex = curidx;
+        self.nextTrack();
+      } else if(kommando === 'pause') {
+        if(self.playState === 'pause') {
+          self.playState = 'play';
+          self.audioElem.play();
+        } else if(self.playState === 'play') {
+          self.playState = 'pause';
+          self.audioElem.pause();
+        }
+      } else if(kommando === 'play') {
+        if(self.playingIndex < 0) {
+          self.nextTrack();
+        } else {
+          self.audioElem.play();
+        }
+        self.playState = 'play';
+      }
+    } else {
+      var abs = document.querySelector('#abspieler').value;
+      self.http_get('api/strg/' + abs + '/' + kommando, function(responseText) {
+        if(kommando !== 'volup' && kommando !== 'voldn') {
+          self.meldung_mit_timeout(responseText, 1500);
+        }
+      });
+    }
   };
   
   this.hier_spielen = function() {
@@ -476,14 +581,83 @@
       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.playingIndex = -1;
+      self.nextTrack();
     }
-    console.log('url: ' + url);
-    //window.open(url);
   };  
+  
+  this.nextTrack = function() {
+    /*
+      
+      {
+        "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);
+    } else {
+      self.playingList = document.querySelector('#playlist').value;
+    }
+    self.playingIndex++;
+    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.audioElem.play();
+        self.playState = 'play'; 
+      }
+    });
+  };
+
+  this.getTitelFromJSONObj = function(titelObj) {
+    //const audioElements = document.querySelectorAll('.entity-eintrag');
+    const host = 'http://' + window.location.host + '/tango';
+    const titel = host + titelObj.katalogUrl + titelObj.pfad + titelObj.name;
+    return titel;
+  };
+  
+  this.gehe_zu_dialog_zeigen = function () {
+    self.dialog_laden_und_zeigen('data/tpl/gehe-zu.txt', '', function(){
+      const form = document.querySelector('form');      
+      form.addEventListener('submit', function(event) {
+        // hier gehe zu realisieren
+        event.preventDefault();
+        const data = new FormData(event.target);
+        const value = Object.fromEntries(data.entries());
+        var daten = JSON.stringify(value);
+        console.log('gehe zu mit ' + daten);
+        var sekunden = (value['std'] * 3600) + (value['min'] * 60) + (value['sek'] * 1);
+        if(value['richtung'] === 'zurueck') {
+          sekunden *= -1;
+        }
+        console.log('sekunden: ' + sekunden);
+        self.dialog_schliessen();
+        // HTTP GET /mz/api/strg/abspieler/seek/[sekunden]
+        self.kommando('seek/' + sekunden);
+      });
+      self.addEvtListener('#cancel-btn', 'click', function(event) {
+        self.dialog_schliessen();
+      });
+      self.menue_umschalten();    
+    });
+  };
     
   /* ------------- Verwaltungsfunktionen Abspielliste -------------------- */
   
@@ -496,6 +670,17 @@
     });
   };
   
+  /*
+   * {
+   *  "katalogUrl":"/media",
+   *  "pfad":"/Musik/B/Bay-City-Rollers/Original-Album-Classics/3/",
+   *  "name":"3-37-Love-Is.mp3",
+   *  "interpret":"Bay City Rollers",
+   *  "titelAnzName":"Love Is",
+   *  "album":"Original Album Classics"
+   * }
+   * @returns {undefined}
+   */
   this.titelDazu = function() {
     var titel = self.titelErmitteln(document.querySelector(".selected"));
     //var titelName = elem.textContent;
@@ -518,28 +703,55 @@
   };  
   
   this.titelWeg = function() {
-    var elem = document.querySelector(".selected");
-    var parentElem = elem.parentNode;
+    //var elem = document.querySelector(".selected");
+    //var parentElem = elem.parentNode;
     //console.log("elem: " + elem.nodeName + ", parent: " + parentElem.nodeName + ", len: " + parentElem.childNodes.length);
-    var liElems = parentElem.getElementsByTagName(elem.nodeName); // nur die LI Elemente
+    //var liElems = parentElem.getElementsByTagName(elem.nodeName); // nur die LI Elemente
     //console.log("liElems.anz: " + liElems.length);
-    var gefunden = false;
-    for(var i = 0; i < liElems.length && !gefunden; i++) {
+    //var gefunden = false;
+    //for(var i = 0; i < liElems.length && !gefunden; i++) {
       //console.log(liElems.item(i).textContent);
-      if(liElems.item(i).classList.contains("selected")) {
-        gefunden = true;
-        var index = i;
+      //if(liElems.item(i).classList.contains("selected")) {
+        //gefunden = true;
+        //var index = i;
         //console.log(elem.textContent + ' hat Index ' + i);
-      }
-    }
+      //}
+    //}
+    
+    const index = self.getIndexBySelector("selected");
     // /mz/api/alist/[pl-name]/[nr] 
     var plname = document.querySelector('#playlist').value;
     self.http_delete('api/alist/' + plname + '/' + index,'', function(responseText) {
       // DELETE	http://localhost:9090/mz/api/alist/liste1/0
       //self.meldung_mit_timeout(responseText, 1500);
+      if(self.playingList === plname) {
+        if(self.playingIndex > index) {
+          --self.playingIndex;
+        }
+      }
       self.titel_liste();
     });
     
+  };
+  
+  this.getIndexBySelector = function(selector) {
+    var qSel = '.' + selector;
+    var elem = document.querySelector(qSel);
+    var parentElem = elem.parentNode;
+    //console.log("elem: " + elem.nodeName + ", parent: " + parentElem.nodeName + ", len: " + parentElem.childNodes.length);
+    var liElems = parentElem.getElementsByTagName(elem.nodeName); // nur die LI Elemente
+    //console.log("liElems.anz: " + liElems.length);
+    var gefunden = false;
+    var index = -1;
+    for(var i = 0; i < liElems.length && !gefunden; i++) {
+      //console.log(liElems.item(i).textContent);
+      if(liElems.item(i).classList.contains(selector)) {
+        gefunden = true;
+        index = i;
+        //console.log(elem.textContent + ' hat Index ' + i);
+      }
+    }
+    return index;
   };
   
   /* ------------- Helfer fuer Entitaets-Formulare ----------------------- */
@@ -711,15 +923,14 @@
     self.http_call('DELETE', u, data, cb);
   };
   
-  this.http_call = function (method, u, data, scallback) {
+  this.http_call = function (method, callurl, data, scallback) {
     var xhr = new XMLHttpRequest();
-    var url = u;
     xhr.onreadystatechange = function () {
       if (this.readyState === 4 && this.status === 200) {
         scallback(this.responseText);
       }
     };
-    xhr.open(method, url);
+    xhr.open(method, callurl);
     if (method === 'GET') {
       xhr.send();
     } else if (method === 'POST' || method === 'PUT' || method === 'DELETE') {

--
Gitblit v1.9.3