mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-13 07:43:43 +08:00
302 lines
13 KiB
TypeScript
302 lines
13 KiB
TypeScript
import React from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
|
|
interface DesktopSpeedMenuProps {
|
|
showSpeedMenu: boolean;
|
|
playbackRate: number;
|
|
speeds: number[];
|
|
onSpeedChange: (speed: number) => void;
|
|
onToggleSpeedMenu: () => void;
|
|
onMouseEnter: () => void;
|
|
onMouseLeave: () => void;
|
|
containerRef: React.RefObject<HTMLDivElement | null>;
|
|
isRotated?: boolean;
|
|
}
|
|
|
|
export function DesktopSpeedMenu({
|
|
showSpeedMenu,
|
|
playbackRate,
|
|
speeds,
|
|
onSpeedChange,
|
|
onToggleSpeedMenu,
|
|
onMouseEnter,
|
|
onMouseLeave,
|
|
containerRef,
|
|
isRotated = false
|
|
}: DesktopSpeedMenuProps) {
|
|
const buttonRef = React.useRef<HTMLButtonElement>(null);
|
|
const menuRef = React.useRef<HTMLDivElement>(null);
|
|
const [menuPosition, setMenuPosition] = React.useState({ top: 0, left: 0, maxHeight: 'none', openUpward: false, align: 'right' as 'left' | 'right' });
|
|
|
|
const [isFullscreen, setIsFullscreen] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
const updateFullscreen = () => {
|
|
// Check both native fullscreen and window fullscreen (CSS-based)
|
|
const nativeFullscreen = !!document.fullscreenElement;
|
|
const windowFullscreen = containerRef.current?.closest('.is-web-fullscreen') !== null;
|
|
setIsFullscreen(nativeFullscreen || windowFullscreen);
|
|
};
|
|
document.addEventListener('fullscreenchange', updateFullscreen);
|
|
// Also check periodically for window fullscreen changes (CSS class based)
|
|
const interval = setInterval(updateFullscreen, 500);
|
|
updateFullscreen();
|
|
return () => {
|
|
document.removeEventListener('fullscreenchange', updateFullscreen);
|
|
clearInterval(interval);
|
|
};
|
|
}, [containerRef]);
|
|
|
|
// Dual Positioning Strategy
|
|
const calculateMenuPosition = React.useCallback(() => {
|
|
if (!buttonRef.current || !containerRef.current) return;
|
|
|
|
if (!isRotated && !isFullscreen) {
|
|
// Normal Mode: Non-rotated, non-fullscreen
|
|
// Use Viewport Coordinates but position relative to button
|
|
// And use Body Portal to escape container clipping
|
|
const buttonRect = buttonRef.current.getBoundingClientRect();
|
|
const viewportHeight = window.innerHeight;
|
|
const viewportWidth = window.innerWidth;
|
|
|
|
const spaceBelow = viewportHeight - buttonRect.bottom - 10;
|
|
const spaceAbove = buttonRect.top - 10;
|
|
|
|
const estimatedMenuHeight = 250;
|
|
const actualMenuHeight = menuRef.current?.offsetHeight || estimatedMenuHeight;
|
|
|
|
const openUpward = spaceBelow < Math.min(actualMenuHeight, 200) && spaceAbove > spaceBelow;
|
|
const maxHeight = openUpward
|
|
? Math.min(spaceAbove, actualMenuHeight)
|
|
: Math.min(spaceBelow, viewportHeight * 0.7);
|
|
|
|
// Smart Horizontal Alignment:
|
|
// If button is on the left half of screen, align menu's left edge to button's left.
|
|
// If button is on the right half of screen, align menu's right edge to button's right.
|
|
const isLeftHalf = buttonRect.left < viewportWidth / 2;
|
|
const align = isLeftHalf ? 'left' : 'right';
|
|
|
|
let left = isLeftHalf ? buttonRect.left : buttonRect.right;
|
|
|
|
// Boundary clamping
|
|
if (isLeftHalf) {
|
|
left = Math.max(left, 10);
|
|
} else {
|
|
left = Math.min(left, viewportWidth - 10);
|
|
}
|
|
|
|
setMenuPosition({
|
|
top: openUpward
|
|
? buttonRect.top - 10
|
|
: buttonRect.bottom + 10,
|
|
left: left,
|
|
maxHeight: `${maxHeight}px`,
|
|
openUpward: openUpward,
|
|
align: align
|
|
});
|
|
} else if (isFullscreen && !isRotated) {
|
|
// Fullscreen Mode (not rotated): Use container-relative coordinates
|
|
let top = 0;
|
|
let left = 0;
|
|
let el: HTMLElement | null = buttonRef.current;
|
|
|
|
while (el && el !== containerRef.current) {
|
|
top += el.offsetTop;
|
|
left += el.offsetLeft;
|
|
el = el.offsetParent as HTMLElement;
|
|
}
|
|
|
|
const buttonHeight = buttonRef.current.offsetHeight;
|
|
const buttonWidth = buttonRef.current.offsetWidth;
|
|
const containerWidth = containerRef.current.offsetWidth;
|
|
const containerHeight = containerRef.current.offsetHeight;
|
|
|
|
const spaceBelow = containerHeight - (top + buttonHeight) - 10;
|
|
const spaceAbove = top - 10;
|
|
|
|
const estimatedMenuHeight = 250;
|
|
const actualMenuHeight = menuRef.current?.offsetHeight || estimatedMenuHeight;
|
|
|
|
const openUpward = spaceBelow < Math.min(actualMenuHeight, 200) && spaceAbove > spaceBelow;
|
|
const maxHeight = openUpward
|
|
? Math.min(spaceAbove, actualMenuHeight)
|
|
: Math.min(spaceBelow, containerHeight * 0.7);
|
|
|
|
const isLeftHalf = left < containerWidth / 2;
|
|
const align = isLeftHalf ? 'left' : 'right';
|
|
|
|
setMenuPosition({
|
|
top: openUpward
|
|
? top - 10
|
|
: top + buttonHeight + 10,
|
|
left: isLeftHalf ? left : left + buttonWidth,
|
|
maxHeight: `${maxHeight}px`,
|
|
openUpward: openUpward,
|
|
align: align
|
|
});
|
|
} else {
|
|
// Rotated Mode: Fullscreen/Landscape forced
|
|
// Use Container Coordinates (offset loop) and Portal to Container
|
|
// This ensures rotation transforms apply correctly to the menu
|
|
|
|
let top = 0;
|
|
let left = 0;
|
|
let el: HTMLElement | null = buttonRef.current;
|
|
|
|
while (el && el !== containerRef.current) {
|
|
top += el.offsetTop;
|
|
left += el.offsetLeft;
|
|
el = el.offsetParent as HTMLElement;
|
|
}
|
|
|
|
const buttonWidth = buttonRef.current.offsetWidth;
|
|
const buttonHeight = buttonRef.current.offsetHeight;
|
|
const containerWidth = containerRef.current.offsetWidth;
|
|
const containerHeight = containerRef.current.offsetHeight;
|
|
|
|
// In rotated mode (90deg CW):
|
|
// Landscape Vertical Axis = Container X Axis (left in code)
|
|
// Landscape Horizontal Axis = Container Y Axis (top in code)
|
|
|
|
// Visual available space in landscape:
|
|
// Top of landscape is Container Left (x=0)
|
|
// Bottom of landscape is Container Right (x=H_cont)
|
|
const spaceToLandscapeTop = left;
|
|
const spaceToLandscapeBottom = containerWidth - (left + buttonWidth);
|
|
|
|
const estimatedMenuHeight = 250;
|
|
const actualMenuHeight = menuRef.current?.offsetHeight || estimatedMenuHeight;
|
|
|
|
const openUpward = spaceToLandscapeBottom < Math.min(actualMenuHeight, 200) && spaceToLandscapeTop > spaceToLandscapeBottom;
|
|
const maxHeight = openUpward
|
|
? Math.min(spaceToLandscapeTop - 10, actualMenuHeight)
|
|
: Math.min(spaceToLandscapeBottom - 10, containerHeight * 0.7);
|
|
|
|
// Horizontal alignment (Landscape):
|
|
// Landscape Right = Container Top (y=0)
|
|
// Landscape Left = Container Bottom (y=H_cont)
|
|
const isLandscapeRightHalf = top < containerHeight / 2;
|
|
const align = isLandscapeRightHalf ? 'left' : 'right';
|
|
|
|
setMenuPosition({
|
|
top: top, // Fixed horizontal container coordinate
|
|
left: left, // Fixed vertical container coordinate
|
|
maxHeight: `${maxHeight}px`,
|
|
openUpward: openUpward,
|
|
align: align
|
|
});
|
|
}
|
|
}, [containerRef, isRotated, isFullscreen]);
|
|
|
|
|
|
|
|
// 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]);
|
|
|
|
React.useEffect(() => {
|
|
if (showSpeedMenu) {
|
|
calculateMenuPosition();
|
|
const timer = setTimeout(calculateMenuPosition, 50);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [showSpeedMenu, calculateMenuPosition, isRotated]);
|
|
|
|
const handleToggle = () => {
|
|
if (!showSpeedMenu) {
|
|
calculateMenuPosition();
|
|
}
|
|
onToggleSpeedMenu();
|
|
};
|
|
|
|
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 ${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:
|
|
// menuPosition.left is Container X (Landscape Vertical)
|
|
// menuPosition.top is Container Y (Landscape Horizontal)
|
|
|
|
// Vertical Anchoring (Above/Below Button)
|
|
...(menuPosition.openUpward ? {
|
|
right: `calc(100% - ${menuPosition.left}px + 10px)`,
|
|
left: 'auto'
|
|
} : {
|
|
left: `${menuPosition.left + buttonRef.current?.offsetWidth! + 10}px`,
|
|
right: 'auto'
|
|
}),
|
|
|
|
// Horizontal Anchoring (Left/Right to Button)
|
|
top: `${menuPosition.top}px`,
|
|
transform: menuPosition.align === 'right' ? 'translateY(-100%)' : 'none',
|
|
} : {
|
|
// Normal Mode
|
|
top: `${menuPosition.top}px`,
|
|
left: `${menuPosition.left}px`,
|
|
transform: menuPosition.align === 'right' ? 'translateX(-100%)' : 'none',
|
|
}),
|
|
maxHeight: menuPosition.maxHeight,
|
|
}}
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onTouchStart={(e) => e.stopPropagation()}
|
|
>
|
|
{speeds.map((speed) => (
|
|
<button
|
|
key={speed}
|
|
onClick={() => onSpeedChange(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)]'
|
|
}`}
|
|
>
|
|
{speed}x
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="relative">
|
|
<button
|
|
ref={buttonRef}
|
|
onClick={handleToggle}
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
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
|
|
</button>
|
|
|
|
{/* Speed Menu (Portal) - Portal to container to inherit rotation but avoid overflow clipping if container has it?
|
|
Actually, the container usually has overflow-hidden.
|
|
If we portal to containerRef, it is inside the container div.
|
|
If the container div has overflow-hidden, the menu will be clipped.
|
|
BUT DesktopVideoPlayer structure:
|
|
<div ref={containerRef} ...> (relative, no overflow hidden?)
|
|
<div className="absolute inset-0 overflow-hidden ..."> (video wrapper)
|
|
<DesktopOverlayWrapper ...>
|
|
So containerRef itself (outer wrapper) seems to NOT have overflow-hidden in my memory?
|
|
Checking DesktopVideoPlayer.tsx:
|
|
className={`kvideo-container relative aspect-video ...`}
|
|
It does NOT have overflow-hidden. The inner div does.
|
|
So portaling to containerRef is SAFE and CORRECT.
|
|
*/}
|
|
{/* Speed Menu (Portal) */}
|
|
{showSpeedMenu && typeof document !== 'undefined' && createPortal(MenuContent, ((isRotated || isFullscreen) && containerRef.current) ? containerRef.current : document.body)}
|
|
</div>
|
|
);
|
|
}
|