download title

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

public/wallpapers/list.txt

@@ -1,67 +0,0 @@
-pexels-baskincreativeco-1480807.jpg
-pexels-belle-co-99483-847393.jpg
-pexels-bess-hamiti-83687-36487.jpg
-pexels-carlos-oliva-1966452-3586966.jpg
-pexels-christian-heitz-285904-842711.jpg
-pexels-dreamypixel-547115.jpg
-pexels-eberhardgross-1062249.jpg
-pexels-eberhardgross-1287075.jpg
-pexels-eberhardgross-1287089.jpg
-pexels-eberhardgross-1301976.jpg
-pexels-eberhardgross-1367192(1).jpg
-pexels-eberhardgross-1367192.jpg
-pexels-eberhardgross-1612351.jpg
-pexels-eberhardgross-1612360.jpg
-pexels-eberhardgross-1612362.jpg
-pexels-eberhardgross-1612371.jpg
-pexels-eberhardgross-1624255.jpg
-pexels-eberhardgross-534164.jpg
-pexels-eberhardgross-629167.jpg
-pexels-eberhardgross-691668.jpg
-pexels-eberhardgross-707344.jpg
-pexels-eberhardgross-730981.jpg
-pexels-esan-2085998.jpg
-pexels-fotios-photos-109260.jpg
-pexels-francesco-ungaro-1525041.jpg
-pexels-gochrisgoxyz-1477166.jpg
-pexels-johnnoibn-1448136.jpg
-pexels-joshkjack-135018.jpg
-pexels-jplenio-1110656.jpg
-pexels-jplenio-1146708.jpg
-pexels-jplenio-1435075.jpg
-pexels-kasperphotography-1042423.jpg
-pexels-katja-79053-592077.jpg
-pexels-lastly-937782.jpg
-pexels-lilartsy-1213447.jpg
-pexels-maxfrancis-2246476.jpg
-pexels-mdsnmdsnmdsn-1831234.jpg
-pexels-mdx014-814499.jpg
-pexels-michal-pech-213601-1632044.jpg
-pexels-no-name-14543-66997.jpg
-pexels-pixabay-158063.jpg
-pexels-pixabay-33109(1).jpg
-pexels-pixabay-33109.jpg
-pexels-pixabay-33545.jpg
-pexels-pixabay-358532.jpg
-pexels-pixabay-41004.jpg
-pexels-pixabay-414144.jpg
-pexels-pixabay-416160.jpg
-pexels-pixabay-459203.jpg
-pexels-pixabay-462162.jpg
-pexels-pixabay-50594.jpg
-pexels-pixabay-50686.jpg
-pexels-pixabay-52500.jpg
-pexels-rpnickson-2559941.jpg
-pexels-rpnickson-2647990.jpg
-pexels-samandgos-709552.jpg
-pexels-samkolder-2387873.jpg
-pexels-sebastian-312105.jpg
-pexels-simon73-1183099.jpg
-pexels-souvenirpixels-1519088.jpg
-pexels-souvenirpixels-417074.jpg
-pexels-stefanstefancik-919606.jpg
-pexels-stywo-1054289.jpg
-pexels-stywo-1668246.jpg
-pexels-therato-1933239.jpg
-pexels-todd-trapani-488382-1198817.jpg
-pexels-umaraffan499-21787.jpg

src/App.css

@@ -12,6 +12,18 @@ h1 {
   font-size: 4rem;
 }
 
