ZSCGR/KVideo
1
0
Fork 0
mirror of https://github.com/KuekHaoYang/KVideo.git synced 2026-08-14 08:13:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Conditionally adjust speed menu and button dimensions for rotated display.

Browse Source
This commit is contained in:
kuekhaoyang
2026-02-04 20:18:02 +08:00
parent 30f54e5fa7
commit 772e377b3d
2 changed files with 49 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/player/desktop/DesktopMoreMenu.tsx
+47 -47
View File
@@ -210,7 +210,7 @@ export function DesktopMoreMenu({
const MenuContent = (
<div
ref={menuRef}
className={`absolute z-[2147483647] 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 overflow-y-auto`}
className={`absolute z-[2147483647] 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 ${isRotated ? 'min-w-[170px]' : 'min-w-[200px] sm:min-w-[240px]'} animate-in fade-in zoom-in-95 duration-200 overflow-y-auto`}
style={{
...(isRotated ? {
// In Rotated Mode:
@@ -247,25 +247,25 @@ export function DesktopMoreMenu({
<>
<button
onClick={() => onCopyLink('original')}
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"
className={`w-full ${isRotated ? 'px-2 py-1.5 text-[11px]' : 'px-3 py-2 sm:px-4 sm:py-2.5 text-xs sm:text-sm'} text-left 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 group-hover:gap-3 cursor-pointer`}
>
<Icons.Link size={16} className="sm:w-[18px] sm:h-[18px]" />
<Icons.Link size={isRotated ? 14 : 16} className="sm:w-[18px] sm:h-[18px]" />
<span>复制原链接</span>
</button>
<button
onClick={() => onCopyLink('proxy')}
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"
className={`w-full ${isRotated ? 'px-2 py-1.5 text-[11px]' : 'px-3 py-2 sm:px-4 sm:py-2.5 text-xs sm:text-sm'} text-left 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 mt-0.5 cursor-pointer`}
>
<Icons.Link size={16} className="sm:w-[18px] sm:h-[18px]" />
<Icons.Link size={isRotated ? 14 : 16} className="sm:w-[18px] sm:h-[18px]" />
<span>复制代理链接</span>
</button>
</>
) : (
<button
onClick={() => onCopyLink('original')}
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"
className={`w-full ${isRotated ? 'px-2 py-1.5 text-[11px]' : 'px-3 py-2 sm:px-4 sm:py-2.5 text-xs sm:text-sm'} text-left 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 group-hover:gap-3 cursor-pointer`}
>
<Icons.Link size={16} className="sm:w-[18px] sm:h-[18px]" />
<Icons.Link size={isRotated ? 14 : 16} className="sm:w-[18px] sm:h-[18px]" />
<span>复制链接</span>
</button>
)}
@@ -274,9 +274,9 @@ export function DesktopMoreMenu({
<div className="h-px bg-[var(--glass-border)] my-1.5 sm:my-2" />
{/* Fullscreen Mode Selector */}
<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.Settings size={16} className="sm:w-[18px] sm:h-[18px]" />
<div className={`${isRotated ? 'px-2 py-1.5' : 'px-3 py-2 sm:px-4 sm:py-2.5'} flex items-center justify-between gap-4`}>
<div className={`flex items-center gap-2 text-[var(--text-color)] ${isRotated ? 'text-[11px]' : 'text-xs sm:text-sm'}`}>
<Icons.Settings size={isRotated ? 14 : 16} className="sm:w-[18px] sm:h-[18px]" />
<span>全屏方式</span>
</div>
<div className="relative">
@@ -284,31 +284,31 @@ export function DesktopMoreMenu({
onClick={() => {
setFullscreenType(fullscreenType === 'native' ? 'window' : 'native');
}}
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"
className={`flex items-center gap-1 bg-[var(--glass-bg)] border border-[var(--glass-border)] text-[var(--text-color)] rounded-[var(--radius-2xl)] outline-none hover:border-[var(--accent-color)] hover:bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)] transition-all cursor-pointer whitespace-nowrap ${isRotated ? 'px-1.5 py-0.5 text-[9px]' : 'px-2 sm:px-2.5 py-1 sm:py-1.5 text-[10px] sm:text-xs'}`}
>
<span>{fullscreenType === 'native' ? '系统全屏' : '网页全屏'}</span>
<Icons.Maximize size={12} className="text-[var(--text-color-secondary)]" />
<Icons.Maximize size={isRotated ? 10 : 12} className="text-[var(--text-color-secondary)]" />
</button>
</div>
</div>
{/* Show Mode Indicator Switch */}
<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 className={`${isRotated ? 'px-2 py-1.5' : 'px-3 py-2 sm:px-4 sm:py-2.5'} flex items-center justify-between gap-4`}>
<div className={`flex items-center gap-2 text-[var(--text-color)] ${isRotated ? 'text-[11px]' : 'text-xs sm:text-sm'}`}>
<Icons.Zap size={isRotated ? 14 : 16} className="sm:w-[18px] sm:h-[18px]" />
<span>模式指示器</span>
</div>
<button
onClick={() => setShowModeIndicator(!showModeIndicator)}
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
className={`relative 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'
}`}
} ${isRotated ? 'w-6 h-3.5' : 'w-8 h-[18px] sm:w-10 sm:h-6'}`}
aria-checked={showModeIndicator}
role="switch"
>
<span
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'
className={`absolute top-0.5 left-0.5 bg-white rounded-full transition-transform duration-300 shadow-[0_2px_4px_rgba(0,0,0,0.4)] ${isRotated ? 'w-2.5 h-2.5' : 'w-3.5 h-3.5 sm:w-4.5 sm:h-4.5'} ${showModeIndicator ? (isRotated ? 'translate-x-2.5' : 'translate-x-3.5 sm:translate-x-4.5') : 'translate-x-0'
}`}
/>
</button>
@@ -355,103 +355,103 @@ export function DesktopMoreMenu({
</div>
{/* Auto Next Episode Switch */}
<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]" />
<div className={`${isRotated ? 'px-2 py-1.5' : 'px-3 py-2 sm:px-4 sm:py-2.5'} flex items-center justify-between gap-4`}>
<div className={`flex items-center gap-2 text-[var(--text-color)] ${isRotated ? 'text-[11px]' : 'text-xs sm:text-sm'}`}>
<Icons.SkipForward size={isRotated ? 14 : 16} className="sm:w-[18px] sm:h-[18px]" />
<span>自动下一集</span>
</div>
<button
onClick={() => setAutoNextEpisode(!autoNextEpisode)}
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
className={`relative 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'
}`}
} ${isRotated ? 'w-6 h-3.5' : 'w-8 h-[18px] sm:w-10 sm:h-6'}`}
aria-checked={autoNextEpisode}
role="switch"
>
<span
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'
className={`absolute top-0.5 left-0.5 bg-white rounded-full transition-transform duration-300 shadow-[0_2px_4px_rgba(0,0,0,0.4)] ${isRotated ? 'w-2.5 h-2.5' : 'w-3.5 h-3.5 sm:w-4.5 sm:h-4.5'} ${autoNextEpisode ? (isRotated ? 'translate-x-2.5' : 'translate-x-3.5 sm:translate-x-4.5') : 'translate-x-0'
}`}
/>
</button>
</div>
{/* Skip Intro Switch */}
<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]" />
<div className={`${isRotated ? 'px-2 py-1.5' : 'px-3 py-2 sm:px-4 sm:py-2.5'}`}>
<div className="flex items-center justify-between gap-4">
<div className={`flex items-center gap-2 text-[var(--text-color)] ${isRotated ? 'text-[11px]' : 'text-xs sm:text-sm'}`}>
<Icons.FastForward size={isRotated ? 14 : 16} className="sm:w-[18px] sm:h-[18px]" />
<span>跳过片头</span>
</div>
<button
onClick={() => setAutoSkipIntro(!autoSkipIntro)}
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
className={`relative 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'
}`}
} ${isRotated ? 'w-6 h-3.5' : 'w-8 h-[18px] sm:w-10 sm:h-6'}`}
aria-checked={autoSkipIntro}
role="switch"
>
<span
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'
className={`absolute top-0.5 left-0.5 bg-white rounded-full transition-transform duration-300 shadow-[0_2px_4px_rgba(0,0,0,0.4)] ${isRotated ? 'w-2.5 h-2.5' : 'w-3.5 h-3.5 sm:w-4.5 sm:h-4.5'} ${autoSkipIntro ? (isRotated ? 'translate-x-2.5' : 'translate-x-3.5 sm:translate-x-4.5') : 'translate-x-0'
}`}
/>
</button>
</div>
{/* Expandable Input */}
{autoSkipIntro && (
<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>
<div className={`mt-2 flex items-center gap-1.5 ${isRotated ? 'ml-4' : 'ml-6 sm:ml-7'}`}>
<span className={`text-[var(--text-color-secondary)] ${isRotated ? 'text-[9px]' : 'text-[10px] sm:text-xs'}`}>时长:</span>
<input
type="number"
min="0"
max="600"
value={skipIntroSeconds}
onChange={(e) => setSkipIntroSeconds(parseInt(e.target.value) || 0)}
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"
className={`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 ${isRotated ? 'w-10 px-1 py-0 text-[10px]' : 'w-12 sm:w-16 px-1.5 py-0.5 sm:px-2 sm:py-1 text-xs sm:text-sm'}`}
onClick={(e) => e.stopPropagation()}
/>
<span className="text-[10px] sm:text-xs text-[var(--text-color-secondary)]">秒</span>
<span className={`text-[var(--text-color-secondary)] ${isRotated ? 'text-[9px]' : 'text-[10px] sm:text-xs'}`}>秒</span>
</div>
)}
</div>
{/* Skip Outro Switch */}
<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]" />
<div className={`${isRotated ? 'px-2 py-1.5' : 'px-3 py-2 sm:px-4 sm:py-2.5'}`}>
<div className="flex items-center justify-between gap-4">
<div className={`flex items-center gap-2 text-[var(--text-color)] ${isRotated ? 'text-[11px]' : 'text-xs sm:text-sm'}`}>
<Icons.Rewind size={isRotated ? 14 : 16} className="sm:w-[18px] sm:h-[18px]" />
<span>跳过片尾</span>
</div>
<button
onClick={() => setAutoSkipOutro(!autoSkipOutro)}
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
className={`relative 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'
}`}
} ${isRotated ? 'w-6 h-3.5' : 'w-8 h-[18px] sm:w-10 sm:h-6'}`}
aria-checked={autoSkipOutro}
role="switch"
>
<span
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'
className={`absolute top-0.5 left-0.5 bg-white rounded-full transition-transform duration-300 shadow-[0_2px_4px_rgba(0,0,0,0.4)] ${isRotated ? 'w-2.5 h-2.5' : 'w-3.5 h-3.5 sm:w-4.5 sm:h-4.5'} ${autoSkipOutro ? (isRotated ? 'translate-x-2.5' : 'translate-x-3.5 sm:translate-x-4.5') : 'translate-x-0'
}`}
/>
</button>
</div>
{/* Expandable Input */}
{autoSkipOutro && (
<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>
<div className={`mt-2 flex items-center gap-1.5 ${isRotated ? 'ml-4' : 'ml-6 sm:ml-7'}`}>
<span className={`text-[var(--text-color-secondary)] ${isRotated ? 'text-[9px]' : 'text-[10px] sm:text-xs'}`}>剩余:</span>
<input
type="number"
min="0"
max="600"
value={skipOutroSeconds}
onChange={(e) => setSkipOutroSeconds(parseInt(e.target.value) || 0)}
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"
className={`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 ${isRotated ? 'w-10 px-1 py-0 text-[10px]' : 'w-12 sm:w-16 px-1.5 py-0.5 sm:px-2 sm:py-1 text-xs sm:text-sm'}`}
onClick={(e) => e.stopPropagation()}
/>
<span className="text-[10px] sm:text-xs text-[var(--text-color-secondary)]">秒</span>
<span className={`text-[var(--text-color-secondary)] ${isRotated ? 'text-[9px]' : 'text-[10px] sm:text-xs'}`}>秒</span>
</div>
)}
</div>
components/player/desktop/DesktopSpeedMenu.tsx
+2 -2
View File
@@ -180,7 +180,7 @@ export function DesktopSpeedMenu({
const MenuContent = (
<div
ref={menuRef}
className={`absolute z-[2147483647] 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 overflow-y-auto`}
className={`absolute z-[2147483647] 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 ${isRotated ? 'min-w-[2.5rem]' : 'min-w-[3.5rem] sm:min-w-[4.5rem]'} animate-in fade-in zoom-in-95 duration-200 overflow-y-auto`}
style={{
...(isRotated ? {
// In Rotated Mode:
@@ -216,7 +216,7 @@ export function DesktopSpeedMenu({
<button
key={speed}
onClick={() => onSpeedChange(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
className={`w-full ${isRotated ? 'px-2 py-0.5 text-[10px]' : 'px-3 py-1 sm:px-4 sm:py-1.5 text-xs sm:text-sm'} rounded-[var(--radius-2xl)] 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)]'
}`}