Changes in frontend/src/components/SongItem.tsx [d1ee039:615dcee]

File:

• frontend/src/components/SongItem.tsx (modified) (5 diffs)

frontend/src/components/SongItem.tsx

@@ -1 @@
-import { useRef, useState } from "react";
+import { use, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { baseURL } from "../api/axiosInstance";
@@ -5 +5 @@
 import { toEmbedUrl } from "../utils/utils";
 import PlaylistDropdown from "./playlist/PlaylistDropdown";
+import { useAuth } from "../context/authContext";
 
 export interface SongItemData {
@@ -50 +51 @@
   const navigate = useNavigate();
   const { play, currentSong } = usePlayer();
+  const { user } = useAuth();
   const [internalOpen, setInternalOpen] = useState(false);
   const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
@@ -165 +167 @@
 
       {/* Like button */}
-      {onLikeToggle && (
+      {user && onLikeToggle && (
         <button
           onClick={(e) => {
@@ -187 +189 @@
 
       {/* Three-dot menu */}
-      <div className="relative">
-        <button
-          ref={buttonRef}
-          onClick={(e) => {
-            e.stopPropagation();
-            if (playlistOpen) {
-              setPlaylistOpen(false);
-            } else {
-              if (buttonRef.current) {
-                const rect = buttonRef.current.getBoundingClientRect();
-                const spaceBelow = window.innerHeight - rect.bottom;
-                const dropdownHeight = 260;
-
-                if (spaceBelow < dropdownHeight) {
-                  setDropdownDirection("above");
-                  setDropdownPosition({
-                    top: rect.top - 8,
-                    left: rect.right - 224,
-                  });
-                } else {
-                  setDropdownDirection("below");
-                  setDropdownPosition({
-                    top: rect.bottom + 8,
-                    left: rect.right - 224,
-                  });
+      {user && (
+        <div className="relative">
+          <button
+            ref={buttonRef}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (playlistOpen) {
+                setPlaylistOpen(false);
+              } else {
+                if (buttonRef.current) {
+                  const rect = buttonRef.current.getBoundingClientRect();
+                  const spaceBelow = window.innerHeight - rect.bottom;
+                  const dropdownHeight = 260;
+
+                  if (spaceBelow < dropdownHeight) {
+                    setDropdownDirection("above");
+                    setDropdownPosition({
+                      top: rect.top - 8,
+                      left: rect.right - 224,
+                    });
+                  } else {
+                    setDropdownDirection("below");
+                    setDropdownPosition({
+                      top: rect.bottom + 8,
+                      left: rect.right - 224,
+                    });
+                  }
                 }
+                setPlaylistOpen(true);
               }
-              setPlaylistOpen(true);
-            }
-          }}
-          className="p-2 hover:bg-white/10 rounded-full transition-colors cursor-pointer text-gray-400 hover:text-white"
-          aria-label="More options"
-        >
-          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-            <circle cx="12" cy="5" r="1.5" />
-            <circle cx="12" cy="12" r="1.5" />
-            <circle cx="12" cy="19" r="1.5" />
-          </svg>
-        </button>
-
-        <PlaylistDropdown
-          songId={song.id}
-          isOpen={playlistOpen}
-          onClose={() => setPlaylistOpen(false)}
-          position={dropdownPosition}
-          usePortal={true}
-          direction={dropdownDirection}
-        />
-      </div>
+            }}
+            className="p-2 hover:bg-white/10 rounded-full transition-colors cursor-pointer text-gray-400 hover:text-white"
+            aria-label="More options"
+          >
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+              <circle cx="12" cy="5" r="1.5" />
+              <circle cx="12" cy="12" r="1.5" />
+              <circle cx="12" cy="19" r="1.5" />
+            </svg>
+          </button>
+
+          <PlaylistDropdown
+            songId={song.id}
+            isOpen={playlistOpen}
+            onClose={() => setPlaylistOpen(false)}
+            position={dropdownPosition}
+            usePortal={true}
+            direction={dropdownDirection}
+          />
+        </div>
+      )}
+
+      {/* Three-dot menu */}
     </div>
   );