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 | 240 ++++++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 208 insertions(+), 32 deletions(-)
diff --git a/www/js/app.js b/www/js/app.js
index c7f341e..fafbd3d 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -7,6 +7,11 @@
//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,7 +41,7 @@
self.fusszeile_umschalten();
self.seitenleiste_umschalten();
- self.dialog_unten_zeigen();
+ self.dialog_unten_zeigen();
};
/* ---------------- Entitaets-Listen ----------------- */
@@ -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);
@@ -402,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');
+ });
});
});
};
@@ -436,25 +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) {
- if(kommando !== 'volup' && kommando !== 'voldn') {
- 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() {
@@ -486,14 +581,57 @@
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(){
@@ -532,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;
@@ -554,30 +703,57 @@
};
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 ----------------------- */
/*
--
Gitblit v1.9.3