- {/* Dark/Light overlay for better text contrast */}
-
-
- {/* Artist Image */}
-
+
+
+
{!imageLoaded && (
-
+
)}
- {/* Artist Info */}
-
-
- {/* Top Songs Section */}
-
-
+ - Artist -
-- {data.name} -
-
+
+ {data.name} +
- {/* Action Buttons */} -
+
@@ -172,183 +147,62 @@ function Artist() {
-
-
-
-
-
- {/* Songs List - Improved Mobile Layout */}
- Popular
-
- {data.topSongs.map((song, index) => (
- ;
+ persistState: () => Promise;
+}
export const useMusicPersistence = (): void => {
- const { currentSong, restoreState, persistState }: any = useStore();
+ // FIX: Replaced 'any' with the specific 'MusicPersistenceState' type
+ const { currentSong, restoreState, persistState }: MusicPersistenceState = useStore();
// Restore state when app loads
useEffect(() => {
diff --git a/src/lib/IndexedDBUtils.ts b/src/lib/IndexedDBUtils.ts
index dd08d78..79f4e7b 100644
--- a/src/lib/IndexedDBUtils.ts
+++ b/src/lib/IndexedDBUtils.ts
@@ -1,6 +1,13 @@
+// Define a basic type for a Song object
+interface Song {
+ id: string;
+ [key: string]: unknown;
+}
+
export interface PlaybackData {
id: string;
- currentSong: any | null;
+ // FIX: Replaced 'any' with the specific 'Song' type
+ currentSong: Song | null;
}
export class IndexedDBUtils {
diff --git a/src/zustand/persistHelpers.ts b/src/zustand/persistHelpers.ts
index 058ad8c..a9e7d46 100644
--- a/src/zustand/persistHelpers.ts
+++ b/src/zustand/persistHelpers.ts
@@ -1,9 +1,16 @@
-import { indexedDBUtils, PlaybackData } from "../lib/IndexedDBUtils";
+import { indexedDBUtils, PlaybackData } from "../lib/IndexedDBUtils.ts";
const STORE_NAME = "playback";
const STATE_KEY = "state";
-export async function persistMusicState(currentSong: any | null): Promise {
+// Define a basic type for a Song object
+interface Song {
+ id: string;
+ [key: string]: unknown;
+}
+
+// FIX: Replaced 'any' with the specific 'Song' type for the function parameter
+export async function persistMusicState(currentSong: Song | null): Promise {
const data: PlaybackData = {
id: STATE_KEY,
currentSong,
diff --git a/src/zustand/store.js b/src/zustand/store.js
index c25184b..daba0f5 100644
--- a/src/zustand/store.js
+++ b/src/zustand/store.js
@@ -1,10 +1,11 @@
import { create } from "zustand";
import Api from "../Api";
-import { persistMusicState, restoreMusicState } from "./persistHelpers";
+import { persistMusicState, restoreMusicState } from "./persistHelpers.ts";
const INITIAL_SONGS_LIMIT = 1;
const SUGGESTIONS_LIMIT = 9;
const BASE_JIOSAAVAN_URL = "https://jiosaavan-api-2-harsh-patel.vercel.app";
+
export const useFetch = create((set) => ({
songs: null,
albums: null,
handleSongClick(song, { artistId: artistId })}
- >
- {/* Mobile Layout */}
-
diff --git a/src/hooks/SongCustomHooks.ts b/src/hooks/SongCustomHooks.ts
index 10d71ed..01839bd 100644
--- a/src/hooks/SongCustomHooks.ts
+++ b/src/hooks/SongCustomHooks.ts
@@ -8,14 +8,12 @@ interface SongClickOptions {
interface Song {
id: string;
- [key: string]: any;
+ // FIX: Replaced 'any' with 'unknown' for a type-safe index signature
+ [key: string]: unknown;
}
export const useSongHandlers = () => {
- // state
const musicId = useStore((state) => state.musicId);
-
- // actions
const setMusicId = useStore((state) => state.setMusicId);
const setIsPlaying = useStore((state) => state.setIsPlaying);
const setAlbumId = useStore((state) => state.setAlbumId);
@@ -38,38 +36,27 @@ export const useSongHandlers = () => {
};
};
-/**
- * Calculate luminance from RGB color and determine appropriate text color
- */
export const getTextColor = (color: string): "dark" | "white" => {
+ if (!color) return "white";
const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
- let r: number | undefined;
- let g: number | undefined;
- let b: number | undefined;
+ let r: number, g: number, b: number;
if (rgbMatch) {
- r = Number.parseInt(rgbMatch[1]);
- g = Number.parseInt(rgbMatch[2]);
- b = Number.parseInt(rgbMatch[3]);
+ r = parseInt(rgbMatch[1], 10);
+ g = parseInt(rgbMatch[2], 10);
+ b = parseInt(rgbMatch[3], 10);
} else {
- const hexMatch = color.match(/^#?([a-f\d]{1,2})([a-f\d]{1,2})([a-f\d]{1,2})$/i);
- if (!hexMatch) return "white";
- const expandHex = (hex: string) => (hex.length === 1 ? hex + hex : hex);
- r = Number.parseInt(expandHex(hexMatch[1]), 16);
- g = Number.parseInt(expandHex(hexMatch[2]), 16);
- b = Number.parseInt(expandHex(hexMatch[3]), 16);
+ const hex = color.replace("#", "");
+ const bigint = parseInt(hex, 16);
+ r = (bigint >> 16) & 255;
+ g = (bigint >> 8) & 255;
+ b = bigint & 255;
}
- // Calculate relative luminance (WCAG formula)
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-
- // If luminance > 0.6, use dark text, otherwise use white text
return luminance > 0.6 ? "dark" : "white";
};
-/**
- * Hook to handle Play All functionality for albums and artists
- */
export const usePlayAll = (
contextId: string,
songs: Song[] | undefined,
@@ -89,13 +76,9 @@ export const usePlayAll = (
const currentContextId = contextType === "album" ? currentAlbumId : currentArtistId;
const setContextId = contextType === "album" ? setAlbumId : setArtistId;
- const handlePlayAll = useCallback(() => {
+ return useCallback(() => {
if (currentContextId === contextId) {
- if (isPlaying) {
- setIsPlaying(false);
- } else {
- setIsPlaying(true);
- }
+ setIsPlaying(!isPlaying);
} else {
if (songs && songs.length > 0) {
setCurrentList(songs);
@@ -114,71 +97,55 @@ export const usePlayAll = (
setCurrentList,
setContextId,
]);
-
- return handlePlayAll;
};
-/**
- * Hook to handle Shuffle functionality
- */
export const useShuffle = (
contextId: string,
songs: Song[] | undefined,
contextType: "album" | "artist"
) => {
- const { setMusicId, setIsPlaying, setAlbumId, setArtistId } = useStore();
+ const { setMusicId, setCurrentList, setIsPlaying, setAlbumId, setArtistId } = useStore();
const setContextId = contextType === "album" ? setAlbumId : setArtistId;
- const handleShuffle = useCallback(() => {
+ return useCallback(() => {
if (songs && songs.length > 0) {
- const randomIndex = Math.floor(Math.random() * songs.length);
- setMusicId(songs[randomIndex].id);
+ const shuffledSongs = [...songs].sort(() => Math.random() - 0.5);
+ const randomSong = shuffledSongs[0];
+ setCurrentList(shuffledSongs);
+ setMusicId(randomSong.id);
setIsPlaying(true);
setContextId(contextId);
}
- }, [songs, contextId, setMusicId, setIsPlaying, setContextId]);
-
- return handleShuffle;
+ }, [songs, contextId, setCurrentList, setMusicId, setIsPlaying, setContextId]);
};
-/**
- * Format artist names with links
- */
export const formatArtist = (
song: { artists: { primary: Array<{ id: string; name: string }> } },
check: boolean = false,
isMobile: boolean = false
): string => {
+ if (!song?.artists?.primary) return "";
const all = song.artists.primary;
- const x = check ? all.length : isMobile ? 1 : 3;
+ const limit = check ? all.length : isMobile ? 1 : 3;
const artists = all
- .slice(0, x)
+ .slice(0, limit)
.map(
(artist) =>
`${artist.name.trim()}`
)
.join(", ");
- return all.length > x ? `${artists} & more` : artists;
+ return all.length > limit ? `${artists} & more` : artists;
};
-/**
- * Hook to detect mobile screen size
- */
export const useIsMobile = (breakpoint: number = 768) => {
- const [isMobile, setIsMobile] = useState(false);
+ const [isMobile, setIsMobile] = useState(window.innerWidth <= breakpoint);
useEffect(() => {
- const mql = window.matchMedia(`(max-width: ${breakpoint}px)`);
- const onChange = () => setIsMobile(mql.matches);
- onChange();
- if (mql.addEventListener) mql.addEventListener("change", onChange);
- else mql.addListener(onChange);
- return () => {
- if (mql.removeEventListener) mql.removeEventListener("change", onChange);
- else mql.removeListener(onChange);
- };
+ const handleResize = () => setIsMobile(window.innerWidth <= breakpoint);
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
}, [breakpoint]);
return isMobile;
diff --git a/src/hooks/useMusicPersistence.ts b/src/hooks/useMusicPersistence.ts
index cfc2cb3..b61f288 100644
--- a/src/hooks/useMusicPersistence.ts
+++ b/src/hooks/useMusicPersistence.ts
@@ -1,12 +1,22 @@
import { useStore } from "@/zustand/store";
import { useEffect } from "react";
-/**
- * The Comments are added in order to make it easy for developers to debug any issues or make changes.
- */
+// Define a basic type for a Song object
+interface Song {
+ id: string;
+ [key: string]: unknown;
+}
+
+// Define the shape of the state we're using from the store
+interface MusicPersistenceState {
+ currentSong: Song | null;
+ restoreState: () => Promise
-
- {/* Track Number / Play Button */}
-
+ {data &&
-
- {index + 1}
-
-
-
-
- {/* Song Image */}
-
- 
-
-
- {/* Song Info - More space on mobile */}
-
-
-
- {/* Like Button - Mobile */}
- - {song.name} -
-
-
+ {/* Top Songs & Bio Section */}
+
+
+ ))}
Popular
+
+ {data.topSongs.map((song, index) => (
+
+ handleSongClick(song, { artistId })}
+ >
+
+
+ {index + 1}
+
+
- {/* Menu Button - Always visible on mobile for better UX */}
-
-
-
-
+ 
+
- {/* Desktop/Tablet Layout */}
-
+
+ + {song.name} +
+{data.name}
-
+
- {/* Track Number / Play Button */}
-
-
-
- {index + 1}
-
-
-
-
- {/* Song Image */}
-
-
-
-
- {/* Song Info */}
-
-
-
- {/* Duration */}
- - {song.name} -
-{data.name}
-
- {Math.floor(song.duration / 60)}:
- {(song.duration % 60).toString().padStart(2, "0")}
-
-
-
-
+ {data.name}
- {/* Menu Button */}
-
-
-
-
+
- ))}
-