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

feat: Center desktop player menus in normal mode and adjust right controls z-index.

Browse Source
This commit is contained in:
kuekhaoyang
2026-02-04 18:57:12 +08:00
parent b608d1031c
commit cfebce6f56
3 changed files with 23 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/player/desktop/DesktopMoreMenu.tsx
+11 -32
View File
@@ -85,29 +85,13 @@ export function DesktopMoreMenu({
if (!buttonRef.current || !containerRef.current) return;
if (!isRotated) {
// Normal Mode: Non-rotated, potentially non-fullscreen
// Use Viewport Coordinates (getBoundingClientRect) and Portal to Document Body
const buttonRect = buttonRef.current.getBoundingClientRect();
const viewportHeight = window.innerHeight;
const spaceBelow = viewportHeight - buttonRect.bottom - 10;
const spaceAbove = buttonRect.top - 10;
const estimatedMenuHeight = 450;
const actualMenuHeight = menuRef.current?.offsetHeight || estimatedMenuHeight;
const openUpward = spaceBelow < Math.min(actualMenuHeight, 300) && spaceAbove > spaceBelow;
const maxHeight = openUpward
? Math.min(spaceAbove, actualMenuHeight)
: Math.min(spaceBelow, viewportHeight * 0.7);
// Normal Mode: Non-rotated (Portrait on Mobile)
// Center the menu on screen for better visibility and touch access
setMenuPosition({
top: openUpward
? buttonRect.top - 10
: buttonRect.bottom + 10,
left: buttonRect.right, // Align right edge (transform handled in CSS)
maxHeight: `${maxHeight}px`,
openUpward: openUpward
top: window.innerHeight / 2,
left: window.innerWidth / 2,
maxHeight: '80vh',
openUpward: false
});
} else {
// Rotated Mode: Use Container Coordinates (offset loop) and Portal to Container
@@ -188,18 +172,13 @@ export function DesktopMoreMenu({
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`}
style={{
top: isRotated
? (menuPosition.openUpward ? 'auto' : `${menuPosition.top}px`)
: (menuPosition.openUpward
? 'auto'
: `${menuPosition.top}px`),
bottom: isRotated
? (menuPosition.openUpward ? `calc(100% - ${menuPosition.top}px + 10px)` : 'auto')
: (menuPosition.openUpward
? `${window.innerHeight - menuPosition.top}px`
: 'auto'),
top: `${menuPosition.top}px`, // Always use absolute top
left: `${menuPosition.left}px`,
// If not rotated (Centered), translate -50% -50% to center
// If rotated (Side), translate -100% 0 (or whatever previous logic was)
transform: !isRotated ? 'translate(-50%, -50%)' : 'translateX(-100%)',
maxHeight: menuPosition.maxHeight,
bottom: 'auto'
}}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
components/player/desktop/DesktopRightControls.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export function DesktopRightControls({
onShowCastMenu
}: DesktopRightControlsProps) {
return (
<div className="flex items-center gap-3">
<div className="relative z-50 flex items-center gap-3">
{/* Picture-in-Picture */}
{
isPiPSupported && (
components/player/desktop/DesktopSpeedMenu.tsx
+11 -36
View File
@@ -52,32 +52,13 @@ export function DesktopSpeedMenu({
if (!buttonRef.current || !containerRef.current) return;
if (!isRotated) {
// Normal Mode: Non-rotated, potentially non-fullscreen
// Use Viewport Coordinates (getBoundingClientRect) and Portal to Document Body
// This allows the menu to break out of the video container (overflow issue)
const buttonRect = buttonRef.current.getBoundingClientRect();
// We want it to be positioned relative to the viewport
// buttonRect.top/left are already viewport coordinates
const viewportHeight = window.innerHeight;
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);
// Normal Mode: Non-rotated (Portrait on Mobile)
// Center the menu on screen for better visibility and touch access
setMenuPosition({
top: openUpward
? buttonRect.top - 10 // Bottom of menu at top of button
: buttonRect.bottom + 10, // Top of menu at bottom of button
left: buttonRect.right, // Align right edge (transform handled in CSS)
maxHeight: `${maxHeight}px`,
openUpward: openUpward
top: window.innerHeight / 2,
left: window.innerWidth / 2,
maxHeight: '80vh',
openUpward: false
});
} else {
// Rotated Mode: Fullscreen/Landscape forced
@@ -161,19 +142,13 @@ export function DesktopSpeedMenu({
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`}
style={{
top: isRotated
? (menuPosition.openUpward ? 'auto' : `${menuPosition.top}px`)
: (menuPosition.openUpward
? 'auto' // Set via bottom if openUpward
: `${menuPosition.top}px`),
bottom: isRotated
? (menuPosition.openUpward ? `calc(100% - ${menuPosition.top}px + 10px)` : 'auto')
: (menuPosition.openUpward
? `${window.innerHeight - menuPosition.top}px` // Use calculated viewport top to derive bottom
: 'auto'),
top: `${menuPosition.top}px`, // Always use absolute top
left: `${menuPosition.left}px`,
transform: 'translateX(-100%)',
// If not rotated (Centered), translate -50% -50% to center
// If rotated (Side), translate -100% 0 (or whatever previous logic was)
transform: !isRotated ? 'translate(-50%, -50%)' : 'translateX(-100%)',
maxHeight: menuPosition.maxHeight,
bottom: 'auto'
}}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}