{localPhotos.map(photo => (
@@ -515,6 +687,10 @@ const Admin = ({ onBack, onUpdate }) => {
.input-field:focus {
outline: 2px solid var(--accent);
}
+ @keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
`}
);
diff --git a/src/components/MusicPlayer.jsx b/src/components/MusicPlayer.jsx
new file mode 100644
index 0000000..5bc0091
--- /dev/null
+++ b/src/components/MusicPlayer.jsx
@@ -0,0 +1,376 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Play, Pause, SkipForward, Volume2, VolumeX } from 'lucide-react';
+
+const MusicPlayer = ({ navidromeUrl, username, password, playlistId }) => {
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [isMuted, setIsMuted] = useState(false);
+ const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
+ const [tracks, setTracks] = useState([]);
+ const [isExpanded, setIsExpanded] = useState(false);
+ const [currentTrack, setCurrentTrack] = useState(null);
+ const [hasInteracted, setHasInteracted] = useState(false);
+ const [readyToPlay, setReadyToPlay] = useState(false);
+ const audioRef = useRef(null);
+
+ // Set volume to 30% on mount
+ useEffect(() => {
+ if (audioRef.current) {
+ audioRef.current.volume = 0.3;
+ }
+ }, []);
+
+ // Fetch playlist from Navidrome API
+ useEffect(() => {
+ if (!navidromeUrl || !username || !password || !playlistId) {
+ return;
+ }
+
+ const fetchPlaylist = async () => {
+ try {
+ // URL encode credentials to handle special characters
+ const encodedUsername = encodeURIComponent(username);
+ const encodedPassword = encodeURIComponent(password);
+ const encodedPlaylistId = encodeURIComponent(playlistId);
+
+ // Construct Navidrome API URL - ensure f=json for JSON response
+ const apiUrl = `${navidromeUrl}/rest/getPlaylist.view?id=${encodedPlaylistId}&u=${encodedUsername}&p=${encodedPassword}&v=1.16.1&c=PhotoShowcase&f=json`;
+
+ const response = await fetch(apiUrl);
+ const text = await response.text();
+
+ // Try to parse as JSON
+ let data;
+ try {
+ data = JSON.parse(text);
+ } catch (parseError) {
+ return;
+ }
+
+ if (data['subsonic-response']?.status === 'ok') {
+ const playlist = data['subsonic-response'].playlist;
+ const entries = playlist.entry || [];
+
+ // Build track list with stream URLs (use encoded credentials)
+ const trackList = entries.map(entry => ({
+ id: entry.id,
+ title: entry.title,
+ artist: entry.artist,
+ streamUrl: `${navidromeUrl}/rest/stream.view?id=${encodeURIComponent(entry.id)}&u=${encodedUsername}&p=${encodedPassword}&v=1.16.1&c=PhotoShowcase`
+ }));
+
+ setTracks(trackList);
+
+ if (trackList.length > 0 && audioRef.current) {
+ setCurrentTrack(trackList[0]);
+ audioRef.current.src = trackList[0].streamUrl;
+
+ // Mark as ready to play
+ setReadyToPlay(true);
+
+ // Try autoplay, but don't worry if it fails
+ audioRef.current.play().catch(() => { });
+ }
+ }
+ } catch (error) {
+ }
+ };
+
+ fetchPlaylist();
+ }, [navidromeUrl, username, password, playlistId]);
+
+ // Auto-play on first user interaction
+ useEffect(() => {
+ if (hasInteracted || !readyToPlay || !audioRef.current) return;
+
+ const startPlayback = () => {
+ if (!hasInteracted && audioRef.current && readyToPlay) {
+ audioRef.current.play().then(() => {
+ setHasInteracted(true);
+ }).catch(() => { });
+ }
+ };
+
+ // Listen for various user interactions
+ const events = ['click', 'scroll', 'touchstart', 'keydown', 'mousemove'];
+
+ events.forEach(event => {
+ document.addEventListener(event, startPlayback, { once: true });
+ });
+
+ return () => {
+ events.forEach(event => {
+ document.removeEventListener(event, startPlayback);
+ });
+ };
+ }, [hasInteracted, readyToPlay]);
+
+ const togglePlay = () => {
+ if (!audioRef.current || tracks.length === 0) return;
+
+ if (isPlaying) {
+ audioRef.current.pause();
+ } else {
+ audioRef.current.play();
+ }
+ setIsPlaying(!isPlaying);
+ };
+
+ const toggleMute = () => {
+ if (!audioRef.current) return;
+ audioRef.current.muted = !isMuted;
+ setIsMuted(!isMuted);
+ };
+
+ const skipTrack = (autoPlay = false) => {
+ if (tracks.length === 0) return;
+
+ const nextIndex = (currentTrackIndex + 1) % tracks.length;
+ setCurrentTrackIndex(nextIndex);
+ setCurrentTrack(tracks[nextIndex]);
+
+ if (audioRef.current) {
+ audioRef.current.src = tracks[nextIndex].streamUrl;
+ // Play if currently playing OR if autoPlay is true (from track end)
+ if (isPlaying || autoPlay) {
+ audioRef.current.play();
+ }
+ }
+ };
+
+ const handleTrackEnd = () => {
+ skipTrack(true); // Auto-play next track
+ };
+
+ return (
+ <>
+
+
+
+ {/* Controls Panel */}
+
+
+
+
+
+ {/* Vinyl Button */}
+
setIsExpanded(true)}
+ onMouseLeave={() => setIsExpanded(false)}
+ style={{
+ animation: isPlaying ? 'spin 3s linear infinite' : 'none'
+ }}
+ title={isPlaying ? 'Pause' : 'Play'}
+ >
+
+
+ {isPlaying ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ {/* Hidden Audio Element */}
+