Changeset f5bc95e for frontend


Ignore:
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
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/components/MiniPlayer.tsx

    rd85e8e3 rf5bc95e  
     1import { baseURL } from "../api/axiosInstance";
    12import { usePlayer } from "../context/playerContext";
    23
    … …  
    2021                                        <div className="flex items-center gap-4">
    2122                                                <img
    22                                                         src={currentSong.cover || "/favicon.png"}
     23                                                        src={
     24                                                                currentSong.cover
     25                                                                        ? `${baseURL}/${currentSong.cover}`
     26                                                                        : "/favicon.png"
     27                                                        }
    2328                                                        alt={currentSong.title}
    2429                                                        className="w-12 h-12 rounded-lg object-cover shadow-lg"
    … …  
    110115                                        <div className="flex items-center gap-3 min-w-0 flex-1">
    111116                                                <img
    112                                                         src={currentSong.cover || "/favicon.png"}
     117                                                        src={
     118                                                                currentSong.cover
     119                                                                        ? `${baseURL}/${currentSong.cover}`
     120                                                                        : "/favicon.png"
     121                                                        }
    113122                                                        alt={currentSong.title}
    114123                                                        className="w-10 h-10 rounded object-cover shrink-0"

  • frontend/src/components/Sidebar.tsx

    rd85e8e3 rf5bc95e  
    11import { useEffect, useState } from "react";
    22import { useNavigate } from "react-router-dom";
    3 import axiosInstance from "../api/axiosInstance";
     3import axiosInstance, { baseURL } from "../api/axiosInstance";
    44import { useAuth } from "../context/authContext";
    55import { usePlayer } from "../context/playerContext";
    … …  
    8282                                                        >
    8383                                                                <img
    84                                                                         src={song.cover || "/favicon.png"}
     84                                                                        src={song.cover ? `${baseURL}/${song.cover}` : "/favicon.png"}
    8585                                                                        alt={song.title}
    8686                                                                        className="w-10 h-10 rounded object-cover"

  • frontend/src/components/SongItem.tsx

    rd85e8e3 rf5bc95e  
    11import { useEffect, useRef, useState } from "react";
    22import { useNavigate } from "react-router-dom";
     3import { baseURL } from "../api/axiosInstance";
    34import { usePlayer } from "../context/playerContext";
    45import { toEmbedUrl } from "../utils/utils";
    … …  
    9495                        {/* Cover */}
    9596                        <img
    96                                 src={song.cover || "/favicon.png"}
     97                                src={song.cover ? `${baseURL}/${song.cover}` : "/favicon.png"}
    9798                                alt={song.title}
    9899                                className="w-12 h-12 rounded object-cover shrink-0"

  • frontend/src/components/search/AlbumResult.tsx

    rd85e8e3 rf5bc95e  
    11import { useNavigate } from "react-router-dom";
     2import { baseURL } from "../../api/axiosInstance";
    23import type { Album } from "../../utils/types";
    34
    … …  
    1516                >
    1617                        <img
    17                                 src={album.cover || "/favicon.png"}
     18                                src={album.cover ? `${baseURL}/${album.cover}` : "/favicon.png"}
    1819                                alt={album.title}
    1920                                className="w-12 h-12 rounded object-cover"
    … …  
    2526                                <p className="text-white font-medium truncate">{album.title}</p>
    2627                                <p className="text-sm text-gray-400 truncate">
    27                                         Album • {album.releasedBy} • {album.songs?.length ?? 0} songs
     28                                        Album • {album.releasedBy}
    2829                                </p>
    2930                        </div>

  • frontend/src/components/userProfile/ArtistView.tsx

    rd85e8e3 rf5bc95e  
    33import { useNavigate } from "react-router-dom";
    44import { toast } from "react-toastify";
    5 import axiosInstance from "../../api/axiosInstance";
     5import axiosInstance, { baseURL } from "../../api/axiosInstance";
    66import type { ArtistContribution } from "../../utils/types";
    77import SongItem from "../SongItem";
    … …  
    6565                                                                <div className="relative aspect-square rounded-lg mb-3 overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 bg-[#181818]">
    6666                                                                        <img
    67                                                                                 src={album.cover || "/favicon.png"}
     67                                                                                src={
     68                                                                                        album.cover ? `${baseURL}/${album.cover}` : "/favicon.png"
     69                                                                                }
    6870                                                                                alt={album.title}
    6971                                                                                className="w-full h-full object-cover"

  • frontend/src/components/userProfile/ListenerView.tsx

    rd85e8e3 rf5bc95e  
    33import { useNavigate } from "react-router-dom";
    44import { toast } from "react-toastify";
    5 import axiosInstance from "../../api/axiosInstance";
     5import axiosInstance, { baseURL } from "../../api/axiosInstance";
    66import type { MusicalEntity, Playlist } from "../../utils/types";
    77import SongItem from "../SongItem";
    … …  
    9494                                                                <div className="relative aspect-square rounded-lg overflow-hidden bg-[#181818] mb-3 shadow-md group-hover:shadow-xl transition-all">
    9595                                                                        <img
    96                                                                                 src={playlist.cover || "/favicon.png"}
     96                                                                                src={
     97                                                                                        playlist.cover
     98                                                                                                ? `${baseURL}/${playlist.cover}`
     99                                                                                                : "/favicon.png"
     100                                                                                }
    97101                                                                                alt={playlist.name}
    98102                                                                                className="w-full h-full object-cover"
    … …  
    147151                                                                <div className="relative aspect-square rounded-lg overflow-hidden bg-[#181818] mb-3 shadow-md group-hover:shadow-xl transition-all">
    148152                                                                        <img
    149                                                                                 src={playlist.cover || "/favicon.png"}
     153                                                                                src={
     154                                                                                        playlist.cover
     155                                                                                                ? `${baseURL}/${playlist.cover}`
     156                                                                                                : "/favicon.png"
     157                                                                                }
    150158                                                                                alt={playlist.name}
    151159                                                                                className="w-full h-full object-cover"
    … …  
    194202                                                                        id: song.id,
    195203                                                                        title: song.title,
    196                                                                         cover: song.cover,
     204                                                                        cover: song.cover
     205                                                                                ? `${baseURL}/${song.cover}`
     206                                                                                : "/favicon.png",
    197207                                                                        genre: song.genre,
    198208                                                                        link: (song as any).link,
    … …  
    227237                                                                <div className="relative aspect-square rounded-lg overflow-hidden bg-[#181818] mb-3 shadow-md group-hover:shadow-xl transition-all">
    228238                                                                        <img
    229                                                                                 src={album.cover || "/favicon.png"}
     239                                                                                src={
     240                                                                                        album.cover ? `${baseURL}/${album.cover}` : "/favicon.png"
     241                                                                                }
    230242                                                                                alt={album.title}
    231243                                                                                className="w-full h-full object-cover"

  • frontend/src/pages/LandingPage.tsx

    rd85e8e3 rf5bc95e  
    11import { useEffect, useRef, useState } from "react";
    22import { useNavigate } from "react-router-dom";
    3 import axiosInstance from "../api/axiosInstance";
     3import axiosInstance, { baseURL } from "../api/axiosInstance";
    44import AlbumResult from "../components/search/AlbumResult";
    55import SongResult from "../components/search/SongResult";
    … …  
    337337                                                                                                <div className="relative w-full pt-[100%] overflow-hidden bg-[#181818]">
    338338                                                                                                        <img
    339                                                                                                                 src={song.cover || "/favicon.png"}
     339                                                                                                                src={
     340                                                                                                                        song.cover
     341                                                                                                                                ? `${baseURL}/${song.cover}`
     342                                                                                                                                : "/favicon.png"
     343                                                                                                                }
    340344                                                                                                                alt={song.title}
    341345                                                                                                                className="absolute top-0 left-0 w-full h-full object-cover"

  • frontend/src/pages/MusicalCollection.tsx

    rd85e8e3 rf5bc95e  
    11import { useEffect, useState } from "react";
    22import { Link, useParams } from "react-router-dom";
    3 import axiosInstance from "../api/axiosInstance";
     3import axiosInstance, { baseURL } from "../api/axiosInstance";
    44import SongItem from "../components/SongItem";
    55import { handleError } from "../utils/error";
    … …  
    161161                                                <div className="relative w-full pt-[100%] rounded-xl overflow-hidden shadow-2xl bg-[#181818]">
    162162                                                        <img
    163                                                                 src={collection.cover || "/favicon.png"}
     163                                                                src={
     164                                                                        collection.cover
     165                                                                                ? `${baseURL}/${collection.cover}`
     166                                                                                : "/favicon.png"
     167                                                                }
    164168                                                                alt={collection.title}
    165169                                                                className="absolute inset-0 w-full h-full object-cover"

  • frontend/src/pages/SongDetail.tsx

    rd85e8e3 rf5bc95e  
    22import { Link, useParams } from "react-router-dom";
    33import { toast } from "react-toastify";
    4 import axiosInstance from "../api/axiosInstance";
     4import axiosInstance, { baseURL } from "../api/axiosInstance";
    55import { useAuth } from "../context/authContext";
    66import { usePlayer } from "../context/playerContext";
    … …  
    216216                                                <div className="relative w-full pt-[100%] rounded-xl overflow-hidden shadow-2xl bg-[#181818]">
    217217                                                        <img
    218                                                                 src={song.cover || "/favicon.png"}
     218                                                                src={song.cover ? `${baseURL}/${song.cover}` : "/favicon.png"}
    219219                                                                alt={song.title}
    220220                                                                className="absolute inset-0 w-full h-full object-cover"
Note: See TracChangeset for help on using the changeset viewer.