Fix three open bugs from LOTUS_BUGS.md
- EditHistoryModal: decrypt fetched edit events in E2EE rooms via mx.decryptEventIfNeeded() before rendering; previously events not found in the room cache showed ciphertext or "(no text)" - CallEmbedProvider: add touch support for PiP resize corners; extracted shared applyResize() helper; onTouchStart wired to all four corners alongside existing onMouseDown - RoomView: skip chatBgStyle when glassmorphism is active; document.body already carries the background for the blur effect, rendering it twice doubled CSS animation work unnecessarily Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -722,6 +722,54 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
|
||||
document.addEventListener('touchend', onTouchEnd);
|
||||
};
|
||||
|
||||
function applyResize(
|
||||
el: HTMLElement,
|
||||
corner: Corner,
|
||||
sx: number,
|
||||
sy: number,
|
||||
sw: number,
|
||||
sh: number,
|
||||
sl: number,
|
||||
st: number,
|
||||
cx: number,
|
||||
cy: number,
|
||||
) {
|
||||
const dx = cx - sx;
|
||||
const dy = cy - sy;
|
||||
let w = sw;
|
||||
let h = sh;
|
||||
let l = sl;
|
||||
let t = st;
|
||||
if (corner === 'se') {
|
||||
w = sw + dx;
|
||||
h = sh + dy;
|
||||
}
|
||||
if (corner === 'sw') {
|
||||
w = sw - dx;
|
||||
h = sh + dy;
|
||||
l = sl + sw - Math.max(PIP_MIN_W, w);
|
||||
}
|
||||
if (corner === 'ne') {
|
||||
w = sw + dx;
|
||||
h = sh - dy;
|
||||
t = st + sh - Math.max(PIP_MIN_H, h);
|
||||
}
|
||||
if (corner === 'nw') {
|
||||
w = sw - dx;
|
||||
h = sh - dy;
|
||||
l = sl + sw - Math.max(PIP_MIN_W, w);
|
||||
t = st + sh - Math.max(PIP_MIN_H, h);
|
||||
}
|
||||
w = Math.max(PIP_MIN_W, Math.min(w, window.innerWidth));
|
||||
h = Math.max(PIP_MIN_H, Math.min(h, window.innerHeight));
|
||||
l = Math.max(0, Math.min(l, window.innerWidth - PIP_MIN_W));
|
||||
t = Math.max(0, Math.min(t, window.innerHeight - PIP_MIN_H));
|
||||
el.style.width = `${w}px`;
|
||||
el.style.height = `${h}px`;
|
||||
el.style.left = `${l}px`;
|
||||
el.style.top = `${t}px`;
|
||||
}
|
||||
|
||||
const handleResizeMouseDown = (e: React.MouseEvent, corner: Corner) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
@@ -737,40 +785,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
|
||||
document.body.style.cursor = `${corner}-resize`;
|
||||
document.body.style.userSelect = 'none';
|
||||
const onMove = (ev: MouseEvent) => {
|
||||
const dx = ev.clientX - sx;
|
||||
const dy = ev.clientY - sy;
|
||||
let w = sw;
|
||||
let h = sh;
|
||||
let l = sl;
|
||||
let t = st;
|
||||
if (corner === 'se') {
|
||||
w = sw + dx;
|
||||
h = sh + dy;
|
||||
}
|
||||
if (corner === 'sw') {
|
||||
w = sw - dx;
|
||||
h = sh + dy;
|
||||
l = sl + sw - Math.max(PIP_MIN_W, w);
|
||||
}
|
||||
if (corner === 'ne') {
|
||||
w = sw + dx;
|
||||
h = sh - dy;
|
||||
t = st + sh - Math.max(PIP_MIN_H, h);
|
||||
}
|
||||
if (corner === 'nw') {
|
||||
w = sw - dx;
|
||||
h = sh - dy;
|
||||
l = sl + sw - Math.max(PIP_MIN_W, w);
|
||||
t = st + sh - Math.max(PIP_MIN_H, h);
|
||||
}
|
||||
w = Math.max(PIP_MIN_W, Math.min(w, window.innerWidth));
|
||||
h = Math.max(PIP_MIN_H, Math.min(h, window.innerHeight));
|
||||
l = Math.max(0, Math.min(l, window.innerWidth - PIP_MIN_W));
|
||||
t = Math.max(0, Math.min(t, window.innerHeight - PIP_MIN_H));
|
||||
el.style.width = `${w}px`;
|
||||
el.style.height = `${h}px`;
|
||||
el.style.left = `${l}px`;
|
||||
el.style.top = `${t}px`;
|
||||
applyResize(el, corner, sx, sy, sw, sh, sl, st, ev.clientX, ev.clientY);
|
||||
};
|
||||
const onUp = () => {
|
||||
document.removeEventListener('mousemove', onMove);
|
||||
@@ -789,6 +804,38 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
|
||||
document.addEventListener('mouseup', onUp);
|
||||
};
|
||||
|
||||
const handleResizeTouchStart = (e: React.TouchEvent, corner: Corner) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const el = callEmbedRef.current;
|
||||
if (!el || e.touches.length !== 1) return;
|
||||
normaliseToTopLeft(el);
|
||||
const touch = e.touches[0];
|
||||
const sx = touch.clientX;
|
||||
const sy = touch.clientY;
|
||||
const sw = el.offsetWidth;
|
||||
const sh = el.offsetHeight;
|
||||
const sl = parseFloat(el.style.left);
|
||||
const st = parseFloat(el.style.top);
|
||||
const onMove = (ev: TouchEvent) => {
|
||||
if (ev.touches.length !== 1) return;
|
||||
ev.preventDefault();
|
||||
const t = ev.touches[0];
|
||||
applyResize(el, corner, sx, sy, sw, sh, sl, st, t.clientX, t.clientY);
|
||||
};
|
||||
const onEnd = () => {
|
||||
document.removeEventListener('touchmove', onMove);
|
||||
document.removeEventListener('touchend', onEnd);
|
||||
activeDragCleanupRef.current = null;
|
||||
};
|
||||
activeDragCleanupRef.current = () => {
|
||||
document.removeEventListener('touchmove', onMove);
|
||||
document.removeEventListener('touchend', onEnd);
|
||||
};
|
||||
document.addEventListener('touchmove', onMove, { passive: false });
|
||||
document.addEventListener('touchend', onEnd);
|
||||
};
|
||||
|
||||
return (
|
||||
<CallEmbedContextProvider value={callEmbed}>
|
||||
{callEmbed && <CallUtils embed={callEmbed} />}
|
||||
@@ -871,6 +918,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
|
||||
<div
|
||||
key={corner}
|
||||
onMouseDown={(ev) => handleResizeMouseDown(ev, corner)}
|
||||
onTouchStart={(ev) => handleResizeTouchStart(ev, corner)}
|
||||
onClick={(ev) => ev.stopPropagation()}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
|
||||
Reference in New Issue
Block a user