'Hier spielen' berichtigt

ulrich

2024-11-21 1ef98569623b58f8b4e2b5863cea02bfb1e91a98

 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() {
@@ -359,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);
      
@@ -374,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();
    });
  };
@@ -395,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');
        });             
      });
    });
  };  
@@ -429,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() {
@@ -477,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 -------------------- */
  
@@ -497,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;
@@ -519,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 ----------------------- */
@@ -712,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') {