@syra.fm/sdk 0.4.0 → 0.5.0

package/lib/module/live/components/LiveRoomSheet.js

@@ -0,0 +1,1189 @@
+"use strict";
+
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import { View, Text, Image, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { useAuth } from '@oxyhq/services';
+import { useLiveConfig } from "../context/LiveConfigContext.js";
+import { MiniRoomBar } from "./MiniRoomBar.js";
+import { StreamConfigPanel } from "./StreamConfigPanel.js";
+import { InsightsPanel } from "./InsightsPanel.js";
+import { PanelHeader } from "./PanelHeader.js";
+import { AnimatedSpeakerRing } from "./AnimatedSpeakerRing.js";
+import { AnimatedPulse } from "./AnimatedPulse.js";
+import { useRoomConnection } from "../hooks/useRoomConnection.js";
+import { useRoomAudio } from "../hooks/useRoomAudio.js";
+import { useActiveSpeakers } from "../hooks/useActiveSpeakers.js";
+import { useRoomUsers, getDisplayName, getAvatarUrl } from "../hooks/useRoomUsers.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 = {
+  '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, withHours) {
+  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 => String(n).padStart(2, '0');
+  return withHours ? `${hours}:${pad(minutes)}:${pad(secs)}` : `${minutes}:${pad(secs)}`;
+}
+const RoleBadge = ({
+  role,
+  theme
+}) => {
+  if (role === 'host') {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.roleBadge, {
+        backgroundColor: theme.colors.primary
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.roleBadgeText,
+        children: "Host"
+      })
+    });
+  }
+  if (role === 'speaker') {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.roleBadge, {
+        backgroundColor: theme.colors.backgroundSecondary
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.roleBadgeText, {
+          color: theme.colors.text
+        }],
+        children: "Speaker"
+      })
+    });
+  }
+  return null;
+};
+const SpeakerTile = ({
+  participant,
+  isCurrentUser,
+  isSpeaking,
+  theme,
+  userProfile,
+  oxyServices,
+  AvatarComponent,
+  getCachedFileDownloadUrlSync
+}) => {
+  const displayName = getDisplayName(userProfile, participant.userId, isCurrentUser);
+  const avatarUri = getAvatarUrl(userProfile, oxyServices, getCachedFileDownloadUrlSync);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.speakerTile,
+    children: [/*#__PURE__*/_jsxs(AnimatedSpeakerRing, {
+      isSpeaking: isSpeaking,
+      isMuted: participant.isMuted,
+      primaryColor: theme.colors.primary,
+      children: [/*#__PURE__*/_jsx(AvatarComponent, {
+        size: 64,
+        source: avatarUri,
+        shape: "squircle"
+      }), participant.isMuted && /*#__PURE__*/_jsx(View, {
+        style: [styles.muteIndicator, {
+          backgroundColor: '#FF4458'
+        }],
+        children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: "microphone-off",
+          size: 12,
+          color: "#FFFFFF"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.speakerName, {
+        color: theme.colors.text
+      }],
+      numberOfLines: 1,
+      children: displayName
+    }), /*#__PURE__*/_jsx(RoleBadge, {
+      role: participant.role,
+      theme: theme
+    })]
+  });
+};
+const ListenerAvatar = ({
+  participant,
+  userProfile,
+  oxyServices,
+  AvatarComponent,
+  getCachedFileDownloadUrlSync
+}) => {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.listenerItem,
+    children: /*#__PURE__*/_jsx(AvatarComponent, {
+      size: 40,
+      source: getAvatarUrl(userProfile, oxyServices, getCachedFileDownloadUrlSync),
+      shape: "squircle"
+    })
+  });
+};
+const ConnectedSpeakerTile = ({
+  participant,
+  isCurrentUser,
+  isSpeaking,
+  theme,
+  oxyServices,
+  AvatarComponent,
+  getCachedFileDownloadUrlSync,
+  useUserById
+}) => {
+  const userProfile = useUserById(participant.userId);
+  return /*#__PURE__*/_jsx(SpeakerTile, {
+    participant: participant,
+    isCurrentUser: isCurrentUser,
+    isSpeaking: isSpeaking,
+    theme: theme,
+    userProfile: userProfile,
+    oxyServices: oxyServices,
+    AvatarComponent: AvatarComponent,
+    getCachedFileDownloadUrlSync: getCachedFileDownloadUrlSync
+  });
+};
+const ConnectedListenerAvatar = ({
+  participant,
+  oxyServices,
+  AvatarComponent,
+  getCachedFileDownloadUrlSync,
+  useUserById
+}) => {
+  const userProfile = useUserById(participant.userId);
+  return /*#__PURE__*/_jsx(ListenerAvatar, {
+    participant: participant,
+    userProfile: userProfile,
+    oxyServices: oxyServices,
+    AvatarComponent: AvatarComponent,
+    getCachedFileDownloadUrlSync: getCachedFileDownloadUrlSync
+  });
+};
+const ConnectedRequestRow = ({
+  request,
+  theme,
+  oxyServices,
+  onApprove,
+  onDeny,
+  AvatarComponent,
+  getCachedFileDownloadUrlSync,
+  useUserById
+}) => {
+  const userProfile = useUserById(request.userId);
+  const displayName = getDisplayName(userProfile, request.userId, false);
+  const avatarUri = getAvatarUrl(userProfile, oxyServices, getCachedFileDownloadUrlSync);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.requestRow, {
+      backgroundColor: `${theme.colors.card}80`,
+      borderColor: theme.colors.border
+    }],
+    children: [/*#__PURE__*/_jsx(AvatarComponent, {
+      size: 36,
+      source: avatarUri,
+      shape: "squircle"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.requestName, {
+        color: theme.colors.text
+      }],
+      numberOfLines: 1,
+      children: displayName
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: () => onApprove(request.userId),
+      style: [styles.approveBtn, {
+        backgroundColor: theme.colors.primary
+      }],
+      children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: "check",
+        size: 18,
+        color: "#FFFFFF"
+      })
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: () => onDeny(request.userId),
+      style: [styles.denyBtn, {
+        backgroundColor: theme.colors.backgroundSecondary
+      }],
+      children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: "close",
+        size: 18,
+        color: theme.colors.text
+      })
+    })]
+  });
+};
+export function LiveRoomSheet({
+  roomId,
+  isExpanded,
+  onCollapse,
+  onExpand,
+  onLeave
+}) {
+  const {
+    useTheme,
+    useUserById,
+    AvatarComponent,
+    roomsService,
+    toast,
+    getCachedFileDownloadUrl,
+    getCachedFileDownloadUrlSync,
+    onRoomChanged,
+    t
+  } = useLiveConfig();
+  const theme = useTheme();
+  const {
+    user,
+    oxyServices
+  } = useAuth();
+  const [room, setRoom] = useState(null);
+  const tr = useCallback(key => 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(null);
+  const [streamLoading, setStreamLoading] = useState(false);
+  const effectiveStream = 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(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 = {
+    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 /*#__PURE__*/_jsx(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 /*#__PURE__*/_jsx(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 /*#__PURE__*/_jsx(InsightsPanel, {
+      room: room,
+      participants: participants,
+      theme: theme,
+      onClose: () => setActivePanel(null)
+    });
+  }
+  if (activePanel === 'settings') {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.container,
+      children: [/*#__PURE__*/_jsx(PanelHeader, {
+        title: "Room Settings",
+        theme: theme,
+        onBack: () => setActivePanel(null)
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.settingsContent,
+        children: [isRoomLive && /*#__PURE__*/_jsxs(View, {
+          style: styles.settingsItem,
+          children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: isRecording ? 'record-circle' : 'record-circle-outline',
+            size: 22,
+            color: isRecording ? '#FF0000' : theme.colors.text
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.settingsItemText,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.settingsItemTitle, {
+                color: theme.colors.text
+              }],
+              children: "Recording"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.settingsItemDesc, {
+                color: theme.colors.textSecondary
+              }],
+              children: isRecording ? 'Currently recording (max 1h)' : 'Record room audio for replay'
+            })]
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: isRecording ? handleStopRecording : handleStartRecording,
+            style: [styles.recordingToggle, {
+              backgroundColor: isRecording ? '#FF4458' : theme.colors.primary
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: {
+                color: '#FFFFFF',
+                fontWeight: '600',
+                fontSize: 13
+              },
+              children: isRecording ? 'Stop' : 'Start'
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.settingsItem,
+          onPress: handleDeleteRoom,
+          children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: "delete-outline",
+            size: 22,
+            color: "#FF4458"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.settingsItemText,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.settingsItemTitle, {
+                color: '#FF4458'
+              }],
+              children: "Delete Room"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.settingsItemDesc, {
+                color: theme.colors.textSecondary
+              }],
+              children: "Permanently remove this room"
+            })]
+          })]
+        })]
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.header, {
+        borderBottomColor: `${theme.colors.border}80`
+      }],
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onCollapse,
+        style: styles.headerButton,
+        children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: "chevron-down",
+          size: 24,
+          color: theme.colors.text
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.headerCenter,
+        children: [isRoomLive ? /*#__PURE__*/_jsxs(View, {
+          style: [styles.liveBadge, {
+            backgroundColor: '#FF4458'
+          }],
+          children: [/*#__PURE__*/_jsx(AnimatedPulse, {}), /*#__PURE__*/_jsx(Text, {
+            style: styles.liveText,
+            children: "LIVE"
+          })]
+        }) : /*#__PURE__*/_jsx(View, {
+          style: [styles.liveBadge, {
+            backgroundColor: theme.colors.textSecondary
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.liveText,
+            children: "SCHEDULED"
+          })
+        }), isRecording && /*#__PURE__*/_jsxs(View, {
+          style: [styles.liveBadge, {
+            backgroundColor: '#FF0000'
+          }],
+          children: [/*#__PURE__*/_jsx(AnimatedPulse, {}), /*#__PURE__*/_jsx(Text, {
+            style: styles.liveText,
+            children: "REC"
+          })]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: [styles.listenerCount, {
+            color: theme.colors.textSecondary
+          }],
+          children: [participants.length, " in room"]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.headerRight,
+        children: [isHost && isRoomLive && /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleStopRoom,
+          style: styles.endButton,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.endButtonText,
+            children: "End"
+          })
+        }), isHost && !isRoomLive && room?.status === 'scheduled' && /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleStartRoom,
+          disabled: startingRoom,
+          style: [styles.endButton, {
+            backgroundColor: theme.colors.primary
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.endButtonText, {
+              color: '#FFFFFF'
+            }],
+            children: startingRoom ? 'Starting...' : 'Go Live'
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.roomInfo,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.roomTitle, {
+          color: theme.colors.text
+        }],
+        numberOfLines: 2,
+        children: room?.title || 'Room'
+      }), room?.topic && /*#__PURE__*/_jsx(Text, {
+        style: [styles.roomTopic, {
+          color: theme.colors.textSecondary
+        }],
+        children: room.topic
+      })]
+    }), micPermissionDenied && canSpeak && /*#__PURE__*/_jsxs(View, {
+      style: [styles.micBanner, {
+        backgroundColor: '#FFF3CD',
+        borderColor: '#FFE69C'
+      }],
+      children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: "microphone-off",
+        size: 18,
+        color: "#856404"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.micBannerText,
+        children: "Microphone access denied. Allow mic permission in your browser settings to speak."
+      })]
+    }), effectiveStream && /*#__PURE__*/_jsxs(View, {
+      style: [styles.streamCard, {
+        backgroundColor: `${theme.colors.card}80`,
+        borderColor: theme.colors.border
+      }],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.streamCardRow,
+        children: [streamImageUrl ? /*#__PURE__*/_jsx(Image, {
+          source: {
+            uri: streamImageUrl
+          },
+          style: styles.streamCardImage
+        }) : /*#__PURE__*/_jsx(View, {
+          style: [styles.streamCardIconBox, {
+            backgroundColor: '#E8F5E9'
+          }],
+          children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: "radio",
+            size: 20,
+            color: "#2E7D32"
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.streamCardContent,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.streamCardTitle, {
+              color: theme.colors.text
+            }],
+            numberOfLines: 1,
+            children: effectiveStream.title || 'Live Stream'
+          }), effectiveStream.description ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.streamCardDesc, {
+              color: theme.colors.textSecondary
+            }],
+            numberOfLines: 2,
+            children: effectiveStream.description
+          }) : null]
+        }), isHost && /*#__PURE__*/_jsxs(View, {
+          style: styles.streamCardActions,
+          children: [(room?.podcastQueue?.length ?? 0) > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: handleSkipNext,
+            disabled: skipLoading,
+            style: styles.streamCardAction,
+            accessibilityRole: "button",
+            accessibilityLabel: tr('agora.podcastStream.skipNext'),
+            children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+              name: "skip-next-circle",
+              size: 22,
+              color: theme.colors.primary
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: handleStopStream,
+            disabled: streamLoading,
+            style: styles.streamCardAction,
+            children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+              name: "close-circle",
+              size: 22,
+              color: "#C62828"
+            })
+          })]
+        })]
+      }), hasProgress && /*#__PURE__*/_jsxs(View, {
+        style: styles.streamProgress,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.progressTrack, {
+            backgroundColor: theme.colors.border
+          }],
+          children: /*#__PURE__*/_jsx(View, {
+            style: [styles.progressFill, progressFillStyle]
+          })
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: [styles.progressTime, {
+            color: theme.colors.textSecondary
+          }],
+          children: [formatClock(elapsedSec, withHours), " / ", formatClock(streamDurationSec, withHours)]
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(ScrollView, {
+      style: {
+        flex: 1
+      },
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.speakerGrid,
+        children: speakers.map(p => /*#__PURE__*/_jsx(ConnectedSpeakerTile, {
+          participant: p,
+          isCurrentUser: p.userId === userId,
+          isSpeaking: activeSpeakerIds.has(p.userId),
+          theme: theme,
+          oxyServices: oxyServices,
+          AvatarComponent: AvatarComponent,
+          getCachedFileDownloadUrlSync: getCachedFileDownloadUrlSync,
+          useUserById: useUserById
+        }, p.userId))
+      }), listeners.length > 0 && /*#__PURE__*/_jsxs(View, {
+        style: styles.listenerSection,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: [styles.listenerHeader, {
+            color: theme.colors.textSecondary
+          }],
+          children: ["Listeners (", listeners.length, ")"]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.listenerGrid,
+          children: listeners.map(p => /*#__PURE__*/_jsx(ConnectedListenerAvatar, {
+            participant: p,
+            oxyServices: oxyServices,
+            AvatarComponent: AvatarComponent,
+            getCachedFileDownloadUrlSync: getCachedFileDownloadUrlSync,
+            useUserById: useUserById
+          }, p.userId))
+        })]
+      }), isHost && speakerRequests.length > 0 && /*#__PURE__*/_jsxs(View, {
+        style: styles.requestsSection,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.requestsHeader, {
+            color: theme.colors.textSecondary
+          }],
+          children: "Requests to speak"
+        }), speakerRequests.map(r => /*#__PURE__*/_jsx(ConnectedRequestRow, {
+          request: r,
+          theme: theme,
+          oxyServices: oxyServices,
+          onApprove: approveSpeaker,
+          onDeny: denySpeaker,
+          AvatarComponent: AvatarComponent,
+          getCachedFileDownloadUrlSync: getCachedFileDownloadUrlSync,
+          useUserById: useUserById
+        }, r.userId))]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.controlBar, {
+        borderTopColor: theme.colors.border
+      }],
+      children: [canSpeak ? /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.controlItem,
+        onPress: toggleMute,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.controlCircle, {
+            backgroundColor: isMuted ? theme.colors.backgroundSecondary : theme.colors.primary
+          }],
+          children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: isMuted ? 'microphone-off' : 'microphone',
+            size: 24,
+            color: isMuted ? theme.colors.text : '#FFFFFF'
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.controlLabel, {
+            color: theme.colors.textSecondary
+          }],
+          children: isMuted ? 'Unmute' : 'Mute'
+        })]
+      }) : /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.controlItem,
+        onPress: requestToSpeak,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.controlCircle, {
+            backgroundColor: theme.colors.backgroundSecondary
+          }],
+          children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: "hand-back-left",
+            size: 24,
+            color: theme.colors.text
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.controlLabel, {
+            color: theme.colors.textSecondary
+          }],
+          children: "Request"
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.controlItem,
+        onPress: () => setActivePanel('insights'),
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.controlCircle, {
+            backgroundColor: theme.colors.backgroundSecondary
+          }],
+          children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: "chart-box-outline",
+            size: 24,
+            color: theme.colors.text
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.controlLabel, {
+            color: theme.colors.textSecondary
+          }],
+          children: "Insights"
+        })]
+      }), isHost && /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.controlItem,
+        onPress: () => setActivePanel('stream'),
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.controlCircle, {
+            backgroundColor: theme.colors.backgroundSecondary
+          }],
+          children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: "radio",
+            size: 24,
+            color: theme.colors.text
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.controlLabel, {
+            color: theme.colors.textSecondary
+          }],
+          children: "Stream"
+        })]
+      }), isHost && /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.controlItem,
+        onPress: () => setActivePanel('settings'),
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.controlCircle, {
+            backgroundColor: theme.colors.backgroundSecondary
+          }],
+          children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: "cog-outline",
+            size: 24,
+            color: theme.colors.text
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.controlLabel, {
+            color: theme.colors.textSecondary
+          }],
+          children: "Settings"
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.controlItem,
+        onPress: handleLeave,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.leaveCircle, {
+            backgroundColor: '#FF4458'
+          }],
+          children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: "exit-run",
+            size: 24,
+            color: "#FFFFFF"
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.controlLabel, {
+            color: theme.colors.textSecondary
+          }],
+          children: "Leave"
+        })]
+      })]
+    })]
+  });
+}
+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: '#FF44581A'
+  },
+  endButtonText: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#FF4458'
+  },
+  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
+  }
+});
+//# sourceMappingURL=LiveRoomSheet.js.map