diff --git a/src/context/audio-context.js b/src/context/audio-context.js
index 0634d75..6d4848e 100644
--- a/src/context/audio-context.js
+++ b/src/context/audio-context.js
@@ -1,6 +1,13 @@
"use client";
-import React, { createContext, useContext, useState, useEffect, useRef, useCallback } from "react";
+import React, {
+ createContext,
+ useContext,
+ useState,
+ useEffect,
+ useRef,
+ useCallback,
+} from "react";
import { useAuth } from "./auth-context";
import { updateDoc, doc } from "firebase/firestore";
import { db } from "@/firebase/config";
@@ -25,7 +32,11 @@ function getDisplayArtist(song) {
return song.artistObj.name.trim();
}
- if (typeof song?.artist === "object" && typeof song.artist?.name === "string" && song.artist.name.trim()) {
+ if (
+ typeof song?.artist === "object" &&
+ typeof song.artist?.name === "string" &&
+ song.artist.name.trim()
+ ) {
return song.artist.name.trim();
}
@@ -57,6 +68,13 @@ function normalizeSongForUi(song) {
};
}
+function isSongPlayable(song) {
+ if (!song) return false;
+ const audioUrl = song.audioUrl || song.media?.audio;
+ const youtubeId = song.youtubeId;
+ return !!(audioUrl || youtubeId);
+}
+
export const AudioProvider = ({ children }) => {
const { user, firestoreData, setFirestoreData } = useAuth();
const userRef = useRef(user);
@@ -82,10 +100,65 @@ export const AudioProvider = ({ children }) => {
const [isMiniPlayerActive, setIsMiniPlayerActive] = useState(false);
const [lyricsLanguage, setLyricsLanguage] = useState("telugu");
+ const [sections, setSections] = useState({});
+ const [sectionsLoading, setSectionsLoading] = useState(false);
+
+ // ─── Pre-build alphabetical sections synchronously ─────────────
+ // Called immediately when songs load so SongsSection never shows a spinner.
+ const _prebuildSections = useCallback((songList, lang = 'telugu') => {
+ const ALPHABETS = {
+ english: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
+ telugu: ['అ', 'ఆ', 'ఇ', 'ఈ', 'ఉ', 'ఊ', 'ఋ', 'ౠ', 'ఎ', 'ఏ', 'ఐ', 'ఒ', 'ఓ', 'ఔ', 'అం', 'అః', 'క', 'ఖ', 'గ', 'ఘ', 'ఙ', 'చ', 'ఛ', 'జ', 'ఝ', 'ఞ', 'ట', 'ఠ', 'డ', 'ఢ', 'ణ', 'త', 'థ', 'ద', 'ధ', 'న', 'ప', 'ఫ', 'బ', 'భ', 'మ', 'య', 'ర', 'ల', 'వ', 'శ', 'ష', 'స', 'హ', 'ళ', 'క్ష', 'ఱ'],
+ hindi: ['अ', 'आ', 'इ', 'ई', 'उ', 'ऊ', 'ऋ', 'ए', 'ऐ', 'ओ', 'औ', 'अं', 'अः', 'क', 'ख', 'ग', 'घ', 'ङ', 'च', 'छ', 'ज', 'झ', 'ञ', 'ट', 'ठ', 'ड', 'ढ', 'ण', 'त', 'थ', 'द', 'ध', 'न', 'प', 'फ', 'ब', 'भ', 'म', 'य', 'र', 'ल', 'व', 'श', 'ष', 'स', 'ह', 'क्ष', 'त्र', 'ज्ञ'],
+ };
+ const languageMap = {
+ english: ['en', 'english'],
+ telugu: ['te', 'telugu'],
+ hindi: ['hi', 'hindi'],
+ };
+ const allowedLangs = languageMap[lang] || languageMap.english;
+ const letters = ALPHABETS[lang] || ALPHABETS.english;
+ const BATCH_SIZE = 20;
+ const grouped = {};
+ songList.forEach(song => {
+ const songLang = (song.language || '').toLowerCase();
+ if (!allowedLangs.includes(songLang)) return;
+ const firstLetter = song.firstLetter || (song.title ? song.title.charAt(0).toUpperCase() : '');
+ if (!grouped[firstLetter]) grouped[firstLetter] = [];
+ grouped[firstLetter].push(song);
+ });
+ Object.keys(grouped).forEach(letter => {
+ grouped[letter].sort((a, b) => (a.title || '').localeCompare(b.title || '', undefined, { sensitivity: 'base' }));
+ });
+ const newSections = {};
+ letters.forEach(letter => {
+ const allLetterSongs = grouped[letter] || [];
+ if (allLetterSongs.length === 0) return;
+ newSections[letter] = {
+ songs: allLetterSongs.slice(0, BATCH_SIZE),
+ lastDoc: null,
+ hasMore: allLetterSongs.length > BATCH_SIZE,
+ allSongs: allLetterSongs,
+ showAll: false,
+ loading: false,
+ };
+ });
+ setSections(newSections);
+ console.log('[Sections] Pre-built sections for', lang, ':', Object.keys(newSections).join(', '));
+ }, []);
+ const [currentSectionLetter, setCurrentSectionLetter] = useState(null);
+ const [currentIndexInSection, setCurrentIndexInSection] = useState(null);
+ const [isLoadingMoreNext, setIsLoadingMoreNext] = useState(false);
+
const isLoopingRef = useRef(isLooping);
const isShuffledRef = useRef(isShuffled);
+ const sectionsRef = useRef(sections);
+ const currentSectionLetterRef = useRef(currentSectionLetter);
+ const currentIndexInSectionRef = useRef(currentIndexInSection);
+ const sectionsLoadingRef = useRef(sectionsLoading);
const queueRef = useRef(queue);
const currentSongRef = useRef(currentSong);
+ const consecutiveErrorsRef = useRef(0);
useEffect(() => {
isLoopingRef.current = isLooping;
@@ -95,6 +168,22 @@ export const AudioProvider = ({ children }) => {
isShuffledRef.current = isShuffled;
}, [isShuffled]);
+ useEffect(() => {
+ sectionsRef.current = sections;
+ }, [sections]);
+
+ useEffect(() => {
+ currentSectionLetterRef.current = currentSectionLetter;
+ }, [currentSectionLetter]);
+
+ useEffect(() => {
+ currentIndexInSectionRef.current = currentIndexInSection;
+ }, [currentIndexInSection]);
+
+ useEffect(() => {
+ sectionsLoadingRef.current = sectionsLoading;
+ }, [sectionsLoading]);
+
useEffect(() => {
queueRef.current = queue;
}, [queue]);
@@ -106,20 +195,25 @@ export const AudioProvider = ({ children }) => {
const getCurrentContextSongs = (currentPlayingSong) => {
let contextSongs = songs;
if (activeTab === "favorites") {
- contextSongs = songs.filter(s => favorites.includes(s.id));
+ contextSongs = songs.filter((s) => favorites.includes(s.id));
} else if (activeTab === "playlist" && activePlaylistId) {
- const pl = playlists.find(p => p.id === activePlaylistId);
+ const pl = playlists.find((p) => p.id === activePlaylistId);
if (pl) {
- contextSongs = songs.filter(s => pl.songIds.includes(s.id));
+ contextSongs = songs.filter((s) => pl.songIds.includes(s.id));
} else {
contextSongs = [];
}
} else if (activeTab === "recently-played") {
- contextSongs = recentlyPlayed.map(id => songs.find(s => s.id === id)).filter(Boolean);
+ contextSongs = recentlyPlayed
+ .map((id) => songs.find((s) => s.id === id))
+ .filter(Boolean);
}
// Ensure the playing song is part of the queue
- if (currentPlayingSong && !contextSongs.some(s => s.id === currentPlayingSong.id)) {
+ if (
+ currentPlayingSong &&
+ !contextSongs.some((s) => s.id === currentPlayingSong.id)
+ ) {
return songs;
}
return contextSongs;
@@ -128,9 +222,9 @@ export const AudioProvider = ({ children }) => {
const handleSetIsShuffled = (shuffledVal) => {
setIsShuffled(shuffledVal);
if (shuffledVal) {
- const remaining = originalQueue.filter(s => s.id !== currentSong?.id);
- const shuffled = currentSong
- ? [currentSong, ...shuffleArray(remaining)]
+ const remaining = originalQueue.filter((s) => s.id !== currentSong?.id);
+ const shuffled = currentSong
+ ? [currentSong, ...shuffleArray(remaining)]
: shuffleArray(originalQueue);
setQueue(shuffled);
} else {
@@ -142,38 +236,74 @@ export const AudioProvider = ({ children }) => {
const currentQueue = queueRef.current;
if (currentQueue.length === 0) return;
- let nextIndex = 0;
+ let currentIndex = -1;
if (currentSongRef.current) {
- const currentIndex = currentQueue.findIndex(s => s.id === currentSongRef.current.id);
- if (currentIndex !== -1 && currentIndex < currentQueue.length - 1) {
- nextIndex = currentIndex + 1;
- }
+ currentIndex = currentQueue.findIndex(
+ (s) => s.id === currentSongRef.current.id,
+ );
}
- setCurrentSong(currentQueue[nextIndex]);
- setIsPlaying(true);
- setProgress(0);
+ let nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % currentQueue.length;
+ let checkedCount = 0;
+
+ // Skip songs that do not have audio
+ while (
+ checkedCount < currentQueue.length &&
+ !isSongPlayable(currentQueue[nextIndex])
+ ) {
+ nextIndex = (nextIndex + 1) % currentQueue.length;
+ checkedCount++;
+ }
+
+ if (checkedCount < currentQueue.length) {
+ if (currentSectionLetterRef.current) {
+ setCurrentIndexInSection(nextIndex);
+ currentIndexInSectionRef.current = nextIndex;
+ }
+ setCurrentSong(currentQueue[nextIndex]);
+ setIsPlaying(true);
+ setProgress(0);
+ } else {
+ setIsPlaying(false);
+ }
}, []);
const handlePrevSong = useCallback(() => {
const currentQueue = queueRef.current;
if (currentQueue.length === 0) return;
- let prevIndex = 0;
+ let currentIndex = -1;
if (currentSongRef.current) {
- const currentIndex = currentQueue.findIndex(s => s.id === currentSongRef.current.id);
- if (currentIndex !== -1) {
- if (currentIndex > 0) {
- prevIndex = currentIndex - 1;
- } else {
- prevIndex = currentQueue.length - 1; // loop back to end
- }
- }
+ currentIndex = currentQueue.findIndex(
+ (s) => s.id === currentSongRef.current.id,
+ );
}
- setCurrentSong(currentQueue[prevIndex]);
- setIsPlaying(true);
- setProgress(0);
+ let prevIndex = currentIndex === -1
+ ? currentQueue.length - 1
+ : (currentIndex - 1 + currentQueue.length) % currentQueue.length;
+ let checkedCount = 0;
+
+ // Skip songs that do not have audio
+ while (
+ checkedCount < currentQueue.length &&
+ !isSongPlayable(currentQueue[prevIndex])
+ ) {
+ prevIndex = (prevIndex - 1 + currentQueue.length) % currentQueue.length;
+ checkedCount++;
+ }
+
+ if (checkedCount < currentQueue.length) {
+ if (currentSectionLetterRef.current) {
+ setCurrentIndexInSection(prevIndex);
+ currentIndexInSectionRef.current = prevIndex;
+ }
+ setCurrentSong(currentQueue[prevIndex]);
+ setIsPlaying(true);
+ setProgress(0);
+ } else {
+ setIsPlaying(false);
+ }
}, []);
const audioRef = useRef(null);
@@ -192,7 +322,10 @@ export const AudioProvider = ({ children }) => {
audioRef.current.pause();
audioRef.current.removeAttribute("src");
}
- if (youtubePlayerRef.current && typeof youtubePlayerRef.current.pauseVideo === "function") {
+ if (
+ youtubePlayerRef.current &&
+ typeof youtubePlayerRef.current.pauseVideo === "function"
+ ) {
try {
youtubePlayerRef.current.pauseVideo();
} catch (e) {}
@@ -207,7 +340,11 @@ export const AudioProvider = ({ children }) => {
useEffect(() => {
if (!firestoreData) return;
- const { favorites: favs, playlists: pls, recentlyPlayed: recent } = firestoreData;
+ const {
+ favorites: favs,
+ playlists: pls,
+ recentlyPlayed: recent,
+ } = firestoreData;
if (Array.isArray(favs) && favs.length > 0) {
setFavorites(favs);
@@ -220,12 +357,63 @@ export const AudioProvider = ({ children }) => {
}
}, [firestoreData]);
- // Load songs from the API endpoint (server-side rendered to avoid Firestore client issues)
+ // Load songs from the API endpoint.
+ // Priority: 1) prefetched global 2) in-progress prefetch promise 3) browser cache / fresh fetch
useEffect(() => {
let isMounted = true;
+
+ // Skip fetch if songs already loaded (SPA re-mount / hot reload)
+ if (songs.length > 0) {
+ setSongsLoading(false);
+ return () => { isMounted = false; };
+ }
+
+ // 1) Check if the landing page prefetched songs (instant!)
+ const prefetched = window.__SONGHUB_PREFETCHED_SONGS;
+ if (Array.isArray(prefetched) && prefetched.length > 0) {
+ const fetchedSongs = prefetched.filter(Boolean).map(normalizeSongForUi);
+ setSongs(fetchedSongs);
+ setQueue(fetchedSongs);
+ setOriginalQueue(fetchedSongs);
+ setSongsLoading(false);
+ console.log(`✓ Loaded ${fetchedSongs.length} songs from prefetch (instant)`);
+ delete window.__SONGHUB_PREFETCHED_SONGS; // free memory
+ // Pre-build English sections immediately so SongsSection skips loading spinner
+ _prebuildSections(fetchedSongs, 'telugu');
+ return () => { isMounted = false; };
+ }
+
+ // 1.5) Check if the landing page prefetch is currently IN PROGRESS
+ const prefetchPromise = window.__SONGHUB_PREFETCHED_PROMISE;
+ if (prefetchPromise && typeof prefetchPromise.then === "function") {
+ setSongsLoading(true);
+ prefetchPromise
+ .then((songsData) => {
+ if (!isMounted) return;
+ const fetchedSongs = Array.isArray(songsData)
+ ? songsData.filter(Boolean).map(normalizeSongForUi)
+ : [];
+ setSongs(fetchedSongs);
+ setQueue(fetchedSongs);
+ setOriginalQueue(fetchedSongs);
+ setSongsLoading(false);
+ console.log(`✓ Loaded ${fetchedSongs.length} songs from in-progress prefetch promise`);
+ _prebuildSections(fetchedSongs, 'telugu');
+ })
+ .catch((err) => {
+ if (!isMounted) return;
+ console.error("❌ Failed to resolve prefetch promise:", err);
+ setSongsLoading(false);
+ })
+ .finally(() => {
+ delete window.__SONGHUB_PREFETCHED_PROMISE; // free memory
+ });
+ return () => { isMounted = false; };
+ }
+
+ // 2) Browser cache or fresh fetch — only now set loading
setSongsLoading(true);
-
- fetch("/api/songs", { cache: "no-store" })
+ fetch("/api/songs", { cache: "default" })
.then((res) => {
if (!res.ok) throw new Error(`API error: ${res.status}`);
return res.json();
@@ -240,14 +428,18 @@ export const AudioProvider = ({ children }) => {
setOriginalQueue(fetchedSongs);
setSongsLoading(false);
console.log(`✓ Loaded ${fetchedSongs.length} songs from API`);
+ // Pre-build English sections immediately so SongsSection skips loading spinner
+ _prebuildSections(fetchedSongs, 'telugu');
})
.catch((err) => {
if (!isMounted) return;
console.error("❌ Failed to fetch songs from API:", err);
setSongsLoading(false);
});
-
- return () => { isMounted = false; };
+
+ return () => {
+ isMounted = false;
+ };
}, []);
// Sync native looping property of the HTML5 Audio element
@@ -259,8 +451,10 @@ export const AudioProvider = ({ children }) => {
// Initialize browser-dependent values
useEffect(() => {
- // 1. Initialize HTML Audio Element
- audioRef.current = new Audio();
+ // 1. Initialize HTML Audio Element by ref from DOM or fallback
+ if (!audioRef.current) {
+ audioRef.current = document.getElementById("global-audio-player") || new Audio();
+ }
audioRef.current.volume = volume;
audioRef.current.loop = isLoopingRef.current;
@@ -310,13 +504,62 @@ export const AudioProvider = ({ children }) => {
const handleLoadedMetadata = () => {
setDuration(audio.duration || 0);
+ consecutiveErrorsRef.current = 0; // Reset error count on successful load
};
- const handleEnded = () => {
- // Handles auto-play next
+ const handleEnded = async () => {
if (isLoopingRef.current) {
audio.currentTime = 0;
- audio.play().catch(err => console.log("Playback error: ", err));
+ audio.play().catch((err) => console.log("Playback error: ", err));
+ return;
+ }
+
+ // Check if we are playing inside an alphabetical letter section
+ const letter = currentSectionLetterRef.current;
+ const index = currentIndexInSectionRef.current;
+
+ if (letter && index !== null) {
+ const section = sectionsRef.current[letter];
+ if (section && section.songs) {
+ const nextIndex = index + 1;
+
+ if (nextIndex < section.songs.length) {
+ // Next song is already loaded in the section, play it!
+ const nextSong = section.songs[nextIndex];
+ playSong(nextSong, letter, nextIndex, section.songs);
+ } else if (section.hasMore && section.allSongs) {
+ // End of loaded batch but all songs are pre-computed in allSongs
+ const allLetterSongs = section.allSongs;
+ if (nextIndex < allLetterSongs.length) {
+ const updatedSongs = allLetterSongs;
+ setSections((prev) => ({
+ ...prev,
+ [letter]: {
+ ...prev[letter],
+ songs: updatedSongs,
+ hasMore: false,
+ showAll: true,
+ }
+ }));
+ const nextSong = updatedSongs[nextIndex];
+ playSong(nextSong, letter, nextIndex, updatedSongs);
+ }
+ }
+ }
+ } else {
+ // Default queue auto-play next
+ handleNextSong();
+ }
+ };
+
+ const handleError = (e) => {
+ console.warn("Audio element error, skipping to next song:", e);
+ consecutiveErrorsRef.current += 1;
+ const currentQueue = queueRef.current;
+ if (consecutiveErrorsRef.current >= Math.max(5, currentQueue.length)) {
+ console.error("Too many consecutive audio playback errors. Stopping.");
+ setIsPlaying(false);
+ consecutiveErrorsRef.current = 0;
} else {
handleNextSong();
}
@@ -325,11 +568,13 @@ export const AudioProvider = ({ children }) => {
audio.addEventListener("timeupdate", handleTimeUpdate);
audio.addEventListener("loadedmetadata", handleLoadedMetadata);
audio.addEventListener("ended", handleEnded);
+ audio.addEventListener("error", handleError);
return () => {
audio.removeEventListener("timeupdate", handleTimeUpdate);
audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
audio.removeEventListener("ended", handleEnded);
+ audio.removeEventListener("error", handleError);
audio.pause();
};
}, []);
@@ -340,7 +585,7 @@ export const AudioProvider = ({ children }) => {
if (currentSong) {
const srcToPlay = currentSong.audioUrl || currentSong.media?.audio || "";
-
+
if (srcToPlay) {
const isSameSrc = audioRef.current.src === srcToPlay;
if (!isSameSrc) {
@@ -351,10 +596,14 @@ export const AudioProvider = ({ children }) => {
if (isPlaying) {
const playPromise = audioRef.current.play();
if (playPromise !== undefined) {
- playPromise.catch(err => {
+ playPromise.catch((err) => {
console.warn("Audio playback attempted for src:", srcToPlay, err);
// If play() was interrupted by load() or buffering, auto-play once audio is ready
- if (err.name === "AbortError" || err.name === "NotAllowedError" || err.name === "NotSupportedError") {
+ if (
+ err.name === "AbortError" ||
+ err.name === "NotAllowedError" ||
+ err.name === "NotSupportedError"
+ ) {
const onCanPlay = () => {
audioRef.current?.play().catch(() => setIsPlaying(false));
audioRef.current?.removeEventListener("canplay", onCanPlay);
@@ -375,8 +624,8 @@ export const AudioProvider = ({ children }) => {
// Add to recently played + sync to Firestore if logged in
setTimeout(() => {
- setRecentlyPlayed(prev => {
- const filtered = prev.filter(id => id !== currentSong.id);
+ setRecentlyPlayed((prev) => {
+ const filtered = prev.filter((id) => id !== currentSong.id);
const updated = [currentSong.id, ...filtered].slice(0, 10);
localStorage.setItem("songhub_recently", JSON.stringify(updated));
// Sync to Firestore if authenticated
@@ -402,7 +651,7 @@ export const AudioProvider = ({ children }) => {
if (isPlaying) {
const playPromise = audioRef.current.play();
if (playPromise !== undefined) {
- playPromise.catch(err => {
+ playPromise.catch((err) => {
console.log("Play failed: ", err);
if (err.name === "AbortError") {
const onCanPlay = () => {
@@ -421,7 +670,9 @@ export const AudioProvider = ({ children }) => {
}, [isPlaying]);
// Keep refs in sync
- useEffect(() => { isPlayingRef.current = isPlaying; }, [isPlaying]);
+ useEffect(() => {
+ isPlayingRef.current = isPlaying;
+ }, [isPlaying]);
// Handle volume and mute
useEffect(() => {
@@ -440,14 +691,19 @@ export const AudioProvider = ({ children }) => {
useEffect(() => {
const hasYoutube = currentSong?.youtubeId;
const hasAudio = currentSong?.audioUrl || currentSong?.media?.audio;
- if (!hasYoutube || hasAudio) return;
+ if (!hasYoutube || hasAudio) {
+ setIsMiniPlayerActive(false);
+ return;
+ }
let isMounted = true;
let pollTimer = null;
const youtubeId = currentSong.youtubeId;
if (youtubePlayerRef.current) {
- try { youtubePlayerRef.current.destroy(); } catch (e) {}
+ try {
+ youtubePlayerRef.current.destroy();
+ } catch (e) {}
youtubePlayerRef.current = null;
}
if (youtubeProgressRef.current) {
@@ -474,11 +730,17 @@ export const AudioProvider = ({ children }) => {
height: "200",
width: "200",
videoId: youtubeId,
- playerVars: { autoplay: 0, controls: 0, modestbranding: 1, enablejsapi: 1 },
+ playerVars: {
+ autoplay: 0,
+ controls: 0,
+ modestbranding: 1,
+ enablejsapi: 1,
+ },
events: {
onReady: () => {
if (!isMounted) return;
youtubePlayerRef.current = player;
+ consecutiveErrorsRef.current = 0; // Reset error count on successful YouTube ready
if (typeof player.setVolume === "function") {
player.setVolume(isMuted ? 0 : volume * 100);
@@ -490,25 +752,41 @@ export const AudioProvider = ({ children }) => {
const mins = Math.floor(detectedSec / 60);
const secs = Math.floor(detectedSec % 60);
const formatted = `${mins}:${secs.toString().padStart(2, "0")}`;
- setCurrentSong(prev => prev ? { ...prev, duration: formatted, durationSec: detectedSec } : prev);
- setSongs(prev => prev.map(s =>
- s.id === currentSong?.id ? { ...s, duration: formatted, durationSec: detectedSec } : s
- ));
- const songRef = doc(db, "Youworship_songs", currentSong.id);
+ setCurrentSong((prev) =>
+ prev
+ ? { ...prev, duration: formatted, durationSec: detectedSec }
+ : prev,
+ );
+ setSongs((prev) =>
+ prev.map((s) =>
+ s.id === currentSong?.id
+ ? { ...s, duration: formatted, durationSec: detectedSec }
+ : s,
+ ),
+ );
+ const songRef = doc(db, "youworship_songs", currentSong.id);
updateDoc(songRef, {
duration: detectedSec,
updatedAt: new Date().toISOString(),
}).catch(() => {});
}
- if (isPlayingRef.current && typeof player?.playVideo === "function") {
- try { player.playVideo(); } catch (e) {}
+ if (
+ isPlayingRef.current &&
+ typeof player?.playVideo === "function"
+ ) {
+ try {
+ player.playVideo();
+ } catch (e) {}
}
youtubeProgressRef.current = setInterval(() => {
if (!youtubePlayerRef.current || !isMounted) return;
try {
- if (typeof youtubePlayerRef.current.getCurrentTime === "function") {
+ if (
+ typeof youtubePlayerRef.current.getCurrentTime ===
+ "function"
+ ) {
const time = youtubePlayerRef.current.getCurrentTime();
if (time !== undefined) setProgress(time);
}
@@ -519,13 +797,31 @@ export const AudioProvider = ({ children }) => {
if (!isMounted) return;
if (event.data === 0) {
if (isLoopingRef.current) {
- if (typeof player?.seekTo === "function") try { player.seekTo(0); } catch (e) {}
- if (typeof player?.playVideo === "function") try { player.playVideo(); } catch (e) {}
+ if (typeof player?.seekTo === "function")
+ try {
+ player.seekTo(0);
+ } catch (e) {}
+ if (typeof player?.playVideo === "function")
+ try {
+ player.playVideo();
+ } catch (e) {}
} else {
handleNextSong();
}
}
},
+ onError: (event) => {
+ console.warn("YouTube player error:", event.data);
+ consecutiveErrorsRef.current += 1;
+ const currentQueue = queueRef.current;
+ if (consecutiveErrorsRef.current >= Math.max(5, currentQueue.length)) {
+ console.error("Too many consecutive YouTube playback errors. Stopping.");
+ setIsPlaying(false);
+ consecutiveErrorsRef.current = 0;
+ } else {
+ handleNextSong();
+ }
+ },
},
});
youtubePlayerRef.current = player;
@@ -556,7 +852,10 @@ export const AudioProvider = ({ children }) => {
return () => {
isMounted = false;
- if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
+ if (pollTimer) {
+ clearInterval(pollTimer);
+ pollTimer = null;
+ }
if (youtubeProgressRef.current) {
clearInterval(youtubeProgressRef.current);
youtubeProgressRef.current = null;
@@ -606,21 +905,35 @@ export const AudioProvider = ({ children }) => {
iframe.style.position = "fixed";
iframe.style.bottom = "100px";
iframe.style.right = "24px";
+ iframe.style.left = "auto";
+ iframe.style.top = "auto";
+ iframe.style.opacity = "1";
+ iframe.style.pointerEvents = "auto";
iframe.style.width = "320px";
iframe.style.height = "180px";
iframe.style.zIndex = "9999";
iframe.style.borderRadius = "12px";
iframe.style.border = "2px solid rgba(255, 255, 255, 0.15)";
- iframe.style.boxShadow = "0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)";
+ iframe.style.boxShadow =
+ "0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)";
if (typeof player.setSize === "function") {
player.setSize(320, 180);
}
} else {
- iframe.style.display = "none";
- iframe.style.width = "1px";
- iframe.style.height = "1px";
+ iframe.style.display = "block";
+ iframe.style.position = "absolute";
+ iframe.style.left = "-9999px";
+ iframe.style.top = "-9999px";
+ iframe.style.opacity = "0";
+ iframe.style.pointerEvents = "none";
+ iframe.style.width = "200px";
+ iframe.style.height = "200px";
+ iframe.style.zIndex = "-1";
+ iframe.style.borderRadius = "0px";
+ iframe.style.border = "none";
+ iframe.style.boxShadow = "none";
if (typeof player.setSize === "function") {
- player.setSize(1, 1);
+ player.setSize(200, 200);
}
}
} catch (e) {
@@ -628,11 +941,127 @@ export const AudioProvider = ({ children }) => {
}
}, [isMiniPlayerActive, currentSong?.id]);
+ const initializeAlphabeticalSections = useCallback(async (lang = "telugu") => {
+ // Build alphabetical sections from the already-loaded songs in state
+ const currentSongs = songs;
+ if (currentSongs.length === 0) {
+ console.log("[Sections] songs still empty, skipping init");
+ return;
+ }
+ console.log("[Sections] Initializing sections for", lang, "with", currentSongs.length, "songs");
- const playSong = (song) => {
+ const ALPHABETS = {
+ english: "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""),
+ telugu: ['అ', 'ఆ', 'ఇ', 'ఈ', 'ఉ', 'ఊ', 'ఋ', 'ౠ', 'ఎ', 'ఏ', 'ఐ', 'ఒ', 'ఓ', 'ఔ', 'అం', 'అః', 'క', 'ఖ', 'గ', 'ఘ', 'ఙ', 'చ', 'ఛ', 'జ', 'ఝ', 'ఞ', 'ట', 'ఠ', 'డ', 'ఢ', 'ణ', 'త', 'థ', 'ద', 'ధ', 'న', 'ప', 'ఫ', 'బ', 'భ', 'మ', 'య', 'ర', 'ల', 'వ', 'శ', 'ష', 'స', 'హ', 'ళ', 'క్ష', 'ఱ'],
+ hindi: ['अ', 'आ', 'इ', 'ई', 'उ', 'ऊ', 'ऋ', 'ए', 'ऐ', 'ओ', 'औ', 'अं', 'अः', 'क', 'ख', 'ग', 'घ', 'ङ', 'च', 'छ', 'ज', 'झ', 'ञ', 'ट', 'ठ', 'ड', 'ढ', 'ण', 'त', 'थ', 'द', 'ध', 'न', 'प', 'फ', 'ब', 'भ', 'म', 'य', 'र', 'ल', 'व', 'श', 'ष', 'स', 'ह', 'क्ष', 'त्र', 'ज्ञ'],
+ tamil: ['அ', 'ஆ', 'இ', 'ஈ', 'உ', 'ஊ', 'எ', 'ஏ', 'ஐ', 'ஒ', 'ஓ', 'க', 'ச', 'ஜ', 'ஞ', 'ட', 'த', 'ந', 'ப', 'ம', 'ய', 'ர', 'ற', 'ல', 'வ', 'ஷ', 'ஸ', 'ஹ'],
+ };
+
+ // Language filter
+ const languageMap = {
+ english: ["en", "english"],
+ telugu: ["te", "telugu"],
+ hindi: ["hi", "hindi"],
+ tamil: ["ta", "tamil"],
+ };
+ const allowedLangs = languageMap[lang] || languageMap.english;
+
+ const letters = ALPHABETS[lang] || ALPHABETS.english;
+ // Always rebuild — clear old sections for this language's letters first
+ const newSections = {};
+
+ try {
+ const BATCH_SIZE = 20;
+
+ // Group all songs by their first letter
+ const grouped = {};
+ currentSongs.forEach(song => {
+ const songLang = (song.language || "").toLowerCase();
+ if (!allowedLangs.includes(songLang)) return;
+
+ const firstLetter = song.firstLetter || (song.title ? song.title.charAt(0).toUpperCase() : "");
+ if (!grouped[firstLetter]) grouped[firstLetter] = [];
+ grouped[firstLetter].push(song);
+ });
+
+ console.log("[Sections] Grouped letters:", Object.keys(grouped).join(", "));
+
+ // Sort songs within each letter group
+ Object.keys(grouped).forEach(letter => {
+ grouped[letter].sort((a, b) => (a.title || "").localeCompare(b.title || "", undefined, { sensitivity: "base" }));
+ });
+
+ // Build sections: predefined letters first (in order), then any extra grouped letters
+ const processedLetters = new Set();
+ letters.forEach(letter => {
+ const allLetterSongs = grouped[letter] || [];
+ if (allLetterSongs.length === 0) return;
+ processedLetters.add(letter);
+
+ const sorted = allLetterSongs.sort((a, b) => (a.title || '').localeCompare(b.title || '', undefined, { sensitivity: 'base' }));
+ const initialSongs = sorted.slice(0, BATCH_SIZE);
+ newSections[letter] = {
+ songs: initialSongs,
+ lastDoc: null,
+ hasMore: sorted.length > BATCH_SIZE,
+ allSongs: sorted,
+ showAll: false,
+ loading: false,
+ };
+ });
+
+ // Also include any songs grouped under letters not in the predefined list
+ Object.keys(grouped).forEach(letter => {
+ if (processedLetters.has(letter)) return;
+ if (grouped[letter].length === 0) return;
+ const sorted = grouped[letter].sort((a, b) => (a.title || '').localeCompare(b.title || '', undefined, { sensitivity: 'base' }));
+ const initialSongs = sorted.slice(0, BATCH_SIZE);
+ newSections[letter] = {
+ songs: initialSongs,
+ lastDoc: null,
+ hasMore: sorted.length > BATCH_SIZE,
+ allSongs: sorted,
+ showAll: false,
+ loading: false,
+ };
+ });
+
+ console.log("[Sections] Built sections for letters:", Object.keys(newSections).join(", "));
+
+ setSections(newSections);
+ } catch (error) {
+ console.error("Failed to initialize alphabetical sections for language:", lang, error);
+ }
+ }, [songs]);
+
+ const showAllSongsForLetter = useCallback(async (letter) => {
+ const section = sectionsRef.current[letter];
+ if (!section || section.showAll || section.loading) return;
+
+ // Use the pre-computed allSongs from initialization
+ const allLetterSongs = section.allSongs || section.songs;
+
+ setSections((prev) => ({
+ ...prev,
+ [letter]: {
+ ...prev[letter],
+ songs: allLetterSongs,
+ hasMore: false,
+ showAll: true,
+ loading: false,
+ },
+ }));
+ }, []);
+
+ const playSong = (song, sectionLetter = null, indexInSection = null, customQueue = null) => {
if (!song) return;
+ setCurrentSectionLetter(sectionLetter);
+ setCurrentIndexInSection(indexInSection);
+ currentSectionLetterRef.current = sectionLetter;
+ currentIndexInSectionRef.current = indexInSection;
+
if (currentSong && currentSong.id === song.id) {
if (isPlaying) {
setIsPlaying(false);
@@ -640,21 +1069,42 @@ export const AudioProvider = ({ children }) => {
} else {
setIsPlaying(true);
if (audioRef.current && audioRef.current.src) {
- audioRef.current.play().catch(e => console.warn("Play error:", e));
+ audioRef.current.play().catch((e) => console.warn("Play error:", e));
}
}
} else {
+ const contextSongs = customQueue || getCurrentContextSongs(song);
+
+ if (!isSongPlayable(song)) {
+ // If the song is statically unplayable, search for the next playable one
+ const currentIndex = contextSongs.findIndex((s) => s.id === song.id);
+ if (currentIndex !== -1) {
+ let nextIndex = (currentIndex + 1) % contextSongs.length;
+ let checkedCount = 0;
+ while (
+ checkedCount < contextSongs.length &&
+ !isSongPlayable(contextSongs[nextIndex])
+ ) {
+ nextIndex = (nextIndex + 1) % contextSongs.length;
+ checkedCount++;
+ }
+ if (checkedCount < contextSongs.length) {
+ playSong(contextSongs[nextIndex], sectionLetter, nextIndex, contextSongs);
+ return;
+ }
+ }
+ }
+
const srcToPlay = song.audioUrl || song.media?.audio || "";
setCurrentSong(song);
setIsPlaying(true);
setProgress(0);
// Set queue and originalQueue for this context
- const contextSongs = getCurrentContextSongs(song);
setOriginalQueue(contextSongs);
if (isShuffled) {
- const remaining = contextSongs.filter(s => s.id !== song.id);
+ const remaining = contextSongs.filter((s) => s.id !== song.id);
const shuffled = [song, ...shuffleArray(remaining)];
setQueue(shuffled);
} else {
@@ -666,7 +1116,7 @@ export const AudioProvider = ({ children }) => {
if (srcToPlay) {
audioRef.current.src = srcToPlay;
audioRef.current.load();
- audioRef.current.play().catch(err => {
+ audioRef.current.play().catch((err) => {
console.warn("Direct click play error:", err);
});
} else {
@@ -687,7 +1137,9 @@ export const AudioProvider = ({ children }) => {
} else {
setIsPlaying(true);
if (audioRef.current && audioRef.current.src) {
- audioRef.current.play().catch(e => console.warn("Toggle play error:", e));
+ audioRef.current
+ .play()
+ .catch((e) => console.warn("Toggle play error:", e));
}
}
}
@@ -697,7 +1149,10 @@ export const AudioProvider = ({ children }) => {
if (audioRef.current) {
audioRef.current.currentTime = time;
}
- if (youtubePlayerRef.current && typeof youtubePlayerRef.current.seekTo === "function") {
+ if (
+ youtubePlayerRef.current &&
+ typeof youtubePlayerRef.current.seekTo === "function"
+ ) {
try {
youtubePlayerRef.current.seekTo(time, true);
} catch (e) {}
@@ -714,13 +1169,13 @@ export const AudioProvider = ({ children }) => {
};
const toggleMute = () => {
- setIsMuted(prev => !prev);
+ setIsMuted((prev) => !prev);
};
const toggleFavorite = (songId) => {
- setFavorites(prev => {
+ setFavorites((prev) => {
const updated = prev.includes(songId)
- ? prev.filter(id => id !== songId)
+ ? prev.filter((id) => id !== songId)
: [...prev, songId];
localStorage.setItem("songhub_favorites", JSON.stringify(updated));
@@ -739,9 +1194,9 @@ export const AudioProvider = ({ children }) => {
const newPlaylist = {
id: Date.now().toString(),
name: name.trim(),
- songIds: []
+ songIds: [],
};
- setPlaylists(prev => {
+ setPlaylists((prev) => {
const updated = [...prev, newPlaylist];
localStorage.setItem("songhub_playlists", JSON.stringify(updated));
// Sync to Firestore if authenticated
@@ -754,8 +1209,8 @@ export const AudioProvider = ({ children }) => {
};
const deletePlaylist = (playlistId) => {
- setPlaylists(prev => {
- const updated = prev.filter(list => list.id !== playlistId);
+ setPlaylists((prev) => {
+ const updated = prev.filter((list) => list.id !== playlistId);
localStorage.setItem("songhub_playlists", JSON.stringify(updated));
// Sync to Firestore if authenticated
const uid = userRef.current?.uid;
@@ -767,8 +1222,8 @@ export const AudioProvider = ({ children }) => {
};
const addSongToPlaylist = (playlistId, songId) => {
- setPlaylists(prev => {
- const updated = prev.map(list => {
+ setPlaylists((prev) => {
+ const updated = prev.map((list) => {
if (list.id === playlistId && !list.songIds.includes(songId)) {
return { ...list, songIds: [...list.songIds, songId] };
}
@@ -785,10 +1240,13 @@ export const AudioProvider = ({ children }) => {
};
const removeSongFromPlaylist = (playlistId, songId) => {
- setPlaylists(prev => {
- const updated = prev.map(list => {
+ setPlaylists((prev) => {
+ const updated = prev.map((list) => {
if (list.id === playlistId) {
- return { ...list, songIds: list.songIds.filter(id => id !== songId) };
+ return {
+ ...list,
+ songIds: list.songIds.filter((id) => id !== songId),
+ };
}
return list;
});
@@ -806,6 +1264,7 @@ export const AudioProvider = ({ children }) => {
{
setIsMiniPlayerActive,
lyricsLanguage,
setLyricsLanguage,
+ sections,
+ sectionsLoading,
+ initializeAlphabeticalSections,
+ showAllSongsForLetter,
}}
>
{children}
+
);
};
diff --git a/src/context/search-context.js b/src/context/search-context.js
index f5cee6f..bb80886 100644
--- a/src/context/search-context.js
+++ b/src/context/search-context.js
@@ -7,8 +7,24 @@ const SearchContext = createContext(null);
export function SearchProvider({ children }) {
const [searchQuery, setSearchQuery] = useState("");
const [showFullResults, setShowFullResults] = useState(false);
+ // "songs" | "lyrics" — controls whether the search bar does title/artist or lyrics fuzzy search
+ const [searchMode, setSearchMode] = useState("songs");
+ const [voiceSearchTrigger, setVoiceSearchTrigger] = useState(0);
+ const triggerVoiceSearch = () => setVoiceSearchTrigger((prev) => prev + 1);
+
return (
-
+
{children}
);
diff --git a/src/data/songs.js b/src/data/songs.js
index 541490d..ab5b05b 100644
--- a/src/data/songs.js
+++ b/src/data/songs.js
@@ -1,6 +1,6 @@
/**
* Standardized Songs Database
- * Real songs are loaded dynamically from Firebase Firestore (Youworship_songs collection).
+ * Real songs are loaded dynamically from Firebase Firestore (youworship_songs collection).
*/
-export const MOCK_SONGS = [];
\ No newline at end of file
+export const MOCK_SONGS = [];
diff --git a/src/firebase/firestore.js b/src/firebase/firestore.js
index 26611cc..f20456d 100644
--- a/src/firebase/firestore.js
+++ b/src/firebase/firestore.js
@@ -5,29 +5,33 @@ import { collection, doc } from "firebase/firestore";
* Collection Name Constants
*/
export const COLLECTIONS = {
- YOUWORSHIP_SONGS: "Youworship_songs",
- YOUWORSHIP_USERS: "Youworship_users",
- BIBLE_CHAPTERS: "bible_chapters",
+ YOUWORSHIP_SONGS: process.env.NEXT_PUBLIC_COLLECTION_SONGS || "youworship_songs",
+ YOUWORSHIP_USERS: process.env.NEXT_PUBLIC_COLLECTION_USERS || "Youworship_users",
+ BIBLE_CHAPTERS: process.env.NEXT_PUBLIC_COLLECTION_BIBLE || "bible_chapters",
};
/**
- * Helper to get reference to Youworship_songs collection
+ * Helper to get reference to youworship_songs collection
*/
-export const getSongsCollectionRef = () => collection(db, COLLECTIONS.YOUWORSHIP_SONGS);
+export const getSongsCollectionRef = () =>
+ collection(db, COLLECTIONS.YOUWORSHIP_SONGS);
/**
* Helper to get reference to a specific song document
*/
-export const getSongDocRef = (songId) => doc(db, COLLECTIONS.YOUWORSHIP_SONGS, songId);
+export const getSongDocRef = (songId) =>
+ doc(db, COLLECTIONS.YOUWORSHIP_SONGS, songId);
/**
* Helper to get reference to bible_chapters collection
*/
-export const getBibleChaptersRef = () => collection(db, COLLECTIONS.BIBLE_CHAPTERS);
+export const getBibleChaptersRef = () =>
+ collection(db, COLLECTIONS.BIBLE_CHAPTERS);
/**
* Helper to get reference to a specific bible chapter document by verse ID
*/
-export const getBibleChapterDocRef = (verseId) => doc(db, COLLECTIONS.BIBLE_CHAPTERS, verseId);
+export const getBibleChapterDocRef = (verseId) =>
+ doc(db, COLLECTIONS.BIBLE_CHAPTERS, verseId);
export { db };
diff --git a/src/hooks/useLyricsSearch.js b/src/hooks/useLyricsSearch.js
new file mode 100644
index 0000000..7b7daad
--- /dev/null
+++ b/src/hooks/useLyricsSearch.js
@@ -0,0 +1,156 @@
+"use client";
+
+import { useState, useCallback, useRef, useEffect } from "react";
+
+/**
+ * useLyricsSearch — Hook that calls the /api/search/lyrics endpoint
+ * with debounced queries and returns fuzzy-matched results with
+ * highlighted lyric snippets.
+ *
+ * @param {Object} options
+ * @param {number} [options.debounceMs=350] — Debounce delay
+ * @param {string} [options.language] — Optional language filter ("te", "en", "hi", etc.)
+ * @returns {{
+ * query: string,
+ * setQuery: (q: string) => void,
+ * results: Array,
+ * total: number,
+ * loading: boolean,
+ * error: string|null,
+ * search: (q?: string) => void,
+ * clear: () => void,
+ * hasMore: boolean,
+ * loadMore: () => void,
+ * }}
+ */
+export function useLyricsSearch({ debounceMs = 350, language = "" } = {}) {
+ const [query, setQuery] = useState("");
+ const [results, setResults] = useState([]);
+ const [total, setTotal] = useState(0);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [page, setPage] = useState(1);
+ const [hasMore, setHasMore] = useState(false);
+ const debounceRef = useRef(null);
+ const abortRef = useRef(null);
+ const currentQueryRef = useRef("");
+
+ const doSearch = useCallback(
+ async (q, pageNum = 1, append = false) => {
+ const trimmed = (q || "").trim();
+ if (!trimmed || trimmed.length < 2) {
+ setResults([]);
+ setTotal(0);
+ setHasMore(false);
+ setLoading(false);
+ return;
+ }
+
+ // Cancel any in-flight request
+ if (abortRef.current) {
+ abortRef.current.abort();
+ }
+ const controller = new AbortController();
+ abortRef.current = controller;
+
+ if (!append) setLoading(true);
+ setError(null);
+
+ try {
+ const params = new URLSearchParams({
+ q: trimmed,
+ page: String(pageNum),
+ perPage: "30",
+ });
+ if (language) params.set("lang", language);
+
+ const res = await fetch(`/api/search/lyrics?${params}`, {
+ signal: controller.signal,
+ cache: "no-store",
+ });
+
+ if (!res.ok) throw new Error("Search request failed");
+
+ const data = await res.json();
+
+ if (append) {
+ setResults((prev) => [...prev, ...data.results]);
+ } else {
+ setResults(data.results);
+ }
+ setTotal(data.total);
+ setHasMore(data.hasMore);
+ setPage(data.page);
+ } catch (err) {
+ if (err.name !== "AbortError") {
+ setError(err.message);
+ }
+ } finally {
+ setLoading(false);
+ }
+ },
+ [language]
+ );
+
+ // Debounced search on query change
+ useEffect(() => {
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ const trimmed = query.trim();
+ currentQueryRef.current = trimmed;
+
+ if (!trimmed || trimmed.length < 2) {
+ setResults([]);
+ setTotal(0);
+ setHasMore(false);
+ return;
+ }
+
+ setLoading(true);
+ debounceRef.current = setTimeout(() => {
+ doSearch(trimmed, 1, false);
+ }, debounceMs);
+
+ return () => {
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ };
+ }, [query, debounceMs, doSearch]);
+
+ const search = useCallback(
+ (q) => {
+ const val = q !== undefined ? q : query;
+ setQuery(val);
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ doSearch(val, 1, false);
+ },
+ [query, doSearch]
+ );
+
+ const loadMore = useCallback(() => {
+ if (!hasMore || loading) return;
+ doSearch(currentQueryRef.current, page + 1, true);
+ }, [hasMore, loading, page, doSearch]);
+
+ const clear = useCallback(() => {
+ setQuery("");
+ setResults([]);
+ setTotal(0);
+ setHasMore(false);
+ setError(null);
+ setPage(1);
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ if (abortRef.current) abortRef.current.abort();
+ }, []);
+
+ return {
+ query,
+ setQuery,
+ results,
+ total,
+ loading,
+ error,
+ search,
+ clear,
+ hasMore,
+ loadMore,
+ };
+}
diff --git a/src/hooks/useSongs.js b/src/hooks/useSongs.js
index 43136fa..b80b1e6 100644
--- a/src/hooks/useSongs.js
+++ b/src/hooks/useSongs.js
@@ -1,93 +1,147 @@
"use client";
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
import { songService } from "../services/songService";
+const PAGE_SIZE = 20;
+
/**
- * Custom React hook for fetching and managing songs from Youworship_songs collection.
- * Provides loading states, error handling, refetch capabilities, and filtering helpers.
+ * Custom React hook for fetching and managing songs from youworship_songs collection.
+ * Supports cursor-based (keyset) pagination via /api/songs for infinite scroll,
+ * plus paginated category and letter filtering.
*
- * @returns {Object} { songs, loading, error, refetch, search, filterByCategory, filterByLetter }
+ * @returns {Object} { songs, loading, loadingMore, error, hasMore, loadMore, refetch, search, filterByCategory, filterByLetter, activeFilter }
*/
export function useSongs() {
const [songs, setSongs] = useState([]);
const [loading, setLoading] = useState(true);
+ const [loadingMore, setLoadingMore] = useState(false);
const [error, setError] = useState(null);
+ const [hasMore, setHasMore] = useState(true);
+ const [activeFilter, setActiveFilter] = useState({ type: null, value: null });
+ const cursorRef = useRef(null);
+
+ /**
+ * Build the fetch URL based on current filter and cursor state
+ */
+ const buildUrl = useCallback((cursor, limit, filter) => {
+ const params = new URLSearchParams({ limit: String(limit) });
+ if (cursor) params.set("cursor", cursor);
+ if (filter.type === "category" && filter.value) {
+ params.set("category", filter.value);
+ } else if (filter.type === "letter" && filter.value) {
+ params.set("letter", filter.value);
+ }
+ return `/api/songs?${params.toString()}`;
+ }, []);
/**
- * Fetch all songs from Firestore
+ * Fetch the first page of songs (reset pagination)
*/
- const fetchSongs = useCallback(async () => {
+ const fetchSongs = useCallback(async (filter = { type: null, value: null }) => {
setLoading(true);
setError(null);
+ setHasMore(true);
+ setActiveFilter(filter);
+ cursorRef.current = null;
+
try {
- const data = await songService.getAllSongs();
- setSongs(data);
+ const url = buildUrl(null, PAGE_SIZE, filter);
+ const res = await fetch(url);
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ const data = await res.json();
+
+ setSongs(data.songs || []);
+ cursorRef.current = data.cursor;
+ setHasMore(data.hasMore);
} catch (err) {
console.error("useSongs hook error:", err);
setError(err.message || "Failed to load songs from Firestore.");
} finally {
setLoading(false);
}
- }, []);
+ }, [buildUrl]);
- // Fetch on initial mount
+ // Fetch first page on mount
useEffect(() => {
fetchSongs();
}, [fetchSongs]);
/**
- * Search songs by query
+ * Load the next page of songs (infinite scroll trigger)
*/
- const search = useCallback(async (queryStr) => {
- setLoading(true);
+ const loadMore = useCallback(async () => {
+ if (loadingMore || !hasMore || !cursorRef.current) return;
+
+ setLoadingMore(true);
try {
- const results = await songService.searchSongs(queryStr);
- setSongs(results);
+ const url = buildUrl(cursorRef.current, PAGE_SIZE, activeFilter);
+ const res = await fetch(url);
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ const data = await res.json();
+
+ setSongs((prev) => [...prev, ...(data.songs || [])]);
+ cursorRef.current = data.cursor;
+ setHasMore(data.hasMore);
} catch (err) {
- setError(err.message || "Search failed.");
+ console.error("useSongs loadMore error:", err);
+ setError(err.message || "Failed to load more songs.");
} finally {
- setLoading(false);
+ setLoadingMore(false);
}
- }, []);
+ }, [loadingMore, hasMore, activeFilter, buildUrl]);
/**
- * Filter songs by category
+ * Filter songs by category (resets pagination, uses server-side cursor)
*/
const filterByCategory = useCallback(async (category) => {
- setLoading(true);
- try {
- const results = await songService.getSongsByCategory(category);
- setSongs(results);
- } catch (err) {
- setError(err.message || "Category filter failed.");
- } finally {
- setLoading(false);
- }
- }, []);
+ if (!category) return fetchSongs(); // clear filter
+ await fetchSongs({ type: "category", value: category });
+ }, [fetchSongs]);
/**
- * Filter songs by first letter
+ * Filter songs by first letter (resets pagination, uses server-side cursor)
*/
const filterByLetter = useCallback(async (letter) => {
+ if (!letter) return fetchSongs(); // clear filter
+ await fetchSongs({ type: "letter", value: letter });
+ }, [fetchSongs]);
+
+ /**
+ * Search songs by query (client-side via cached service — no pagination)
+ */
+ const search = useCallback(async (queryStr) => {
setLoading(true);
try {
- const results = await songService.getSongsByFirstLetter(letter);
+ const results = await songService.searchSongs(queryStr);
setSongs(results);
+ setHasMore(false); // search returns all matches
} catch (err) {
- setError(err.message || "Letter filter failed.");
+ setError(err.message || "Search failed.");
} finally {
setLoading(false);
}
}, []);
+ /**
+ * Clear all filters and reload from first page
+ */
+ const clearFilter = useCallback(async () => {
+ await fetchSongs();
+ }, [fetchSongs]);
+
return {
songs,
loading,
+ loadingMore,
error,
+ hasMore,
+ loadMore,
refetch: fetchSongs,
search,
filterByCategory,
filterByLetter,
+ clearFilter,
+ activeFilter,
};
}
diff --git a/src/hooks/useWeeklySongs.js b/src/hooks/useWeeklySongs.js
index 6e4a034..464e5c9 100644
--- a/src/hooks/useWeeklySongs.js
+++ b/src/hooks/useWeeklySongs.js
@@ -19,7 +19,9 @@ function mulberry32(seed) {
* Returns the current ISO week number using UTC so it's consistent worldwide.
*/
function getISOWeekNumber(date = new Date()) {
- const d = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
+ const d = new Date(
+ Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()),
+ );
const dayNum = d.getUTCDay() || 7;
d.setUTCDate(d.getUTCDate() + 4 - dayNum);
const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
@@ -43,17 +45,21 @@ function seededShuffle(array, rng) {
/**
* useWeeklySongs
*
- * Deterministically picks `count` songs from the Firebase Youworship_songs array
+ * Deterministically picks `count` songs from the Firebase youworship_songs array
* based on the current ISO week number. Selection changes every Monday
* and is consistent for all users.
*
* @param {Object} options
- * @param {Array} options.songs - Full song list from Firebase Youworship_songs
+ * @param {Array} options.songs - Full song list from Firebase youworship_songs
* @param {number} [options.count=5] - Number of songs for the carousel
* @param {number} [options.weekOffset] - Override for testing
* @returns {{ weeklySongs: Array, weekNumber: number }}
*/
-export default function useWeeklySongs({ songs = [], count = 5, weekOffset } = {}) {
+export default function useWeeklySongs({
+ songs = [],
+ count = 5,
+ weekOffset,
+} = {}) {
const weekNumber = useMemo(() => {
const base = getISOWeekNumber();
return weekOffset !== undefined ? base + weekOffset : base;
diff --git a/src/lib/admin-firebase.js b/src/lib/admin-firebase.js
index 25aab70..050b62a 100644
--- a/src/lib/admin-firebase.js
+++ b/src/lib/admin-firebase.js
@@ -20,7 +20,7 @@ import * as admin from "firebase-admin";
import { getAuth } from "firebase-admin/auth";
import { getFirestore, FieldValue } from "firebase-admin/firestore";
-const COLLECTION_NAME = "Youworship_songs";
+const COLLECTION_NAME = "youworship_songs";
// Singleton cache. globalThis survives hot reloads and repeated imports so the
// Admin SDK is never initialized more than once per serverless instance.
@@ -34,63 +34,81 @@ export function getFirebaseAdmin() {
if (globalRef.__firebaseAdminDb) return globalRef.__firebaseAdminDb;
const projectId =
- process.env.FIREBASE_PROJECT_ID || process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID;
+ process.env.FIREBASE_PROJECT_ID ||
+ process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID;
const clientEmail = process.env.FIREBASE_CLIENT_EMAIL;
let privateKey = process.env.FIREBASE_PRIVATE_KEY;
if (privateKey) {
+ // Vercel/most hosts store the key with literal "\n" sequences (backslash + n)
+ // instead of real newlines. Convert those back into real newlines.
+ // Also strip a single pair of wrapping double quotes, which some dashboards
+ // add automatically when you paste a multi-line-looking value.
privateKey = privateKey.trim();
- // Remove wrapping quotes/commas from copy-paste
- privateKey = privateKey.replace(/^[^a-zA-Z0-9+/=_-]+|[^a-zA-Z0-9+/=_-]+$/g, "");
-
- // Fix leftover 'n' from '\n' if header was removed
- if (privateKey.startsWith("nMII")) {
- privateKey = "-----BEGIN PRIVATE KEY-----\n" + privateKey.substring(1);
+ if (privateKey.startsWith('"') && privateKey.endsWith('"')) {
+ privateKey = privateKey.slice(1, -1);
}
+ privateKey = privateKey.replace(/\\n/g, "\n").trim();
- // Ensure BEGIN/END headers exist
- if (!privateKey.startsWith("-----BEGIN PRIVATE KEY-----")) {
+ // Some env exports lose the PEM header/footer markers. Re-wrap the raw key
+ // body so the Admin SDK still receives a valid PEM string.
+ if (!privateKey.includes("-----BEGIN PRIVATE KEY-----")) {
privateKey = "-----BEGIN PRIVATE KEY-----\n" + privateKey;
}
- if (!privateKey.endsWith("-----END PRIVATE KEY-----")) {
+ if (!privateKey.includes("-----END PRIVATE KEY-----")) {
privateKey = privateKey + "\n-----END PRIVATE KEY-----";
}
-
- // Convert literal "\n" sequences into real newlines (Vercel env vars)
- privateKey = privateKey.replace(/\\n/g, "\n");
}
// Singleton guard: never call initializeApp() more than once.
if (admin.getApps().length === 0) {
if (projectId && clientEmail && privateKey) {
+ // Fail fast with a clear message if the key clearly isn't a real PEM key,
+ // instead of letting OpenSSL throw an opaque ERR_OSSL_UNSUPPORTED later.
+ if (
+ !privateKey.includes("-----BEGIN PRIVATE KEY-----") ||
+ !privateKey.includes("-----END PRIVATE KEY-----")
+ ) {
+ throw new Error(
+ "FIREBASE_PRIVATE_KEY does not look like a valid PEM private key " +
+ "(missing -----BEGIN/END PRIVATE KEY----- markers). " +
+ "Re-copy the 'private_key' field from your Firebase service account JSON " +
+ "exactly as-is into the environment variable.",
+ );
+ }
+
try {
admin.initializeApp({
credential: admin.cert({ projectId, clientEmail, privateKey }),
});
} catch (certError) {
- console.error("Firebase Admin initialization with cert failed:", certError);
+ console.error(
+ "Firebase Admin initialization with cert failed:",
+ certError,
+ );
throw new Error(
`Firebase Admin cert initialization failed: ${certError.message}. ` +
- "Please verify your environment credentials (FIREBASE_PROJECT_ID, FIREBASE_CLIENT_EMAIL, FIREBASE_PRIVATE_KEY)."
+ "Please verify your environment credentials (FIREBASE_PROJECT_ID, FIREBASE_CLIENT_EMAIL, FIREBASE_PRIVATE_KEY).",
);
}
} else {
const missing = [];
- if (!projectId) missing.push("FIREBASE_PROJECT_ID / NEXT_PUBLIC_FIREBASE_PROJECT_ID");
+ if (!projectId)
+ missing.push("FIREBASE_PROJECT_ID / NEXT_PUBLIC_FIREBASE_PROJECT_ID");
if (!clientEmail) missing.push("FIREBASE_CLIENT_EMAIL");
if (!privateKey) missing.push("FIREBASE_PRIVATE_KEY");
throw new Error(
"Firebase Admin credentials are not fully configured. " +
- `Missing environment variables: ${missing.join(", ")}. ` +
- "Please check your hosting provider's dashboard and set these values."
+ `Missing environment variables: ${missing.join(", ")}. ` +
+ "Please check your hosting provider's dashboard and set these values.",
);
}
}
console.log(
`[Firebase Admin] initialized (project: ${projectId || "default"}, ` +
- `cert: ${Boolean(projectId && clientEmail && privateKey)})`
+ `cert: ${Boolean(projectId && clientEmail && privateKey)})`,
);
const db = getFirestore();
@@ -118,7 +136,10 @@ export function getAdminAuth() {
export async function verifyAdminAuth(request) {
const authHeader = request.headers.get("authorization");
if (!authHeader || !authHeader.startsWith("Bearer ")) {
- return { authorized: false, error: "Missing or invalid authorization header" };
+ return {
+ authorized: false,
+ error: "Missing or invalid authorization header",
+ };
}
try {
@@ -141,7 +162,10 @@ export async function verifyAdminAuth(request) {
decodedToken.admin === true;
if (!isAdmin) {
- return { authorized: false, error: "User does not have admin privileges" };
+ return {
+ authorized: false,
+ error: "User does not have admin privileges",
+ };
}
return { authorized: true, uid: decodedToken.uid, email };
@@ -157,7 +181,10 @@ export async function verifyAdminAuth(request) {
*/
export function generateSongId(title, artistName) {
// Use song title only, replace spaces and slashes with hyphens to ensure it is route-safe
- return (title || "").trim().replace(/\s+/g, "-").replace(/[\/\\]/g, "-");
+ return (title || "")
+ .trim()
+ .replace(/\s+/g, "-")
+ .replace(/[\/\\]/g, "-");
}
export { admin, COLLECTION_NAME, FieldValue };
diff --git a/src/lib/song-service.js b/src/lib/song-service.js
index 959c483..5315405 100644
--- a/src/lib/song-service.js
+++ b/src/lib/song-service.js
@@ -1,17 +1,17 @@
/**
- * Song Service — Fetch & transform songs from Firebase `Youworship_songs` collection
+ * Song Service — Fetch & transform songs from Firebase `youworship_songs` collection
*/
import { songService, transformSongDoc } from "@/services/songService";
/**
- * Legacy export wrapper pointing to the primary Youworship_songs service
+ * Legacy export wrapper pointing to the primary youworship_songs service
*/
export async function getAllSongs() {
return await songService.getAllSongs();
}
/**
- * Fetch a single song by document ID from Youworship_songs
+ * Fetch a single song by document ID from youworship_songs
*/
export async function getSongById(songId) {
return await songService.getSongById(songId);
diff --git a/src/proxy.js b/src/proxy.js
new file mode 100644
index 0000000..00fbce2
--- /dev/null
+++ b/src/proxy.js
@@ -0,0 +1,61 @@
+import { NextResponse } from "next/server";
+
+/**
+ * ─── Landing Gate ───────────────────────────────────────────────────────────
+ *
+ * Every public app URL (shared song links, /home, /song/...) is redirected to
+ * the landing page FIRST. The app opens only after the visitor clicks the
+ * "Explore Songs" button, which sets a session cookie that lets subsequent
+ * navigation through the app pass the gate.
+ *
+ * Exemptions (always pass through):
+ * - /admin → admin dashboard (has its own auth gate)
+ * - /auth → Firebase email-verification / auth deep links
+ * - API routes, _next internals, static files (handled by the matcher)
+ * - Search engines & social/chat crawlers (WhatsApp, Telegram, Facebook,
+ * Google…) — so link previews and SEO/indexing keep seeing the real page.
+ */
+
+const OPEN_PATHS = ["/admin", "/auth"];
+
+const BOT_RE =
+ /bot|spider|crawl|slurp|bingpreview|facebookexternalhit|whatsapp|telegram|twitterbot|linkedinbot|embedly|quora|pinterest|vkshare|yandex|duckduckbot|baiduspider|applebot|google-inspectiontool/i;
+
+// Session cookie set by the "Explore Songs" button (see EnterAppButton).
+const ENTERED_COOKIE = "yw_entered";
+
+export function proxy(request) {
+ return NextResponse.next();
+ const { pathname } = request.nextUrl;
+
+ // The landing page itself is never redirected.
+ if (pathname === "/") return NextResponse.next();
+
+ // Admin, auth flows and crawlers go straight through.
+ if (
+ OPEN_PATHS.some((p) => pathname === p || pathname.startsWith(`${p}/`)) ||
+ BOT_RE.test(request.headers.get("user-agent") || "")
+ ) {
+ return NextResponse.next();
+ }
+
+ // Already entered the app this session → browse freely.
+ if (request.cookies.get(ENTERED_COOKIE)?.value === "1") {
+ return NextResponse.next();
+ }
+
+ // Everything else → landing page, remembering the original destination so
+ // "Explore Songs" can drop the visitor exactly where they wanted to go.
+ const target = pathname + request.nextUrl.search;
+ const landingUrl = new URL("/", request.url);
+ landingUrl.searchParams.set("redirect", target);
+
+ const response = NextResponse.redirect(landingUrl);
+ // Failsafe: never let a stale entry cookie survive a gated visit.
+ response.cookies.delete(ENTERED_COOKIE);
+ return response;
+}
+
+export const config = {
+ matcher: ["/((?!api|_next/static|_next/image|favicon.ico|.*\\..*).*)"],
+};
\ No newline at end of file
diff --git a/src/services/songService.js b/src/services/songService.js
index 45359f5..e46ab29 100644
--- a/src/services/songService.js
+++ b/src/services/songService.js
@@ -6,8 +6,87 @@ import {
getDoc,
query,
where,
- orderBy
+ orderBy,
+ limit,
+ startAfter,
} from "firebase/firestore";
+import { getEnglishSlug } from "@/utils/songSlug";
+
+function removeWatermark(text) {
+ if (typeof text !== "string") return text;
+ return text
+ .replace(/^(?:lyrics\s*[:-]\s*)?www\.desiworship\.com\s*$/gim, "")
+ .replace(/^(?:lyrics\s*[:-]\s*)?desiworship\.com\s*$/gim, "")
+ .replace(/^(?:lyrics\s*[:-]\s*)?desiworship\s*$/gim, "")
+ .replace(/desiworship\.com/gi, "")
+ .replace(/www\.desiworship\.com/gi, "")
+ .replace(/desiworship/gi, "")
+ .split("\n")
+ .map(line => line.trim())
+ .map(line => {
+ const trimmed = line.trim();
+ if (trimmed === "-" || trimmed === ":" || trimmed === "- :" || trimmed === ": -") {
+ return "";
+ }
+ return line;
+ })
+ .join("\n")
+ .replace(/\n{3,}/g, "\n\n")
+ .trim();
+}
+
+// ── Server-side in-memory cache ──────────────────────────────────────
+// Avoids hitting Firestore on every /api/songs request. TTL: 24 hours.
+const _songsCache = { data: null, ts: 0 };
+const CACHE_TTL_MS = 86_400_000; // 24 hours in milliseconds
+
+function _getCachedSongs() {
+ if (_songsCache.data && Date.now() - _songsCache.ts < CACHE_TTL_MS) {
+ return _songsCache.data;
+ }
+ return null;
+}
+
+function _setCachedSongs(data) {
+ _songsCache.data = data;
+ _songsCache.ts = Date.now();
+}
+
+/**
+ * Lightweight song summary — strips heavy fields (lyrics, chords)
+ * used only by the listing API so the payload stays small.
+ */
+function toSongSummary(song) {
+ if (!song) return null;
+ return {
+ id: song.id,
+ title: song.title,
+ titleEnglish: song.titleEnglish,
+ slug: song.slug,
+ slugEnglish: song.slugEnglish,
+ artist: song.artist,
+ artistObj: song.artistObj,
+ artistName: song.artistName,
+ artistNameEnglish: song.artistNameEnglish,
+ language: song.language,
+ category: song.category,
+ categoryArr: song.categoryArr,
+ genre: song.genre,
+ duration: song.duration,
+ durationSec: song.durationSec,
+ imageUrl: song.imageUrl,
+ audioUrl: song.audioUrl,
+ videoUrl: song.videoUrl,
+ youtubeUrl: song.youtubeUrl,
+ youtubeId: song.youtubeId,
+ teluguTitle: song.teluguTitle,
+ firstLetter: song.firstLetter,
+ // Has-chords flag so client knows the tab should appear
+ hasChords: Array.isArray(song.chords) && song.chords.length > 0,
+ tags: song.tags,
+ year: song.year,
+ };
+}
/**
* Parses raw lyrics text into an array of verse lines/paragraphs
@@ -59,7 +138,7 @@ export function transformSongDoc(docSnap) {
const docId = docSnap.id;
// 1. Core Fields
- const title = (data.title || "").replace(/-/g, " ");
+ const title = removeWatermark((data.title || "").replace(/-/g, " "));
const slug = data.slug || docId;
// 2. Artist Object
@@ -81,34 +160,54 @@ export function transformSongDoc(docSnap) {
}
const cleanArtist = rawArtistName.trim();
- const invalidArtistValues = ["na", "n/a", "unknown", "none", "null", "undefined", ""];
- const artistName = (!cleanArtist || invalidArtistValues.includes(cleanArtist.toLowerCase()))
- ? "Unknown Artist"
- : cleanArtist;
+ const invalidArtistValues = [
+ "na",
+ "n/a",
+ "unknown",
+ "none",
+ "null",
+ "undefined",
+ "",
+ ];
+ const artistName =
+ !cleanArtist || invalidArtistValues.includes(cleanArtist.toLowerCase())
+ ? "Unknown Artist"
+ : cleanArtist;
const cleanArtistEnglish = rawArtistNameEnglish.trim();
- const artistNameEnglish = (!cleanArtistEnglish || invalidArtistValues.includes(cleanArtistEnglish.toLowerCase()))
- ? "Unknown Artist"
- : cleanArtistEnglish;
-
- const artistObj = { id: artistId, name: artistName, nameEnglish: artistNameEnglish };
+ const artistNameEnglish =
+ !cleanArtistEnglish ||
+ invalidArtistValues.includes(cleanArtistEnglish.toLowerCase())
+ ? "Unknown Artist"
+ : cleanArtistEnglish;
+
+ const artistObj = {
+ id: artistId,
+ name: artistName,
+ nameEnglish: artistNameEnglish,
+ };
// 3. Categories & Tags
const categoryArr = Array.isArray(data.category)
? data.category
- : (data.category ? [data.category] : ["Praise & Worship"]);
+ : data.category
+ ? [data.category]
+ : ["Praise & Worship"];
const categoryPrimary = categoryArr[0] || "Praise & Worship";
const tagsArr = Array.isArray(data.tags)
? data.tags
- : (typeof data.tags === "string" ? data.tags.split(",").map((t) => t.trim()) : []);
+ : typeof data.tags === "string"
+ ? data.tags.split(",").map((t) => t.trim())
+ : [];
// 4. Duration
- const durationSec = typeof data.duration === "number"
- ? data.duration
- : (typeof data.duration === "string" && data.duration.includes(":")
- ? data.duration.split(":").reduce((acc, time) => (60 * acc) + +time, 0)
- : Number(data.duration) || 0);
+ const durationSec =
+ typeof data.duration === "number"
+ ? data.duration
+ : typeof data.duration === "string" && data.duration.includes(":")
+ ? data.duration.split(":").reduce((acc, time) => 60 * acc + +time, 0)
+ : Number(data.duration) || 0;
const durationDisplay = formatSecondsToDisplay(durationSec);
// 5. Media Object
@@ -121,17 +220,17 @@ export function transformSongDoc(docSnap) {
let videoUrl = rawVideo;
// If audio field contains a YouTube URL or fake placeholder with YouTube video present, route to video & clear audioUrl
- if (rawAudio.includes("youtube.com") || rawAudio.includes("youtu.be") || (youtubeId && rawAudio.includes("soundhelix.com"))) {
+ if (
+ rawAudio.includes("youtube.com") ||
+ rawAudio.includes("youtu.be") ||
+ (youtubeId && rawAudio.includes("soundhelix.com"))
+ ) {
if (!videoUrl) videoUrl = rawAudio;
audioUrl = "";
}
const mediaObj = {
- image:
- data.media?.image ||
- data.imageUrl ||
- data.coverUrl ||
- "",
+ image: data.media?.image || data.imageUrl || data.coverUrl || "",
audio: audioUrl ? audioUrl.trim() : "",
video: videoUrl ? videoUrl.trim() : "",
youtubeId: youtubeId || null,
@@ -143,27 +242,64 @@ export function transformSongDoc(docSnap) {
let englishLyricsText = "";
if (Array.isArray(data.lyrics) && data.lyrics.length > 0) {
- lyricsArray = data.lyrics;
+ lyricsArray = data.lyrics.map(block => ({
+ ...block,
+ content: removeWatermark(block.content || "")
+ }));
const teBlock = lyricsArray.find((l) => l.language === "te" || l.isDefault);
const enBlock = lyricsArray.find((l) => l.language === "en");
teluguLyricsText = teBlock?.content || lyricsArray[0]?.content || "";
englishLyricsText = enBlock?.content || "";
} else if (typeof data.lyrics === "string") {
- teluguLyricsText = data.lyrics;
- englishLyricsText = data.englishLyrics || "";
+ teluguLyricsText = removeWatermark(data.lyrics);
+ englishLyricsText = removeWatermark(data.englishLyrics || "");
lyricsArray = [
- { language: "te", format: "original", title: "తెలుగు", content: teluguLyricsText, isDefault: true },
- { language: "en", format: "transliteration", title: "Romanized", content: englishLyricsText }
+ {
+ language: "te",
+ format: "original",
+ title: "తెలుగు",
+ content: teluguLyricsText,
+ isDefault: true,
+ },
+ {
+ language: "en",
+ format: "transliteration",
+ title: "Romanized",
+ content: englishLyricsText,
+ },
];
}
const firstLetter = title ? title.charAt(0).toUpperCase() : "";
+ let titleEnglish = removeWatermark((data.titleEnglish || "").replace(/-/g, " "));
+
+ // If the language is Tamil and titleEnglish is empty or contains Tamil characters,
+ // extract the English transliteration from the first line of the English lyrics block.
+ const isTamil = (data.language || "").toLowerCase() === "ta" || (data.language || "").toLowerCase() === "tamil" || /[\u0B80-\u0BFF]/.test(title);
+ if (isTamil && (!titleEnglish || /[\u0B80-\u0BFF]/.test(titleEnglish))) {
+ let enContent = "";
+ if (Array.isArray(data.lyrics) && data.lyrics.length > 0) {
+ const enBlock = data.lyrics.find((l) => l.language === "en");
+ enContent = enBlock?.content || "";
+ } else if (typeof data.englishLyrics === "string") {
+ enContent = data.englishLyrics;
+ } else if (typeof data.lyrics === "string") {
+ enContent = data.englishLyrics || "";
+ }
+ if (enContent) {
+ const firstLine = enContent.split("\n").map(line => line.trim()).filter(Boolean)[0];
+ if (firstLine && !/[\u0B80-\u0BFF]/.test(firstLine)) {
+ titleEnglish = firstLine;
+ }
+ }
+ }
return {
id: docId,
title,
- titleEnglish: (data.titleEnglish || "").replace(/-/g, " "),
+ titleEnglish,
slug: slug || docId,
+ slugEnglish: getEnglishSlug(titleEnglish),
artist: artistName,
artistObj: artistObj,
artistName: artistName,
@@ -174,7 +310,8 @@ export function transformSongDoc(docSnap) {
categoryPrimary: categoryPrimary,
genre: categoryPrimary,
album: data.album || null,
- year: data.year !== undefined && data.year !== null ? Number(data.year) : 2026,
+ year:
+ data.year !== undefined && data.year !== null ? Number(data.year) : 2026,
releaseYear: data.year || 2026,
duration: durationDisplay,
durationSec,
@@ -192,44 +329,104 @@ export function transformSongDoc(docSnap) {
teluguTitle: title,
firstLetter,
teluguFirstLetter: firstLetter,
+ chords: Array.isArray(data.chords)
+ ? data.chords.map(removeWatermark)
+ : typeof data.chords === "string" && data.chords.trim()
+ ? data.chords.split("\n").map(removeWatermark)
+ : [],
+ chordCredits: data.chordCredits || "",
createdAt: data.createdAt || null,
updatedAt: data.updatedAt || null,
};
}
/**
- * Song Service — Manages Firestore operations for Youworship_songs
+ * True when a song is Tamil. Tamil songs are temporarily excluded from the
+ * app (the owner will re-add Tamil content later); remove this filter once
+ * Tamil songs are ready.
+ */
+function isTamilSong(song) {
+ if (!song) return false;
+ const lang = (song.language || "").toLowerCase();
+ return (
+ lang === "ta" ||
+ lang === "tamil" ||
+ /[\u0B80-\u0BFF]/.test(song.title || "")
+ );
+}
+
+/**
+ * Song Service — Manages Firestore operations for youworship_songs
*/
export const songService = {
/**
- * Fetch all songs from 'Youworship_songs' collection sorted alphabetically by title.
+ * Clear the server-side in-memory cache.
+ */
+ invalidateCache() {
+ _songsCache.data = null;
+ _songsCache.ts = 0;
+ console.log("🍟 [songService] In-memory cache invalidated.");
+ },
+
+ /**
+ * Fetch all songs from 'youworship_songs' collection sorted alphabetically by title.
* Uses client-side fallback sorting to handle mixed language characters smoothly.
*
* @returns {Promise} List of transformed song objects with document IDs
*/
async getAllSongs() {
+ // Return cached data if still fresh
+ const cached = _getCachedSongs();
+ if (cached) {
+ console.log(`🍟 [songService] Returning ${cached.length} songs from cache.`);
+ return cached;
+ }
+
try {
const songsRef = collection(db, COLLECTIONS.YOUWORSHIP_SONGS);
const snapshot = await getDocs(songsRef);
if (snapshot.empty) {
- console.warn("⚠️ No songs found in 'Youworship_songs' collection.");
+ console.warn("⚠️ No songs found in 'youworship_songs' collection.");
return [];
}
- const songs = snapshot.docs.map((docSnap) => transformSongDoc(docSnap));
+ const songs = snapshot.docs
+ .map((docSnap) => transformSongDoc(docSnap))
+ .filter((song) => song && !isTamilSong(song)); // exclude Tamil songs for now
// Sort alphabetically by title
- songs.sort((a, b) => (a.title || "").localeCompare(b.title || "", undefined, { sensitivity: "base" }));
+ songs.sort((a, b) =>
+ (a.title || "").localeCompare(b.title || "", undefined, {
+ sensitivity: "base",
+ }),
+ );
- console.log(`🎵 [songService] Loaded ${songs.length} songs from Youworship_songs.`);
+ // Store in cache for subsequent requests
+ _setCachedSongs(songs);
+
+ console.log(
+ `🍟 [songService] Loaded ${songs.length} songs from youworship_songs.`,
+ );
return songs;
} catch (error) {
- console.error("❌ [songService.getAllSongs] Error fetching songs:", error);
+ console.error(
+ "❌ [songService.getAllSongs] Error fetching songs:",
+ error,
+ );
throw error;
}
},
+ /**
+ * Lightweight version of getAllSongs — strips lyrics/chords for fast listing.
+ * Cached alongside getAllSongs for minimal payload.
+ */
+ async getAllSongsSummary() {
+ const allSongs = await this.getAllSongs();
+ return allSongs.map(toSongSummary).filter(Boolean);
+ },
+
/**
* Fetch a single song by its Firestore Document ID.
*
@@ -246,23 +443,7 @@ export const songService = {
}
try {
- // 1. Direct lookup by decoded targetId
- const songRef = doc(db, COLLECTIONS.YOUWORSHIP_SONGS, targetId);
- const docSnap = await getDoc(songRef);
- if (docSnap.exists()) {
- return transformSongDoc(docSnap);
- }
-
- // 2. Lookup by raw songId
- if (targetId !== songId) {
- const rawRef = doc(db, COLLECTIONS.YOUWORSHIP_SONGS, songId);
- const rawSnap = await getDoc(rawRef);
- if (rawSnap.exists()) {
- return transformSongDoc(rawSnap);
- }
- }
-
- // 3. Fallback: Search all songs list for matching ID or Slug (with NFC normalization)
+ // 1. Check in-memory cached 'allSongs' list first for instant lookup
const allSongs = await this.getAllSongs();
const targetNFC = (targetId || "").normalize("NFC");
const songNFC = (songId || "").normalize("NFC");
@@ -270,11 +451,14 @@ export const songService = {
const match = allSongs.find((s) => {
const sIdNFC = (s.id || "").normalize("NFC");
const sSlugNFC = (s.slug || "").normalize("NFC");
+ const sSlugEnglishNFC = (s.slugEnglish || "").normalize("NFC");
return (
sIdNFC === targetNFC ||
sIdNFC === songNFC ||
sSlugNFC === targetNFC ||
sSlugNFC === songNFC ||
+ sSlugEnglishNFC === targetNFC ||
+ sSlugEnglishNFC === songNFC ||
decodeURIComponent(sIdNFC) === targetNFC ||
decodeURIComponent(sSlugNFC) === targetNFC
);
@@ -282,10 +466,31 @@ export const songService = {
if (match) return match;
+ // 2. Direct lookup by decoded targetId
+ const songRef = doc(db, COLLECTIONS.YOUWORSHIP_SONGS, targetId);
+ const docSnap = await getDoc(songRef);
+ if (docSnap.exists()) {
+ const song = transformSongDoc(docSnap);
+ return song && !isTamilSong(song) ? song : null;
+ }
+
+ // 3. Lookup by raw songId
+ if (targetId !== songId) {
+ const rawRef = doc(db, COLLECTIONS.YOUWORSHIP_SONGS, songId);
+ const rawSnap = await getDoc(rawRef);
+ if (rawSnap.exists()) {
+ const song = transformSongDoc(rawSnap);
+ return song && !isTamilSong(song) ? song : null;
+ }
+ }
+
console.warn(`⚠️ Song document with ID/Slug '${songId}' not found.`);
return null;
} catch (error) {
- console.error(`❌ [songService.getSongById] Error fetching song '${songId}':`, error);
+ console.error(
+ `❌ [songService.getSongById] Error fetching song '${songId}':`,
+ error,
+ );
throw error;
}
},
@@ -331,7 +536,7 @@ export const songService = {
return allSongs.filter(
(s) =>
(s.firstLetter && s.firstLetter.toLowerCase() === targetLetter) ||
- (s.title && s.title.trim().startsWith(letter))
+ (s.title && s.title.trim().startsWith(letter)),
);
} catch (error) {
console.error(`❌ [songService.getSongsByFirstLetter] Error:`, error);
@@ -350,7 +555,9 @@ export const songService = {
const q = searchQuery.trim().toLowerCase();
const allSongs = await this.getAllSongs();
return allSongs.filter((s) => {
- const lyricsStr = Array.isArray(s.lyrics) ? s.lyrics.join(" ") : (s.lyrics || "");
+ const lyricsStr = Array.isArray(s.lyrics)
+ ? s.lyrics.join(" ")
+ : s.lyrics || "";
return (
s.title.toLowerCase().includes(q) ||
s.titleEnglish.toLowerCase().includes(q) ||
@@ -359,5 +566,242 @@ export const songService = {
lyricsStr.toLowerCase().includes(q)
);
});
+ },
+
+ /**
+ * Resolve a cursor ID into a Firestore DocumentSnapshot.
+ * Returns null if the document doesn't exist.
+ */
+ async _resolveCursor(cursorId) {
+ if (!cursorId) return null;
+ const cursorRef = doc(db, COLLECTIONS.YOUWORSHIP_SONGS, cursorId);
+ const cursorSnap = await getDoc(cursorRef);
+ return cursorSnap.exists() ? cursorSnap : null;
+ },
+
+ /**
+ * Transform + filter a Firestore snapshot into a page result.
+ */
+ _buildPage(snapshot, pageSize) {
+ const songs = snapshot.docs
+ .map((docSnap) => transformSongDoc(docSnap))
+ .filter((song) => song && !isTamilSong(song))
+ .slice(0, pageSize);
+
+ const lastDoc = snapshot.docs[snapshot.docs.length - 1] || null;
+ const cursor = lastDoc ? lastDoc.id : null;
+ const hasMore = snapshot.docs.length === pageSize;
+
+ return { songs, cursor, hasMore };
+ },
+
+ /**
+ * Keyset pagination: first page of songs.
+ * Over-fetches to compensate for Tamil song filtering.
+ */
+ async getSongsPage(pageSize = 20) {
+ const overFetch = Math.ceil(pageSize * 1.5);
+ try {
+ const songsRef = collection(db, COLLECTIONS.YOUWORSHIP_SONGS);
+ const q = query(songsRef, orderBy("title"), limit(overFetch));
+ const snapshot = await getDocs(q);
+ return this._buildPage(snapshot, pageSize);
+ } catch (error) {
+ console.error("❌ [songService.getSongsPage] Error:", error);
+ throw error;
+ }
+ },
+
+ /**
+ * Keyset pagination: next page after a cursor.
+ */
+ async getSongsPageAfter(cursorId, pageSize = 20) {
+ if (!cursorId) return this.getSongsPage(pageSize);
+ try {
+ const cursorSnap = await this._resolveCursor(cursorId);
+ if (!cursorSnap) return this.getSongsPage(pageSize);
+
+ const overFetch = Math.ceil(pageSize * 1.5);
+ const songsRef = collection(db, COLLECTIONS.YOUWORSHIP_SONGS);
+ const q = query(songsRef, orderBy("title"), startAfter(cursorSnap), limit(overFetch));
+ const snapshot = await getDocs(q);
+ return this._buildPage(snapshot, pageSize);
+ } catch (error) {
+ console.error("❌ [songService.getSongsPageAfter] Error:", error);
+ throw error;
+ }
+ },
+
+ // ── Category pagination ───────────────────────────────────────────
+
+ /**
+ * Keyset pagination: first page of songs filtered by category.
+ * Uses Firestore array-contains query on the category field.
+ */
+ async getCategorySongsPage(category, pageSize = 20) {
+ if (!category) return this.getSongsPage(pageSize);
+ const overFetch = Math.ceil(pageSize * 1.5);
+ try {
+ const songsRef = collection(db, COLLECTIONS.YOUWORSHIP_SONGS);
+ const q = query(
+ songsRef,
+ where("category", "array-contains", category),
+ orderBy("title"),
+ limit(overFetch),
+ );
+ const snapshot = await getDocs(q);
+ return this._buildPage(snapshot, pageSize);
+ } catch (error) {
+ console.error("❌ [songService.getCategorySongsPage] Error:", error);
+ throw error;
+ }
+ },
+
+ /**
+ * Keyset pagination: next page of category-filtered songs after a cursor.
+ */
+ async getCategorySongsPageAfter(category, cursorId, pageSize = 20) {
+ if (!category) return this.getSongsPageAfter(cursorId, pageSize);
+ if (!cursorId) return this.getCategorySongsPage(category, pageSize);
+ try {
+ const cursorSnap = await this._resolveCursor(cursorId);
+ if (!cursorSnap) return this.getCategorySongsPage(category, pageSize);
+
+ const overFetch = Math.ceil(pageSize * 1.5);
+ const songsRef = collection(db, COLLECTIONS.YOUWORSHIP_SONGS);
+ const q = query(
+ songsRef,
+ where("category", "array-contains", category),
+ orderBy("title"),
+ startAfter(cursorSnap),
+ limit(overFetch),
+ );
+ const snapshot = await getDocs(q);
+ return this._buildPage(snapshot, pageSize);
+ } catch (error) {
+ console.error("❌ [songService.getCategorySongsPageAfter] Error:", error);
+ throw error;
+ }
+ },
+
+ // ── Letter pagination ─────────────────────────────────────────────
+
+ /**
+ * Keyset pagination: first page of songs filtered by first letter.
+ * Uses Firestore where + orderBy with composite index.
+ */
+ async getLetterSongsPage(letter, pageSize = 20) {
+ if (!letter) return this.getSongsPage(pageSize);
+ const overFetch = Math.ceil(pageSize * 1.5);
+ try {
+ const songsRef = collection(db, COLLECTIONS.YOUWORSHIP_SONGS);
+ const q = query(
+ songsRef,
+ where("firstLetter", "==", letter.toUpperCase()),
+ orderBy("title"),
+ limit(overFetch),
+ );
+ const snapshot = await getDocs(q);
+ return this._buildPage(snapshot, pageSize);
+ } catch (error) {
+ console.error("❌ [songService.getLetterSongsPage] Error:", error);
+ throw error;
+ }
+ },
+
+ /**
+ * Keyset pagination: next page of letter-filtered songs after a cursor.
+ */
+ async getLetterSongsPageAfter(letter, cursorId, pageSize = 20) {
+ if (!letter) return this.getSongsPageAfter(cursorId, pageSize);
+ if (!cursorId) return this.getLetterSongsPage(letter, pageSize);
+ try {
+ const cursorSnap = await this._resolveCursor(cursorId);
+ if (!cursorSnap) return this.getLetterSongsPage(letter, pageSize);
+
+ const overFetch = Math.ceil(pageSize * 1.5);
+ const songsRef = collection(db, COLLECTIONS.YOUWORSHIP_SONGS);
+ const q = query(
+ songsRef,
+ where("firstLetter", "==", letter.toUpperCase()),
+ orderBy("title"),
+ startAfter(cursorSnap),
+ limit(overFetch),
+ );
+ const snapshot = await getDocs(q);
+ return this._buildPage(snapshot, pageSize);
+ } catch (error) {
+ console.error("❌ [songService.getLetterSongsPageAfter] Error:", error);
+ throw error;
+ }
+ },
+
+ /**
+ * Fetch the first 20 songs starting with the specified letter from Firestore.
+ */
+ async fetchInitialSongsForLetter(letter) {
+ try {
+ const songsRef = collection(db, COLLECTIONS.YOUWORSHIP_SONGS);
+ const q = query(
+ songsRef,
+ where("firstLetter", "==", letter.toUpperCase()),
+ orderBy("title"),
+ limit(20)
+ );
+ const snapshot = await getDocs(q);
+ const songs = snapshot.docs.map((docSnap) => transformSongDoc(docSnap)).filter(Boolean);
+ const lastDoc = snapshot.docs[snapshot.docs.length - 1] || null;
+ return { songs, lastDoc, hasMore: snapshot.docs.length === 20 };
+ } catch (error) {
+ console.error(`Error fetching initial songs for letter ${letter}:`, error);
+ throw error;
+ }
+ },
+
+ /**
+ * Fetch all remaining songs starting with the specified letter from Firestore.
+ */
+ async fetchRemainingSongsForLetter(letter, lastDoc) {
+ if (!lastDoc) return { songs: [], lastDoc: null, hasMore: false };
+ try {
+ const songsRef = collection(db, COLLECTIONS.YOUWORSHIP_SONGS);
+ const q = query(
+ songsRef,
+ where("firstLetter", "==", letter.toUpperCase()),
+ orderBy("title"),
+ startAfter(lastDoc)
+ );
+ const snapshot = await getDocs(q);
+ const songs = snapshot.docs.map((docSnap) => transformSongDoc(docSnap)).filter(Boolean);
+ const newLastDoc = snapshot.docs[snapshot.docs.length - 1] || null;
+ return { songs, lastDoc: newLastDoc, hasMore: false };
+ } catch (error) {
+ console.error(`Error fetching remaining songs for letter ${letter}:`, error);
+ throw error;
+ }
+ },
+
+ /**
+ * Fetch the next batch (limitCount) of songs starting with the specified letter from Firestore.
+ */
+ async fetchNextBatchForLetter(letter, lastDoc, limitCount = 20) {
+ if (!lastDoc) return { songs: [], lastDoc: null, hasMore: false };
+ try {
+ const songsRef = collection(db, COLLECTIONS.YOUWORSHIP_SONGS);
+ const q = query(
+ songsRef,
+ where("firstLetter", "==", letter.toUpperCase()),
+ orderBy("title"),
+ startAfter(lastDoc),
+ limit(limitCount)
+ );
+ const snapshot = await getDocs(q);
+ const songs = snapshot.docs.map((docSnap) => transformSongDoc(docSnap)).filter(Boolean);
+ const newLastDoc = snapshot.docs[snapshot.docs.length - 1] || null;
+ return { songs, lastDoc: newLastDoc, hasMore: snapshot.docs.length === limitCount };
+ } catch (error) {
+ console.error(`Error fetching next batch for letter ${letter}:`, error);
+ throw error;
+ }
}
};
diff --git a/src/utils/share.js b/src/utils/share.js
index 8a39fe2..ccd8e6e 100644
--- a/src/utils/share.js
+++ b/src/utils/share.js
@@ -1,3 +1,5 @@
+import { getEnglishSlug } from "@/utils/songSlug";
+
/**
* getShareableSongUrl — Returns the clean canonical URL for sharing a song.
*
@@ -11,10 +13,14 @@
* @param {Object} song — Must have a `slug` property. Falls back to `id` if no slug.
* @returns {string} — e.g. "https://youworship.world/song/my-song-slug"
*/
+
export function getShareableSongUrl(song) {
if (!song) return "";
- // Use the existing slug, or generate one from the title (never fall back to raw ID)
- let slug = song.slug;
+ // Prefer a slug built from the English subtitle so shared links show the
+ // English song name (e.g. /song/attractive-beloved) instead of the Telugu
+ // one. Falls back to the existing slug, then to a slug from the title.
+ const englishSlug = getEnglishSlug(song);
+ let slug = englishSlug || song.slug;
if (!slug) {
const title = song.teluguTitle || song.title || "untitled";
slug = title
diff --git a/src/utils/songSlug.js b/src/utils/songSlug.js
new file mode 100644
index 0000000..1d09e0f
--- /dev/null
+++ b/src/utils/songSlug.js
@@ -0,0 +1,22 @@
+/**
+ * getEnglishSlug — Returns a URL-safe slug built from a song's English
+ * subtitle (`titleEnglish`). Used for share links so the URL shows the
+ * English song name instead of the Telugu one.
+ *
+ * Returns "" when the song has no English subtitle, so callers can fall
+ * back to the existing Telugu-based slug.
+ *
+ * @param {Object|string} song — Song object with a `titleEnglish` property, or the raw title string.
+ * @returns {string} — e.g. "attractive-beloved"
+ */
+export function getEnglishSlug(song) {
+ const englishTitle =
+ (typeof song === "string" ? song : song && song.titleEnglish) || "";
+ const trimmed = englishTitle.trim();
+ if (!trimmed) return "";
+ return trimmed
+ .toLowerCase()
+ .replace(/[^a-z0-9]+/g, "-")
+ .replace(/^-+|-+$/g, "")
+ .substring(0, 80);
+}