Ignore:
File:
1 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/pages/LandingPage.tsx

    r615dcee rd1ee039  
    1414} from "../utils/types";
    1515import { toEmbedUrl } from "../utils/utils";
    16 import { useAuth } from "../context/authContext";
    1716
    1817const CATEGORIES: { value: SearchCategory; label: string }[] = [
    … …  
    2625  const navigate = useNavigate();
    2726  const { play, currentSong } = usePlayer();
    28   const { user } = useAuth();
    2927  const [songs, setSongs] = useState<Song[]>([]);
    3028  const [loading, setLoading] = useState<boolean>(true);
    3129
     30  // search state
    3231  const [searchInput, setSearchInput] = useState("");
    3332  const [activeQuery, setActiveQuery] = useState("");
    … …  
    3736  const [hasSearched, setHasSearched] = useState(false);
    3837
     38  // playlist dropdown state
    3939  const [openPlaylistDropdown, setOpenPlaylistDropdown] = useState<
    4040    number | null
    … …  
    415415                            {song.releasedBy}
    416416                          </p>
    417                           {user && (
    418                             <div className="flex items-center justify-between mt-4 pt-3 border-t border-white/10">
    419                               {/* Like button */}
     417                          <div className="flex items-center justify-between mt-4 pt-3 border-t border-white/10">
     418                            {/* Like button */}
     419                            <button
     420                              onClick={(e) => {
     421                                e.stopPropagation();
     422                                toggleLike(song.id);
     423                              }}
     424                              className="text-gray-400 hover:text-[#1db954] transition-colors cursor-pointer"
     425                              aria-label={
     426                                song.isLikedByCurrentUser
     427                                  ? "Unlike song"
     428                                  : "Like song"
     429                              }
     430                            >
     431                              {song.isLikedByCurrentUser ? (
     432                                <svg
     433                                  className="w-6 h-6 fill-[#1db954]"
     434                                  viewBox="0 0 24 24"
     435                                >
     436                                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
     437                                </svg>
     438                              ) : (
     439                                <svg
     440                                  className="w-6 h-6"
     441                                  fill="none"
     442                                  stroke="currentColor"
     443                                  viewBox="0 0 24 24"
     444                                >
     445                                  <path
     446                                    strokeLinecap="round"
     447                                    strokeLinejoin="round"
     448                                    strokeWidth={2}
     449                                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
     450                                  />
     451                                </svg>
     452                              )}
     453                            </button>
     454
     455                            {/* Add to playlist button */}
     456                            <div className="relative">
    420457                              <button
    421458                                onClick={(e) => {
    422459                                  e.stopPropagation();
    423                                   toggleLike(song.id);
     460                                  togglePlaylistDropdown(song.id);
    424461                                }}
    425462                                className="text-gray-400 hover:text-[#1db954] transition-colors cursor-pointer"
    426                                 aria-label={
    427                                   song.isLikedByCurrentUser
    428                                     ? "Unlike song"
    429                                     : "Like song"
    430                                 }
     463                                aria-label="Add to playlist"
    431464                              >
    432                                 {song.isLikedByCurrentUser ? (
    433                                   <svg
    434                                     className="w-6 h-6 fill-[#1db954]"
    435                                     viewBox="0 0 24 24"
    436                                   >
    437                                     <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
    438                                   </svg>
    439                                 ) : (
    440                                   <svg
    441                                     className="w-6 h-6"
    442                                     fill="none"
    443                                     stroke="currentColor"
    444                                     viewBox="0 0 24 24"
    445                                   >
    446                                     <path
    447                                       strokeLinecap="round"
    448                                       strokeLinejoin="round"
    449                                       strokeWidth={2}
    450                                       d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
    451                                     />
    452                                   </svg>
    453                                 )}
     465                                <svg
     466                                  className="w-6 h-6"
     467                                  fill="none"
     468                                  stroke="currentColor"
     469                                  viewBox="0 0 24 24"
     470                                >
     471                                  <path
     472                                    strokeLinecap="round"
     473                                    strokeLinejoin="round"
     474                                    strokeWidth={2}
     475                                    d="M12 4v16m8-8H4"
     476                                  />
     477                                </svg>
    454478                              </button>
    455479
    456                               {/* Add to playlist button */}
    457                               <div className="relative">
    458                                 <button
    459                                   onClick={(e) => {
    460                                     e.stopPropagation();
    461                                     togglePlaylistDropdown(song.id);
    462                                   }}
    463                                   className="text-gray-400 hover:text-[#1db954] transition-colors cursor-pointer"
    464                                   aria-label="Add to playlist"
    465                                 >
    466                                   <svg
    467                                     className="w-6 h-6"
    468                                     fill="none"
    469                                     stroke="currentColor"
    470                                     viewBox="0 0 24 24"
    471                                   >
    472                                     <path
    473                                       strokeLinecap="round"
    474                                       strokeLinejoin="round"
    475                                       strokeWidth={2}
    476                                       d="M12 4v16m8-8H4"
    477                                     />
    478                                   </svg>
    479                                 </button>
    480 
    481                                 <PlaylistDropdown
    482                                   songId={song.id}
    483                                   isOpen={openPlaylistDropdown === song.id}
    484                                   onClose={() => setOpenPlaylistDropdown(null)}
    485                                   direction="above"
    486                                 />
    487                               </div>
     480                              <PlaylistDropdown
     481                                songId={song.id}
     482                                isOpen={openPlaylistDropdown === song.id}
     483                                onClose={() => setOpenPlaylistDropdown(null)}
     484                                direction="above"
     485                              />
    488486                            </div>
    489                           )}
     487                          </div>
    490488                        </div>
    491489                      </div>
Note: See TracChangeset for help on using the changeset viewer.