mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fix Calling PiP for RTL languages

Browse source
This commit is contained in:
ayumi-signal 2023-12-21 11:05:59 -08:00 • committed by GitHub
parent cce7424e76
commit fb52d378d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ts/components/CallingPip.tsx
View file

@ -83,6 +83,8 @@ export function CallingPip({
switchFromPresentationView, switchFromPresentationView,
togglePip, togglePip,
}: PropsType): JSX.Element { }: PropsType): JSX.Element {
const isRTL = i18n.getLocaleDirection() === 'rtl';
const videoContainerRef = React.useRef<null | HTMLDivElement>(null); const videoContainerRef = React.useRef<null | HTMLDivElement>(null);
const localVideoRef = React.useRef(null); const localVideoRef = React.useRef(null);
@ -131,11 +133,11 @@ export function CallingPip({
const snapCandidates: Array<SnapCandidate> = [ const snapCandidates: Array<SnapCandidate> = [
{ {
mode: PositionMode.SnapToLeft, mode: PositionMode.SnapToLeft,
distanceToEdge: offsetX, distanceToEdge: isRTL ? innerWidth - (offsetX + PIP_WIDTH) : offsetX,
}, },
{ {
mode: PositionMode.SnapToRight, mode: PositionMode.SnapToRight,
distanceToEdge: innerWidth - (offsetX + PIP_WIDTH), distanceToEdge: isRTL ? offsetX : innerWidth - (offsetX + PIP_WIDTH),
}, },
{ {
mode: PositionMode.SnapToTop, mode: PositionMode.SnapToTop,
@ -165,14 +167,14 @@ export function CallingPip({
case PositionMode.SnapToBottom: case PositionMode.SnapToBottom:
setPositionState({ setPositionState({
mode: snapTo.mode, mode: snapTo.mode,
offsetX, offsetX: isRTL ? innerWidth - (offsetX + PIP_WIDTH) : offsetX,
}); });
break; break;
default: default:
throw missingCaseError(snapTo.mode); throw missingCaseError(snapTo.mode);
} }
} }
}, [positionState, setPositionState]); }, [isRTL, positionState, setPositionState]);
React.useEffect(() => { React.useEffect(() => {
if (positionState.mode === PositionMode.BeingDragged) { if (positionState.mode === PositionMode.BeingDragged) {
@ -209,7 +211,11 @@ export function CallingPip({
switch (positionState.mode) { switch (positionState.mode) {
case PositionMode.BeingDragged: case PositionMode.BeingDragged:
return [ return [
positionState.mouseX - positionState.dragOffsetX, isRTL
? windowWidth -
positionState.mouseX -
(PIP_WIDTH - positionState.dragOffsetX)
: positionState.mouseX - positionState.dragOffsetX,
positionState.mouseY - positionState.dragOffsetY, positionState.mouseY - positionState.dragOffsetY,
]; ];
case PositionMode.SnapToLeft: case PositionMode.SnapToLeft:
@ -247,7 +253,8 @@ export function CallingPip({
default: default:
throw missingCaseError(positionState); throw missingCaseError(positionState);
} }
}, [windowWidth, windowHeight, positionState]); }, [isRTL, windowWidth, windowHeight, positionState]);
const localizedTranslateX = isRTL ? -translateX : translateX;
return ( return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@ -258,6 +265,7 @@ export function CallingPip({
if (!node) { if (!node) {
return; return;
} }
const rect = node.getBoundingClientRect(); const rect = node.getBoundingClientRect();
const dragOffsetX = ev.clientX - rect.left; const dragOffsetX = ev.clientX - rect.left;
const dragOffsetY = ev.clientY - rect.top; const dragOffsetY = ev.clientY - rect.top;
@ -276,7 +284,7 @@ export function CallingPip({
positionState.mode === PositionMode.BeingDragged positionState.mode === PositionMode.BeingDragged
? '-webkit-grabbing' ? '-webkit-grabbing'
: '-webkit-grab', : '-webkit-grab',
transform: `translate3d(${translateX}px,calc(${translateY}px - var(--titlebar-height)), 0)`, transform: `translate3d(${localizedTranslateX}px,calc(${translateY}px - var(--titlebar-height)), 0)`,
transition: transition:
positionState.mode === PositionMode.BeingDragged positionState.mode === PositionMode.BeingDragged
? 'none' ? 'none'