diff --git a/packages/call/src/store.tsx b/packages/call/src/store.tsx
index deecb72..5965180 100644
--- a/packages/call/src/store.tsx
+++ b/packages/call/src/store.tsx
@@ -15,10 +15,21 @@ import {
RoomEvent,
type RemoteTrack,
Track,
+ setLogExtension,
+ getLogger,
} from "livekit-client";
import z from "zod";
import { toast as sonnerToast } from "sonner";
+// logging
+setLogExtension(
+ (level, message, context) =>
+ context
+ ? log(level, "livekit", "blue", message, context)
+ : log(level, "livekit", "blue", message),
+ getLogger("tensamin"),
+);
+
type CallState = "closed" | "closing" | "connecting" | "open" | "encrypting";
type CallView = "preview" | "focused" | "grid";
type CurrentCallData =
@@ -76,6 +87,7 @@ const e2eeWorker = new Worker(
const room = new Room({
dynacast: true,
adaptiveStream: true,
+ loggerName: "tensamin",
encryption: {
keyProvider,
worker: e2eeWorker,
@@ -83,6 +95,7 @@ const room = new Room({
});
const remoteAudioElements = new Map
();
+// audio helpers
function attachRemoteAudio(trackSid: string, element: HTMLMediaElement) {
const existingElement = remoteAudioElements.get(trackSid);
@@ -113,6 +126,7 @@ function clearRemoteAudio() {
}
}
+// utils
function requireRuntime(runtime: Runtime | null): Runtime {
if (!runtime) {
throw new Error("Call store is not initialized");
@@ -132,6 +146,7 @@ export function syncParticipantState() {
});
}
+// set state functions
export function setCallRuntime(runtime: Runtime) {
useCall.setState({ runtime });
}
@@ -154,6 +169,7 @@ export function setCurrentCallData(
useCall.setState({ currentCallData });
}
+// more utils
export async function openCallPage(callId: string) {
await requireRuntime(useCall.getState().runtime).navigate({
to: "/call",
@@ -225,6 +241,7 @@ export function disconnect() {
});
room.disconnect();
+ useCall.setState({ state: "closed" });
syncParticipantState();
}
@@ -594,7 +611,7 @@ export function useInitializeCall() {
});
})
.catch((err) => {
- log(1, "Call", "red", "Failed to get call data", {
+ log(1, "call", "red", "Failed to get call data", {
callId,
error: err,
});
diff --git a/packages/call/src/views/main/grid.tsx b/packages/call/src/views/main/grid.tsx
index 5cd6f5e..e3912ab 100644
--- a/packages/call/src/views/main/grid.tsx
+++ b/packages/call/src/views/main/grid.tsx
@@ -1,3 +1,173 @@
+import { RoomEvent } from "livekit-client";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useCall } from "../../store";
+
+const TILE_ASPECT_RATIO = 16 / 9;
+const GRID_GAP = 12;
+
+type GridLayout = {
+ columns: number;
+ rows: number;
+ tileWidth: number;
+ tileHeight: number;
+ rowCounts: number[];
+};
+
+function buildBalancedRows(itemCount: number, rows: number) {
+ if (itemCount === 0 || rows === 0) {
+ return [];
+ }
+
+ const baseCount = Math.floor(itemCount / rows);
+ const remainder = itemCount % rows;
+
+ return Array.from(
+ { length: rows },
+ (_, index) => baseCount + (index < remainder ? 1 : 0),
+ );
+}
+
+function calculateOptimalGridLayout(
+ containerWidth: number,
+ containerHeight: number,
+ itemCount: number,
+): GridLayout {
+ if (containerWidth <= 0 || containerHeight <= 0 || itemCount <= 0) {
+ return {
+ columns: 0,
+ rows: 0,
+ tileWidth: 0,
+ tileHeight: 0,
+ rowCounts: [],
+ };
+ }
+
+ let bestLayout: GridLayout = {
+ columns: 1,
+ rows: itemCount,
+ tileWidth: 0,
+ tileHeight: 0,
+ rowCounts: Array.from({ length: itemCount }, () => 1),
+ };
+
+ for (let columns = 1; columns <= itemCount; columns++) {
+ const rows = Math.ceil(itemCount / columns);
+ const maxTileWidth =
+ (containerWidth - GRID_GAP * Math.max(columns - 1, 0)) / columns;
+ const maxTileHeight =
+ (containerHeight - GRID_GAP * Math.max(rows - 1, 0)) / rows;
+ const tileWidth = Math.min(maxTileWidth, maxTileHeight * TILE_ASPECT_RATIO);
+ const tileHeight = tileWidth / TILE_ASPECT_RATIO;
+
+ if (tileWidth <= 0 || tileHeight <= 0) {
+ continue;
+ }
+
+ const currentArea = tileWidth * tileHeight;
+ const bestArea = bestLayout.tileWidth * bestLayout.tileHeight;
+
+ if (currentArea > bestArea) {
+ bestLayout = {
+ columns,
+ rows,
+ tileWidth,
+ tileHeight,
+ rowCounts: buildBalancedRows(itemCount, rows),
+ };
+ }
+ }
+
+ return bestLayout;
+}
+
export default function View() {
- return Grid
;
+ const room = useCall((state) => state.room);
+ const containerRef = useRef(null);
+
+ const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+ const [participantCount, setParticipantCount] = useState(
+ () => room.remoteParticipants.size + 1,
+ );
+
+ useEffect(() => {
+ const element = containerRef.current;
+
+ if (!element) {
+ return;
+ }
+
+ const observer = new ResizeObserver(([entry]) => {
+ const { width, height } = entry.contentRect;
+ setContainerSize({ width, height });
+ });
+
+ observer.observe(element);
+
+ return () => observer.disconnect();
+ }, []);
+
+ useEffect(() => {
+ const syncParticipantCount = () => {
+ setParticipantCount(room.remoteParticipants.size + 1);
+ };
+
+ syncParticipantCount();
+
+ room.on(RoomEvent.Connected, syncParticipantCount);
+ room.on(RoomEvent.Disconnected, syncParticipantCount);
+ room.on(RoomEvent.ParticipantConnected, syncParticipantCount);
+ room.on(RoomEvent.ParticipantDisconnected, syncParticipantCount);
+
+ return () => {
+ room.off(RoomEvent.Connected, syncParticipantCount);
+ room.off(RoomEvent.Disconnected, syncParticipantCount);
+ room.off(RoomEvent.ParticipantConnected, syncParticipantCount);
+ room.off(RoomEvent.ParticipantDisconnected, syncParticipantCount);
+ };
+ }, [room]);
+
+ const layout = useMemo(
+ () =>
+ calculateOptimalGridLayout(
+ containerSize.width,
+ containerSize.height,
+ participantCount,
+ ),
+ [containerSize.height, containerSize.width, participantCount],
+ );
+
+ const rows = useMemo(() => {
+ let nextParticipant = 1;
+
+ return layout.rowCounts.map((count, rowIndex) => {
+ const participants = Array.from(
+ { length: count },
+ () => nextParticipant++,
+ );
+ return { rowIndex, participants };
+ });
+ }, [layout.rowCounts]);
+
+ return (
+
+
+ {rows.map((row) => (
+
+ {row.participants.map((participant) => (
+
+ Test {participant}
+
+ ))}
+
+ ))}
+
+