tensamin/client
Watch
6
0
Fork
You've already forked client
 0
Code Issues Pull requests 3 Projects Releases 2 Packages Wiki Activity Actions

(feat): add tooltips
All checks were successful
/ deploy (push) Successful in 14m56s
Details

Browse source 
(fix): small ui and layout bug
This commit is contained in:
Alois 2026-05-09 21:12:24 +02:00
commit dd09ca943d
10 changed files with 279 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/call/src/views/main/focused.tsx
View file

@ -107,7 +107,9 @@ export default function View() {
let frameId = 0;
const syncTileLayout = () => {
const containerWidth = Math.floor(container.getBoundingClientRect().width);
const containerWidth = Math.floor(
container.getBoundingClientRect().width,
);
const tileWidth = Math.floor(focusedTile.getBoundingClientRect().width);
setIsFocusedTileFlush(Math.abs(containerWidth - tileWidth) <= 1);
@ -155,14 +157,10 @@ export default function View() {
const focusedParticipant = getParticipantById(focusedParticipantId);
const focusedParticipantHasActiveScreenShare =
activeScreenShareParticipantIdSet.has(focusedParticipantId);
const isImmersiveFocusedView =
callIsFullscreen && usersInFocusedViewHidden;
const isImmersiveFocusedView = callIsFullscreen && usersInFocusedViewHidden;
return (
<div
ref={containerRef}
className="flex h-full w-full overflow-hidden"
>
<div ref={containerRef} className="flex h-full w-full overflow-hidden">
<div
className="flex h-full w-full flex-col items-center overflow-hidden"
style={{
@ -175,7 +173,7 @@ export default function View() {
className={
isImmersiveFocusedView
? "h-full w-full overflow-hidden"
: "h-full max-w-full aspect-video overflow-hidden"
: "h-full max-w-full aspect-video overflow-hidden flex items-center"
}
>
<Base

9
packages/call/src/views/main/layout.tsx
View file

@ -7,9 +7,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
const screenRef = useRef<HTMLDivElement>(null);
const topBarRef = useRef<HTMLDivElement>(null);
const actionsRef = useRef<HTMLDivElement>(null);
const hideChromeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const hideChromeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
null,
);
const [overlayInsets, setOverlayInsets] = useState({ top: 0, bottom: 0 });
const [isImmersiveChromeVisible, setIsImmersiveChromeVisible] = useState(false);
const [isImmersiveChromeVisible, setIsImmersiveChromeVisible] =
useState(false);
useEffect(() => {
setScreenRef(screenRef);
@ -102,7 +105,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
ref={screenRef}
className={`relative w-full h-full flex flex-col ${
isImmersiveFocusedView && !immersiveChromeVisible ? "cursor-none" : ""
}`}
} ${callIsFullscreen ? "bg-background" : ""}`}
onMouseEnter={showImmersiveChrome}
onMouseMove={showImmersiveChrome}
onMouseLeave={hideImmersiveChrome}