mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-05 15:00:30 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Update CallView.tsx to accomodate restructuring of Room, RoomView and CallView + suggested changes

Browse source
This commit is contained in:
Gimle Larpes 2025-07-31 21:05:15 +02:00
parent e504a9ef4c
commit 528cbc5c79
1 changed files with 12 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/app/features/call/CallView.tsx
View file

@ -1,4 +1,3 @@
/* eslint-disable no-nested-ternary */
import { Room } from 'matrix-js-sdk'; import { Room } from 'matrix-js-sdk';
import React, { useContext, useMemo, useCallback, useEffect, useRef } from 'react'; import React, { useContext, useMemo, useCallback, useEffect, useRef } from 'react';
import { Box } from 'folds'; import { Box } from 'folds';
@ -8,16 +7,7 @@ import {
BackupRefContext, BackupRefContext,
} from '../../pages/client/call/PersistentCallContainer'; } from '../../pages/client/call/PersistentCallContainer';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize'; import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
import { useDebounce } from '../../hooks/useDebounce';
function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
let timeoutId: ReturnType<typeof setTimeout> | null = null;
return (...args: Parameters<F>): void => {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => func(...args), waitFor);
};
}
type OriginalStyles = { type OriginalStyles = {
position?: string; position?: string;
@ -45,7 +35,7 @@ export function CallView({ room }: { room: Room }) {
); );
const screenSize = useScreenSizeContext(); const screenSize = useScreenSizeContext();
const isMobile = screenSize === ScreenSize.Mobile; /* eslint-disable-next-line no-nested-ternary */
const activeIframeDisplayRef = isPrimaryIframe const activeIframeDisplayRef = isPrimaryIframe
? isViewingActiveCall ? isViewingActiveCall
? primaryIframeRef ? primaryIframeRef
@ -90,11 +80,10 @@ export function CallView({ room }: { room: Room }) {
} }
}, [activeIframeDisplayRef, room]); }, [activeIframeDisplayRef, room]);
const debouncedApplyFixedPositioning = useCallback(debounce(applyFixedPositioningToIframe, 50), [ const debouncedApplyFixedPositioning = useDebounce(applyFixedPositioningToIframe, {
applyFixedPositioningToIframe, wait: 50,
primaryIframeRef, immediate: false,
backupIframeRef, });
]);
useEffect(() => { useEffect(() => {
const iframeElement = activeIframeDisplayRef?.current; const iframeElement = activeIframeDisplayRef?.current;
const hostElement = iframeHostRef?.current; const hostElement = iframeHostRef?.current;
@ -103,7 +92,7 @@ export function CallView({ room }: { room: Room }) {
applyFixedPositioningToIframe(); applyFixedPositioningToIframe();
const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning); const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning);
resizeObserver.observe(hostElement); if (hostElement) resizeObserver.observe(hostElement);
window.addEventListener('scroll', debouncedApplyFixedPositioning, true); window.addEventListener('scroll', debouncedApplyFixedPositioning, true);
return () => { return () => {
@ -121,6 +110,8 @@ export function CallView({ room }: { room: Room }) {
originalIframeStylesRef.current = null; originalIframeStylesRef.current = null;
}; };
} }
return undefined;
}, [ }, [
activeIframeDisplayRef, activeIframeDisplayRef,
applyFixedPositioningToIframe, applyFixedPositioningToIframe,
@ -130,16 +121,10 @@ export function CallView({ room }: { room: Room }) {
room, room,
]); ]);
const isCallViewVisible = room.isCallRoom(); const isCallViewVisible = room.isCallRoom() && (screenSize === ScreenSize.Desktop || !isChatOpen);
return ( return (
<Box <Box grow="Yes" direction="Column" style={{ display: isCallViewVisible ? 'flex' : 'none' }}>
direction="Column"
style={{
width: isChatOpen ? (isMobile ? '50%' : '100%') : '100%',
display: isCallViewVisible ? (isMobile && isChatOpen ? 'none' : 'flex') : 'none',
}}
>
<div <div
ref={iframeHostRef} ref={iframeHostRef}
style={{ style={{
@ -147,7 +132,7 @@ export function CallView({ room }: { room: Room }) {
height: '100%', height: '100%',
position: 'relative', position: 'relative',
pointerEvents: 'none', pointerEvents: 'none',
display: isCallViewVisible ? 'flex' : 'none', display: 'flex',
}} }}
/> />
</Box> </Box>