From a0ecf24dedf8ecde4630499274fa108e9eb1d8ff Mon Sep 17 00:00:00 2001 From: ulrich Date: Fri, 22 Nov 2024 08:21:50 +0000 Subject: [PATCH] Angaben in Readme praezisiert. --- www/js/app.js | 286 +++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 248 insertions(+), 38 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 752e918..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() { @@ -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') { -- Gitblit v1.9.3