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
This commit is contained in:
tigeren 2025-09-21 11:41:15 +00:00
parent 74980b5059
commit dd08765ab9
1 changed files with 24 additions and 49 deletions

View File

@ -173,35 +173,7 @@ export default function ArtPlayerWrapper({
],
// Custom layer for bookmark and rating controls
layers: showBookmarks || showRatings ? [
{
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();
}
}
}
] : [],
layers: [],
// 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) {
if (onUnbookmark) {
onUnbookmark(video.id);
setLocalIsBookmarked(prev => {
const newBookmarked = !prev;
if (newBookmarked) {
if (onBookmark) {
onBookmark(video.id);
}
setLocalBookmarkCount(prevCount => prevCount + 1);
} else {
if (onUnbookmark) {
onUnbookmark(video.id);
}
setLocalBookmarkCount(prevCount => Math.max(0, prevCount - 1));
}
setLocalIsBookmarked(false);
setLocalBookmarkCount(prev => Math.max(0, prev - 1));
} else {
if (onBookmark) {
onBookmark(video.id);
}
setLocalIsBookmarked(true);
setLocalBookmarkCount(prev => prev + 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);
const newRating = currentRating >= 5 ? 1 : currentRating + 1;
onRate(video.id, newRating);
setLocalAvgRating(newRating);
}, [video.id, localAvgRating, onRate]);
setLocalAvgRating(prev => {
const currentRating = Math.round(prev);
const newRating = currentRating >= 5 ? 1 : currentRating + 1;
onRate(video.id, newRating);
return newRating;
});
}, [video.id, onRate]);
// Handle individual star click for rating
const handleStarClick = useCallback((rating: number) => {