current listeners

Signed-off-by: ale <ale@manalejandro.com>

src/App.js

@@ -11,6 +11,8 @@ const App = () => {
     [muted, setMuted] = useState(false),
     [link, setLink] = useState(''),
     [title, setTitle] = useState('Stream Radio'),
+    [currentListeners, setCurrentListeners] = useState(0),
+    [maxListeners, setMaxListeners] = useState(0),
     audioElmRef = useRef(null),
     once = useRef(false),
     audioAnalyzer = () => {
@@ -43,6 +45,20 @@ const App = () => {
       }).catch(err => {
         console.error('Error fetching data: ' + err.message)
       })
+    },
+    loadListeners = () => {
+      fetch('/status.xsl').then(response => response.text()).then(data => {
+        const parser = new DOMParser(),
+          xmlDoc = parser.parseFromString(data, 'text/html'),
+          listeners = xmlDoc.getElementsByTagName('td')
+        for (let i = 0; i < listeners.length; i++) {
+          if (i === 9) {
+            setCurrentListeners(listeners[i].textContent)
+          } else if (i === 11) {
+            setMaxListeners(listeners[i].textContent)
+          }
+        }
+      })
     }
   useEffect(() => {
     if (json?.media?.track[0] && bounce.search(json?.media?.track[0].Title) === -1) {
@@ -72,9 +88,13 @@ const App = () => {
   }, [json])
   useEffect(() => {
     loadData()
+    loadListeners()
     setAudioUrl('/stream.mp3')
     audioAnalyzer()
-    const inter = setInterval(loadData, 15000)
+    const inter = setInterval(() => {
+      loadData()
+      loadListeners()
+    }, (Math.floor(Math.random() * 20) + 10) * 1000)
     return () => clearInterval(inter)
   }, [])
   useEffect(() => {
@@ -86,6 +106,7 @@ const App = () => {
     <>
       <h1>📻 Stream Radio</h1>
       {analyzerData && <WaveForm analyzerData={analyzerData} />}
+      <h2>Current Listeners: {currentListeners} - Peak: {maxListeners}</h2>
       <h4><p className="bounce"><a href={link} target="_blank" title={title} alt={title}>{bounce}</a></p></h4>
       <div>
         <h2>Audio Controls</h2>