commit 30/10/2025

html/webpage/assets/css/styles.css

@@ -124,6 +124,22 @@ body {
   display: block;
 }
 
+.class05 {
+  width: 5%;
+}
+
+.class10 {
+  width: 10%;
+}
+
+.class15 {
+  width: 15%;
+}
+
+.class20 {
+  width: 20%;
+}
+
 .class25 {
   width: 25%;
 }
@@ -442,3 +458,40 @@ table {
   color: white;
 }
 
+.pad-btn {
+  padding-left: 0.5rem;
+}
+
+.btn-play {
+  background-color: #03747b;
+  color: white;
+}
+
+.btn-play:hover {
+  background-color: #02585e;
+  color: white;
+}
+
+.tablepaging, .tablesoundbank {
+  height: 180px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 10px;
+}
+
+.table-container {
+  max-height: 310px;
+  overflow-y: auto;
+}
+
+.tablepaging thead th, .tablesoundbank thead th {
+  position: sticky;
+  top: 0;
+  background-color: #f8f9fa;
+  z-index: 2;
+}
+
+.pad-play {
+  margin-bottom: -1rem;
+}
+

html/webpage/assets/js/overview.js

@@ -50,7 +50,7 @@ function getCardByIndex(index) {
  */
 function UpdateStreamerCard(values) {
     if (!Array.isArray(values) || values.length === 0) return;
-    
+
     function setProgress(index, $bar, value, max = 100) {
         const v = Number(value ?? 0);
         const pct = Math.max(0, Math.min(100, Math.round((v / max) * 100)));
@@ -234,11 +234,129 @@ function RemoveAutomaticQueueByIndex(index, APIURL = "QueueTable/") {
     });
 }
 
+/**
+ * Fetches the list of listening zones and populates the dropdown.
+ */
+function GetListeningZones() {
+    $("#listenzone").empty();
+    fetchAPI("BroadcastZones/List", "GET", {}, null, (okdata) => {
+        if (Array.isArray(okdata) && okdata.length > 0) {
+            okdata.forEach(zone => {
+                $("#listenzone").append(new Option(zone.description, zone.zone));
+            });
+        } else {
+            console.log("GetListeningZones: okdata is not array");
+        }
+    });
+}
+
+/**
+ * Starts live audio for the selected broadcast zone.
+ * @param {String} bz Broadcast Zone
+ */
+function StartLiveAudio(bz, cbOK = null, cbFail = null) {
+    if (bz && bz.length > 0) {
+        let playurl = `/api/LiveAudio/Open/${bz}`;
+        const listenaudio = document.getElementById('listenaudio');
+        if (listenaudio) {
+            fetch(playurl, { method: 'GET' })
+                .then(response => {
+                    console.log("Fetch response for Live Audio:", JSON.stringify(response));
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    return response.blob();
+                })
+                .then(blob => {
+                    console.log(`Received audio stream for Broadcast Zone: ${bz}`);
+                    const url = window.URL.createObjectURL(blob);
+
+                    if (listenaudio) {
+                        listenaudio.pause();
+                        listenaudio.src = url;
+                        listenaudio.load();
+                        listenaudio.play();
+                        console.log(`Started Live Audio for Broadcast Zone: ${bz}`);
+                        listenaudio.setAttribute('visibility', 'visible');
+                        if (cbOK) cbOK();
+                    } else new Error("Listening audio element not found.");
+                })
+                .catch(error => {
+                    alert(`Error starting Live Audio for Broadcast Zone: ${bz}. ${error}`);
+                    if (cbFail) cbFail();
+                });
+        } else {
+            alert("Listening audio element not found.");
+            if (cbFail) cbFail();
+        }
+    } else {
+        alert("Please select a Broadcast Zone to start Live Audio.");
+        if (cbFail) cbFail();
+    }
+}
+
+/**
+ * Stops live audio for the selected broadcast zone.
+ * @param {String} bz Broadcast Zone
+ * @param {Function} cbOK Callback function on success
+ * @param {Function} cbFail Callback function on failure
+ */
+function StopLiveAudio(bz, cbOK = null, cbFail = null) {
+    if (bz && bz.length > 0) {
+        const listenaudio = document.getElementById('listenaudio');
+        if (listenaudio) {
+            listenaudio.pause();
+            listenaudio.src = "";
+            console.log("Stopped Live Audio.");
+            
+            let url = `/api/LiveAudio/Close/${bz}`;
+            fetch(url, { method: 'GET' })
+                .then(response => {
+                    console.log("Fetch response for closing Live Audio:", JSON.stringify(response));
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    console.log(`Live Audio for Broadcast Zone: ${bz} closed on server.`, data);
+                    listenaudio.setAttribute('visibility', 'hidden');
+                    if (cbOK) cbOK();
+                })
+                .catch(error => {
+                    console.log(`Error closing Live Audio for Broadcast Zone: ${bz} on server. ${error}`);
+                    if (cbFail) cbFail();
+                });
+
+
+
+        } else {
+            alert("Listening audio element not found.");
+            if (cbFail) cbFail();
+        }
+    } else {
+        alert("Please select a Broadcast Zone to stop Live Audio.");
+        if (cbFail) cbFail();
+    }
+}
+
 $(document).ready(function () {
     console.log("overview.js loaded");
 
 
-
+    GetListeningZones();
+    $("#startstoplisten").off('click').on('click', function () {
+        let bz = $("#listenzone").val();
+        let $icon = $(this).find('svg');
+        if ($icon.hasClass('fa-stop')) {
+            console.log("Stopping Live Audio for Broadcast Zone:", bz);
+            StopLiveAudio(bz);
+        } else {
+            console.log("Starting Live Audio for Broadcast Zone:", bz);
+            StartLiveAudio(bz);
+        }
+        $icon.toggleClass('fa-stop fa-play');
+    });
     $('#clearpagingqueue').off('click').on('click', function () {
         DoClear("QueuePaging/", "Paging Queue", (okdata) => {
             reloadPagingQueue();
@@ -311,8 +429,10 @@ $(document).ready(function () {
 
     window.addEventListener('ws_disconnected', () => {
         console.log("overview.js ws_disconnected event triggered");
-        if (intervaljob) clearInterval(intervaljob);
-        intervaljob = null;
+        if (intervaljob1) clearInterval(intervaljob1);
+        if (intervaljob2) clearInterval(intervaljob2);
+        intervaljob1 = null;
+        intervaljob2 = null;
     });
     window.addEventListener('ws_message', (event) => {
         let rep = event.detail;
@@ -335,7 +455,7 @@ $(document).ready(function () {
                     window.QueueTable = [];
                     if (Array.isArray(aq) && aq.length > 0) {
                         window.QueueTable.push(...aq);
-                    } 
+                    }
                     fill_automaticqueuetablebody(window.QueueTable);
                     break;
                 case "getStreamerOutputs":