feat(api): add GET endpoints for bookmarks and stars by media ID

- Implement GET /api/bookmarks/[id] to check bookmark existence and return bookmark ID
- Implement GET /api/stars/[id] to check star rating existence and return rating value
- Validate media ID as integer and handle invalid ID with 400 status
- Handle server errors with 500 status and error messages

refactor(api): change rating POST request to include mediaId in body

- Update /api/stars POST request to send mediaId and rating in JSON body
- Adjust client fetch call accordingly from /api/stars/[id] to /api/stars

feat(player): integrate bookmark and rating status checks in video player

- Add state and loading indicators for bookmark and rating status in UnifiedVideoPlayer
- Fetch current bookmark and rating status on video open using new GET API endpoints
- Update local bookmark and rating state on user actions for bookmark add/remove and rating update
- Show loading state until both bookmark and rating statuses are fetched

fix(ui): improve bookmark button tooltip and state handling in ArtPlayerWrapper

- Change bookmark button title dynamically based on bookmark state ('Add bookmark' or 'Remove bookmark')
- Remove redundant bookmark count element in button for cleaner UI

src/app/api/bookmarks/[id]/route.ts

@@ -1,6 +1,30 @@
 import { NextResponse } from 'next/server';
 import { getDatabase } from '@/db';
 
