Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 698a3735a6 |
@@ -4,6 +4,9 @@ import { Inter } from "next/font/google";
|
|||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||||
import Tag from "@/tag/Tag";
|
import Tag from "@/tag/Tag";
|
||||||
|
import { BackgroundLofiMusicPlayer } from "@/components/BackgroundLofiMusicPlayer";
|
||||||
|
|
||||||
|
// Create the BackgroundLofiMusicPlayer component file at src/components/BackgroundLofiMusicPlayer.tsx
|
||||||
|
|
||||||
const notoSans = Noto_Sans({
|
const notoSans = Noto_Sans({
|
||||||
variable: "--font-noto-sans", subsets: ["latin"],
|
variable: "--font-noto-sans", subsets: ["latin"],
|
||||||
@@ -28,6 +31,7 @@ export default function RootLayout({
|
|||||||
<body
|
<body
|
||||||
className={`${notoSans.variable} ${inter.variable} antialiased`}
|
className={`${notoSans.variable} ${inter.variable} antialiased`}
|
||||||
>
|
>
|
||||||
|
<BackgroundLofiMusicPlayer />
|
||||||
<Tag />
|
<Tag />
|
||||||
{children}
|
{children}
|
||||||
|
|
||||||
|
|||||||
161
src/components/BackgroundLofiMusicPlayer.tsx
Normal file
161
src/components/BackgroundLofiMusicPlayer.tsx
Normal file
@@ -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<HTMLAudioElement>(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<HTMLInputElement>) => {
|
||||||
|
setVolume(parseFloat(e.target.value));
|
||||||
|
setIsMuted(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed bottom-6 right-6 z-50">
|
||||||
|
<audio
|
||||||
|
ref={audioRef}
|
||||||
|
src={lofiStreamUrl}
|
||||||
|
loop
|
||||||
|
crossOrigin="anonymous"
|
||||||
|
onEnded={() => {
|
||||||
|
if (audioRef.current) {
|
||||||
|
audioRef.current.currentTime = 0;
|
||||||
|
audioRef.current.play();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`bg-gradient-to-br from-slate-800 to-slate-900 rounded-full shadow-lg border border-slate-700 transition-all duration-300 ${
|
||||||
|
isExpanded ? 'w-64 rounded-2xl' : 'w-16 h-16'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between p-3 h-16">
|
||||||
|
<button
|
||||||
|
onClick={togglePlayPause}
|
||||||
|
className="flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 transition-all text-white shadow-md hover:shadow-lg"
|
||||||
|
title={isPlaying ? 'Pause' : 'Play'}
|
||||||
|
>
|
||||||
|
{isPlaying ? (
|
||||||
|
<Pause size={20} fill="currentColor" />
|
||||||
|
) : (
|
||||||
|
<Play size={20} fill="currentColor" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isExpanded && (
|
||||||
|
<div className="flex-1 flex items-center gap-3 ml-3">
|
||||||
|
<button
|
||||||
|
onClick={toggleMute}
|
||||||
|
className="flex-shrink-0 text-slate-300 hover:text-white transition-colors"
|
||||||
|
title={isMuted ? 'Unmute' : 'Mute'}
|
||||||
|
>
|
||||||
|
{isMuted ? <VolumeX size={18} /> : <Volume2 size={18} />}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="1"
|
||||||
|
step="0.01"
|
||||||
|
value={isMuted ? 0 : volume}
|
||||||
|
onChange={handleVolumeChange}
|
||||||
|
className="flex-1 h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500"
|
||||||
|
title="Volume"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span className="text-xs text-slate-400 w-8 text-right">
|
||||||
|
{Math.round((isMuted ? 0 : volume) * 100)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isExpanded && (
|
||||||
|
<button
|
||||||
|
onClick={() => setIsExpanded(true)}
|
||||||
|
className="absolute inset-0 rounded-full"
|
||||||
|
title="Expand player"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isExpanded && (
|
||||||
|
<button
|
||||||
|
onClick={() => setIsExpanded(false)}
|
||||||
|
className="absolute top-2 right-2 text-slate-400 hover:text-white transition-colors"
|
||||||
|
title="Collapse player"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-2 text-center text-xs text-slate-400">
|
||||||
|
<p>🎵 Lofi Music</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user