mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-21 19:53:43 +08:00
283 lines
13 KiB
TypeScript
283 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Icons } from '@/components/ui/Icon';
|
|
import { usePlayerSettings } from '../hooks/usePlayerSettings';
|
|
|
|
interface MobileMoreMenuProps {
|
|
showMoreMenu: boolean;
|
|
isMuted: boolean;
|
|
volume: number;
|
|
playbackRate: number;
|
|
isPiPSupported: boolean;
|
|
isProxied?: boolean;
|
|
onCopyLink: (type?: 'original' | 'proxy') => void;
|
|
onToggleVolumeMenu: () => void;
|
|
onToggleSpeedMenu: () => void;
|
|
onTogglePiP: () => void;
|
|
}
|
|
|
|
export function MobileMoreMenu({
|
|
showMoreMenu,
|
|
isMuted,
|
|
volume,
|
|
playbackRate,
|
|
isPiPSupported,
|
|
isProxied = false,
|
|
onCopyLink,
|
|
onToggleVolumeMenu,
|
|
onToggleSpeedMenu,
|
|
onTogglePiP
|
|
}: MobileMoreMenuProps) {
|
|
const {
|
|
autoNextEpisode,
|
|
autoSkipIntro,
|
|
skipIntroSeconds,
|
|
autoSkipOutro,
|
|
skipOutroSeconds,
|
|
showModeIndicator,
|
|
setAutoNextEpisode,
|
|
setAutoSkipIntro,
|
|
setSkipIntroSeconds,
|
|
setAutoSkipOutro,
|
|
setSkipOutroSeconds,
|
|
setShowModeIndicator,
|
|
} = usePlayerSettings();
|
|
|
|
if (!showMoreMenu) return null;
|
|
|
|
return (
|
|
<div className="absolute bottom-full right-0 mb-2 min-w-[200px] z-[100] menu-container">
|
|
<div className="bg-[rgba(255,255,255,0.1)] backdrop-blur-[25px] rounded-[var(--radius-2xl)] border border-[rgba(255,255,255,0.2)] shadow-[0_8px_32px_rgba(0,0,0,0.4)] overflow-hidden">
|
|
{/* Copy Link Option */}
|
|
{isProxied ? (
|
|
<>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onCopyLink('original');
|
|
}}
|
|
className="w-full px-4 py-3 text-left text-sm text-white hover:bg-white/20 flex items-center gap-3 transition-all touch-manipulation cursor-pointer"
|
|
style={{ WebkitTapHighlightColor: 'transparent' }}
|
|
>
|
|
<Icons.Link size={18} />
|
|
<span>复制原链接</span>
|
|
</button>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onCopyLink('proxy');
|
|
}}
|
|
className="w-full px-4 py-3 text-left text-sm text-white hover:bg-white/20 flex items-center gap-3 transition-all touch-manipulation cursor-pointer border-t border-white/10"
|
|
style={{ WebkitTapHighlightColor: 'transparent' }}
|
|
>
|
|
<Icons.Link size={18} />
|
|
<span>复制代理链接</span>
|
|
</button>
|
|
</>
|
|
) : (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onCopyLink('original');
|
|
}}
|
|
className="w-full px-4 py-3 text-left text-sm text-white hover:bg-white/20 flex items-center gap-3 transition-all touch-manipulation cursor-pointer"
|
|
style={{ WebkitTapHighlightColor: 'transparent' }}
|
|
>
|
|
<Icons.Link size={18} />
|
|
<span>复制链接</span>
|
|
</button>
|
|
)}
|
|
|
|
<div className="h-px bg-white/10 my-1" />
|
|
|
|
{/* Show Mode Indicator Switch */}
|
|
<div
|
|
className="w-full px-4 py-3 flex items-center justify-between"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-center gap-3 text-sm text-white">
|
|
<Icons.Zap size={18} />
|
|
<span>显示模式指示器</span>
|
|
</div>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setShowModeIndicator(!showModeIndicator);
|
|
}}
|
|
className={`relative w-10 h-6 rounded-full transition-colors cursor-pointer ${showModeIndicator ? 'bg-[var(--accent-color)]' : 'bg-white/20'
|
|
}`}
|
|
aria-checked={showModeIndicator}
|
|
role="switch"
|
|
style={{ WebkitTapHighlightColor: 'transparent' }}
|
|
>
|
|
<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'
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Auto Next Episode Switch */}
|
|
<div
|
|
className="w-full px-4 py-3 flex items-center justify-between"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-center gap-3 text-sm text-white">
|
|
<Icons.SkipForward size={18} />
|
|
<span>自动下一集</span>
|
|
</div>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setAutoNextEpisode(!autoNextEpisode);
|
|
}}
|
|
className={`relative w-10 h-6 rounded-full transition-colors cursor-pointer ${autoNextEpisode ? 'bg-[var(--accent-color)]' : 'bg-white/20'
|
|
}`}
|
|
aria-checked={autoNextEpisode}
|
|
role="switch"
|
|
style={{ WebkitTapHighlightColor: 'transparent' }}
|
|
>
|
|
<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'
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Skip Intro Switch */}
|
|
<div className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3 text-sm text-white">
|
|
<Icons.FastForward size={18} />
|
|
<span>跳过片头</span>
|
|
</div>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setAutoSkipIntro(!autoSkipIntro);
|
|
}}
|
|
className={`relative w-10 h-6 rounded-full transition-colors cursor-pointer ${autoSkipIntro ? 'bg-[var(--accent-color)]' : 'bg-white/20'
|
|
}`}
|
|
aria-checked={autoSkipIntro}
|
|
role="switch"
|
|
style={{ WebkitTapHighlightColor: 'transparent' }}
|
|
>
|
|
<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'
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
{/* Expandable Input */}
|
|
{autoSkipIntro && (
|
|
<div className="mt-2 ml-7 flex items-center gap-2">
|
|
<span className="text-xs text-white/70">时长:</span>
|
|
<input
|
|
type="number"
|
|
inputMode="numeric"
|
|
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-white/10 border border-white/20 rounded-[var(--radius-2xl)] text-white focus:outline-none focus:border-[var(--accent-color)] no-spinner"
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
<span className="text-xs text-white/70">秒</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Skip Outro Switch */}
|
|
<div className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3 text-sm text-white">
|
|
<Icons.Rewind size={18} />
|
|
<span>跳过片尾</span>
|
|
</div>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setAutoSkipOutro(!autoSkipOutro);
|
|
}}
|
|
className={`relative w-10 h-6 rounded-full transition-colors cursor-pointer ${autoSkipOutro ? 'bg-[var(--accent-color)]' : 'bg-white/20'
|
|
}`}
|
|
aria-checked={autoSkipOutro}
|
|
role="switch"
|
|
style={{ WebkitTapHighlightColor: 'transparent' }}
|
|
>
|
|
<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'
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
{/* Expandable Input */}
|
|
{autoSkipOutro && (
|
|
<div className="mt-2 ml-7 flex items-center gap-2">
|
|
<span className="text-xs text-white/70">剩余:</span>
|
|
<input
|
|
type="number"
|
|
inputMode="numeric"
|
|
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-white/10 border border-white/20 rounded-[var(--radius-2xl)] text-white focus:outline-none focus:border-[var(--accent-color)] no-spinner"
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
<span className="text-xs text-white/70">秒</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="h-px bg-white/10 my-1" />
|
|
|
|
{/* Volume Option */}
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onToggleVolumeMenu();
|
|
}}
|
|
className="w-full px-4 py-3 text-left text-sm text-white hover:bg-white/20 flex items-center gap-3 transition-all touch-manipulation cursor-pointer"
|
|
style={{ WebkitTapHighlightColor: 'transparent' }}
|
|
>
|
|
{isMuted || volume === 0 ? <Icons.VolumeX size={18} /> : <Icons.Volume2 size={18} />}
|
|
<span>音量</span>
|
|
</button>
|
|
|
|
{/* Speed Option */}
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onToggleSpeedMenu();
|
|
}}
|
|
className="w-full px-4 py-3 text-left text-sm text-white hover:bg-white/20 flex items-center gap-3 transition-all touch-manipulation cursor-pointer"
|
|
style={{ WebkitTapHighlightColor: 'transparent' }}
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<polyline points="12 6 12 12 16 14" />
|
|
</svg>
|
|
<span>速度 {playbackRate}x</span>
|
|
</button>
|
|
|
|
{/* PiP Option */}
|
|
{isPiPSupported && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onTogglePiP();
|
|
}}
|
|
className="w-full px-4 py-3 text-left text-sm text-white hover:bg-white/20 flex items-center gap-3 transition-all touch-manipulation cursor-pointer"
|
|
style={{ WebkitTapHighlightColor: 'transparent' }}
|
|
>
|
|
<Icons.PictureInPicture size={18} />
|
|
<span>画中画</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|