refactor(player): remove bookmark and rating UI layers and optimize handlers

- Remove custom bookmark and rating control layers from player UI
- Refactor bookmark toggle logic to update state functionally
- Simplify rating click handler to use functional state update
- Adjust effect dependencies to exclude local bookmark and rating states
- Improve code clarity and maintainability for bookmark and rating features

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,41 +360,44 @@ 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) => {