Changeset d2af1a6


Ignore:
Timestamp:
02/01/26 17:29:49 (5 months ago)
Author:
Dimitar Arsov <dimitararsov04@…>
Branches:
main
Children:
0792d02
Parents:
2730163
Message:

add song/album to favourites

Files:
4 added
17 edited

Legend:

Unmodified
Added
Removed

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/GlobalExceptionHandler.java

    r2730163 rd2af1a6  
    33import java.util.Map;
    44
    5 import com.ukim.finki.develop.finkwave.exceptions.AlbumNotFoundException;
    6 import com.ukim.finki.develop.finkwave.exceptions.FollowException;
    7 import com.ukim.finki.develop.finkwave.exceptions.UserNotFoundException;
     5import com.ukim.finki.develop.finkwave.exceptions.*;
    86import org.slf4j.Logger;
    97import org.slf4j.LoggerFactory;
    … …  
    1513import org.springframework.web.multipart.MaxUploadSizeExceededException;
    1614import org.springframework.web.server.ResponseStatusException;
    17 
    18 import com.ukim.finki.develop.finkwave.exceptions.AuthException;
    1915
    2016@RestControllerAdvice
    … …  
    3935    public ResponseEntity<Map<String, String>> handleUserNotFound(UserNotFoundException ex) {
    4036        return ResponseEntity
    41                 .status(HttpStatus.BAD_REQUEST)
     37                .status(HttpStatus.NOT_FOUND)
    4238                .body(Map.of("error", ex.getMessage()));
    4339    }
    … …  
    5349    public ResponseEntity<Map<String, String>> handleAlbumNotFound(AlbumNotFoundException ex) {
    5450        return ResponseEntity
    55                 .status(HttpStatus.BAD_REQUEST)
     51                .status(HttpStatus.NOT_FOUND)
     52                .body(Map.of("error", ex.getMessage()));
     53    }
     54
     55    @ExceptionHandler(MusicalEntityNotFoundException.class)
     56    public ResponseEntity<Map<String, String>> handleMusicalEntityNotFound(MusicalEntityNotFoundException ex) {
     57        return ResponseEntity
     58                .status(HttpStatus.NOT_FOUND)
    5659                .body(Map.of("error", ex.getMessage()));
    5760    }

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/NonAdminUserController.java

    r2730163 rd2af1a6  
    11package com.ukim.finki.develop.finkwave.controller;
    22
     3import com.ukim.finki.develop.finkwave.model.dto.FollowStatusDto;
    34import com.ukim.finki.develop.finkwave.model.dto.NonAdminUserDto;
    45import com.ukim.finki.develop.finkwave.service.FollowService;
    … …  
    4647
    4748    @PostMapping("/{id}/follow")
    48     public HttpEntity<NonAdminUserDto>followUser(@PathVariable Long id){
    49         followService.toggleFollow(id);
     49    public HttpEntity<FollowStatusDto>followUser(@PathVariable Long id){
    5050
    51         return ResponseEntity.ok(nonAdminUserService.getById(id));
     51        return ResponseEntity.ok(followService.toggleFollow(id));
    5252    }
    5353

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/Like.java

    r2730163 rd2af1a6  
    33import jakarta.persistence.*;
    44import lombok.Getter;
     5import lombok.NoArgsConstructor;
    56import lombok.Setter;
    67import org.hibernate.annotations.OnDelete;
    … …  
    1011@Setter
    1112@Entity
     13@NoArgsConstructor
    1214@Table(name = "likes", schema = "project")
    1315public class Like {
    … …  
    2729    private MusicalEntity musicalEntity;
    2830
     31    public Like(MusicalEntity musicalEntity, Listener listener) {
     32        this.musicalEntity = musicalEntity;
     33        this.listener = listener;
     34        this.id=new LikeId(listener.getId(),musicalEntity.getId());
     35    }
    2936}

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/LikeId.java

    r2730163 rd2af1a6  
    33import jakarta.persistence.Column;
    44import jakarta.persistence.Embeddable;
     5import lombok.AllArgsConstructor;
    56import lombok.Getter;
     7import lombok.NoArgsConstructor;
    68import lombok.Setter;
    79import org.hibernate.Hibernate;
    … …  
    1315@Setter
    1416@Embeddable
     17@AllArgsConstructor
     18@NoArgsConstructor
    1519public class LikeId implements Serializable {
    1620    private static final long serialVersionUID = -2521356135522333223L;

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/ArtistContributionDto.java

    r2730163 rd2af1a6  
    99@AllArgsConstructor
    1010public class ArtistContributionDto {
    11     private Long musicalEntityId;
     11    private Long id;
    1212    private String title;
    1313    private String genre;

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/PlaylistDto.java

    r2730163 rd2af1a6  
    1515    private String cover;
    1616    private String creatorName;
    17 
    1817    private List<MusicalEntityDto>songsInPlaylist;
     18    private Boolean isSavedByCurrentUser;
    1919
    2020}

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/LikeRepository.java

    r2730163 rd2af1a6  
    1515@Repository
    1616public interface LikeRepository extends JpaRepository<Like, LikeId> {
    17     @Query("SELECT NEW com.ukim.finki.develop.finkwave.model.dto.MusicalEntityDto(l.musicalEntity.id, " +
    18             "l.musicalEntity.title," +
    19             "l.musicalEntity.genre, " +
    20            "CASE WHEN s.id IS NOT NULL THEN 'SONG' " +
    21            "WHEN a.id IS NOT NULL THEN 'ALBUM' " +
    22            "ELSE 'UNKNOWN' END," +
    23             "u.fullName," +
    24             "true)" +
    25            "FROM Like l " +
    26            "LEFT JOIN Song s ON s.musicalEntities.id = l.musicalEntity.id " +
    27            "LEFT JOIN Album a ON a.musicalEntities.id = l.musicalEntity.id " +
    28             "LEFT JOIN User u ON u.id=l.musicalEntity.releasedBy.id "+
    29            "WHERE l.listener.id = :listenerId")
    30     List<MusicalEntityDto> findLikedEntitiesWithTypeByListenerId(@Param("listenerId") Long listenerId);
     17    @Query("SELECT NEW com.ukim.finki.develop.finkwave.model.dto.MusicalEntityDto(" +
     18            "me.id, " +
     19            "me.title, " +
     20            "me.genre, " +
     21            "CASE WHEN s.id IS NOT NULL THEN 'SONG' " +
     22            "     WHEN a.id IS NOT NULL THEN 'ALBUM' " +
     23            "     ELSE 'UNKNOWN' END, " +
     24            "u.fullName, " +
     25            "(CASE WHEN currentUserLike.id IS NOT NULL THEN true ELSE false END)" +
     26            ") " +
     27            "FROM Like l " +
     28            "JOIN l.musicalEntity me " +
     29            "JOIN me.releasedBy nu " +
     30            "JOIN nu.nonAdminUser.user u " +
     31            "LEFT JOIN Song s ON s.musicalEntities.id = me.id " +
     32            "LEFT JOIN Album a ON a.musicalEntities.id = me.id " +
     33            "LEFT JOIN Like currentUserLike ON currentUserLike.musicalEntity.id = me.id " +
     34            "AND currentUserLike.listener.id = :currentUserId " +
     35            "WHERE l.listener.id = :listenerId")
     36    List<MusicalEntityDto> findLikedEntitiesWithTypeByListenerId(@Param("currentUserId")Long currentUserId,@Param("listenerId") Long listenerId);
    3137
    3238

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/SavedPlaylistRepository.java

    r2730163 rd2af1a6  
    77import com.ukim.finki.develop.finkwave.model.SavedPlaylistId;
    88
     9import java.util.List;
     10
    911@Repository
    1012public interface SavedPlaylistRepository extends JpaRepository<SavedPlaylist, SavedPlaylistId> {
     13
     14    List<SavedPlaylist>findAllByListener_Id(Long currentUserId);
    1115}

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/FollowService.java

    r2730163 rd2af1a6  
    66import com.ukim.finki.develop.finkwave.model.FollowId;
    77import com.ukim.finki.develop.finkwave.model.NonAdminUser;
     8import com.ukim.finki.develop.finkwave.model.dto.FollowStatusDto;
    89import com.ukim.finki.develop.finkwave.model.dto.NonAdminUserDto;
    910import com.ukim.finki.develop.finkwave.repository.ArtistRepository;
    … …  
    7576
    7677
    77     public void toggleFollow(Long id){
     78    public FollowStatusDto toggleFollow(Long id){
    7879        Long currentUserId=authService.getCurrentUserID();
     80        boolean isFollowing;
    7981
    8082        if (currentUserId.equals(id)){
    … …  
    8789        if (followRepository.existsById(followId)){
    8890            followRepository.deleteById(followId);
     91            isFollowing=false;
    8992
    9093        }else{
    … …  
    9598
    9699            followRepository.save(new Follow(follower, followee));
     100            isFollowing=true;
    97101
    98102        }
     103        return new FollowStatusDto(
     104                isFollowing,
     105                followRepository.countByFolloweeId(id),
     106                followRepository.countByFollowerId(id));
    99107
    100108    }

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/LikeService.java

    r2730163 rd2af1a6  
    11package com.ukim.finki.develop.finkwave.service;
    22
     3import com.ukim.finki.develop.finkwave.exceptions.MusicalEntityNotFoundException;
     4import com.ukim.finki.develop.finkwave.exceptions.UserNotFoundException;
     5import com.ukim.finki.develop.finkwave.model.Like;
     6import com.ukim.finki.develop.finkwave.model.LikeId;
     7import com.ukim.finki.develop.finkwave.model.Listener;
     8import com.ukim.finki.develop.finkwave.model.MusicalEntity;
     9import com.ukim.finki.develop.finkwave.model.dto.LikeStatusDto;
    310import com.ukim.finki.develop.finkwave.model.dto.MusicalEntityDto;
    4 import com.ukim.finki.develop.finkwave.repository.LikeRepository;
     11import com.ukim.finki.develop.finkwave.repository.*;
    512import lombok.AllArgsConstructor;
    613import org.springframework.stereotype.Service;
    … …  
    1118@AllArgsConstructor
    1219public class LikeService {
     20    private final LikeRepository likeRepository;
     21    private final AuthService authService;
     22    private final MusicalEntityRepository musicalEntityRepository;
     23    private AlbumRepository albumRepository;
     24    private final SongRepository songRepository;
     25    private final ListenerRepository listenerRepository;
    1326
    14     private final LikeRepository likeRepository;
    15     public List<MusicalEntityDto> findLikedEntitiesWithTypeByListenerId(Long listenerId){
    16         return likeRepository.findLikedEntitiesWithTypeByListenerId(listenerId);
     27    public List<MusicalEntityDto> findLikedEntitiesWithTypeByListenerId(Long currentUserId,Long listenerId){
     28        return likeRepository.findLikedEntitiesWithTypeByListenerId(currentUserId,listenerId);
    1729    }
     30
     31    public LikeStatusDto toggleLike(Long entityId){
     32        Long currentUserId=authService.getCurrentUserID();
     33
     34
     35        LikeId likeId=new LikeId(currentUserId,entityId);
     36        boolean isLiked;
     37        if (likeRepository.existsById(likeId)){
     38            likeRepository.deleteById(likeId);
     39            isLiked=false;
     40        }
     41        else{
     42            Listener listener=listenerRepository.findById(currentUserId).orElseThrow(
     43                    ()->new UserNotFoundException("Listener not found")
     44            );
     45            MusicalEntity entity=musicalEntityRepository.findById(entityId).orElseThrow(
     46                    ()->new MusicalEntityNotFoundException("Entity not found")
     47            );
     48            likeRepository.save(new Like(entity,listener));
     49            isLiked=true;
     50        }
     51        return new LikeStatusDto(entityId,isLiked,determineType(entityId));
     52
     53    }
     54
     55    private String determineType(Long id){
     56        if (albumRepository.existsById(id)){
     57            return "ALBUM";
     58        }else if(songRepository.existsById(id)){
     59            return "SONG";
     60        }return "UNDEFINED";
     61    }
     62
    1863}

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/ListenerService.java

    r2730163 rd2af1a6  
    1818    private final PlaylistService playlistService;
    1919
    20     public List<MusicalEntityDto> getLikedEntities(Long listenerId) {
    21         return  likeService.findLikedEntitiesWithTypeByListenerId(listenerId);
     20    public List<MusicalEntityDto> getLikedEntities(Long currentUserId,Long listenerId) {
     21        return  likeService.findLikedEntitiesWithTypeByListenerId(currentUserId,listenerId);
    2222
    2323

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/NonAdminUserService.java

    r2730163 rd2af1a6  
    1010import org.springframework.transaction.annotation.Transactional;
    1111import java.util.List;
     12import java.util.Set;
    1213import java.util.stream.Collectors;
    1314
    … …  
    2324    private final FollowRepository followRepository;
    2425    private final AuthService authService;
     26    private final SavedPlaylistRepository savedPlaylistRepository;
    2527
    2628    @Transactional(readOnly = true)
    … …  
    5355     
    5456        if (listenerRepository.existsById(id)) {
    55             dto=getListenerProfile(id, followers, following);
     57            dto=getListenerProfile(id,currentUserId, followers, following);
    5658            dto.setIsFollowedByCurrentUser(isFollowedByCurrentUser);
    5759            return dto;
    … …  
    7173    }
    7274
    73     private NonAdminUserDto getListenerProfile(Long listenerId, Long followers, Long following) {
     75    private NonAdminUserDto getListenerProfile(Long listenerId,Long currentUserId, Long followers, Long following) {
    7476        Listener listener = listenerRepository.findByIdWithUser(listenerId)
    7577            .orElseThrow(()->new UserNotFoundException("Listener not found with id: " + listenerId));
    7678
    7779
    78         List<MusicalEntityDto>musicalEntityDtos=listenerService.getLikedEntities(listenerId);
     80        List<MusicalEntityDto>musicalEntityDtos=listenerService.getLikedEntities(currentUserId,listenerId);
     81        Set<Long> savedIds = savedPlaylistRepository.findAllByListener_Id(currentUserId)
     82                .stream().map(sp -> sp.getPlaylist().getId()).collect(Collectors.toSet());
    7983        List<PlaylistDto>playlists=listenerService.getPlaylistsCreatedByUser(listenerId).stream()
    8084                .map(p->new PlaylistDto(
    … …  
    8387                        p.getCover(),
    8488                        p.getCreatedBy().getNonAdminUser().getUser().getFullName(),
    85                         null
     89                        null,
     90                        savedIds.contains(p.getId())
    8691                )).toList();
    8792

  • finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/PlaylistService.java

    r2730163 rd2af1a6  
    66import com.ukim.finki.develop.finkwave.model.dto.PlaylistDto;
    77import com.ukim.finki.develop.finkwave.repository.PlaylistRepository;
     8import com.ukim.finki.develop.finkwave.repository.SavedPlaylistRepository;
    89import com.ukim.finki.develop.finkwave.repository.SongRepository;
    910import lombok.AllArgsConstructor;
    … …  
    1213
    1314import java.util.List;
     15import java.util.Set;
     16import java.util.stream.Collectors;
    1417
    1518@Service
    … …  
    2023    private final SongRepository songRepository;
    2124    private final AuthService authService;
     25    private final SavedPlaylistRepository savedPlaylistRepository;
    2226
    2327    public List<Playlist>findByCreatorId(Long id){
    … …  
    2933        Playlist playlist = playlistRepository.findById(id).orElseThrow(()-> new PlaylistNotFoundException(id));
    3034        List<MusicalEntityDto>songsInPlaylist=songRepository.findSongsByPlaylistId(id,currentUserId);
     35        Set<Long> savedIds = savedPlaylistRepository.findAllByListener_Id(currentUserId)
     36                .stream().map(sp -> sp.getPlaylist().getId()).collect(Collectors.toSet());
    3137        return new PlaylistDto(
    3238                playlist.getId(),
    … …  
    3440                playlist.getCover(),
    3541                playlist.getCreatedBy().getNonAdminUser().getUser().getFullName(),
    36                 songsInPlaylist
     42                songsInPlaylist,
     43                savedIds.contains(playlist.getId())
     44
    3745        );
    3846    }

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

    r2730163 rd2af1a6  
    11import { useNavigate } from "react-router-dom";
    2 import { Music, Disc3 } from "lucide-react";
     2import { useState } from "react";
     3import { Music, Disc3, Play, Plus } from "lucide-react";
    34import type { ArtistContribution } from "../../utils/types";
     5import axiosInstance from "../../api/axiosInstance";
    46
    57interface ArtistViewProps {
    … …  
    911const ArtistView = ({ contributions }: ArtistViewProps) => {
    1012  const navigate = useNavigate();
    11 
    12   const albums = contributions.filter((c) => c.entityType === "ALBUM");
    13   const songs = contributions.filter((c) => c.entityType === "SONG");
     13  const [items, setItems] = useState(contributions);
     14  const [toast, setToast] = useState<{ message: string; show: boolean }>({
     15    message: "",
     16    show: false,
     17  });
     18
     19  const albums = items.filter((c) => c.entityType === "ALBUM");
     20  const songs = items.filter((c) => c.entityType === "SONG");
    1421
    1522  const getRoleColor = (role: string) => {
    1623    const colors: { [key: string]: string } = {
    17       COMPOSER: "bg-purple-500",
    18       PERFORMER: "bg-blue-500",
    19       PRODUCER: "bg-green-500",
    20       MAIN_VOCAL: "bg-pink-500",
     24      COMPOSER: "bg-purple-100 text-purple-700",
     25      PERFORMER: "bg-blue-100 text-blue-700",
     26      PRODUCER: "bg-green-100 text-green-700",
     27      MAIN_VOCAL: "bg-pink-100 text-pink-700",
    2128    };
    22     return colors[role] || "bg-gray-500";
     29    return colors[role] || "bg-gray-100 text-gray-700";
     30  };
     31
     32  const showToast = (message: string) => {
     33    setToast({ message, show: true });
     34    setTimeout(() => {
     35      setToast({ message: "", show: false });
     36    }, 2000);
     37  };
     38
     39  const handleLike = async (id: number, title: string) => {
     40    try {
     41      const response = await axiosInstance.post(`/musical-entity/${id}/like`);
     42      const data = response.data;
     43
     44      setItems((prevItems) =>
     45        prevItems.map((item) =>
     46          item.id === data.entityId
     47            ? { ...item, isLikedByCurrentUser: data.isLiked }
     48            : item,
     49        ),
     50      );
     51
     52      showToast(
     53        data.isLiked ? `Liked "${title}"` : `Removed ${title} from likes`,
     54      );
     55    } catch (err: any) {
     56      showToast(err.response?.data?.error);
     57    }
    2358  };
    2459
    2560  return (
    2661    <div className="mt-8">
     62      {toast.show && (
     63        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 animate-fade-in-up">
     64          <div className="bg-gray-900 text-white px-6 py-3 rounded-full shadow-lg text-sm font-medium">
     65            {toast.message}
     66          </div>
     67        </div>
     68      )}
     69
    2770      {albums.length > 0 && (
    2871        <div className="mb-12">
    2972          <div className="flex items-center gap-3 mb-6">
    30             <Disc3 className="w-8 h-8 text-purple-600" />
    31             <h2 className="text-3xl font-bold">Albums</h2>
     73            <Disc3 className="w-6 h-6 text-gray-700" />
     74            <h2 className="text-2xl font-bold text-gray-800">Albums</h2>
    3275          </div>
    3376          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
    34             {albums.map((album, index) => (
     77            {albums.map((album) => (
    3578              <div
    36                 key={index}
     79                key={album.id}
    3780                className="group cursor-pointer"
    38                 onClick={() =>
    39                   navigate(`/collection/album/${album.musicalEntityId}`)
    40                 }
     81                onClick={() => navigate(`/collection/album/${album.id}`)}
    4182              >
    42                 <div className="relative aspect-square bg-linear-to-br from-purple-400 via-pink-400 to-blue-400 rounded-lg mb-3 overflow-hidden shadow-lg group-hover:shadow-2xl transition-all duration-300 group-hover:scale-105">
     83                <div className="relative aspect-square bg-gradient-to-br from-blue-400 to-purple-500 rounded-lg mb-3 overflow-hidden shadow-md group-hover:shadow-lg transition-all duration-300">
    4384                  <div className="absolute inset-0 flex items-center justify-center">
    44                     <Disc3 className="w-20 h-20 text-white opacity-40" />
    45                   </div>
    46                   <div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/60 to-transparent p-4">
     85                    <Disc3 className="w-16 h-16 text-white opacity-30" />
     86                  </div>
     87
     88                  <button
     89                    className="absolute top-2 right-2 p-2 bg-white/90 hover:bg-white rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100 cursor-pointer"
     90                    title={album.isLikedByCurrentUser ? "Unlike" : "Like"}
     91                    onClick={(e) => {
     92                      e.stopPropagation();
     93                      handleLike(album.id, album.title);
     94                    }}
     95                  >
     96                    <svg
     97                      className="w-5 h-5"
     98                      fill={album.isLikedByCurrentUser ? "#ef4444" : "none"}
     99                      stroke={
     100                        album.isLikedByCurrentUser ? "#ef4444" : "#6b7280"
     101                      }
     102                      strokeWidth="2"
     103                      viewBox="0 0 24 24"
     104                    >
     105                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
     106                    </svg>
     107                  </button>
     108
     109                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
    47110                    <span
    48                       className={`text-xs px-2 py-1 rounded-full text-white ${getRoleColor(album.role)}`}
     111                      className={`text-xs px-2 py-1 rounded-full font-medium ${getRoleColor(album.role)}`}
    49112                    >
    50113                      {album.role.replace("_", " ")}
    … …  
    52115                  </div>
    53116                </div>
    54                 <h3 className="font-semibold text-base line-clamp-2 group-hover:text-blue-600 transition-colors">
     117                <h3 className="font-semibold text-sm line-clamp-2 text-gray-900 group-hover:text-blue-600 transition-colors">
    55118                  {album.title}
    56119                </h3>
    … …  
    64127        <div className="mb-12">
    65128          <div className="flex items-center gap-3 mb-6">
    66             <Music className="w-8 h-8 text-blue-600" />
    67             <h2 className="text-3xl font-bold">Songs</h2>
     129            <Music className="w-6 h-6 text-gray-700" />
     130            <h2 className="text-2xl font-bold text-gray-800">Songs</h2>
    68131          </div>
    69132          <div className="space-y-2">
    70             {songs.map((song, index) => (
     133            {songs.map((song) => (
    71134              <div
    72                 key={index}
    73                 className="group flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50 transition-all cursor-pointer border border-transparent hover:border-gray-200"
    74                 onClick={() =>
    75                   navigate(`/musical-entity/${song.musicalEntityId}`)
    76                 }
     135                key={song.id}
     136                className="group relative flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 transition-all cursor-pointer"
     137                onClick={() => navigate(`/musical-entity/${song.id}`)}
    77138              >
    78                 <div className="shrink-0 w-14 h-14 bg-linear-to-br from-blue-400 to-cyan-400 rounded flex items-center justify-center group-hover:scale-110 transition-transform shadow-md">
    79                   <Music className="w-7 h-7 text-white" />
    80                 </div>
     139                <div className="relative shrink-0">
     140                  <div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 rounded flex items-center justify-center shadow-sm">
     141                    <Music className="w-6 h-6 text-white" />
     142                  </div>
     143                  <button
     144                    className="absolute inset-0 bg-black/60 rounded flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200"
     145                    aria-label="Play song"
     146                  >
     147                    <Play className="w-6 h-6 text-white fill-white" />
     148                  </button>
     149                </div>
     150
    81151                <div className="flex-1 min-w-0">
    82                   <h3 className="font-semibold text-lg group-hover:text-blue-600 transition-colors truncate">
     152                  <h3 className="font-semibold text-base text-gray-900 group-hover:text-blue-600 transition-colors truncate">
    83153                    {song.title}
    84154                  </h3>
    85155                  <div className="flex items-center gap-2 mt-1">
    86                     {song.genre}
    87                   </div>
    88                 </div>
     156                    <span className="text-sm text-gray-600">{song.genre}</span>
     157                  </div>
     158                </div>
     159
    89160                <span
    90                   className={`px-4 py-2 rounded-full text-white text-sm font-medium ${getRoleColor(song.role)} shadow-md`}
     161                  className={`px-3 py-1 rounded-full text-sm font-medium ${getRoleColor(song.role)}`}
    91162                >
    92163                  {song.role.replace("_", " ")}
    93164                </span>
     165
     166                <div className="flex items-center gap-2">
     167                  <button
     168                    className="p-2 hover:bg-gray-200 rounded-full transition-colors duration-200 cursor-pointer"
     169                    title="Add to playlist"
     170                  >
     171                    <Plus className="w-5 h-5 text-gray-600" />
     172                  </button>
     173
     174                  <button
     175                    className="p-2 hover:bg-gray-200 rounded-full transition-colors duration-200 cursor-pointer"
     176                    title={song.isLikedByCurrentUser ? "Unlike" : "Like"}
     177                    onClick={(e) => {
     178                      e.stopPropagation();
     179                      handleLike(song.id, song.title);
     180                    }}
     181                  >
     182                    <svg
     183                      className="w-5 h-5"
     184                      fill={song.isLikedByCurrentUser ? "#ef4444" : "none"}
     185                      stroke={song.isLikedByCurrentUser ? "#ef4444" : "#6b7280"}
     186                      strokeWidth="2"
     187                      viewBox="0 0 24 24"
     188                    >
     189                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
     190                    </svg>
     191                  </button>
     192                </div>
    94193              </div>
    95194            ))}
    … …  
    100199      {contributions.length === 0 && (
    101200        <div className="flex flex-col items-center justify-center py-16 text-gray-400">
    102           <Music className="w-24 h-24 mb-4 opacity-20" />
    103           <p className="text-xl font-medium">No contributions yet</p>
     201          <Music className="w-20 h-20 mb-4 opacity-20" />
     202          <p className="text-lg font-medium">No contributions yet</p>
    104203          <p className="text-sm mt-2">Start creating music to see it here</p>
    105204        </div>

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

    r2730163 rd2af1a6  
    11import { useNavigate } from "react-router-dom";
    2 import { Heart, ListMusic, Music, Album } from "lucide-react";
     2import { Heart, ListMusic, Music, Album, Bookmark } from "lucide-react";
    33import type { Playlist, MusicalEntity } from "../../utils/types";
    4 
     4import axiosInstance from "../../api/axiosInstance";
     5import { useState } from "react";
    56interface ListenerViewProps {
    67  likedEntities: MusicalEntity[] | [];
    … …  
    1011const ListenerView = ({ likedEntities, playlists }: ListenerViewProps) => {
    1112  const navigate = useNavigate();
    12 
    13   const likedSongs = likedEntities?.filter((e) => e.type === "SONG");
    14   const likedAlbums = likedEntities?.filter((e) => e.type === "ALBUM");
     13  const [items, setItems] = useState(likedEntities);
     14  const [toast, setToast] = useState<{ message: string; show: boolean }>({
     15    message: "",
     16    show: false,
     17  });
     18
     19  const showToast = (message: string) => {
     20    setToast({ message, show: true });
     21    setTimeout(() => {
     22      setToast({ message: "", show: false });
     23    }, 2000);
     24  };
     25
     26  const likedSongs = items.filter((e) => e.type === "SONG");
     27  const likedAlbums = items.filter((e) => e.type === "ALBUM");
     28
     29  const handleSavePlaylist = (e: React.MouseEvent, playlistId: number) => {
     30    e.stopPropagation();
     31
     32    console.log("Save playlist:", playlistId);
     33  };
     34
     35  const handleLike = async (id: number, title: string) => {
     36    try {
     37      const response = await axiosInstance.post(`/musical-entity/${id}/like`);
     38      const data = response.data;
     39
     40      setItems((prevItems) =>
     41        prevItems.map((item) =>
     42          item.id === data.entityId
     43            ? { ...item, isLikedByCurrentUser: data.isLiked }
     44            : item,
     45        ),
     46      );
     47
     48      showToast(
     49        data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`,
     50      );
     51    } catch (err: any) {
     52      showToast(err.response?.data?.error);
     53    }
     54  };
    1555
    1656  return (
    1757    <div className="mt-8 space-y-12">
     58      {toast.show && (
     59        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 animate-fade-in-up">
     60          <div className="bg-gray-900 text-white px-6 py-3 rounded-full shadow-lg text-sm font-medium">
     61            {toast.message}
     62          </div>
     63        </div>
     64      )}
    1865      {playlists && playlists.length > 0 && (
    1966        <section>
    20           <div className="flex items-center gap-2 mb-6 pb-2 border-b-2 border-gray-200">
     67          <div className="flex items-center gap-3 mb-6">
    2168            <ListMusic className="w-6 h-6 text-gray-700" />
    2269            <h3 className="text-2xl font-bold text-gray-800">
    2370              Created Playlists
    2471            </h3>
    25             <span className="text-sm text-gray-400 ml-1">
    26               ({playlists.length})
    27             </span>
    28           </div>
    29 
    30           <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
     72            <span className="text-sm text-gray-500">({playlists.length})</span>
     73          </div>
     74
     75          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
    3176            {playlists.map((playlist) => (
    3277              <div
    … …  
    3580                onClick={() => navigate(`/collection/playlist/${playlist.id}`)}
    3681              >
    37                 <div className="aspect-square rounded-md overflow-hidden bg-gray-100 mb-2 relative shadow-sm group-hover:shadow-lg transition-all">
     82                <div className="relative aspect-square rounded-lg overflow-hidden bg-gray-100 mb-3 shadow-md group-hover:shadow-lg transition-all">
    3883                  {playlist.cover ? (
    3984                    <img
    4085                      src={playlist.cover}
    4186                      alt={playlist.name}
    42                       className="w-full h-full object-cover group-hover:opacity-90 transition-opacity"
     87                      className="w-full h-full object-cover"
    4388                    />
    4489                  ) : (
    45                     <div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
    46                       <ListMusic className="w-10 h-10 text-gray-400" />
     90                    <div className="w-full h-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
     91                      <ListMusic className="w-16 h-16 text-white opacity-30" />
    4792                    </div>
    4893                  )}
    49                 </div>
    50                 <p className="text-sm font-medium text-gray-800 truncate group-hover:text-blue-600 transition-colors">
     94
     95                  {/* Save button overlay */}
     96                  <button
     97                    onClick={(e) => handleSavePlaylist(e, playlist.id)}
     98                    className="absolute top-2 right-2 p-2 bg-white/90 hover:bg-white rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100"
     99                    title={playlist.isSavedByCurrentUser ? "Unsave" : "Save"}
     100                  >
     101                    <Bookmark
     102                      className={`w-5 h-5 ${
     103                        playlist.isSavedByCurrentUser
     104                          ? "fill-blue-600 text-blue-600"
     105                          : "text-gray-600"
     106                      }`}
     107                    />
     108                  </button>
     109                </div>
     110                <p className="text-sm font-semibold text-gray-900 truncate group-hover:text-blue-600 transition-colors">
    51111                  {playlist.name}
     112                </p>
     113                <p className="text-xs text-gray-500 truncate">
     114                  {playlist.creatorName}
    52115                </p>
    53116              </div>
    … …  
    59122      {likedSongs && likedSongs.length > 0 && (
    60123        <section>
    61           <div className="flex items-center gap-2 mb-6 pb-2 border-b-2 border-gray-200">
     124          <div className="flex items-center gap-3 mb-6">
    62125            <Heart className="w-6 h-6 text-red-500 fill-red-500" />
    63126            <h3 className="text-2xl font-bold text-gray-800">Liked Songs</h3>
    64             <span className="text-sm text-gray-400 ml-1">
     127            <span className="text-sm text-gray-500">
    65128              ({likedSongs?.length})
    66129            </span>
    67130          </div>
    68131
    69           <div className="space-y-1">
     132          <div className="space-y-2">
    70133            {likedSongs.map((song, index) => (
    71134              <div
    72135                key={song.id}
    73                 className="flex items-center gap-4 p-3 rounded hover:bg-gray-50 cursor-pointer group transition-colors"
     136                className="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 cursor-pointer group transition-colors"
    74137                onClick={() => navigate(`/musical-entity/${song.id}`)}
    75138              >
    76                 <span className="text-sm text-gray-400 w-8 text-right font-medium">
     139                <span className="text-gray-500 font-medium w-8 text-center">
    77140                  {index + 1}
    78141                </span>
    79                 <div className="w-12 h-12 rounded bg-gradient-to-br from-red-100 to-pink-100 flex items-center justify-center flex-shrink-0">
    80                   <Music className="w-6 h-6 text-red-600" />
     142                <div className="w-12 h-12 rounded bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center flex-shrink-0 shadow-sm">
     143                  <Music className="w-6 h-6 text-white" />
    81144                </div>
    82145                <div className="flex-1 min-w-0">
    83                   <p className="font-medium text-gray-800 truncate group-hover:text-blue-600 transition-colors">
     146                  <p className="font-semibold text-gray-900 truncate group-hover:text-blue-600 transition-colors">
    84147                    {song.title}
    85148                  </p>
    86                   <p className="text-xs text-gray-500">{song.genre}</p>
    87                 </div>
     149                  <p className="text-sm text-gray-600 truncate">
     150                    {song.releasedBy}
     151                  </p>
     152                </div>
     153                <span className="text-sm text-gray-600 px-3 py-1 bg-gray-100 rounded-full">
     154                  {song.genre}
     155                </span>
     156
     157                <button
     158                  onClick={(e) => {
     159                    e.stopPropagation();
     160                    handleLike(song.id, song.title);
     161                  }}
     162                  className="p-2 hover:bg-gray-200 rounded-full transition-colors duration-200 cursor-pointer"
     163                  title={song.isLikedByCurrentUser ? "Unlike" : "Like"}
     164                >
     165                  <svg
     166                    className="w-5 h-5"
     167                    fill={song.isLikedByCurrentUser ? "#ef4444" : "none"}
     168                    stroke={song.isLikedByCurrentUser ? "#ef4444" : "#6b7280"}
     169                    strokeWidth="2"
     170                    viewBox="0 0 24 24"
     171                  >
     172                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
     173                  </svg>
     174                </button>
    88175              </div>
    89176            ))}
    … …  
    94181      {likedAlbums && likedAlbums.length > 0 && (
    95182        <section>
    96           <div className="flex items-center gap-2 mb-6 pb-2 border-b-2 border-gray-200">
    97             <Album className="w-6 h-6 text-blue-600" />
     183          <div className="flex items-center gap-3 mb-6">
     184            <Album className="w-6 h-6 text-gray-700" />
    98185            <h3 className="text-2xl font-bold text-gray-800">Liked Albums</h3>
    99             <span className="text-sm text-gray-400 ml-1">
     186            <span className="text-sm text-gray-500">
    100187              ({likedAlbums.length})
    101188            </span>
    102189          </div>
    103190
    104           <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5">
     191          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
    105192            {likedAlbums.map((album) => (
    106193              <div
    … …  
    109196                onClick={() => navigate(`/collection/album/${album.id}`)}
    110197              >
    111                 <div className="aspect-square rounded-lg overflow-hidden bg-gradient-to-br from-blue-100 to-indigo-100 mb-3 flex items-center justify-center shadow-sm group-hover:shadow-md transition-all">
    112                   <Album className="w-16 h-16 text-blue-600 opacity-60" />
    113                 </div>
    114                 <p className="font-medium text-sm text-gray-800 truncate group-hover:text-blue-600 transition-colors">
     198                <div className="relative aspect-square rounded-lg overflow-hidden bg-gradient-to-br from-blue-400 to-purple-500 mb-3 flex items-center justify-center shadow-md group-hover:shadow-lg transition-all">
     199                  <Album className="w-16 h-16 text-white opacity-30" />
     200
     201                  <button
     202                    onClick={(e) => {
     203                      e.stopPropagation();
     204                      handleLike(album.id, album.title);
     205                    }}
     206                    className="absolute top-2 right-2 p-2 bg-white/90 hover:bg-white rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100 cursor-pointer"
     207                    title={album.isLikedByCurrentUser ? "Unlike" : "Like"}
     208                  >
     209                    <svg
     210                      className="w-5 h-5"
     211                      fill={album.isLikedByCurrentUser ? "#ef4444" : "none"}
     212                      stroke={
     213                        album.isLikedByCurrentUser ? "#ef4444" : "#6b7280"
     214                      }
     215                      strokeWidth="2"
     216                      viewBox="0 0 24 24"
     217                    >
     218                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
     219                    </svg>
     220                  </button>
     221                </div>
     222                <p className="font-semibold text-sm text-gray-900 truncate group-hover:text-blue-600 transition-colors">
    115223                  {album.title}
    116224                </p>
    117                 <p className="text-xs text-gray-500 mt-0.5">{album.genre}</p>
     225                <p className="text-xs text-gray-600 truncate mt-1">
     226                  {album.releasedBy}
     227                </p>
    118228              </div>
    119229            ))}
    … …  
    125235        likedEntities.length === 0 &&
    126236        (!playlists || playlists.length === 0) && (
    127           <div className="flex flex-col items-center justify-center py-16 text-gray-300">
    128             <p className="text-lg font-medium text-gray-400">
    129               Nothing here yet
    130             </p>
    131             <p className="text-sm text-gray-400 mt-1">
     237          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
     238            <Music className="w-20 h-20 mb-4 opacity-20" />
     239            <p className="text-lg font-medium">Nothing here yet</p>
     240            <p className="text-sm mt-2">
    132241              Start exploring music to build your collection
    133242            </p>

  • frontend/src/pages/UserDetail.tsx

    r2730163 rd2af1a6  
    1313} from "../utils/types";
    1414
     15interface FollowStatus {
     16  isFollowing: boolean;
     17  followerCount: number;
     18  followingCount: number;
     19}
     20
    1521interface Artist extends BaseNonAdminUser {
    1622  userType: "ARTIST";
    … …  
    4349    setIsFollowing(true);
    4450    try {
    45       const response = await axiosInstance.post<UserProfile>(
     51      const response = await axiosInstance.post<FollowStatus>(
    4652        `/users/${userId}/follow`,
    4753      );
    48       setUser(response.data);
     54      setUser((prev) => {
     55        if (!prev) return null;
     56        return {
     57          ...prev,
     58          isFollowedByCurrentUser: response.data.isFollowing,
     59          followers: response.data.followerCount,
     60          following: response.data.followingCount,
     61        };
     62      });
    4963    } catch (err: any) {
    5064      setError(handleError(err));
    5165    } finally {
    5266      setIsFollowing(false);
     67    }
     68  };
     69
     70  const handleFollowInModal = async (targetId: number) => {
     71    try {
     72      const response = await axiosInstance.post<FollowStatus>(
     73        `/users/${targetId}/follow`,
     74      );
     75
     76      setModalUsers((prevUsers) =>
     77        prevUsers.map((u) =>
     78          u.id === targetId
     79            ? { ...u, isFollowedByCurrentUser: response.data.isFollowing }
     80            : u,
     81        ),
     82      );
     83
     84      // if (user && user.id === targetId) {
     85      //   setUser((prev) => {
     86      //     if (!prev) return null;
     87      //     return {
     88      //       ...prev,
     89      //       isFollowedByCurrentUser: response.data.isFollowing,
     90      //       followers: response.data.followerCount,
     91      //     };
     92      //   });
     93      // }
     94    } catch (err: any) {
     95      setError(handleError(err));
    5396    }
    5497  };
    … …  
    81124  };
    82125
    83   const handleFollowInModal = async (targetId: number) => {
    84     try {
    85       await axiosInstance.post(`/users/${targetId}/follow`);
    86       setModalUsers((prevUsers) =>
    87         prevUsers.map((u) => {
    88           if (u.id === targetId) {
    89             const isNowFollowing = !u.isFollowedByCurrentUser;
    90             return {
    91               ...u,
    92               isFollowedByCurrentUser: isNowFollowing,
    93             };
    94           }
    95           return u;
    96         }),
    97       );
    98 
    99       // if (user && user.id === targetId) {
    100       //   const response = await axiosInstance.get(`/users/${targetId}`);
    101       //   setUser(response.data);
    102       // }
    103     } catch (err: any) {
    104       setError(handleError(err));
    105     }
    106   };
    107 
    108126  useEffect(() => {
    109127    const fetchUser = async () => {
    … …  
    111129      try {
    112130        const response = await axiosInstance.get(`/users/${userId}`);
     131        console.log(response.data);
    113132        setUser(response.data);
    114133      } catch (err: any) {

  • frontend/src/utils/types.ts

    r2730163 rd2af1a6  
    88
    99export interface ArtistContribution {
    10   musicalEntityId: number;
     10  id: number;
    1111  title: string;
    1212  genre: string;
    … …  
    4040  creatorName: string;
    4141  songsInPlaylist: Song[];
     42  isSavedByCurrentUser: boolean;
    4243}
    4344
Note: See TracChangeset for help on using the changeset viewer.