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

split into two refs

Browse source
This commit is contained in:
Gigiaj 2025-05-10 20:41:06 -05:00
parent cd233053bc
commit a1c0b79cbd
1 changed files with 10 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/features/room/CallView.tsx
View file

@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef } from 'react';
import { Box } from 'folds'; import { Box } from 'folds';
import { RoomViewHeader } from './RoomViewHeader'; import { RoomViewHeader } from './RoomViewHeader';
import { useCallState } from '../../pages/client/CallProvider'; import { useCallState } from '../../pages/client/CallProvider';
import { RefContext } from '../../pages/call/PersistentCallContainer'; import { PrimaryRefContext, BackupRefContext } from '../../pages/call/PersistentCallContainer';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize'; import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) { function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
@ -31,26 +31,26 @@ type OriginalStyles = {
}; };
interface CallViewOutletContext { interface CallViewOutletContext {
iframeRef: React.RefObject<HTMLIFrameElement | null>; primaryIframeRef: React.RefObject<HTMLIFrameElement | null>;
backupIframeRef: React.RefObject<HTMLIFrameElement | null>; backupIframeRef: React.RefObject<HTMLIFrameElement | null>;
} }
export function CallView({ room, eventId }: { room: Room; eventId?: string }) { export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
const { iframeRef, backupIframeRef } = useContext(RefContext); const primaryIframeRef = useContext(PrimaryRefContext);
const backupIframeRef = useContext(BackupRefContext);
const iframeHostRef = useRef<HTMLDivElement>(null); const iframeHostRef = useRef<HTMLDivElement>(null);
const originalIframeStylesRef = useRef<OriginalStyles | null>(null); const originalIframeStylesRef = useRef<OriginalStyles | null>(null);
const { activeCallRoomId, isPrimaryIframe, isChatOpen } = useCallState(); const { activeCallRoomId, isPrimaryIframe, isChatOpen } = useCallState();
const isViewingActiveCall = useMemo( const isViewingActiveCall = useMemo(
() => activeCallRoomId !== null && activeCallRoomId === room.roomId, () => activeCallRoomId !== null && activeCallRoomId === room.roomId,
[activeCallRoomId] [activeCallRoomId, room.roomId]
); );
const screenSize = useScreenSizeContext(); const screenSize = useScreenSizeContext();
const isMobile = screenSize === ScreenSize.Mobile; const isMobile = screenSize === ScreenSize.Mobile;
const activeIframeDisplayRef = const activeIframeDisplayRef = isPrimaryIframe ? primaryIframeRef : backupIframeRef;
!isPrimaryIframe || isViewingActiveCall ? iframeRef : backupIframeRef;
const applyFixedPositioningToIframe = useCallback(() => { const applyFixedPositioningToIframe = useCallback(() => {
const iframeElement = activeIframeDisplayRef?.current; const iframeElement = activeIframeDisplayRef?.current;
@ -86,16 +86,18 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
iframeElement.style.visibility = 'visible'; iframeElement.style.visibility = 'visible';
iframeElement.style.pointerEvents = 'auto'; iframeElement.style.pointerEvents = 'auto';
} }
}, [activeIframeDisplayRef, iframeHostRef]); }, [activeIframeDisplayRef, room]);
const debouncedApplyFixedPositioning = useCallback(debounce(applyFixedPositioningToIframe, 50), [ const debouncedApplyFixedPositioning = useCallback(debounce(applyFixedPositioningToIframe, 50), [
applyFixedPositioningToIframe, applyFixedPositioningToIframe,
primaryIframeRef,
backupIframeRef,
]); ]);
useEffect(() => { useEffect(() => {
const iframeElement = activeIframeDisplayRef?.current; const iframeElement = activeIframeDisplayRef?.current;
const hostElement = iframeHostRef?.current; const hostElement = iframeHostRef?.current;
if (isPrimaryIframe || (isViewingActiveCall && iframeElement && hostElement)) { if (!isPrimaryIframe || (isViewingActiveCall && iframeElement && hostElement)) {
applyFixedPositioningToIframe(); applyFixedPositioningToIframe();
const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning); const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning);