diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e7ad6f0..85cc98d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,9 @@ import { Inter } from "next/font/google"; import "./globals.css"; import { ServiceWrapper } from "@/components/ServiceWrapper"; import Tag from "@/tag/Tag"; +import { BackgroundLofiMusicPlayer } from "@/components/BackgroundLofiMusicPlayer"; + +// Create the BackgroundLofiMusicPlayer component file at src/components/BackgroundLofiMusicPlayer.tsx const notoSans = Noto_Sans({ variable: "--font-noto-sans", subsets: ["latin"], @@ -28,6 +31,7 @@ export default function RootLayout({ + {children} diff --git a/src/components/BackgroundLofiMusicPlayer.tsx b/src/components/BackgroundLofiMusicPlayer.tsx new file mode 100644 index 0000000..d3928da --- /dev/null +++ b/src/components/BackgroundLofiMusicPlayer.tsx @@ -0,0 +1,161 @@ +'use client'; + +import { useState, useEffect, useRef } from 'react'; +import { Play, Pause, Volume2, VolumeX } from 'lucide-react'; + +interface BackgroundLofiMusicPlayerProps {} + +export function BackgroundLofiMusicPlayer({}: BackgroundLofiMusicPlayerProps) { + const audioRef = useRef(null); + const [isPlaying, setIsPlaying] = useState(false); + const [volume, setVolume] = useState(0.3); + const [isMuted, setIsMuted] = useState(false); + const [hasUserInteracted, setHasUserInteracted] = useState(false); + const [isExpanded, setIsExpanded] = useState(false); + + const lofiStreamUrl = + 'https://www.chosic.com/wp-content/uploads/2021/07/free-lofi-hip-hop-beats-background-music-for-videos.mp3'; + + useEffect(() => { + if (audioRef.current) { + audioRef.current.volume = isMuted ? 0 : volume; + } + }, [volume, isMuted]); + + useEffect(() => { + const handleUserInteraction = () => { + setHasUserInteracted(true); + document.removeEventListener('click', handleUserInteraction); + document.removeEventListener('keydown', handleUserInteraction); + }; + + document.addEventListener('click', handleUserInteraction); + document.addEventListener('keydown', handleUserInteraction); + + return () => { + document.removeEventListener('click', handleUserInteraction); + document.removeEventListener('keydown', handleUserInteraction); + }; + }, []); + + const togglePlayPause = () => { + if (!audioRef.current) return; + + if (isPlaying) { + audioRef.current.pause(); + setIsPlaying(false); + } else { + audioRef.current.play().catch((error) => { + console.error('Autoplay failed:', error); + }); + setIsPlaying(true); + } + }; + + const toggleMute = () => { + setIsMuted(!isMuted); + }; + + const handleVolumeChange = (e: React.ChangeEvent) => { + setVolume(parseFloat(e.target.value)); + setIsMuted(false); + }; + + return ( +
+
+ ); +} \ No newline at end of file