From c259d990ad63b38140985ba6e25b5046dd767833 Mon Sep 17 00:00:00 2001 From: ulrich Date: Fri, 22 Nov 2024 08:16:48 +0000 Subject: [PATCH] Build-Anweisungen in Readme aktualisiert. --- www/js/app.js | 146 +++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 124 insertions(+), 22 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 9b634bb..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); @@ -477,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() { @@ -527,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(){ @@ -627,6 +724,11 @@ 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(); }); -- Gitblit v1.9.3