Changeset f5bc95e for frontend/src/components

Timestamp:

02/12/26 22:27:24 (5 months ago)

Author:

Filip Gavrilovski <filipgavrilovski28@…>

Branches:

main

Children:

85512ff

Parents:

d85e8e3

Message:

fix music cover ui bug

Location:

frontend/src/components

Files:

• MiniPlayer.tsx (modified) (3 diffs)
• Sidebar.tsx (modified) (2 diffs)
• SongItem.tsx (modified) (2 diffs)
• search/AlbumResult.tsx (modified) (3 diffs)
• userProfile/ArtistView.tsx (modified) (2 diffs)
• userProfile/ListenerView.tsx (modified) (5 diffs)

frontend/src/components/MiniPlayer.tsx

@@ +1 @@
+import { baseURL } from "../api/axiosInstance";
 import { usePlayer } from "../context/playerContext";
 
@@ -20 +21 @@
                                         <div className="flex items-center gap-4">
                                                 <img
-                                                        src={currentSong.cover || "/favicon.png"}
+                                                        src={
+                                                                currentSong.cover
+                                                                        ? `${baseURL}/${currentSong.cover}`
+                                                                        : "/favicon.png"
+                                                        }
                                                         alt={currentSong.title}
                                                         className="w-12 h-12 rounded-lg object-cover shadow-lg"
@@ -110 +115 @@
                                         <div className="flex items-center gap-3 min-w-0 flex-1">
                                                 <img
-                                                        src={currentSong.cover || "/favicon.png"}
+                                                        src={
+                                                                currentSong.cover
+                                                                        ? `${baseURL}/${currentSong.cover}`
+                                                                        : "/favicon.png"
+                                                        }
                                                         alt={currentSong.title}
                                                         className="w-10 h-10 rounded object-cover shrink-0"

frontend/src/components/Sidebar.tsx

@@ -1 +1 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import axiosInstance from "../api/axiosInstance";
+import axiosInstance, { baseURL } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
 import { usePlayer } from "../context/playerContext";
@@ -82 +82 @@
                                                         >
                                                                 <img
-                                                                        src={song.cover || "/favicon.png"}
+                                                                        src={song.cover ? `${baseURL}/${song.cover}` : "/favicon.png"}
                                                                         alt={song.title}
                                                                         className="w-10 h-10 rounded object-cover"

frontend/src/components/SongItem.tsx

@@ -1 +1 @@
 import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { baseURL } from "../api/axiosInstance";
 import { usePlayer } from "../context/playerContext";
 import { toEmbedUrl } from "../utils/utils";
@@ -94 +95 @@
                         {/* Cover */}
                         <img
-                                src={song.cover || "/favicon.png"}
+                                src={song.cover ? `${baseURL}/${song.cover}` : "/favicon.png"}
                                 alt={song.title}
                                 className="w-12 h-12 rounded object-cover shrink-0"

frontend/src/components/search/AlbumResult.tsx

@@ -1 +1 @@
 import { useNavigate } from "react-router-dom";
+import { baseURL } from "../../api/axiosInstance";
 import type { Album } from "../../utils/types";
 
@@ -15 +16 @@
                 >
                         <img
-                                src={album.cover || "/favicon.png"}
+                                src={album.cover ? `${baseURL}/${album.cover}` : "/favicon.png"}
                                 alt={album.title}
                                 className="w-12 h-12 rounded object-cover"
@@ -25 +26 @@
                                 <p className="text-white font-medium truncate">{album.title}</p>
                                 <p className="text-sm text-gray-400 truncate">
-                                        Album • {album.releasedBy} • {album.songs?.length ?? 0} songs
+                                        Album • {album.releasedBy}
                                 </p>
                         </div>

frontend/src/components/userProfile/ArtistView.tsx

@@ -3 +3 @@
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import axiosInstance from "../../api/axiosInstance";
+import axiosInstance, { baseURL } from "../../api/axiosInstance";
 import type { ArtistContribution } from "../../utils/types";
 import SongItem from "../SongItem";
@@ -65 +65 @@
                                                                 <div className="relative aspect-square rounded-lg mb-3 overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 bg-[#181818]">
                                                                         <img
-                                                                                src={album.cover || "/favicon.png"}
+                                                                                src={
+                                                                                        album.cover ? `${baseURL}/${album.cover}` : "/favicon.png"
+                                                                                }
                                                                                 alt={album.title}
                                                                                 className="w-full h-full object-cover"

frontend/src/components/userProfile/ListenerView.tsx

@@ -3 +3 @@
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import axiosInstance from "../../api/axiosInstance";
+import axiosInstance, { baseURL } from "../../api/axiosInstance";
 import type { MusicalEntity, Playlist } from "../../utils/types";
 import SongItem from "../SongItem";
@@ -94 +94 @@
                                                                 <div className="relative aspect-square rounded-lg overflow-hidden bg-[#181818] mb-3 shadow-md group-hover:shadow-xl transition-all">
                                                                         <img
-                                                                                src={playlist.cover || "/favicon.png"}
+                                                                                src={
+                                                                                        playlist.cover
+                                                                                                ? `${baseURL}/${playlist.cover}`
+                                                                                                : "/favicon.png"
+                                                                                }
                                                                                 alt={playlist.name}
                                                                                 className="w-full h-full object-cover"
@@ -147 +151 @@
                                                                 <div className="relative aspect-square rounded-lg overflow-hidden bg-[#181818] mb-3 shadow-md group-hover:shadow-xl transition-all">
                                                                         <img
-                                                                                src={playlist.cover || "/favicon.png"}
+                                                                                src={
+                                                                                        playlist.cover
+                                                                                                ? `${baseURL}/${playlist.cover}`
+                                                                                                : "/favicon.png"
+                                                                                }
                                                                                 alt={playlist.name}
                                                                                 className="w-full h-full object-cover"
@@ -194 +202 @@
                                                                         id: song.id,
                                                                         title: song.title,
-                                                                        cover: song.cover,
+                                                                        cover: song.cover
+                                                                                ? `${baseURL}/${song.cover}`
+                                                                                : "/favicon.png",
                                                                         genre: song.genre,
                                                                         link: (song as any).link,
@@ -227 +237 @@
                                                                 <div className="relative aspect-square rounded-lg overflow-hidden bg-[#181818] mb-3 shadow-md group-hover:shadow-xl transition-all">
                                                                         <img
-                                                                                src={album.cover || "/favicon.png"}
+                                                                                src={
+                                                                                        album.cover ? `${baseURL}/${album.cover}` : "/favicon.png"
+                                                                                }
                                                                                 alt={album.title}
                                                                                 className="w-full h-full object-cover"