select

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

src/App.js

@@ -2,7 +2,7 @@ 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 { Button, Icon, Range, Select } from "react-materialize";
 import text from "./list.txt";
 
 const App = () => {
@@ -113,12 +113,14 @@ const App = () => {
     if (once.current) return
     once.current = true
     M.AutoInit()
+    M.Range.init(document.querySelectorAll('input[type="range"]'), {
+      onChange: (e) => {
+        setCurrentVolume(e.target.value / 100)
+      }
+    })
     load()
     loadImages()
     setAudioUrl('/stream.mp3')
-    document.querySelector('input[type="range"]').addEventListener('change', (e) => {
-      setCurrentVolume(e.target.value / 100)
-    })
     const inter = setInterval(() => {
       load()
     }, (Math.floor(Math.random() * 20) + 10) * 1000),
@@ -142,34 +144,58 @@ const App = () => {
   }, [currentVolume])
   return (
     <>
-      <h1><a href="https://git.manalejandro.com/ale/stream-radio" title="Stream Radio Git Repository" alt="Stream Radio Git Repository" target="_blank"><Icon className="medium">hearing</Icon> Stream Radio</a></h1>
-      {analyzerData && <WaveForm analyzerData={analyzerData} />}
-      <h4><p className="bounce"><a href={link} target="_blank" title={title} alt={title}>{bounce}</a></p></h4>
-      <br /><br />
-      <div className="brown darken-3 player">
-        {paused ?
-          <Button node="button" className="brown" onClick={() => play()} waves="light" floating><Icon>play_arrow</Icon></Button>
-          :
-          <Button node="button" className="brown" onClick={() => {
-            audioElmRef.current?.pause()
-            setPaused(true)
-          }} waves="light" floating><Icon>pause</Icon></Button>
-        }&nbsp;
-        {muted ?
-          <Button node="button" className="brown" onClick={() => setMuted(false)} waves="light" floating><Icon>volume_off</Icon></Button>
-          :
-          <Button node="button" className="brown" onClick={() => setMuted(true)} waves="light" floating><Icon>volume_up</Icon></Button>
-        }&nbsp;&nbsp;
-        <Range className="brown" waves="light"
-          min={0}
-          max={100}
-          step={1}
-        />&nbsp;&nbsp;
-        <span>
-          <Icon tiny>people</Icon>&nbsp;{currentListeners} / {maxListeners}
-        </span>
-      </div >
-      <audio src={audioUrl} ref={audioElmRef} volume={Math.log10(currentVolume * 10)} preload={"none"} muted={muted} controls={false} />
+      <header className="brown darken-3">
+        <h1><a href="https://git.manalejandro.com/ale/stream-radio" title="Stream Radio Git Repository" alt="Stream Radio Git Repository" target="_blank"><Icon className="medium">hearing</Icon> Stream Radio</a></h1>
+      </header>
+      <section className="brown darken-3">
+        <Select id="Select-1" className="brown darken-3" label="Select the Stream" options={{
+          classes: 'brown darken-3',
+          dropdownOptions: {
+            alignment: 'left',
+            coverTrigger: false,
+            constrainWidth: false,
+            container: document.querySelector('section')
+          }
+        }} multiple={false} value={audioUrl} onChange={(e) => {
+          setAudioUrl(e.target.value)
+          setPaused(false)
+          play()
+        }}>
+          <option value="/stream.mp3" selected>Stream Radio</option>
+          <option value="https://rtva-live-radio.flumotion.com/rtva/csr.mp3">CanalSur Radio</option>
+          <option value="https://rtva-live-radio.flumotion.com/rtva/rai.mp3">RAI</option>
+        </Select>
+        <br />
+        <h4><p className="bounce"><a href={link} target="_blank" title={title} alt={title}>{bounce}</a></p></h4>
+        <br /><br />
+        <div className="brown darken-3 player">
+          {paused ?
+            <Button node="button" className="brown" onClick={() => play()} waves="light" floating><Icon>play_arrow</Icon></Button>
+            :
+            <Button node="button" className="brown" onClick={() => {
+              audioElmRef.current?.pause()
+              setPaused(true)
+            }} waves="light" floating><Icon>pause</Icon></Button>
+          }&nbsp;
+          {muted ?
+            <Button node="button" className="brown" onClick={() => setMuted(false)} waves="light" floating><Icon>volume_off</Icon></Button>
+            :
+            <Button node="button" className="brown" onClick={() => setMuted(true)} waves="light" floating><Icon>volume_up</Icon></Button>
+          }&nbsp;&nbsp;
+          <Range className="brown" waves="light"
+            min={0}
+            max={100}
+            step={1}
+          />&nbsp;&nbsp;
+          <span>
+            <Icon tiny>people</Icon>&nbsp;{currentListeners} / {maxListeners}
+          </span>
+        </div >
+      </section>
+      <footer className="brown darken-3">
+        <audio src={audioUrl} ref={audioElmRef} volume={Math.log10(currentVolume * 10)} preload={"none"} muted={muted} controls={false} />
+        {analyzerData && <WaveForm analyzerData={analyzerData} />}
+      </footer>
     </>
   )
 }