+export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  try {
+    const mediaId = parseInt(id);
+    
+    if (isNaN(mediaId)) {
+      return NextResponse.json({ error: 'Invalid media ID' }, { status: 400 });
+    }
+
+    const db = getDatabase();
+    // Check if bookmark exists
+    const bookmark = db.prepare(`
+      SELECT id FROM bookmarks WHERE media_id = ?
+    `).get(mediaId) as { id: number } | undefined;
+
+    return NextResponse.json({ 
+      isBookmarked: !!bookmark,
+      bookmarkId: bookmark?.id || null 
+    });
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+
 export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   try {

src/app/api/stars/[id]/route.ts

@@ -1,6 +1,30 @@
 import { NextResponse } from 'next/server';
 import { getDatabase } from '@/db';
 
+export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  try {
+    const mediaId = parseInt(id);
+    
+    if (isNaN(mediaId)) {
+      return NextResponse.json({ error: 'Invalid media ID' }, { status: 400 });
+    }
+
+    const db = getDatabase();
+    // Check if rating exists for this media
+    const star = db.prepare(`
+      SELECT rating FROM stars WHERE media_id = ?
+    `).get(mediaId) as { rating: number } | undefined;
+
+    return NextResponse.json({ 
+      hasRating: !!star,
+      rating: star?.rating || 0 
+    });
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+
 export async function DELETE(request: Request, { params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   const db = getDatabase();

src/app/folder-viewer/page.tsx

@@ -215,12 +215,12 @@ const FolderViewerPage = () => {
   // Handle rating operations
   const handleRate = async (mediaId: number, rating: number) => {
     try {
-      const response = await fetch(`/api/stars/${mediaId}`, {
+      const response = await fetch(`/api/stars`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
-        body: JSON.stringify({ rating })
+        body: JSON.stringify({ mediaId, rating })
       });
       
       if (response.ok) {

src/components/artplayer-wrapper.tsx

@@ -173,35 +173,7 @@ export default function ArtPlayerWrapper({
         ],
         
         // Custom layer for bookmark and rating controls
-        layers: showBookmarks || showRatings ? [
+        layers: [],
-          {
-            html: `<div class="artplayer-custom-controls absolute top-4 right-16 flex items-center gap-2 z-15">
-                     ${showBookmarks ? `<div class="artplayer-bookmark-control flex items-center gap-1 px-2 py-1 rounded hover:bg-black/50 transition-colors cursor-pointer text-white bg-black/30">
-                       <svg class="h-4 w-4" fill="${localIsBookmarked ? 'currentColor' : 'none'}" stroke="currentColor" viewBox="0 0 24 24">
-                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
-                       </svg>
-                       <span class="text-xs">${localBookmarkCount}</span>
-                     </div>` : ''}
-                     ${showRatings ? `<div class="artplayer-rating-control flex items-center gap-1 px-2 py-1 rounded hover:bg-black/50 transition-colors cursor-pointer text-white bg-black/30">
-                       <span class="text-xs">★ ${localAvgRating.toFixed(1)}</span>
-                     </div>` : ''}
-                   </div>`,
-            style: {
-              position: 'absolute',
-              top: '16px',
-              right: '64px', // Positioned to the left of close button
-              zIndex: '15'
-            } as any,
-            click: function(this: any, component: any, event: Event) {
-              const target = event.target as HTMLElement;
-              if (target.closest('.artplayer-bookmark-control')) {
-                handleBookmarkToggle();
-              } else if (target.closest('.artplayer-rating-control')) {
-                handleRatingClick();
-              }
-            }
-          }
-        ] : [],
         
         // Custom initialization for HLS
         customType: {
@@ -388,49 +360,55 @@ export default function ArtPlayerWrapper({
       setError(`Failed to initialize player: ${error instanceof Error ? error.message : 'Unknown error'}`);
       setIsLoading(false);
     }
-  }, [useArtPlayer, isOpen, video, onProgress, volume, autoplay, format?.supportLevel, localIsBookmarked, localBookmarkCount, localAvgRating]);
+  }, [useArtPlayer, isOpen, video, onProgress, volume, autoplay, format?.supportLevel]);
 
   // Handle bookmark toggle
   const handleBookmarkToggle = useCallback(async () => {
     if (!video.id) return;
 
     try {
-      if (localIsBookmarked) {
+      setLocalIsBookmarked(prev => {
-        if (onUnbookmark) {
+        const newBookmarked = !prev;
-          onUnbookmark(video.id);
+        if (newBookmarked) {
-        }
-        setLocalIsBookmarked(false);
-        setLocalBookmarkCount(prev => Math.max(0, prev - 1));
-      } else {
           if (onBookmark) {
             onBookmark(video.id);
           }
-        setLocalIsBookmarked(true);
+          setLocalBookmarkCount(prevCount => prevCount + 1);
-        setLocalBookmarkCount(prev => prev + 1);
+        } else {
+          if (onUnbookmark) {
+            onUnbookmark(video.id);
           }
+          setLocalBookmarkCount(prevCount => Math.max(0, prevCount - 1));
+        }
+        return newBookmarked;
+      });
     } catch (error) {
       console.error('Error toggling bookmark:', error);
     }
-  }, [video.id, localIsBookmarked, onBookmark, onUnbookmark]);
+  }, [video.id, onBookmark, onUnbookmark]);
 
   // Handle rating click
   const handleRatingClick = useCallback(() => {
     if (!video.id || !onRate) return;
 
-    const currentRating = Math.round(localAvgRating);
+    setLocalAvgRating(prev => {
+      const currentRating = Math.round(prev);
       const newRating = currentRating >= 5 ? 1 : currentRating + 1;
-    
       onRate(video.id, newRating);
-    setLocalAvgRating(newRating);
+      return newRating;
-  }, [video.id, localAvgRating, onRate]);
+    });
+  }, [video.id, onRate]);
 
   // Handle individual star click for rating
   const handleStarClick = useCallback((rating: number) => {
     if (onRate) {
-      onRate(video.id, rating);
+      const currentRating = Math.round(localAvgRating);
-      setLocalAvgRating(rating);
+      // If clicking the same star as current rating, cancel the rating
+      const newRating = currentRating === rating ? 0 : rating;
+      onRate(video.id, newRating);
+      setLocalAvgRating(newRating);
     }
-  }, [onRate, video.id]);
+  }, [onRate, video.id, localAvgRating]);
 
   // Format time display
   const formatTime = (time: number) => {
@@ -650,10 +628,9 @@ export default function ArtPlayerWrapper({
                             ? 'bg-yellow-500/30 text-yellow-300 hover:bg-yellow-500/40' 
                             : 'bg-white/20 text-white hover:bg-white/30'
                         }`}
-                        title="Toggle bookmark"
+                        title={localIsBookmarked ? 'Remove bookmark' : 'Add bookmark'}
                       >
                         <Bookmark className={`h-4 w-4 ${localIsBookmarked ? 'fill-current' : ''} drop-shadow-md`} />
-                        <span className="text-sm font-medium drop-shadow-md">{localBookmarkCount}</span>
                       </button>
                     )}
                     

src/components/unified-video-player.tsx

@@ -39,6 +39,60 @@ export default function UnifiedVideoPlayer({
 }: UnifiedVideoPlayerProps) {
   const [format, setFormat] = useState<ReturnType<typeof detectVideoFormat> | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [isBookmarked, setIsBookmarked] = useState(false);
+  const [bookmarkCheckLoading, setBookmarkCheckLoading] = useState(true);
+  const [currentRating, setCurrentRating] = useState(0);
+  const [ratingCheckLoading, setRatingCheckLoading] = useState(true);
+
+  // Check current bookmark status and rating when video opens
+  useEffect(() => {
+    if (isOpen && video.id) {
+      checkBookmarkStatus();
+      checkRatingStatus();
+    }
+  }, [isOpen, video.id]);
+
+  const checkBookmarkStatus = async () => {
+    if (!video.id) return;
+    
+    setBookmarkCheckLoading(true);
+    try {
+      const response = await fetch(`/api/bookmarks/${video.id}`);
+      
+      if (response.ok) {
+        const data = await response.json();
+        setIsBookmarked(data.isBookmarked || false);
+      } else {
+        setIsBookmarked(false);
+      }
+    } catch (error) {
+      console.error('Error checking bookmark status:', error);
+      setIsBookmarked(false);
+    } finally {
+      setBookmarkCheckLoading(false);
+    }
+  };
+
+  const checkRatingStatus = async () => {
+    if (!video.id) return;
+    
+    setRatingCheckLoading(true);
+    try {
+      const response = await fetch(`/api/stars/${video.id}`);
+      
+      if (response.ok) {
+        const data = await response.json();
+        setCurrentRating(data.rating || 0);
+      } else {
+        setCurrentRating(0);
+      }
+    } catch (error) {
+      console.error('Error checking rating status:', error);
+      setCurrentRating(0);
+    } finally {
+      setRatingCheckLoading(false);
+    }
+  };
 
   // Detect format on mount
   useEffect(() => {
@@ -80,13 +134,23 @@ export default function UnifiedVideoPlayer({
   const handleBookmarkToggle = useCallback(async (videoId: number) => {
     if (onBookmark) {
       await onBookmark(videoId);
+      setIsBookmarked(true); // Update local state
     }
   }, [onBookmark]);
 
+  // Handle unbookmark
+  const handleUnbookmark = useCallback(async (videoId: number) => {
+    if (onUnbookmark) {
+      await onUnbookmark(videoId);
+      setIsBookmarked(false); // Update local state
+    }
+  }, [onUnbookmark]);
+
   // Handle rating
   const handleRatingUpdate = useCallback(async (videoId: number, rating: number) => {
     if (onRate) {
       await onRate(videoId, rating);
+      setCurrentRating(rating); // Update local state
     }
   }, [onRate]);
 
@@ -100,13 +164,13 @@ export default function UnifiedVideoPlayer({
         onClose={onClose}
         onProgress={handleProgressUpdate}
         onBookmark={handleBookmarkToggle}
-        onUnbookmark={onUnbookmark}
+        onUnbookmark={handleUnbookmark}
         onRate={handleRatingUpdate}
         onError={handleArtPlayerError}
         useArtPlayer={true}
-        isBookmarked={(video.bookmark_count || 0) > 0}
+        isBookmarked={isBookmarked}
         bookmarkCount={video.bookmark_count || 0}
-        avgRating={video.avg_rating || 0}
+        avgRating={currentRating}
         showBookmarks={showBookmarks}
         showRatings={showRatings}
         autoplay={autoplay}
@@ -114,7 +178,7 @@ export default function UnifiedVideoPlayer({
     );
   };
 
-  if (isLoading) {
+  if (isLoading || bookmarkCheckLoading || ratingCheckLoading) {
     return (
       <div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center">
         <div className="text-white text-center">