LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix 5438: Keep floating player in view area

Browse source 
## Issue
5438: Keep floating player in view area

## Changes
- Restore correct z-index
    -  The bug came as a side effect of cbac2174. Redo cbac2174 to cover both close button and floating player.

- Remove wobbling when dragging to bottom-right.
    -  The extra gap introduced is fighting against react-draggable. If gaps are needed, handle it entire ourselves or do it somewhere in react-draggable; neither is worth the effort, so the gap was removed.
This commit is contained in:
infiinte-persistence 2021-01-31 22:05:05 +08:00 committed by Sean Yesmunt
parent 19275f8f3d
commit 44458c2b8c
2 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/component/fileRenderFloating/view.jsx
View file

@ -89,17 +89,16 @@ export default function FileRenderFloating(props: Props) {
} }
function clampToScreen(pos) { function clampToScreen(pos) {
const GAP_PX = 10;
const ESTIMATED_SCROLL_BAR_PX = 50; const ESTIMATED_SCROLL_BAR_PX = 50;
const FLOATING_PLAYER_CLASS = 'content__viewer--floating'; const FLOATING_PLAYER_CLASS = 'content__viewer--floating';
const fpPlayerElem = document.querySelector(`.${FLOATING_PLAYER_CLASS}`); const fpPlayerElem = document.querySelector(`.${FLOATING_PLAYER_CLASS}`);
if (fpPlayerElem) { if (fpPlayerElem) {
if (pos.x + fpPlayerElem.getBoundingClientRect().width > getScreenWidth() - ESTIMATED_SCROLL_BAR_PX) { if (pos.x + fpPlayerElem.getBoundingClientRect().width > getScreenWidth() - ESTIMATED_SCROLL_BAR_PX) {
pos.x = getScreenWidth() - fpPlayerElem.getBoundingClientRect().width - ESTIMATED_SCROLL_BAR_PX - GAP_PX; pos.x = getScreenWidth() - fpPlayerElem.getBoundingClientRect().width - ESTIMATED_SCROLL_BAR_PX;
} }
if (pos.y + fpPlayerElem.getBoundingClientRect().height > getScreenHeight()) { if (pos.y + fpPlayerElem.getBoundingClientRect().height > getScreenHeight()) {
pos.y = getScreenHeight() - fpPlayerElem.getBoundingClientRect().height - GAP_PX * 2; pos.y = getScreenHeight() - fpPlayerElem.getBoundingClientRect().height;
} }
} }
} }

1
ui/scss/component/_content.scss
View file

@ -15,6 +15,7 @@
height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height)); height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
overflow: hidden; overflow: hidden;
left: calc(var(--spacing-l) + var(--spacing-s)); left: calc(var(--spacing-l) + var(--spacing-s));
z-index: 9999;
&:hover { &:hover {
.content__floating-close { .content__floating-close {