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

feat: Adjust menu positioning logic for rotated mode by modifying left, align, top, and bottom styles.

Browse Source
This commit is contained in:
kuekhaoyang
2026-02-04 19:42:31 +08:00
parent b12bdc06da
commit 5d13724af4
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/player/desktop/DesktopMoreMenu.tsx
+10 -6
View File
@@ -157,18 +157,18 @@ export function DesktopMoreMenu({
if (openUpward) {
setMenuPosition({
top: top - 10,
left: left + buttonWidth,
left: left, // Align to left side in rotated mode (no horizontal shift needed)
maxHeight: `${maxHeight}px`,
openUpward: true,
align: 'right'
align: 'left' // No transform needed in rotated mode
});
} else {
setMenuPosition({
top: top + buttonHeight + 10,
left: left + buttonWidth,
left: left,
maxHeight: `${maxHeight}px`,
openUpward: false,
align: 'right'
align: 'left'
});
}
}
@@ -208,12 +208,16 @@ 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: `${menuPosition.top}px`, // Always use absolute top
top: isRotated
? (menuPosition.openUpward ? 'auto' : `${menuPosition.top}px`)
: `${menuPosition.top}px`, // Absolute top for viewport mode
bottom: isRotated
? (menuPosition.openUpward ? `calc(100% - ${menuPosition.top}px + 10px)` : 'auto')
: 'auto',
left: `${menuPosition.left}px`,
// If aligned right, shift left by 100% of own width. If aligned left, stay at 0.
transform: menuPosition.align === 'right' ? 'translateX(-100%)' : 'none',
maxHeight: menuPosition.maxHeight,
bottom: 'auto'
}}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
components/player/desktop/DesktopSpeedMenu.tsx
+4 -4
View File
@@ -127,18 +127,18 @@ export function DesktopSpeedMenu({
if (openUpward) {
setMenuPosition({
top: top - 10,
left: left + buttonWidth,
left: left, // In rotated mode, align to left side of button (no horizontal shift)
maxHeight: `${maxHeight}px`,
openUpward: true,
align: 'right'
align: 'left' // No transform needed in rotated mode
});
} else {
setMenuPosition({
top: top + buttonHeight + 10,
left: left + buttonWidth,
left: left,
maxHeight: `${maxHeight}px`,
openUpward: false,
align: 'right'
align: 'left'
});
}
}