mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-21 03:33:42 +08:00
feat: Enhance desktop player more menu with fullscreen responsiveness, auto-close on scroll, and updated styling.
This commit is contained in:
kuekhaoyang
@@ -113,73 +113,78 @@ export function DesktopVideoPlayer({
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative aspect-video bg-black rounded-[var(--radius-2xl)] overflow-hidden group"
|
||||
className="relative aspect-video bg-black rounded-[var(--radius-2xl)] group"
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={() => isPlaying && setShowControls(false)}
|
||||
>
|
||||
{/* Video Element */}
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="w-full h-full object-contain"
|
||||
poster={poster}
|
||||
x-webkit-airplay="allow"
|
||||
onPlay={handlePlay}
|
||||
onPause={handlePause}
|
||||
onTimeUpdate={handleTimeUpdateEvent}
|
||||
onLoadedMetadata={handleLoadedMetadata}
|
||||
onError={handleVideoError}
|
||||
onWaiting={() => setIsLoading(true)}
|
||||
onCanPlay={() => setIsLoading(false)}
|
||||
onClick={togglePlay}
|
||||
/>
|
||||
{/* Clipping Wrapper for video and overlays - Restores the 'Liquid Glass' rounded look */}
|
||||
<div className="absolute inset-0 rounded-[var(--radius-2xl)] overflow-hidden pointer-events-none">
|
||||
<div className="absolute inset-0 pointer-events-auto">
|
||||
{/* Video Element */}
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="w-full h-full object-contain"
|
||||
poster={poster}
|
||||
x-webkit-airplay="allow"
|
||||
onPlay={handlePlay}
|
||||
onPause={handlePause}
|
||||
onTimeUpdate={handleTimeUpdateEvent}
|
||||
onLoadedMetadata={handleLoadedMetadata}
|
||||
onError={handleVideoError}
|
||||
onWaiting={() => setIsLoading(true)}
|
||||
onCanPlay={() => setIsLoading(false)}
|
||||
onClick={togglePlay}
|
||||
/>
|
||||
|
||||
<DesktopOverlayWrapper
|
||||
data={data}
|
||||
actions={actions}
|
||||
showControls={data.showControls}
|
||||
onTogglePlay={togglePlay}
|
||||
onSkipForward={logic.skipForward}
|
||||
onSkipBackward={logic.skipBackward}
|
||||
isTransitioningToNextEpisode={isTransitioningToNextEpisode}
|
||||
// More Menu Props
|
||||
showMoreMenu={data.showMoreMenu}
|
||||
isProxied={src.includes('/api/proxy')}
|
||||
onToggleMoreMenu={() => actions.setShowMoreMenu(!data.showMoreMenu)}
|
||||
onMoreMenuMouseEnter={() => {
|
||||
if (refs.moreMenuTimeoutRef.current) {
|
||||
clearTimeout(refs.moreMenuTimeoutRef.current);
|
||||
refs.moreMenuTimeoutRef.current = null;
|
||||
}
|
||||
}}
|
||||
onMoreMenuMouseLeave={() => {
|
||||
if (refs.moreMenuTimeoutRef.current) {
|
||||
clearTimeout(refs.moreMenuTimeoutRef.current);
|
||||
}
|
||||
refs.moreMenuTimeoutRef.current = setTimeout(() => {
|
||||
actions.setShowMoreMenu(false);
|
||||
refs.moreMenuTimeoutRef.current = null;
|
||||
}, 800); // Increased timeout for better stability
|
||||
}}
|
||||
onCopyLink={logic.handleCopyLink}
|
||||
// Speed Menu Props
|
||||
playbackRate={data.playbackRate}
|
||||
showSpeedMenu={data.showSpeedMenu}
|
||||
speeds={[0.5, 0.75, 1, 1.25, 1.5, 2]}
|
||||
onToggleSpeedMenu={() => actions.setShowSpeedMenu(!data.showSpeedMenu)}
|
||||
onSpeedChange={logic.changePlaybackSpeed}
|
||||
onSpeedMenuMouseEnter={logic.clearSpeedMenuTimeout}
|
||||
onSpeedMenuMouseLeave={logic.startSpeedMenuTimeout}
|
||||
// Portal container
|
||||
containerRef={containerRef}
|
||||
/>
|
||||
<DesktopOverlayWrapper
|
||||
data={data}
|
||||
actions={actions}
|
||||
showControls={data.showControls}
|
||||
onTogglePlay={togglePlay}
|
||||
onSkipForward={logic.skipForward}
|
||||
onSkipBackward={logic.skipBackward}
|
||||
isTransitioningToNextEpisode={isTransitioningToNextEpisode}
|
||||
// More Menu Props
|
||||
showMoreMenu={data.showMoreMenu}
|
||||
isProxied={src.includes('/api/proxy')}
|
||||
onToggleMoreMenu={() => actions.setShowMoreMenu(!data.showMoreMenu)}
|
||||
onMoreMenuMouseEnter={() => {
|
||||
if (refs.moreMenuTimeoutRef.current) {
|
||||
clearTimeout(refs.moreMenuTimeoutRef.current);
|
||||
refs.moreMenuTimeoutRef.current = null;
|
||||
}
|
||||
}}
|
||||
onMoreMenuMouseLeave={() => {
|
||||
if (refs.moreMenuTimeoutRef.current) {
|
||||
clearTimeout(refs.moreMenuTimeoutRef.current);
|
||||
}
|
||||
refs.moreMenuTimeoutRef.current = setTimeout(() => {
|
||||
actions.setShowMoreMenu(false);
|
||||
refs.moreMenuTimeoutRef.current = null;
|
||||
}, 800); // Increased timeout for better stability
|
||||
}}
|
||||
onCopyLink={logic.handleCopyLink}
|
||||
// Speed Menu Props
|
||||
playbackRate={data.playbackRate}
|
||||
showSpeedMenu={data.showSpeedMenu}
|
||||
speeds={[0.5, 0.75, 1, 1.25, 1.5, 2]}
|
||||
onToggleSpeedMenu={() => actions.setShowSpeedMenu(!data.showSpeedMenu)}
|
||||
onSpeedChange={logic.changePlaybackSpeed}
|
||||
onSpeedMenuMouseEnter={logic.clearSpeedMenuTimeout}
|
||||
onSpeedMenuMouseLeave={logic.startSpeedMenuTimeout}
|
||||
// Portal container
|
||||
containerRef={containerRef}
|
||||
/>
|
||||
|
||||
<DesktopControlsWrapper
|
||||
src={src}
|
||||
data={data}
|
||||
actions={actions}
|
||||
logic={logic}
|
||||
refs={refs}
|
||||
/>
|
||||
<DesktopControlsWrapper
|
||||
src={src}
|
||||
data={data}
|
||||
actions={actions}
|
||||
logic={logic}
|
||||
refs={refs}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -173,7 +173,7 @@ export function VideoPlayer({
|
||||
}
|
||||
|
||||
return (
|
||||
<Card hover={false} className="p-0 overflow-hidden relative">
|
||||
<Card hover={false} className="p-0 relative">
|
||||
{/* Mode Indicator Badge - controlled by settings */}
|
||||
{showModeIndicator && (
|
||||
<div className="absolute top-3 right-3 z-30">
|
||||
|
||||
@@ -56,11 +56,21 @@ export function DesktopMoreMenu({
|
||||
aggressive: '激进'
|
||||
};
|
||||
|
||||
const [isFullscreen, setIsFullscreen] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const updateFullscreen = () => {
|
||||
setIsFullscreen(!!document.fullscreenElement);
|
||||
};
|
||||
document.addEventListener('fullscreenchange', updateFullscreen);
|
||||
updateFullscreen();
|
||||
return () => document.removeEventListener('fullscreenchange', updateFullscreen);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (showMoreMenu && buttonRef.current && containerRef.current) {
|
||||
const buttonRect = buttonRef.current.getBoundingClientRect();
|
||||
const containerRect = containerRef.current.getBoundingClientRect();
|
||||
|
||||
setMenuPosition({
|
||||
top: buttonRect.bottom - containerRect.top + 10,
|
||||
left: buttonRect.left - containerRect.left
|
||||
@@ -68,11 +78,22 @@ export function DesktopMoreMenu({
|
||||
}
|
||||
}, [showMoreMenu, containerRef]);
|
||||
|
||||
// Auto-close menu on scroll
|
||||
React.useEffect(() => {
|
||||
if (!showMoreMenu) return;
|
||||
const handleScroll = () => {
|
||||
if (showMoreMenu) {
|
||||
onToggleMoreMenu();
|
||||
}
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, [showMoreMenu, onToggleMoreMenu]);
|
||||
|
||||
const handleToggle = () => {
|
||||
if (!showMoreMenu && buttonRef.current && containerRef.current) {
|
||||
const buttonRect = buttonRef.current.getBoundingClientRect();
|
||||
const containerRect = containerRef.current.getBoundingClientRect();
|
||||
|
||||
setMenuPosition({
|
||||
top: buttonRect.bottom - containerRect.top + 10,
|
||||
left: buttonRect.left - containerRect.left
|
||||
@@ -83,10 +104,11 @@ export function DesktopMoreMenu({
|
||||
|
||||
const MenuContent = (
|
||||
<div
|
||||
className="absolute z-[9999] bg-[var(--glass-bg)] backdrop-blur-[25px] saturate-[180%] rounded-[var(--radius-2xl)] border border-[var(--glass-border)] shadow-[var(--shadow-md)] p-2 w-fit min-w-[240px] animate-in fade-in zoom-in-95 duration-200"
|
||||
className={`absolute z-[9999] bg-[var(--glass-bg)] backdrop-blur-[25px] saturate-[180%] rounded-[var(--radius-2xl)] border border-[var(--glass-border)] shadow-[var(--shadow-md)] p-1.5 sm:p-2 w-fit min-w-[200px] sm:min-w-[240px] animate-in fade-in zoom-in-95 duration-200 ${isFullscreen ? 'max-h-[70vh] overflow-y-auto' : ''
|
||||
}`}
|
||||
style={{
|
||||
top: menuPosition.top,
|
||||
left: menuPosition.left,
|
||||
top: `${menuPosition.top}px`,
|
||||
left: `${menuPosition.left}px`,
|
||||
}}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
@@ -97,72 +119,74 @@ export function DesktopMoreMenu({
|
||||
<>
|
||||
<button
|
||||
onClick={() => onCopyLink('original')}
|
||||
className="w-full px-4 py-2.5 text-left text-sm text-[var(--text-color)] hover:bg-[color-mix(in_srgb,var(--accent-color)_15%,transparent)] rounded-[var(--radius-2xl)] transition-colors flex items-center gap-3 cursor-pointer"
|
||||
className="w-full px-3 py-2 sm:px-4 sm:py-2.5 text-left text-xs sm:text-sm text-[var(--text-color)] hover:bg-[color-mix(in_srgb,var(--accent-color)_15%,transparent)] rounded-[var(--radius-2xl)] transition-colors flex items-center gap-2 sm:gap-3 cursor-pointer"
|
||||
>
|
||||
<Icons.Link size={18} />
|
||||
<Icons.Link size={16} className="sm:w-[18px] sm:h-[18px]" />
|
||||
<span>复制原链接</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onCopyLink('proxy')}
|
||||
className="w-full px-4 py-2.5 text-left text-sm text-[var(--text-color)] hover:bg-[color-mix(in_srgb,var(--accent-color)_15%,transparent)] rounded-[var(--radius-2xl)] transition-colors flex items-center gap-3 mt-1 cursor-pointer"
|
||||
className="w-full px-3 py-2 sm:px-4 sm:py-2.5 text-left text-xs sm:text-sm text-[var(--text-color)] hover:bg-[color-mix(in_srgb,var(--accent-color)_15%,transparent)] rounded-[var(--radius-2xl)] transition-colors flex items-center gap-2 sm:gap-3 mt-1 cursor-pointer"
|
||||
>
|
||||
<Icons.Link size={18} />
|
||||
<Icons.Link size={16} className="sm:w-[18px] sm:h-[18px]" />
|
||||
<span>复制代理链接</span>
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => onCopyLink('original')}
|
||||
className="w-full px-4 py-2.5 text-left text-sm text-[var(--text-color)] hover:bg-[color-mix(in_srgb,var(--accent-color)_15%,transparent)] rounded-[var(--radius-2xl)] transition-colors flex items-center gap-3 cursor-pointer"
|
||||
className="w-full px-3 py-2 sm:px-4 sm:py-2.5 text-left text-xs sm:text-sm text-[var(--text-color)] hover:bg-[color-mix(in_srgb,var(--accent-color)_15%,transparent)] rounded-[var(--radius-2xl)] transition-colors flex items-center gap-2 sm:gap-3 cursor-pointer"
|
||||
>
|
||||
<Icons.Link size={18} />
|
||||
<Icons.Link size={16} className="sm:w-[18px] sm:h-[18px]" />
|
||||
<span>复制链接</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Divider */}
|
||||
<div className="h-px bg-[var(--glass-border)] my-2" />
|
||||
<div className="h-px bg-[var(--glass-border)] my-1.5 sm:my-2" />
|
||||
|
||||
{/* Show Mode Indicator Switch */}
|
||||
<div className="px-4 py-2.5 flex items-center justify-between gap-6">
|
||||
<div className="flex items-center gap-3 text-sm text-[var(--text-color)]">
|
||||
<Icons.Zap size={18} />
|
||||
<div className="px-3 py-2 sm:px-4 sm:py-2.5 flex items-center justify-between gap-4 sm:gap-6">
|
||||
<div className="flex items-center gap-2 sm:gap-3 text-xs sm:text-sm text-[var(--text-color)]">
|
||||
<Icons.Zap size={16} className="sm:w-[18px] sm:h-[18px]" />
|
||||
<span>显示模式指示器</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowModeIndicator(!showModeIndicator)}
|
||||
className={`relative w-10 h-6 rounded-full transition-colors cursor-pointer ${showModeIndicator ? 'bg-[var(--accent-color)]' : 'bg-[color-mix(in_srgb,var(--text-color)_20%,transparent)]'
|
||||
className={`relative w-8 h-[18px] sm:w-10 sm:h-6 rounded-full transition-all duration-300 cursor-pointer flex-shrink-0 border border-white/20 ${showModeIndicator
|
||||
? 'bg-[var(--accent-color)] shadow-[0_0_15px_rgba(var(--accent-color-rgb),0.6)]'
|
||||
: 'bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
aria-checked={showModeIndicator}
|
||||
role="switch"
|
||||
>
|
||||
<span
|
||||
className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform shadow-sm ${showModeIndicator ? 'translate-x-4' : 'translate-x-0'
|
||||
className={`absolute top-0.5 left-0.5 w-3.5 h-3.5 sm:w-4.5 sm:h-4.5 bg-white rounded-full transition-transform duration-300 shadow-[0_2px_4px_rgba(0,0,0,0.4)] ${showModeIndicator ? 'translate-x-3.5 sm:translate-x-4.5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Ad Filter Mode Selector */}
|
||||
<div className="px-4 py-2.5 flex items-center justify-between gap-6">
|
||||
<div className="flex items-center gap-3 text-sm text-[var(--text-color)]">
|
||||
<Icons.ShieldAlert size={18} />
|
||||
<div className="px-3 py-2 sm:px-4 sm:py-2.5 flex items-center justify-between gap-4 sm:gap-6">
|
||||
<div className="flex items-center gap-2 sm:gap-3 text-xs sm:text-sm text-[var(--text-color)]">
|
||||
<Icons.ShieldAlert size={16} className="sm:w-[18px] sm:h-[18px]" />
|
||||
<span>广告过滤</span>
|
||||
</div>
|
||||
{/* Custom Ad Filter Mode Selector */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setAdFilterOpen(!isAdFilterOpen)}
|
||||
className="flex items-center gap-1.5 bg-[var(--glass-bg)] border border-[var(--glass-border)] text-[var(--text-color)] text-xs rounded-[var(--radius-2xl)] px-2.5 py-1.5 outline-none hover:border-[var(--accent-color)] hover:bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)] transition-all cursor-pointer"
|
||||
className="flex items-center gap-1 sm:gap-1.5 bg-[var(--glass-bg)] border border-[var(--glass-border)] text-[var(--text-color)] text-[10px] sm:text-xs rounded-[var(--radius-2xl)] px-2 sm:px-2.5 py-1 sm:py-1.5 outline-none hover:border-[var(--accent-color)] hover:bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)] transition-all cursor-pointer whitespace-nowrap"
|
||||
>
|
||||
<span>{AD_FILTER_LABELS[adFilterMode] || '关闭'}</span>
|
||||
<Icons.ChevronDown size={14} className={`text-[var(--text-color-secondary)] transition-transform duration-300 ${isAdFilterOpen ? 'rotate-180' : ''}`} />
|
||||
<Icons.ChevronDown size={12} className={`text-[var(--text-color-secondary)] transition-transform duration-300 ${isAdFilterOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{isAdFilterOpen && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-10 cursor-default" onClick={() => setAdFilterOpen(false)} />
|
||||
<div className="absolute right-0 top-full mt-2 w-32 bg-[var(--glass-bg)] backdrop-blur-[25px] saturate-[180%] border border-[var(--glass-border)] rounded-[var(--radius-2xl)] shadow-[var(--shadow-md)] p-1.5 overflow-hidden z-20 flex flex-col animate-in fade-in zoom-in-95 duration-200">
|
||||
<div className="absolute right-0 top-full mt-2 w-28 sm:w-32 bg-[var(--glass-bg)] backdrop-blur-[25px] saturate-[180%] border border-[var(--glass-border)] rounded-[var(--radius-2xl)] shadow-[var(--shadow-md)] p-1 overflow-hidden z-20 flex flex-col animate-in fade-in zoom-in-95 duration-200">
|
||||
{Object.entries(AD_FILTER_LABELS).map(([mode, label]) => (
|
||||
<button
|
||||
key={mode}
|
||||
@@ -170,11 +194,11 @@ export function DesktopMoreMenu({
|
||||
setAdFilterMode(mode as AdFilterMode);
|
||||
setAdFilterOpen(false);
|
||||
}}
|
||||
className={`text-left text-xs px-3 py-2 rounded-[var(--radius-2xl)] hover:bg-[color-mix(in_srgb,var(--accent-color)_15%,transparent)] transition-colors w-full flex items-center justify-between group ${adFilterMode === mode ? 'text-[var(--accent-color)] font-medium bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)]' : 'text-[var(--text-color)]'
|
||||
className={`text-left text-[10px] sm:text-xs px-2 sm:px-3 py-1.5 sm:py-2 rounded-[var(--radius-2xl)] hover:bg-[color-mix(in_srgb,var(--accent-color)_15%,transparent)] transition-colors w-full flex items-center justify-between group ${adFilterMode === mode ? 'text-[var(--accent-color)] font-medium bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)]' : 'text-[var(--text-color)]'
|
||||
}`}
|
||||
>
|
||||
<span>{label}</span>
|
||||
{adFilterMode === mode && <Icons.Check size={12} className="text-[var(--accent-color)]" />}
|
||||
{adFilterMode === mode && <Icons.Check size={10} className="sm:w-[12px] sm:h-[12px] text-[var(--accent-color)]" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -184,97 +208,103 @@ export function DesktopMoreMenu({
|
||||
</div>
|
||||
|
||||
{/* Auto Next Episode Switch */}
|
||||
<div className="px-4 py-2.5 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 text-sm text-[var(--text-color)]">
|
||||
<Icons.SkipForward size={18} />
|
||||
<div className="px-3 py-2 sm:px-4 sm:py-2.5 flex items-center justify-between gap-4 sm:gap-6">
|
||||
<div className="flex items-center gap-2 sm:gap-3 text-xs sm:text-sm text-[var(--text-color)]">
|
||||
<Icons.SkipForward size={16} className="sm:w-[18px] sm:h-[18px]" />
|
||||
<span>自动下一集</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setAutoNextEpisode(!autoNextEpisode)}
|
||||
className={`relative w-10 h-6 rounded-full transition-colors cursor-pointer ${autoNextEpisode ? 'bg-[var(--accent-color)]' : 'bg-[color-mix(in_srgb,var(--text-color)_20%,transparent)]'
|
||||
className={`relative w-8 h-[18px] sm:w-10 sm:h-6 rounded-full transition-all duration-300 cursor-pointer flex-shrink-0 border border-white/20 ${autoNextEpisode
|
||||
? 'bg-[var(--accent-color)] shadow-[0_0_15px_rgba(var(--accent-color-rgb),0.6)]'
|
||||
: 'bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
aria-checked={autoNextEpisode}
|
||||
role="switch"
|
||||
>
|
||||
<span
|
||||
className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform shadow-sm ${autoNextEpisode ? 'translate-x-4' : 'translate-x-0'
|
||||
className={`absolute top-0.5 left-0.5 w-3.5 h-3.5 sm:w-4.5 sm:h-4.5 bg-white rounded-full transition-transform duration-300 shadow-[0_2px_4px_rgba(0,0,0,0.4)] ${autoNextEpisode ? 'translate-x-3.5 sm:translate-x-4.5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Skip Intro Switch */}
|
||||
<div className="px-4 py-2.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 text-sm text-[var(--text-color)]">
|
||||
<Icons.FastForward size={18} />
|
||||
<div className="px-3 py-2 sm:px-4 sm:py-2.5">
|
||||
<div className="flex items-center justify-between gap-4 sm:gap-6">
|
||||
<div className="flex items-center gap-2 sm:gap-3 text-xs sm:text-sm text-[var(--text-color)]">
|
||||
<Icons.FastForward size={16} className="sm:w-[18px] sm:h-[18px]" />
|
||||
<span>跳过片头</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setAutoSkipIntro(!autoSkipIntro)}
|
||||
className={`relative w-10 h-6 rounded-full transition-colors cursor-pointer ${autoSkipIntro ? 'bg-[var(--accent-color)]' : 'bg-[color-mix(in_srgb,var(--text-color)_20%,transparent)]'
|
||||
className={`relative w-8 h-[18px] sm:w-10 sm:h-6 rounded-full transition-all duration-300 cursor-pointer flex-shrink-0 border border-white/20 ${autoSkipIntro
|
||||
? 'bg-[var(--accent-color)] shadow-[0_0_15px_rgba(var(--accent-color-rgb),0.6)]'
|
||||
: 'bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
aria-checked={autoSkipIntro}
|
||||
role="switch"
|
||||
>
|
||||
<span
|
||||
className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform shadow-sm ${autoSkipIntro ? 'translate-x-4' : 'translate-x-0'
|
||||
className={`absolute top-0.5 left-0.5 w-3.5 h-3.5 sm:w-4.5 sm:h-4.5 bg-white rounded-full transition-transform duration-300 shadow-[0_2px_4px_rgba(0,0,0,0.4)] ${autoSkipIntro ? 'translate-x-3.5 sm:translate-x-4.5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
{/* Expandable Input */}
|
||||
{autoSkipIntro && (
|
||||
<div className="mt-2 ml-7 flex items-center gap-2">
|
||||
<span className="text-xs text-[var(--text-color-secondary)]">时长:</span>
|
||||
<div className="mt-2 ml-6 sm:ml-7 flex items-center gap-1.5 sm:gap-2">
|
||||
<span className="text-[10px] sm:text-xs text-[var(--text-color-secondary)]">时长:</span>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="600"
|
||||
value={skipIntroSeconds}
|
||||
onChange={(e) => setSkipIntroSeconds(parseInt(e.target.value) || 0)}
|
||||
className="w-16 px-2 py-1 text-sm text-center bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-[var(--radius-2xl)] text-[var(--text-color)] focus:outline-none focus:border-[var(--accent-color)] no-spinner"
|
||||
className="w-12 sm:w-16 px-1.5 py-0.5 sm:px-2 sm:py-1 text-xs sm:text-sm text-center bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-[var(--radius-2xl)] text-[var(--text-color)] focus:outline-none focus:border-[var(--accent-color)] no-spinner"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<span className="text-xs text-[var(--text-color-secondary)]">秒</span>
|
||||
<span className="text-[10px] sm:text-xs text-[var(--text-color-secondary)]">秒</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Skip Outro Switch */}
|
||||
<div className="px-4 py-2.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 text-sm text-[var(--text-color)]">
|
||||
<Icons.Rewind size={18} />
|
||||
<div className="px-3 py-2 sm:px-4 sm:py-2.5">
|
||||
<div className="flex items-center justify-between gap-4 sm:gap-6">
|
||||
<div className="flex items-center gap-2 sm:gap-3 text-xs sm:text-sm text-[var(--text-color)]">
|
||||
<Icons.Rewind size={16} className="sm:w-[18px] sm:h-[18px]" />
|
||||
<span>跳过片尾</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setAutoSkipOutro(!autoSkipOutro)}
|
||||
className={`relative w-10 h-6 rounded-full transition-colors cursor-pointer ${autoSkipOutro ? 'bg-[var(--accent-color)]' : 'bg-[color-mix(in_srgb,var(--text-color)_20%,transparent)]'
|
||||
className={`relative w-8 h-[18px] sm:w-10 sm:h-6 rounded-full transition-all duration-300 cursor-pointer flex-shrink-0 border border-white/20 ${autoSkipOutro
|
||||
? 'bg-[var(--accent-color)] shadow-[0_0_15px_rgba(var(--accent-color-rgb),0.6)]'
|
||||
: 'bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
aria-checked={autoSkipOutro}
|
||||
role="switch"
|
||||
>
|
||||
<span
|
||||
className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform shadow-sm ${autoSkipOutro ? 'translate-x-4' : 'translate-x-0'
|
||||
className={`absolute top-0.5 left-0.5 w-3.5 h-3.5 sm:w-4.5 sm:h-4.5 bg-white rounded-full transition-transform duration-300 shadow-[0_2px_4px_rgba(0,0,0,0.4)] ${autoSkipOutro ? 'translate-x-3.5 sm:translate-x-4.5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
{/* Expandable Input */}
|
||||
{autoSkipOutro && (
|
||||
<div className="mt-2 ml-7 flex items-center gap-2">
|
||||
<span className="text-xs text-[var(--text-color-secondary)]">剩余:</span>
|
||||
<div className="mt-2 ml-6 sm:ml-7 flex items-center gap-1.5 sm:gap-2">
|
||||
<span className="text-[10px] sm:text-xs text-[var(--text-color-secondary)]">剩余:</span>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="600"
|
||||
value={skipOutroSeconds}
|
||||
onChange={(e) => setSkipOutroSeconds(parseInt(e.target.value) || 0)}
|
||||
className="w-16 px-2 py-1 text-sm text-center bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-[var(--radius-2xl)] text-[var(--text-color)] focus:outline-none focus:border-[var(--accent-color)] no-spinner"
|
||||
className="w-12 sm:w-16 px-1.5 py-0.5 sm:px-2 sm:py-1 text-xs sm:text-sm text-center bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-[var(--radius-2xl)] text-[var(--text-color)] focus:outline-none focus:border-[var(--accent-color)] no-spinner"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<span className="text-xs text-[var(--text-color-secondary)]">秒</span>
|
||||
<span className="text-[10px] sm:text-xs text-[var(--text-color-secondary)]">秒</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -288,11 +318,11 @@ export function DesktopMoreMenu({
|
||||
onClick={handleToggle}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
className="group flex items-center justify-center w-12 h-12 rounded-full bg-black/40 hover:bg-black/60 backdrop-blur-sm transition-all duration-300 hover:scale-110 active:scale-95"
|
||||
className="group flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-black/40 hover:bg-black/60 backdrop-blur-sm transition-all duration-300 hover:scale-110 active:scale-95"
|
||||
aria-label="更多选项"
|
||||
title="更多选项"
|
||||
>
|
||||
<Icons.MoreHorizontal className="text-white/80 group-hover:text-white" size={24} />
|
||||
<Icons.MoreHorizontal className="text-white/80 group-hover:text-white w-[20px] h-[20px] sm:w-[24px] sm:h-[24px]" />
|
||||
</button>
|
||||
|
||||
{/* More Menu Dropdown (Portal) */}
|
||||
|
||||
@@ -73,8 +73,8 @@ export function DesktopOverlay({
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* More Menu (Top Left) */}
|
||||
<div className={`absolute top-6 left-6 z-50 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`} style={{ pointerEvents: showControls ? 'auto' : 'none' }}>
|
||||
{/* More Menu (Top Left) - Moved slightly down and lower z-index to stay below navbar */}
|
||||
<div className={`absolute top-8 left-6 z-40 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`} style={{ pointerEvents: showControls ? 'auto' : 'none' }}>
|
||||
<DesktopMoreMenu
|
||||
showMoreMenu={showMoreMenu}
|
||||
isProxied={isProxied}
|
||||
@@ -86,8 +86,8 @@ export function DesktopOverlay({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Speed Menu (Top Right) */}
|
||||
<div className={`absolute top-6 right-6 z-50 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`} style={{ pointerEvents: showControls ? 'auto' : 'none' }}>
|
||||
{/* Speed Menu (Top Right) - Moved slightly down and lower z-index */}
|
||||
<div className={`absolute top-8 right-6 z-40 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`} style={{ pointerEvents: showControls ? 'auto' : 'none' }}>
|
||||
<DesktopSpeedMenu
|
||||
showSpeedMenu={showSpeedMenu}
|
||||
playbackRate={playbackRate}
|
||||
|
||||
@@ -25,6 +25,17 @@ export function DesktopSpeedMenu({
|
||||
const buttonRef = React.useRef<HTMLButtonElement>(null);
|
||||
const [menuPosition, setMenuPosition] = React.useState({ top: 0, left: 0 });
|
||||
|
||||
const [isFullscreen, setIsFullscreen] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const updateFullscreen = () => {
|
||||
setIsFullscreen(!!document.fullscreenElement);
|
||||
};
|
||||
document.addEventListener('fullscreenchange', updateFullscreen);
|
||||
updateFullscreen();
|
||||
return () => document.removeEventListener('fullscreenchange', updateFullscreen);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (showSpeedMenu && buttonRef.current && containerRef.current) {
|
||||
const buttonRect = buttonRef.current.getBoundingClientRect();
|
||||
@@ -37,6 +48,18 @@ export function DesktopSpeedMenu({
|
||||
}
|
||||
}, [showSpeedMenu, containerRef]);
|
||||
|
||||
// Auto-close menu on scroll
|
||||
React.useEffect(() => {
|
||||
if (!showSpeedMenu) return;
|
||||
const handleScroll = () => {
|
||||
if (showSpeedMenu) {
|
||||
onToggleSpeedMenu();
|
||||
}
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, [showSpeedMenu, onToggleSpeedMenu]);
|
||||
|
||||
const handleToggle = () => {
|
||||
if (!showSpeedMenu && buttonRef.current && containerRef.current) {
|
||||
const buttonRect = buttonRef.current.getBoundingClientRect();
|
||||
@@ -53,10 +76,11 @@ export function DesktopSpeedMenu({
|
||||
|
||||
const MenuContent = (
|
||||
<div
|
||||
className="absolute z-[9999] bg-[var(--glass-bg)] backdrop-blur-[25px] saturate-[180%] rounded-[var(--radius-2xl)] border border-[var(--glass-border)] shadow-[var(--shadow-md)] p-1.5 w-fit min-w-[4.5rem]"
|
||||
className={`absolute z-[9999] bg-[var(--glass-bg)] backdrop-blur-[25px] saturate-[180%] rounded-[var(--radius-2xl)] border border-[var(--glass-border)] shadow-[var(--shadow-md)] p-1 sm:p-1.5 w-fit min-w-[3.5rem] sm:min-w-[4.5rem] animate-in fade-in zoom-in-95 duration-200 ${isFullscreen ? 'max-h-[60vh] overflow-y-auto' : ''
|
||||
}`}
|
||||
style={{
|
||||
top: menuPosition.top,
|
||||
left: menuPosition.left,
|
||||
top: `${menuPosition.top}px`,
|
||||
left: `${menuPosition.left}px`,
|
||||
transform: 'translateX(-100%)', // Align right edge
|
||||
}}
|
||||
onMouseEnter={onMouseEnter}
|
||||
@@ -66,7 +90,7 @@ export function DesktopSpeedMenu({
|
||||
<button
|
||||
key={speed}
|
||||
onClick={() => onSpeedChange(speed)}
|
||||
className={`w-full px-4 py-1.5 rounded-[var(--radius-2xl)] text-sm font-medium transition-colors ${playbackRate === speed
|
||||
className={`w-full px-3 py-1 sm:px-4 sm:py-1.5 rounded-[var(--radius-2xl)] text-xs sm:text-sm font-medium transition-colors ${playbackRate === speed
|
||||
? 'bg-[var(--accent-color)] text-white'
|
||||
: 'text-[var(--text-color)] hover:bg-[color-mix(in_srgb,var(--accent-color)_15%,transparent)]'
|
||||
}`}
|
||||
@@ -84,7 +108,7 @@ export function DesktopSpeedMenu({
|
||||
onClick={handleToggle}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
className="group flex items-center justify-center w-12 h-12 rounded-full bg-black/40 hover:bg-black/60 backdrop-blur-sm transition-all duration-300 hover:scale-110 active:scale-95 text-white/90 font-medium text-sm"
|
||||
className="group flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-black/40 hover:bg-black/60 backdrop-blur-sm transition-all duration-300 hover:scale-110 active:scale-95 text-white/90 font-medium text-xs sm:text-sm"
|
||||
aria-label="播放速度"
|
||||
>
|
||||
{playbackRate}x
|
||||
|
||||
Generated
+6
-6
@@ -1,19 +1,19 @@
|
||||
{
|
||||
"name": "kvideo",
|
||||
"version": "4.0.0",
|
||||
"version": "4.0.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "kvideo",
|
||||
"version": "4.0.0",
|
||||
"version": "4.0.1",
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@vercel/analytics": "^1.6.1",
|
||||
"hls.js": "^1.6.15",
|
||||
"lucide-react": "^0.562.0",
|
||||
"lucide-react": "^0.563.0",
|
||||
"next": "16.1.4",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3",
|
||||
@@ -5723,9 +5723,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.562.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
|
||||
"integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
|
||||
"version": "0.563.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.563.0.tgz",
|
||||
"integrity": "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "kvideo",
|
||||
"version": "4.0.0",
|
||||
"version": "4.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
@@ -15,7 +15,7 @@
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@vercel/analytics": "^1.6.1",
|
||||
"hls.js": "^1.6.15",
|
||||
"lucide-react": "^0.562.0",
|
||||
"lucide-react": "^0.563.0",
|
||||
"next": "16.1.4",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3",
|
||||
|
||||
Reference in New Issue
Block a user