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:
parent
74980b5059
commit
dd08765ab9
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue