Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a34b39ff5e | |||
| 9183f66f50 | |||
| 604104c875 | |||
| 54497158b0 |
@@ -4,9 +4,6 @@ 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"],
|
||||||
@@ -31,7 +28,6 @@ export default function RootLayout({
|
|||||||
<body
|
<body
|
||||||
className={`${notoSans.variable} ${inter.variable} antialiased`}
|
className={`${notoSans.variable} ${inter.variable} antialiased`}
|
||||||
>
|
>
|
||||||
<BackgroundLofiMusicPlayer />
|
|
||||||
<Tag />
|
<Tag />
|
||||||
{children}
|
{children}
|
||||||
|
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
|
|||||||
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
||||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||||
import { Award, Sparkles, Users, Music } from "lucide-react";
|
import { Award, Sparkles, Users, Music } from "lucide-react";
|
||||||
|
import BackgroundMusicPlayer from '@/components/BackgroundMusicPlayer';
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
@@ -25,6 +26,7 @@ export default function LandingPage() {
|
|||||||
secondaryButtonStyle="glass"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="normal"
|
headingFontWeight="normal"
|
||||||
>
|
>
|
||||||
|
<BackgroundMusicPlayer />
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
navItems={[
|
navItems={[
|
||||||
|
|||||||
142
src/components/BackgroundMusicPlayer.tsx
Normal file
142
src/components/BackgroundMusicPlayer.tsx
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect, useRef } from 'react';
|
||||||
|
import { Volume2, VolumeX, Play, Pause } from 'lucide-react';
|
||||||
|
|
||||||
|
interface Props {}
|
||||||
|
|
||||||
|
export default function BackgroundMusicPlayer({}: Props) {
|
||||||
|
const audioRef = useRef<HTMLAudioElement>(null);
|
||||||
|
const [isPlaying, setIsPlaying] = useState(false);
|
||||||
|
const [volume, setVolume] = useState(0.5);
|
||||||
|
const [isLoaded, setIsLoaded] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const audio = audioRef.current;
|
||||||
|
if (!audio) return;
|
||||||
|
|
||||||
|
audio.volume = volume;
|
||||||
|
}, [volume]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const audio = audioRef.current;
|
||||||
|
if (!audio) return;
|
||||||
|
|
||||||
|
const handleCanPlay = () => {
|
||||||
|
setIsLoaded(true);
|
||||||
|
setError(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleError = () => {
|
||||||
|
setError('Failed to load audio');
|
||||||
|
setIsPlaying(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEnded = () => {
|
||||||
|
audio.currentTime = 0;
|
||||||
|
audio.play().catch(() => {
|
||||||
|
setIsPlaying(false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
audio.addEventListener('canplay', handleCanPlay);
|
||||||
|
audio.addEventListener('error', handleError);
|
||||||
|
audio.addEventListener('ended', handleEnded);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
audio.removeEventListener('canplay', handleCanPlay);
|
||||||
|
audio.removeEventListener('error', handleError);
|
||||||
|
audio.removeEventListener('ended', handleEnded);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const togglePlayPause = async () => {
|
||||||
|
const audio = audioRef.current;
|
||||||
|
if (!audio) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (isPlaying) {
|
||||||
|
audio.pause();
|
||||||
|
setIsPlaying(false);
|
||||||
|
} else {
|
||||||
|
await audio.play();
|
||||||
|
setIsPlaying(true);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError('Autoplay policy prevented playback');
|
||||||
|
setIsPlaying(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const newVolume = parseFloat(e.target.value);
|
||||||
|
setVolume(newVolume);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed bottom-6 right-6 bg-gradient-to-br from-slate-900 to-slate-800 rounded-lg shadow-2xl p-4 w-80 border border-slate-700">
|
||||||
|
<audio
|
||||||
|
ref={audioRef}
|
||||||
|
src="https://www.freepik.com/audio/tune/static"
|
||||||
|
loop
|
||||||
|
crossOrigin="anonymous"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h3 className="text-sm font-semibold text-white">Background Music</h3>
|
||||||
|
<div className="text-xs text-slate-400">
|
||||||
|
{isLoaded ? 'Ready' : 'Loading...'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="text-xs text-red-400 bg-red-950 bg-opacity-50 rounded px-2 py-1">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<button
|
||||||
|
onClick={togglePlayPause}
|
||||||
|
disabled={!isLoaded}
|
||||||
|
className="flex-shrink-0 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-600 disabled:cursor-not-allowed text-white rounded-full p-2 transition-colors duration-200"
|
||||||
|
aria-label={isPlaying ? 'Pause' : 'Play'}
|
||||||
|
>
|
||||||
|
{isPlaying ? (
|
||||||
|
<Pause size={20} fill="currentColor" />
|
||||||
|
) : (
|
||||||
|
<Play size={20} fill="currentColor" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="flex-1 flex items-center gap-2">
|
||||||
|
{volume === 0 ? (
|
||||||
|
<VolumeX size={18} className="text-slate-400 flex-shrink-0" />
|
||||||
|
) : (
|
||||||
|
<Volume2 size={18} className="text-slate-400 flex-shrink-0" />
|
||||||
|
)}
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="1"
|
||||||
|
step="0.05"
|
||||||
|
value={volume}
|
||||||
|
onChange={handleVolumeChange}
|
||||||
|
className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
||||||
|
aria-label="Volume"
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-slate-400 w-8 text-right">
|
||||||
|
{Math.round(volume * 100)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-xs text-slate-500 text-center">
|
||||||
|
{isPlaying ? 'Now playing' : 'Paused'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user