diff --git a/package.json b/package.json index cc06b0d..48c8923 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,11 @@ "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.3.0", "@testing-library/user-event": "^13.5.0", + "ajv": "^8.17.1", "materialize-css": "^1.0.0", "prop-types": "^15.8.1", - "react": "^19.1.0", - "react-dom": "^19.1.0", + "react": "^19.2.3", + "react-dom": "^19.2.3", "react-materialize": "^3.10.0", "react-scripts": "5.0.1", "sass": "^1.89.0", diff --git a/src/App.js b/src/App.js index 0c4d0f1..645c2cc 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import "./App.css"; -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import WaveForm from "./WaveForm"; import M from "materialize-css"; import text from "./list.txt"; @@ -13,11 +13,19 @@ import useBackgroundImages from "./hooks/useBackgroundImages"; import Header from "./components/Header"; import TrackInfo from "./components/TrackInfo"; import AudioControls from "./components/AudioControls"; +import StreamSelector from "./components/StreamSelector"; /** * Main App component */ const App = () => { + // State for current stream selection + const [currentStream, setCurrentStream] = useState({ + id: 'stream-radio', + name: 'Stream Radio', + url: '/stream.mp3' + }); + // Custom hook for managing background images const { loadImages } = useBackgroundImages(text); @@ -46,6 +54,26 @@ const App = () => { // Initialization flag to prevent multiple initializations const initialized = useRef(false); + // Handle stream change + const handleStreamChange = (newStream) => { + const wasPlaying = !paused; + + // Pause current playback + if (wasPlaying) { + pause(); + } + + // Update stream + setCurrentStream(newStream); + + // Resume playback if was playing + if (wasPlaying) { + setTimeout(() => { + play(); + }, 100); + } + }; + // Initialize app and setup periodic data refresh useEffect(() => { if (initialized.current) return; @@ -100,8 +128,13 @@ const App = () => { onToggleMute={toggleMute} /> + + { + const streams = [ + { + id: 'stream-radio', + name: 'Stream Radio', + url: '/stream.mp3' + }, + { + id: 'canal-sur', + name: 'Canal Sur Radio', + url: 'https://rtva-live-radio.flumotion.com/rtva/csr.mp3' + }, + { + id: 'radio-andalucia', + name: 'Radio Andalucía Información', + url: 'https://rtva-live-radio.flumotion.com/rtva/rai.mp3' + } + ]; + + const handleChange = (e) => { + const selectedStream = streams.find(stream => stream.id === e.target.value); + if (selectedStream) { + onStreamChange(selectedStream); + } + }; + + return ( + + + + {streams.map(stream => ( + + {stream.name} + + ))} + + + Selecciona una emisora + + + + ); +}; + +StreamSelector.propTypes = { + currentStream: PropTypes.string.isRequired, + onStreamChange: PropTypes.func.isRequired +}; + +export default StreamSelector;