Bug Report: Local participant tile displayed as large tile when alone in room

[edwin-revstar]

Bug: Local participant tile displayed as large tile when alone in room

Description

When I'm the only participant in a room, my own tile (local participant) is being displayed as a large tile instead of a thumbnail. This creates a confusing user experience where I see my own camera feed prominently displayed.

Environment

• Package: @daily-co/react-native-daily-js v0.81.0
• React Native: v0.79.2
• Platform: iOS/Android
• Expo: ~53.0.9

Expected Behavior

When I'm alone in the room, my local tile should be displayed as a thumbnail, not as a large tile.

Actual Behavior

My local participant tile is displayed as a large tile when I'm the only person in the room.

Steps to Reproduce

1. Join a Daily.co room alone
2. Observe that your own video tile is displayed as a large tile
3. Expected: Should be displayed as a thumbnail

Root Cause Analysis

The issue is in the tile rendering logic in CallPanel.tsx at line 257:

Object.entries(callState.callItems).forEach(([id, callItem]) => {
  let tileType: TileType;
  if (isScreenShare(id)) {
    tileType = TileType.Full;
  } else if (isLocal(id) || containsScreenShare(callState.callItems)) {
    tileType = TileType.Thumbnail;
  } else if (participantCount(callState.callItems) <= 3) {
    tileType = TileType.Full;  // ← Problem: This executes for non-local tiles
  } else {
    tileType = TileType.Half;
  }
  // ... rest of tile rendering
});

The problem occurs because:

1. callState.callItems always contains at least 2 items when alone:

   • The "local" participant (myself)
   • My session ID as a regular participant (from callObject.participants())

2. This happens in the getCallItems() function in callState.ts (lines 99-114):

   function getCallItems(participants: { [id: string]: DailyParticipant }) {
     let callItems = { ...initialCallState.callItems }; // Always includes "local"
     for (const [id, participant] of Object.entries(participants)) {
       callItems[id] = {
         videoTrackState: participant.tracks.video,
         audioTrackState: participant.tracks.audio,
       };
       // ...
     }
     return callItems;
   }

3. The logic incorrectly evaluates tile types:

   • participantCount(callState.callItems) returns 2 (local + session ID)
   • Since participantCount <= 3, non-local tiles get TileType.Full
   • But there's actually only 1 real participant (me)

Proposed Solution

The tile type logic should account for the duplicate local participant entry. Possible approaches:

1. Filter out duplicate entries before counting participants
2. Modify participantCount() function to exclude the hardcoded "local" entry when the same participant exists with a session ID
3. Update the tile type logic to properly handle the case when there's only one real participant

Files Affected

• src/components/CallPanel/CallPanel.tsx (lines 254-293)
• src/components/CallPanel/callState.ts (lines 99-114, 139-141)

Additional Context

This issue affects the user experience significantly as users expect to see themselves in a small thumbnail when alone, not as the main focus of the interface.