loadImages

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

src/App.js

@@ -19,7 +19,6 @@ const App = () => {
     [maxListeners, setMaxListeners] = useState(0),
     [paused, setPaused] = useState(true),
     audioElmRef = useRef(null),
-    rangeRef = useRef(null),
     loadedAnalyzer = useRef(false),
     once = useRef(false),
     audioAnalyzer = () => {
@@ -63,6 +62,11 @@ const App = () => {
         console.error('Error fetching data: ' + err.message)
       }
     },
+    loadImages = useCallback(async () => {
+      const response = await fetch(text)
+      const data = await response.text()
+      setImages(data.split('\n').filter(line => line.length > 0))
+    }),
     load = useCallback(async () => {
       await loadData()
       await loadListeners()
@@ -103,23 +107,23 @@ const App = () => {
     }
   }, [json])
   useEffect(() => {
-    document.getElementById('root').style.backgroundImage = `url('/wallpapers/${images[Math.floor(Math.random() * images.length)]}')`
+    document.body.style.backgroundImage = `url('/wallpapers/${images[Math.floor(Math.random() * images.length)]}')`
   }, [images])
   useEffect(() => {
     if (once.current) return
     once.current = true
     M.AutoInit()
     load()
-    setImages(text.split('\n').filter(line => line.length > 0))
+    loadImages()
     setAudioUrl('/stream.mp3')
-    rangeRef.current.addEventListener('change', (e) => {
+    document.querySelector('input[type="range"]').addEventListener('change', (e) => {
       setCurrentVolume(e.target.value / 100)
     })
     const inter = setInterval(() => {
       load()
     }, (Math.floor(Math.random() * 20) + 10) * 1000),
       interback = setInterval(() => {
-        setImages(text.split('\n').filter(line => line.length > 0))
+        loadImages()
       }, (Math.floor(Math.random() * 60) + 90) * 1000)
     return () => {
       clearInterval(inter)
@@ -156,7 +160,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" ref={rangeRef}
+        <Range className="brown" waves="light"
           min={0}
           max={100}
           step={1}