+h1 a {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  display: inline-block;
+}
+
+h1 a:hover {
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+}
+
 h4 {
   margin: 0 auto;
   overflow: hidden;
@@ -19,6 +31,8 @@ h4 {
   transition: 0.3s;
   width: 85%;
   font-size: x-large;
+  backdrop-filter: blur(10px);
+  border-radius: 10px;
 }
 
 h4:hover {

src/App.js

@@ -23,7 +23,6 @@ const App = () => {
   
   // Custom hook for streaming data
   const { 
-    json, 
     currentListeners, 
     maxListeners, 
     title, 
@@ -36,12 +35,13 @@ const App = () => {
   const {
     audioElmRef,
     analyzerData,
+    currentVolume,
     muted,
     paused,
     play,
     pause,
     toggleMute
-  } = useAudioPlayer("/stream.mp3");
+  } = useAudioPlayer();
   
   // Initialization flag to prevent multiple initializations
   const initialized = useRef(false);
@@ -77,7 +77,7 @@ const App = () => {
   
   return (
     <>
-      <Header />
+      <Header repoUrl="https://git.manalejandro.com/ale/stream-radio" />
       
       {analyzerData && <WaveForm analyzerData={analyzerData} />}
       
@@ -92,6 +92,7 @@ const App = () => {
       <AudioControls
         paused={paused}
         muted={muted}
+        currentVolume={currentVolume}
         currentListeners={currentListeners}
         maxListeners={maxListeners}
         onPlay={play}

src/App.test.js

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+test('renders stream radio app', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+  const linkElement = screen.getByText(/stream radio/i);
   expect(linkElement).toBeInTheDocument();
 });

src/WaveForm.jsx

@@ -24,12 +24,13 @@ const animateBars = (analyser, canvas, ctx, dataArray, bufferLength) => {
 
 const WaveForm = ({ analyzerData }) => {
   const canvasRef = useRef(null);
-  const { dataArray, analyzer, bufferLength } = analyzerData;
   const [width, height] = useSize();
 
   useEffect(() => {
     const canvas = canvasRef.current;
-    if (!canvas || !analyzer) return;
+    if (!canvas || !analyzerData || !analyzerData.analyzer) return;
+    
+    const { dataArray, analyzer, bufferLength } = analyzerData;
     const ctx = canvas.getContext("2d");
 
     let animationId;
@@ -48,7 +49,7 @@ const WaveForm = ({ analyzerData }) => {
     return () => {
       cancelAnimationFrame(animationId);
     };
-  }, [dataArray, analyzer, bufferLength, width, height]);
+  }, [analyzerData, width, height]);
 
   return (
     <canvas

src/components/AudioControls.js

@@ -6,7 +6,8 @@ import PropTypes from "prop-types";
  */
 const AudioControls = ({ 
   paused, 
-  muted, 
+  muted,
+  currentVolume,
   currentListeners, 
   maxListeners, 
   onPlay, 
@@ -64,7 +65,7 @@ const AudioControls = ({
         min={0}
         max={100}
         step={1}
-        defaultValue={50}
+        value={Math.round(currentVolume * 100)}
       />
         
       <span>
@@ -77,6 +78,7 @@ const AudioControls = ({
 AudioControls.propTypes = {
   paused: PropTypes.bool.isRequired,
   muted: PropTypes.bool.isRequired,
+  currentVolume: PropTypes.number,
   currentListeners: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   maxListeners: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   onPlay: PropTypes.func.isRequired,
@@ -85,6 +87,7 @@ AudioControls.propTypes = {
 };
 
 AudioControls.defaultProps = {
+  currentVolume: 0.5,
   currentListeners: 0,
   maxListeners: 0
 };

src/components/Header.js

@@ -1,4 +1,3 @@
-import { useEffect, useRef, useCallback } from "react";
 import PropTypes from "prop-types";
 import { Icon } from "react-materialize";
 
@@ -11,9 +10,9 @@ const Header = ({ repoUrl }) => {
       <a 
         href={repoUrl} 
         title="Stream Radio Git Repository" 
-        alt="Stream Radio Git Repository" 
         target="_blank"
         rel="noopener noreferrer"
+        style={{ color: 'inherit', textDecoration: 'none' }}
       >
         <Icon className="medium">hearing</Icon> Stream Radio
       </a>

src/hooks/useAudioPlayer.js

@@ -2,10 +2,9 @@ import { useCallback, useRef, useState, useEffect } from "react";
 
 /**
  * Custom hook for managing audio playback functionality
- * @param {string} audioUrl - URL of the audio stream
  * @returns {Object} - Audio player state and controls
  */
-const useAudioPlayer = (audioUrl) => {
+const useAudioPlayer = () => {
   const [analyzerData, setAnalyzerData] = useState(null);
   const [currentVolume, setCurrentVolume] = useState(0.5);
   const [muted, setMuted] = useState(false);
@@ -13,6 +12,7 @@ const useAudioPlayer = (audioUrl) => {
   
   const audioElmRef = useRef(null);
   const loadedAnalyzer = useRef(false);
+  const previousVolume = useRef(0.5); // Store previous volume for unmuting
   
   // Initialize audio analyzer for visualization
   const initAudioAnalyzer = useCallback(() => {
@@ -41,7 +41,8 @@ const useAudioPlayer = (audioUrl) => {
     }
     
     setPaused(false);
-    setMuted(false);
+    
+    // Don't automatically unmute when playing - let user control mute state
     try {
       await audioElmRef.current?.play();
     } catch (error) {
@@ -57,22 +58,42 @@ const useAudioPlayer = (audioUrl) => {
   
   // Toggle mute function
   const toggleMute = useCallback(() => {
-    setMuted(prevMuted => !prevMuted);
-  }, []);
+    if (!audioElmRef.current) return;
+    
+    setMuted(prevMuted => {
+      const newMuted = !prevMuted;
+      
+      if (newMuted) {
+        // Muting: store current volume and set to 0
+        previousVolume.current = currentVolume;
+        setCurrentVolume(0);
+        audioElmRef.current.muted = true;
+      } else {
+        // Unmuting: restore previous volume
+        const volumeToRestore = previousVolume.current > 0 ? previousVolume.current : 0.5;
+        setCurrentVolume(volumeToRestore);
+        audioElmRef.current.muted = false;
+      }
+      
+      return newMuted;
+    });
+  }, [currentVolume]);
   
   // Update volume when currentVolume changes
   useEffect(() => {
-    if (!audioElmRef.current || audioElmRef.current.volume === currentVolume) return;
-    
-    // Update muted state based on volume level
-    if (currentVolume > 0) {
-      setMuted(false);
-    } else if (currentVolume === 0) {
-      setMuted(true);
-    }
+    if (!audioElmRef.current) return;
     
     audioElmRef.current.volume = currentVolume;
-  }, [currentVolume]);
+    
+    // Update muted state based on volume level
+    if (currentVolume === 0 && !muted) {
+      setMuted(true);
+      audioElmRef.current.muted = true;
+    } else if (currentVolume > 0 && muted) {
+      setMuted(false);
+      audioElmRef.current.muted = false;
+    }
+  }, [currentVolume, muted]);
   
   // Setup volume change listener
   useEffect(() => {
@@ -81,12 +102,18 @@ const useAudioPlayer = (audioUrl) => {
     if (!volumeSlider) return;
     
     const handleVolumeChange = (e) => {
-      setCurrentVolume(e.target.value / 100);
+      const newVolume = e.target.value / 100;
+      if (newVolume > 0) {
+        previousVolume.current = newVolume;
+      }
+      setCurrentVolume(newVolume);
     };
     
+    volumeSlider.addEventListener('input', handleVolumeChange);
     volumeSlider.addEventListener('change', handleVolumeChange);
     
     return () => {
+      volumeSlider.removeEventListener('input', handleVolumeChange);
       volumeSlider.removeEventListener('change', handleVolumeChange);
     };
   }, []);
@@ -97,7 +124,6 @@ const useAudioPlayer = (audioUrl) => {
     currentVolume,
     muted,
     paused,
-    setCurrentVolume,
     play,
     pause,
     toggleMute

src/hooks/useStreamData.js

@@ -100,14 +100,14 @@ const useStreamData = () => {
       setStreamInfo(prev => ({
         ...prev,
         title: trackTitle || 'Stream Radio',
-        link: json?.media['@ref']?.replace('/musica', 'https://manalejandro.com') || '',
+        link: json?.media['@ref']?.replace('/musica', 'https://radio.manalejandro.com') || '',
         trackInfo
       }));
-    } else if (!json?.media) {
+    } else if (!json?.media && json?.title) {
       setStreamInfo(prev => ({
         ...prev,
         title: 'Stream Radio',
-        link: '',
+        link: json?.title?.replace('/musica', 'https://radio.manalejandro.com') || '',
         trackInfo: 'Now Playing: Title not available'
       }));
     }

src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.scss';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -10,8 +9,3 @@ root.render(
     <App />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;