Pull Request to address issue #12

apps/mobile/package.json

@@ -30,6 +30,7 @@
     "expo-font": "~14.0.11",
     "expo-glass-effect": "~0.1.8",
     "expo-haptics": "~15.0.8",
+    "expo-image-picker": "~16.0.7",
     "expo-image": "^3.0.10",
     "expo-keep-awake": "~15.0.7",
     "expo-linear-gradient": "~15.0.8",

apps/mobile/src/features/meets/components/call-screen.tsx

@@ -22,7 +22,7 @@ import { isSystemUserId } from "../utils";
 import { useDeviceLayout, type DeviceLayout } from "../hooks/use-device-layout";
 import { ControlsBar } from "./controls-bar";
 import { ParticipantTile } from "./participant-tile";
-import { FlatList, Text, Pressable } from "@/tw";
+import { FlatList, Text, Pressable, Image } from "@/tw";
 import { Lock, Settings, Users, MicOff, VenetianMask } from "lucide-react-native";
 import { GlassPill } from "./glass-pill";
 import { useApps } from "@conclave/apps-sdk";
@@ -77,6 +77,7 @@ interface CallScreenProps {
   isMirrorCamera: boolean;
   activeSpeakerId: string | null;
   resolveDisplayName: (userId: string) => string;
+  resolveAvatarUrl: (userId: string) => string | undefined;
   onToggleMute: () => void;
   onToggleCamera: () => void;
   onToggleScreenShare: () => void;
@@ -184,6 +185,7 @@ export function CallScreen({
   isMirrorCamera,
   activeSpeakerId,
   resolveDisplayName,
+  resolveAvatarUrl,
   onToggleMute,
   onToggleCamera,
   onToggleScreenShare,
@@ -1004,6 +1006,55 @@ export function CallScreen({
               </GlassPill>
             </RNView>
 
+            <FlatList
+              data={stripParticipants}
+              extraData={participantOrderKey}
+              keyExtractor={(item) => item.userId}
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={styles.stripContent}
+              renderItem={({ item }) => {
+                const label =
+                  item.userId === localParticipant.userId
+                    ? "You"
+                    : resolveDisplayName(item.userId);
+                const initials =
+                  label?.trim()?.[0]?.toUpperCase() || "?";
+                const avatarUrl = resolveAvatarUrl(item.userId);
+                return (
+                  <RNView style={[styles.stripTile, { width: stripTileSize, height: stripTileSize }]}>
+                    {item.videoStream && !item.isCameraOff ? (
+                      <RTCView
+                        streamURL={item.videoStream.toURL()}
+                        style={styles.stripVideo}
+                        mirror={
+                          item.userId === localParticipant.userId
+                            ? isMirrorCamera
+                            : false
+                        }
+                        objectFit="cover"
+                      />
+                    ) : (
+                      <RNView style={styles.stripAvatar}>
+                        {avatarUrl ? (
+                          <RNView style={styles.stripAvatarImageWrap}>
+                            <Image
+                              source={{ uri: avatarUrl }}
+                              style={styles.stripAvatarImage}
+                              contentFit="cover"
+                            />
+                          </RNView>
+                        ) : (
+                          <Text style={styles.stripInitial}>{initials}</Text>
+                        )}
+                      </RNView>
+                    )}
+
+                    {item.isGhost && (
+                      <RNView style={styles.stripGhost}>
+                        <VenetianMask size={16} color={COLORS.primaryOrange} />
+                      </RNView>
+                    )}
             <RNView style={styles.screenShareStripDock}>
               <FlatList
                 data={stripParticipants}
@@ -1109,6 +1160,7 @@ export function CallScreen({
                     <ParticipantTile
                       participant={item}
                       displayName={resolveDisplayName(item.userId)}
+                      avatarUrl={resolveAvatarUrl(item.userId)}
                       isLocal={item.userId === localParticipant.userId}
                       mirror={item.userId === localParticipant.userId ? isMirrorCamera : false}
                       isActiveSpeaker={activeSpeakerId === item.userId}
@@ -1423,6 +1475,14 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     backgroundColor: "rgba(249, 95, 74, 0.15)",
   },
+  stripAvatarImageWrap: {
+    width: "100%",
+    height: "100%",
+  },
+  stripAvatarImage: {
+    width: "100%",
+    height: "100%",
+  },
   stripInitial: {
     fontSize: 20,
     fontWeight: "700",