ale/stream-radio
0
Fork 0
Código Incidencias Pull Requests Acciones Paquetes Proyectos Lanzamientos Wiki Actividad

new refactor

Explorar el Código 
Signed-off-by: ale <ale@manalejandro.com>
Este commit está contenido en:
ale
2025-05-28 18:58:31 +02:00
padre 8bbd0c3b27
commit c1feaa9ade
Se han modificado 4 ficheros con 34 adiciones y 35 borrados
Descargar archivo de parche Descargar archivo de diferencias Expandir todos los archivos Contraer todos los archivos

1
public/index.html
Ver fichero

@@ -29,7 +29,6 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<script src="js/materialize.min.js" defer></script>
<title>Stream Radio</title>
</head>
<body>

6
public/js/materialize.min.js vendido
Ver fichero

Las diferiencias del archivo han sido suprimidas porque una o mas lineas son muy largas

62
src/App.js
Ver fichero

@@ -1,7 +1,9 @@
import "./App.css";
import { useCallback, useEffect, useRef, useState } from "react";
import WaveForm from "./WaveForm";
import M from "materialize-css";
import { Button, Icon, Range } from "react-materialize";
import text from "./list.txt";
const App = () => {
const [audioUrl, setAudioUrl] = useState(null),
@@ -17,6 +19,8 @@ const App = () => {
[maxListeners, setMaxListeners] = useState(0),
[paused, setPaused] = useState(true),
audioElmRef = useRef(null),
rangeRef = useRef(null),
loadedAnalyzer = useRef(false),
once = useRef(false),
audioAnalyzer = () => {
const audioCtx = new (window.AudioContext || window.webkitAudioContext)(),
@@ -32,23 +36,20 @@ const App = () => {
}
setAnalyzerData({ analyzer, bufferLength, dataArray })
},
loadData = () => {
fetch('/stream.json').then(response => response.json()).then(json => {
loadData = async () => {
try {
const response = await fetch('/stream.json'),
json = await response.json()
setJson(json)
}).catch(err => {
} catch (err) {
console.error('Error fetching data: ' + err.message)
})
}
},
loadImages = () => {
fetch('/wallpapers/list.txt').then(response => response.text()).then(text => {
setImages(text.split('\n').filter(line => line.length > 0))
}).catch(err => {
console.error('Error fetching data: ' + err.message)
})
},
loadListeners = () => {
fetch('/status.xsl').then(response => response.text()).then(data => {
const parser = new DOMParser(),
loadListeners = async () => {
try {
const response = await fetch('/status.xsl'),
data = await response.text(),
parser = new DOMParser(),
xmlDoc = parser.parseFromString(data, 'text/html'),
listeners = xmlDoc.getElementsByTagName('td')
for (let i = 0; i < listeners.length; i++) {
@@ -58,14 +59,18 @@ const App = () => {
setMaxListeners(listeners[i].textContent)
}
}
}).catch(err => {
} catch (err) {
console.error('Error fetching data: ' + err.message)
})
}
},
load = useCallback(async () => {
await loadData()
await loadListeners()
}),
play = useCallback(async () => {
if (!once.current) {
if (!loadedAnalyzer.current) {
audioAnalyzer()
once.current = true
loadedAnalyzer.current = true
}
setPaused(false)
setMuted(false)
@@ -98,22 +103,23 @@ const App = () => {
}
}, [json])
useEffect(() => {
document.body.style.backgroundImage = `url('/wallpapers/${images[Math.floor(Math.random() * images.length)]}')`
document.getElementById('root').style.backgroundImage = `url('/wallpapers/${images[Math.floor(Math.random() * images.length)]}')`
}, [images])
useEffect(() => {
loadData()
loadImages()
loadListeners()
if (once.current) return
once.current = true
M.AutoInit()
load()
setImages(text.split('\n').filter(line => line.length > 0))
setAudioUrl('/stream.mp3')
document.querySelector('input[type="range"]').addEventListener('change', (e) => {
rangeRef.current.addEventListener('change', (e) => {
setCurrentVolume(e.target.value / 100)
})
const inter = setInterval(() => {
loadData()
loadListeners()
load()
}, (Math.floor(Math.random() * 20) + 10) * 1000),
interback = setInterval(() => {
loadImages()
setImages(text.split('\n').filter(line => line.length > 0))
}, (Math.floor(Math.random() * 60) + 90) * 1000)
return () => {
clearInterval(inter)
@@ -150,7 +156,7 @@ const App = () => {
:
<Button node="button" className="brown" onClick={() => setMuted(true)} waves="light" floating><Icon>volume_up</Icon></Button>
}&nbsp;&nbsp;
<Range className="brown" waves="light"
<Range className="brown" waves="light" ref={rangeRef}
min={0}
max={100}
step={1}
@@ -159,7 +165,7 @@ const App = () => {
<Icon tiny>people</Icon>&nbsp;{currentListeners} / {maxListeners}
</span>
</div >
<audio src={audioUrl} ref={audioElmRef} volume={Math.log(currentVolume)} preload={"none"} muted={muted} controls={false} />
<audio src={audioUrl} ref={audioElmRef} volume={Math.log10(currentVolume * 10)} preload={"none"} muted={muted} controls={false} />
</>
)
}

0
public/wallpapers/list.txt → src/list.txt
Ver fichero