@syra.fm/sdk 0.4.0 → 0.6.0

package/src/live/components/LiveRoomSheet.tsx

@@ -0,0 +1,970 @@
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  type ViewStyle,
+} from 'react-native';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { useAuth } from '@oxyhq/services';
+
+import { useLiveConfig } from '../context/LiveConfigContext';
+import { MiniRoomBar } from './MiniRoomBar';
+import { StreamConfigPanel } from './StreamConfigPanel';
+import { InsightsPanel } from './InsightsPanel';
+import { PanelHeader } from './PanelHeader';
+import { AnimatedSpeakerRing } from './AnimatedSpeakerRing';
+import { AnimatedPulse } from './AnimatedPulse';
+import { useRoomConnection } from '../hooks/useRoomConnection';
+import { useRoomAudio } from '../hooks/useRoomAudio';
+import { useActiveSpeakers } from '../hooks/useActiveSpeakers';
+import { useRoomUsers, getDisplayName, getAvatarUrl } from '../hooks/useRoomUsers';
+import { LIVE_COLOR, LIVE_TINT_COLOR } from '../colors';
+import type { RoomParticipant, Room, StreamInfo, UserEntity, LiveTheme } from '../types';
+
+type ActivePanel = null | 'stream' | 'insights' | 'settings';
+
+/**
+ * English source copy for the podcast host-control strings added to the stream
+ * card. Hosts with an i18n layer inject `t`; hosts without one fall back here.
+ * Keys mirror the `agora.podcastStream.*` entries in the app locale files.
+ */
+const LIVE_ROOM_STRINGS: Record<string, string> = {
+  'agora.podcastStream.skipNext': 'Skip to next episode',
+  'agora.podcastStream.skipped': 'Skipped to the next episode',
+  'agora.podcastStream.queueEnded': 'Podcast queue finished',
+  'agora.podcastStream.skipFailed': "Couldn't skip to the next episode",
+};
+
+/** Format a second count as `m:ss` (or `h:mm:ss` when hours are relevant). */
+function formatClock(totalSeconds: number, withHours: boolean): string {
+  const s = Math.max(0, Math.floor(totalSeconds));
+  const hours = Math.floor(s / 3600);
+  const minutes = Math.floor((s % 3600) / 60);
+  const secs = s % 60;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return withHours ? `${hours}:${pad(minutes)}:${pad(secs)}` : `${minutes}:${pad(secs)}`;
+}
+
+type AvatarComponentType = React.ComponentType<{ size: number; source?: string; shape?: string; style?: ViewStyle }>;
+type CachedFileDownloadUrlSyncFn = (oxyServices: unknown, fileId: string, variant?: string) => string;
+
+const RoleBadge = ({ role, theme }: { role: string; theme: LiveTheme }) => {
+  if (role === 'host') {
+    return (
+      <View style={[styles.roleBadge, { backgroundColor: theme.colors.primary }]}>
+        <Text style={styles.roleBadgeText}>Host</Text>
+      </View>
+    );
+  }
+  if (role === 'speaker') {
+    return (
+      <View style={[styles.roleBadge, { backgroundColor: theme.colors.backgroundSecondary }]}>
+        <Text style={[styles.roleBadgeText, { color: theme.colors.text }]}>Speaker</Text>
+      </View>
+    );
+  }
+  return null;
+};
+
+const SpeakerTile = ({
+  participant,
+  isCurrentUser,
+  isSpeaking,
+  theme,
+  userProfile,
+  oxyServices,
+  AvatarComponent,
+  getCachedFileDownloadUrlSync,
+}: {
+  participant: RoomParticipant;
+  isCurrentUser: boolean;
+  isSpeaking: boolean;
+  theme: LiveTheme;
+  userProfile: UserEntity | undefined;
+  oxyServices: unknown;
+  AvatarComponent: AvatarComponentType;
+  getCachedFileDownloadUrlSync: CachedFileDownloadUrlSyncFn;
+}) => {
+  const displayName = getDisplayName(userProfile, participant.userId, isCurrentUser);
+  const avatarUri = getAvatarUrl(userProfile, oxyServices, getCachedFileDownloadUrlSync);
+
+  return (
+    <View style={styles.speakerTile}>
+      <AnimatedSpeakerRing
+        isSpeaking={isSpeaking}
+        isMuted={participant.isMuted}
+        primaryColor={theme.colors.primary}
+      >
+        <AvatarComponent size={64} source={avatarUri} shape="squircle" />
+        {participant.isMuted && (
+          <View style={[styles.muteIndicator, { backgroundColor: LIVE_COLOR }]}>
+            <MaterialCommunityIcons name="microphone-off" size={12} color="#FFFFFF" />
+          </View>
+        )}
+      </AnimatedSpeakerRing>
+      <Text style={[styles.speakerName, { color: theme.colors.text }]} numberOfLines={1}>
+        {displayName}
+      </Text>
+      <RoleBadge role={participant.role} theme={theme} />
+    </View>
+  );
+};
+
+const ListenerAvatar = ({
+  participant,
+  userProfile,
+  oxyServices,
+  AvatarComponent,
+  getCachedFileDownloadUrlSync,
+}: {
+  participant: RoomParticipant;
+  userProfile: UserEntity | undefined;
+  oxyServices: unknown;
+  AvatarComponent: AvatarComponentType;
+  getCachedFileDownloadUrlSync: CachedFileDownloadUrlSyncFn;
+}) => {
+  return (
+    <View style={styles.listenerItem}>
+      <AvatarComponent size={40} source={getAvatarUrl(userProfile, oxyServices, getCachedFileDownloadUrlSync)} shape="squircle" />
+    </View>
+  );
+};
+
+const ConnectedSpeakerTile = ({ participant, isCurrentUser, isSpeaking, theme, oxyServices, AvatarComponent, getCachedFileDownloadUrlSync, useUserById }: {
+  participant: RoomParticipant; isCurrentUser: boolean; isSpeaking: boolean; theme: LiveTheme; oxyServices: unknown;
+  AvatarComponent: AvatarComponentType; getCachedFileDownloadUrlSync: CachedFileDownloadUrlSyncFn; useUserById: (id: string | undefined) => UserEntity | undefined;
+}) => {
+  const userProfile = useUserById(participant.userId);
+  return <SpeakerTile participant={participant} isCurrentUser={isCurrentUser} isSpeaking={isSpeaking} theme={theme} userProfile={userProfile} oxyServices={oxyServices} AvatarComponent={AvatarComponent} getCachedFileDownloadUrlSync={getCachedFileDownloadUrlSync} />;
+};
+
+const ConnectedListenerAvatar = ({ participant, oxyServices, AvatarComponent, getCachedFileDownloadUrlSync, useUserById }: {
+  participant: RoomParticipant; oxyServices: unknown;
+  AvatarComponent: AvatarComponentType; getCachedFileDownloadUrlSync: CachedFileDownloadUrlSyncFn; useUserById: (id: string | undefined) => UserEntity | undefined;
+}) => {
+  const userProfile = useUserById(participant.userId);
+  return <ListenerAvatar participant={participant} userProfile={userProfile} oxyServices={oxyServices} AvatarComponent={AvatarComponent} getCachedFileDownloadUrlSync={getCachedFileDownloadUrlSync} />;
+};
+
+const ConnectedRequestRow = ({ request, theme, oxyServices, onApprove, onDeny, AvatarComponent, getCachedFileDownloadUrlSync, useUserById }: {
+  request: { userId: string; requestedAt: string }; theme: LiveTheme; oxyServices: unknown;
+  onApprove: (userId: string) => void; onDeny: (userId: string) => void;
+  AvatarComponent: AvatarComponentType; getCachedFileDownloadUrlSync: CachedFileDownloadUrlSyncFn; useUserById: (id: string | undefined) => UserEntity | undefined;
+}) => {
+  const userProfile = useUserById(request.userId);
+  const displayName = getDisplayName(userProfile, request.userId, false);
+  const avatarUri = getAvatarUrl(userProfile, oxyServices, getCachedFileDownloadUrlSync);
+
+  return (
+    <View style={[styles.requestRow, { backgroundColor: `${theme.colors.card}80`, borderColor: theme.colors.border }]}>
+      <AvatarComponent size={36} source={avatarUri} shape="squircle" />
+      <Text style={[styles.requestName, { color: theme.colors.text }]} numberOfLines={1}>
+        {displayName}
+      </Text>
+      <TouchableOpacity onPress={() => onApprove(request.userId)} style={[styles.approveBtn, { backgroundColor: theme.colors.primary }]}>
+        <MaterialCommunityIcons name="check" size={18} color="#FFFFFF" />
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => onDeny(request.userId)} style={[styles.denyBtn, { backgroundColor: theme.colors.backgroundSecondary }]}>
+        <MaterialCommunityIcons name="close" size={18} color={theme.colors.text} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+interface LiveRoomSheetProps {
+  roomId: string;
+  isExpanded: boolean;
+  onCollapse: () => void;
+  onExpand: () => void;
+  onLeave: () => void;
+}
+
+export function LiveRoomSheet({ roomId, isExpanded, onCollapse, onExpand, onLeave }: LiveRoomSheetProps) {
+  const { useTheme, useUserById, AvatarComponent, roomsService, toast, getCachedFileDownloadUrl, getCachedFileDownloadUrlSync, onRoomChanged, t } = useLiveConfig();
+  const theme = useTheme();
+  const { user, oxyServices } = useAuth();
+  const [room, setRoom] = useState<Room | null>(null);
+
+  const tr = useCallback(
+    (key: string) => (t ? t(key) : LIVE_ROOM_STRINGS[key] ?? key),
+    [t],
+  );
+
+  useEffect(() => {
+    if (roomId) {
+      roomsService.getRoom(roomId).then(setRoom);
+    }
+  }, [roomId]);
+
+  const {
+    isConnected,
+    participants,
+    myRole,
+    isMuted,
+    speakerRequests,
+    activeStream,
+    isRecording,
+    join,
+    leave,
+    toggleMute,
+    requestToSpeak,
+    approveSpeaker,
+    denySpeaker,
+    isRoomEnded,
+  } = useRoomConnection({ roomId, enabled: !!roomId });
+
+  const isRoomLive = room?.status === 'live';
+  const { isLiveKitConnected, micPermissionDenied, livekitRoom } = useRoomAudio({
+    roomId,
+    isSpeaker: myRole === 'speaker' || myRole === 'host',
+    isMuted,
+    isConnected: isConnected && isRoomLive,
+  });
+
+  const activeSpeakerIds = useActiveSpeakers(livekitRoom);
+
+  useEffect(() => {
+    if (isConnected && roomId) {
+      join();
+    }
+  }, [isConnected, roomId, join]);
+
+  useEffect(() => {
+    if (isRoomEnded) {
+      toast('Room ended');
+      leave();
+      onLeave();
+    }
+  }, [isRoomEnded]);
+
+  const handleLeave = () => {
+    leave();
+    onLeave();
+  };
+
+  const handleStopRoom = async () => {
+    if (!roomId) return;
+    const success = await roomsService.stopRoom(roomId);
+    if (success) {
+      onRoomChanged?.(roomId);
+      leave();
+      onLeave();
+    } else {
+      toast.error('Failed to stop session');
+    }
+  };
+
+  const handleDeleteRoom = async () => {
+    if (!roomId) return;
+    const success = await roomsService.deleteRoom(roomId);
+    if (success) {
+      onRoomChanged?.(roomId);
+      leave();
+      onLeave();
+      toast.success('Room deleted');
+    } else {
+      toast.error('Failed to delete room');
+    }
+  };
+
+  const [startingRoom, setStartingRoom] = useState(false);
+  const handleStartRoom = async () => {
+    if (!roomId || startingRoom) return;
+    setStartingRoom(true);
+    try {
+      const success = await roomsService.startRoom(roomId);
+      if (success) {
+        const updated = await roomsService.getRoom(roomId);
+        if (updated) setRoom(updated);
+        onRoomChanged?.(roomId);
+        toast.success('Room is now live!');
+      } else {
+        toast.error('Failed to start room');
+      }
+    } catch {
+      toast.error('Failed to start room');
+    } finally {
+      setStartingRoom(false);
+    }
+  };
+
+  const handleStartRecording = async () => {
+    if (!roomId) return;
+    const success = await roomsService.startRecording(roomId);
+    if (success) {
+      toast.success('Recording started');
+    } else {
+      toast.error('Failed to start recording');
+    }
+  };
+
+  const handleStopRecording = async () => {
+    if (!roomId) return;
+    const success = await roomsService.stopRecording(roomId);
+    if (success) {
+      toast.success('Recording saved');
+    } else {
+      toast.error('Failed to stop recording');
+    }
+  };
+
+  const [activePanel, setActivePanel] = useState<ActivePanel>(null);
+  const [streamLoading, setStreamLoading] = useState(false);
+
+  const effectiveStream: StreamInfo | null = activeStream
+    ?? (room?.streamTitle || room?.activeStreamUrl
+      ? {
+          title: room.streamTitle ?? undefined,
+          image: room.streamImage ?? undefined,
+          description: room.streamDescription ?? undefined,
+          startedAt: room.streamStartedAt ?? undefined,
+          durationSec: room.streamDurationSec ?? undefined,
+        }
+      : null);
+
+  const [streamImageUrl, setStreamImageUrl] = useState<string | null>(null);
+  useEffect(() => {
+    if (effectiveStream?.image) {
+      getCachedFileDownloadUrl(oxyServices, effectiveStream.image).then(setStreamImageUrl);
+    } else {
+      setStreamImageUrl(null);
+    }
+  }, [effectiveStream?.image, oxyServices]);
+
+  // Stream progress — only for length-known streams (e.g. podcast episodes).
+  const streamStartedAt = effectiveStream?.startedAt;
+  const streamDurationSec = effectiveStream?.durationSec ?? 0;
+  const hasProgress = !!streamStartedAt && streamDurationSec > 0;
+
+  // A lightweight 1s tick that advances the elapsed readout while a length-known
+  // stream plays. Runs only when there's progress to show; cleared on unmount
+  // and whenever the stream clears.
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  useEffect(() => {
+    if (!hasProgress) return;
+    setNowMs(Date.now());
+    const id = setInterval(() => setNowMs(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [hasProgress]);
+
+  const elapsedSec = useMemo(() => {
+    if (!hasProgress || !streamStartedAt) return 0;
+    const startMs = new Date(streamStartedAt).getTime();
+    if (Number.isNaN(startMs)) return 0;
+    return Math.min(Math.max(Math.floor((nowMs - startMs) / 1000), 0), streamDurationSec);
+  }, [hasProgress, streamStartedAt, nowMs, streamDurationSec]);
+
+  const progressPct = hasProgress ? Math.min(Math.max(elapsedSec / streamDurationSec, 0), 1) * 100 : 0;
+  const progressFillStyle: ViewStyle = { backgroundColor: theme.colors.primary, width: `${progressPct}%` };
+  const withHours = streamDurationSec >= 3600;
+
+  const handleStopStream = async () => {
+    if (!roomId || streamLoading) return;
+    setStreamLoading(true);
+    try {
+      const success = await roomsService.stopStream(roomId);
+      if (success) {
+        toast.success('Stream stopped');
+      } else {
+        toast.error('Failed to stop stream');
+      }
+    } catch {
+      toast.error('Failed to stop stream');
+    } finally {
+      setStreamLoading(false);
+    }
+  };
+
+  const [skipLoading, setSkipLoading] = useState(false);
+  const handleSkipNext = async () => {
+    if (!roomId || skipLoading) return;
+    setSkipLoading(true);
+    try {
+      const result = await roomsService.skipPodcastNext(roomId);
+      if (!result) {
+        toast.error(tr('agora.podcastStream.skipFailed'));
+      } else {
+        toast.success(tr(result.ended ? 'agora.podcastStream.queueEnded' : 'agora.podcastStream.skipped'));
+        const updated = await roomsService.getRoom(roomId);
+        if (updated) setRoom(updated);
+      }
+    } catch {
+      toast.error(tr('agora.podcastStream.skipFailed'));
+    } finally {
+      setSkipLoading(false);
+    }
+  };
+
+  const participantIds = useMemo(() => participants.map((p) => p.userId), [participants]);
+  useRoomUsers(participantIds);
+
+  const speakers = participants.filter(
+    (p) => p.role === 'host' || p.role === 'speaker'
+  );
+  const listeners = participants.filter((p) => p.role === 'listener');
+
+  const userId = user?.id;
+  const isHost = myRole === 'host' || (!!userId && room?.host === userId);
+  const canSpeak = myRole === 'host' || myRole === 'speaker';
+
+  if (!isExpanded) {
+    return (
+      <MiniRoomBar
+        title={room?.title || 'Room'}
+        participantCount={participants.length}
+        isMuted={isMuted}
+        canSpeak={canSpeak}
+        activeSpeakerCount={activeSpeakerIds.size}
+        onExpand={onExpand}
+        onToggleMute={toggleMute}
+        onLeave={handleLeave}
+      />
+    );
+  }
+
+  if (activePanel === 'stream') {
+    return (
+      <StreamConfigPanel
+        roomId={roomId}
+        roomStatus={room?.status}
+        initialStreamUrl={room?.activeStreamUrl ?? undefined}
+        initialRtmpUrl={room?.rtmpUrl ?? undefined}
+        initialStreamKey={room?.rtmpStreamKey ?? undefined}
+        onClose={() => setActivePanel(null)}
+        onStreamStarted={() => {
+          roomsService.getRoom(roomId).then(setRoom);
+          onRoomChanged?.(roomId);
+          setActivePanel(null);
+        }}
+      />
+    );
+  }
+
+  if (activePanel === 'insights') {
+    return (
+      <InsightsPanel
+        room={room}
+        participants={participants}
+        theme={theme}
+        onClose={() => setActivePanel(null)}
+      />
+    );
+  }
+
+  if (activePanel === 'settings') {
+    return (
+      <View style={styles.container}>
+        <PanelHeader title="Room Settings" theme={theme} onBack={() => setActivePanel(null)} />
+        <View style={styles.settingsContent}>
+          {isRoomLive && (
+            <View style={styles.settingsItem}>
+              <MaterialCommunityIcons
+                name={isRecording ? 'record-circle' : 'record-circle-outline'}
+                size={22}
+                color={isRecording ? '#FF0000' : theme.colors.text}
+              />
+              <View style={styles.settingsItemText}>
+                <Text style={[styles.settingsItemTitle, { color: theme.colors.text }]}>Recording</Text>
+                <Text style={[styles.settingsItemDesc, { color: theme.colors.textSecondary }]}>
+                  {isRecording ? 'Currently recording (max 1h)' : 'Record room audio for replay'}
+                </Text>
+              </View>
+              <TouchableOpacity
+                onPress={isRecording ? handleStopRecording : handleStartRecording}
+                style={[styles.recordingToggle, {
+                  backgroundColor: isRecording ? LIVE_COLOR : theme.colors.primary,
+                }]}
+              >
+                <Text style={{ color: '#FFFFFF', fontWeight: '600', fontSize: 13 }}>
+                  {isRecording ? 'Stop' : 'Start'}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          )}
+          <TouchableOpacity
+            style={styles.settingsItem}
+            onPress={handleDeleteRoom}
+          >
+            <MaterialCommunityIcons name="delete-outline" size={22} color={LIVE_COLOR} />
+            <View style={styles.settingsItemText}>
+              <Text style={[styles.settingsItemTitle, { color: LIVE_COLOR }]}>Delete Room</Text>
+              <Text style={[styles.settingsItemDesc, { color: theme.colors.textSecondary }]}>
+                Permanently remove this room
+              </Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.header, { borderBottomColor: `${theme.colors.border}80` }]}>
+        <TouchableOpacity onPress={onCollapse} style={styles.headerButton}>
+          <MaterialCommunityIcons name="chevron-down" size={24} color={theme.colors.text} />
+        </TouchableOpacity>
+
+        <View style={styles.headerCenter}>
+          {isRoomLive ? (
+            <View style={[styles.liveBadge, { backgroundColor: LIVE_COLOR }]}>
+              <AnimatedPulse />
+              <Text style={styles.liveText}>LIVE</Text>
+            </View>
+          ) : (
+            <View style={[styles.liveBadge, { backgroundColor: theme.colors.textSecondary }]}>
+              <Text style={styles.liveText}>SCHEDULED</Text>
+            </View>
+          )}
+          {isRecording && (
+            <View style={[styles.liveBadge, { backgroundColor: '#FF0000' }]}>
+              <AnimatedPulse />
+              <Text style={styles.liveText}>REC</Text>
+            </View>
+          )}
+          <Text style={[styles.listenerCount, { color: theme.colors.textSecondary }]}>
+            {participants.length} in room
+          </Text>
+        </View>
+
+        <View style={styles.headerRight}>
+          {isHost && isRoomLive && (
+            <TouchableOpacity onPress={handleStopRoom} style={styles.endButton}>
+              <Text style={styles.endButtonText}>End</Text>
+            </TouchableOpacity>
+          )}
+          {isHost && !isRoomLive && room?.status === 'scheduled' && (
+            <TouchableOpacity
+              onPress={handleStartRoom}
+              disabled={startingRoom}
+              style={[styles.endButton, { backgroundColor: theme.colors.primary }]}
+            >
+              <Text style={[styles.endButtonText, { color: '#FFFFFF' }]}>
+                {startingRoom ? 'Starting...' : 'Go Live'}
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      </View>
+
+      <View style={styles.roomInfo}>
+        <Text style={[styles.roomTitle, { color: theme.colors.text }]} numberOfLines={2}>
+          {room?.title || 'Room'}
+        </Text>
+        {room?.topic && (
+          <Text style={[styles.roomTopic, { color: theme.colors.textSecondary }]}>
+            {room.topic}
+          </Text>
+        )}
+      </View>
+
+      {micPermissionDenied && canSpeak && (
+        <View style={[styles.micBanner, { backgroundColor: '#FFF3CD', borderColor: '#FFE69C' }]}>
+          <MaterialCommunityIcons name="microphone-off" size={18} color="#856404" />
+          <Text style={styles.micBannerText}>
+            Microphone access denied. Allow mic permission in your browser settings to speak.
+          </Text>
+        </View>
+      )}
+
+      {effectiveStream && (
+        <View style={[styles.streamCard, { backgroundColor: `${theme.colors.card}80`, borderColor: theme.colors.border }]}>
+          <View style={styles.streamCardRow}>
+            {streamImageUrl ? (
+              <Image source={{ uri: streamImageUrl }} style={styles.streamCardImage} />
+            ) : (
+              <View style={[styles.streamCardIconBox, { backgroundColor: '#E8F5E9' }]}>
+                <MaterialCommunityIcons name="radio" size={20} color="#2E7D32" />
+              </View>
+            )}
+            <View style={styles.streamCardContent}>
+              <Text style={[styles.streamCardTitle, { color: theme.colors.text }]} numberOfLines={1}>
+                {effectiveStream.title || 'Live Stream'}
+              </Text>
+              {effectiveStream.description ? (
+                <Text style={[styles.streamCardDesc, { color: theme.colors.textSecondary }]} numberOfLines={2}>
+                  {effectiveStream.description}
+                </Text>
+              ) : null}
+            </View>
+            {isHost && (
+              <View style={styles.streamCardActions}>
+                {(room?.podcastQueue?.length ?? 0) > 0 && (
+                  <TouchableOpacity
+                    onPress={handleSkipNext}
+                    disabled={skipLoading}
+                    style={styles.streamCardAction}
+                    accessibilityRole="button"
+                    accessibilityLabel={tr('agora.podcastStream.skipNext')}
+                  >
+                    <MaterialCommunityIcons name="skip-next-circle" size={22} color={theme.colors.primary} />
+                  </TouchableOpacity>
+                )}
+                <TouchableOpacity onPress={handleStopStream} disabled={streamLoading} style={styles.streamCardAction}>
+                  <MaterialCommunityIcons name="close-circle" size={22} color="#C62828" />
+                </TouchableOpacity>
+              </View>
+            )}
+          </View>
+          {hasProgress && (
+            <View style={styles.streamProgress}>
+              <View style={[styles.progressTrack, { backgroundColor: theme.colors.border }]}>
+                <View style={[styles.progressFill, progressFillStyle]} />
+              </View>
+              <Text style={[styles.progressTime, { color: theme.colors.textSecondary }]}>
+                {formatClock(elapsedSec, withHours)} / {formatClock(streamDurationSec, withHours)}
+              </Text>
+            </View>
+          )}
+        </View>
+      )}
+
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={styles.speakerGrid}>
+          {speakers.map((p) => (
+            <ConnectedSpeakerTile
+              key={p.userId}
+              participant={p}
+              isCurrentUser={p.userId === userId}
+              isSpeaking={activeSpeakerIds.has(p.userId)}
+              theme={theme}
+              oxyServices={oxyServices}
+              AvatarComponent={AvatarComponent}
+              getCachedFileDownloadUrlSync={getCachedFileDownloadUrlSync}
+              useUserById={useUserById}
+            />
+          ))}
+        </View>
+
+        {listeners.length > 0 && (
+          <View style={styles.listenerSection}>
+            <Text style={[styles.listenerHeader, { color: theme.colors.textSecondary }]}>
+              Listeners ({listeners.length})
+            </Text>
+            <View style={styles.listenerGrid}>
+              {listeners.map((p) => (
+                <ConnectedListenerAvatar
+                  key={p.userId}
+                  participant={p}
+                  oxyServices={oxyServices}
+                  AvatarComponent={AvatarComponent}
+                  getCachedFileDownloadUrlSync={getCachedFileDownloadUrlSync}
+                  useUserById={useUserById}
+                />
+              ))}
+            </View>
+          </View>
+        )}
+
+        {isHost && speakerRequests.length > 0 && (
+          <View style={styles.requestsSection}>
+            <Text style={[styles.requestsHeader, { color: theme.colors.textSecondary }]}>
+              Requests to speak
+            </Text>
+            {speakerRequests.map((r) => (
+              <ConnectedRequestRow
+                key={r.userId}
+                request={r}
+                theme={theme}
+                oxyServices={oxyServices}
+                onApprove={approveSpeaker}
+                onDeny={denySpeaker}
+                AvatarComponent={AvatarComponent}
+                getCachedFileDownloadUrlSync={getCachedFileDownloadUrlSync}
+                useUserById={useUserById}
+              />
+            ))}
+          </View>
+        )}
+      </ScrollView>
+
+      <View
+        style={[
+          styles.controlBar,
+          { borderTopColor: theme.colors.border },
+        ]}
+      >
+        {canSpeak ? (
+          <TouchableOpacity style={styles.controlItem} onPress={toggleMute}>
+            <View
+              style={[
+                styles.controlCircle,
+                {
+                  backgroundColor: isMuted
+                    ? theme.colors.backgroundSecondary
+                    : theme.colors.primary,
+                },
+              ]}
+            >
+              <MaterialCommunityIcons
+                name={isMuted ? 'microphone-off' : 'microphone'}
+                size={24}
+                color={isMuted ? theme.colors.text : '#FFFFFF'}
+              />
+            </View>
+            <Text style={[styles.controlLabel, { color: theme.colors.textSecondary }]}>
+              {isMuted ? 'Unmute' : 'Mute'}
+            </Text>
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity style={styles.controlItem} onPress={requestToSpeak}>
+            <View
+              style={[
+                styles.controlCircle,
+                { backgroundColor: theme.colors.backgroundSecondary },
+              ]}
+            >
+              <MaterialCommunityIcons name="hand-back-left" size={24} color={theme.colors.text} />
+            </View>
+            <Text style={[styles.controlLabel, { color: theme.colors.textSecondary }]}>
+              Request
+            </Text>
+          </TouchableOpacity>
+        )}
+
+        <TouchableOpacity style={styles.controlItem} onPress={() => setActivePanel('insights')}>
+          <View
+            style={[
+              styles.controlCircle,
+              { backgroundColor: theme.colors.backgroundSecondary },
+            ]}
+          >
+            <MaterialCommunityIcons name="chart-box-outline" size={24} color={theme.colors.text} />
+          </View>
+          <Text style={[styles.controlLabel, { color: theme.colors.textSecondary }]}>
+            Insights
+          </Text>
+        </TouchableOpacity>
+
+        {isHost && (
+          <TouchableOpacity style={styles.controlItem} onPress={() => setActivePanel('stream')}>
+            <View style={[styles.controlCircle, { backgroundColor: theme.colors.backgroundSecondary }]}>
+              <MaterialCommunityIcons name="radio" size={24} color={theme.colors.text} />
+            </View>
+            <Text style={[styles.controlLabel, { color: theme.colors.textSecondary }]}>
+              Stream
+            </Text>
+          </TouchableOpacity>
+        )}
+
+        {isHost && (
+          <TouchableOpacity style={styles.controlItem} onPress={() => setActivePanel('settings')}>
+            <View style={[styles.controlCircle, { backgroundColor: theme.colors.backgroundSecondary }]}>
+              <MaterialCommunityIcons name="cog-outline" size={24} color={theme.colors.text} />
+            </View>
+            <Text style={[styles.controlLabel, { color: theme.colors.textSecondary }]}>
+              Settings
+            </Text>
+          </TouchableOpacity>
+        )}
+
+        <TouchableOpacity style={styles.controlItem} onPress={handleLeave}>
+          <View style={[styles.leaveCircle, { backgroundColor: LIVE_COLOR }]}>
+            <MaterialCommunityIcons name="exit-run" size={24} color="#FFFFFF" />
+          </View>
+          <Text style={[styles.controlLabel, { color: theme.colors.textSecondary }]}>
+            Leave
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+  },
+  headerButton: { padding: 4 },
+  headerCenter: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  headerRight: { minWidth: 40, alignItems: 'flex-end' },
+  liveBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 12,
+    gap: 5,
+  },
+  liveText: { fontSize: 12, fontWeight: '700', color: '#FFFFFF' },
+  listenerCount: { fontSize: 14, fontWeight: '500' },
+  endButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    borderRadius: 16,
+    backgroundColor: LIVE_TINT_COLOR,
+  },
+  endButtonText: { fontSize: 15, fontWeight: '600', color: LIVE_COLOR },
+  roomInfo: { paddingHorizontal: 16, paddingTop: 16, paddingBottom: 8 },
+  roomTitle: { fontSize: 32, fontWeight: 'bold', lineHeight: 38 },
+  roomTopic: { fontSize: 14, marginTop: 4 },
+  micBanner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginHorizontal: 16,
+    marginBottom: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  micBannerText: { flex: 1, fontSize: 13, fontWeight: '500', color: '#856404' },
+  scrollContent: { paddingBottom: 120 },
+  speakerGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingHorizontal: 12,
+    paddingTop: 16,
+  },
+  speakerTile: { width: '25%', alignItems: 'center', marginBottom: 20 },
+  muteIndicator: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 2,
+    borderColor: '#FFFFFF',
+  },
+  speakerName: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginTop: 6,
+    textAlign: 'center',
+    maxWidth: 80,
+  },
+  roleBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    marginTop: 2,
+  },
+  roleBadgeText: { fontSize: 10, fontWeight: '600', color: '#FFFFFF' },
+  listenerSection: { paddingHorizontal: 16, marginTop: 8 },
+  listenerHeader: { fontSize: 14, fontWeight: '600', marginBottom: 12 },
+  listenerGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 12 },
+  listenerItem: { marginBottom: 4 },
+  requestsSection: { paddingHorizontal: 16, marginTop: 24 },
+  requestsHeader: { fontSize: 14, fontWeight: '600', marginBottom: 12 },
+  requestRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+    marginBottom: 8,
+    gap: 10,
+  },
+  requestName: { flex: 1, fontSize: 14, fontWeight: '500' },
+  approveBtn: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  denyBtn: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  controlBar: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    paddingTop: 12,
+    paddingBottom: 12,
+    paddingHorizontal: 16,
+    borderTopWidth: 1,
+    gap: 20,
+  },
+  controlItem: { alignItems: 'center', gap: 4 },
+  controlCircle: {
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  leaveCircle: {
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  controlLabel: { fontSize: 11, fontWeight: '500' },
+  streamCard: {
+    marginHorizontal: 16,
+    marginBottom: 4,
+    padding: 10,
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 8,
+  },
+  streamCardRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  streamCardImage: { width: 44, height: 44, borderRadius: 8 },
+  streamCardIconBox: {
+    width: 44,
+    height: 44,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  streamCardContent: { flex: 1, gap: 2 },
+  streamCardTitle: { fontSize: 14, fontWeight: '600' },
+  streamCardDesc: { fontSize: 12 },
+  streamCardActions: { flexDirection: 'row', alignItems: 'center', gap: 2 },
+  streamCardAction: { padding: 4 },
+  streamProgress: { gap: 4 },
+  progressTrack: { height: 4, borderRadius: 2, overflow: 'hidden' },
+  progressFill: { height: 4, borderRadius: 2 },
+  progressTime: { fontSize: 11, fontWeight: '500', textAlign: 'right' },
+  settingsContent: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+  },
+  settingsItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 14,
+    paddingVertical: 14,
+  },
+  settingsItemText: { flex: 1 },
+  settingsItemTitle: { fontSize: 16, fontWeight: '600' },
+  settingsItemDesc: { fontSize: 13, marginTop: 2 },
+  recordingToggle: {
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 14,
+  },
+});