Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 14:52:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(context menu): calculate menu position inside safe area

Browse source
This commit is contained in:
Botzy 2025-01-31 14:04:36 +02:00
parent 62b8a6a5cc
commit 4648aef21b
1 changed files with 20 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/routes/Player/Player.js
View file

@ -248,10 +248,27 @@ const Player = ({ urlParams, queryParams }) => {
const onContextMenu = React.useCallback((e) => {
e.preventDefault();
const { clientX, clientY } = e;
const safeAreaTop = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-top)')) || 0;
const safeAreaRight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-right)')) || 0;
const safeAreaBottom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)')) || 0;
const safeAreaLeft = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-left)')) || 0;
const maxX = screenWidth - safeAreaRight;
const maxY = screenHeight - safeAreaBottom;
const menuX = clientX < safeAreaLeft
? safeAreaLeft
: clientX > maxX
? maxX
: clientX;
const menuY = clientY < safeAreaTop
? safeAreaTop
: clientY > maxY
? maxY
: clientY;
const menuSize = contextMenuRef?.current?.getBoundingClientRect();
const adjustedX = clientX + menuSize.width > screenWidth ? clientX - menuSize.width : clientX;
const adjustedY = clientY + menuSize.height > screenHeight ? clientY - menuSize.height : clientY;
const adjustedX = menuX + menuSize.width > maxX ? menuX - menuSize.width : menuX;
const adjustedY = menuY + menuSize.height > maxY ? menuY - menuSize.height : menuY;
setContextCoords({
x: adjustedX,
@ -699,7 +716,7 @@ const Player = ({ urlParams, queryParams }) => {
menuRef={contextMenuRef}
style={
{
zIndex: 1,
zIndex: contextMenuOpen ? 1 : -1,
top: `${contextCoords.y}px`,
left: `${contextCoords.x}px`,
right: 'auto',