@syra.fm/sdk 0.4.0 → 0.5.0

package/src/live/context/LiveConfigContext.tsx

@@ -0,0 +1,96 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import type { ViewStyle } from 'react-native';
+import type { LiveTheme, UserEntity, HttpClient } from '../types';
+import { createRoomsService, type RoomsServiceInstance } from '../services/spacesService';
+import { RoomSocketService } from '../services/spaceSocketService';
+import { createGetRoomToken, type GetRoomTokenFn } from '../services/livekitService';
+
+/**
+ * The viewer's pinned Syra podcast (resolved from their profile media), surfaced
+ * by {@link LiveConfig.getPinnedPodcast}. `title`/`artworkUrl` are optional —
+ * the id is all the picker needs to drill into the episode list.
+ */
+export interface PinnedPodcast {
+  syraPodcastId: string;
+  title?: string;
+  artworkUrl?: string;
+}
+
+export interface LiveConfig {
+  httpClient: HttpClient;
+  socketUrl: string;
+  useTheme: () => LiveTheme;
+  /**
+   * Translate a UI string key to the active locale. Optional: hosts WITH an i18n
+   * layer (the Mention frontend) inject their real translator so the shared
+   * live-room UI localizes; hosts WITHOUT one (the standalone live-rooms app) omit it
+   * and the shared components fall back to their bundled English source copy.
+   * Keys are looked up flat (e.g. `agora.podcastStream.disclaimer`).
+   */
+  t?: (key: string, options?: Record<string, string | number>) => string;
+  /**
+   * Resolve the viewer's pinned Syra podcast from their profile media, or `null`
+   * when they have none / it can't be read. Optional: hosts that expose profile
+   * media wire it so the podcast picker can offer a one-tap "stream my pinned
+   * podcast" quick-start row. The picker renders nothing when this is absent or
+   * resolves to `null`.
+   */
+  getPinnedPodcast?: () => Promise<PinnedPodcast | null>;
+  useUserById: (id: string | undefined) => UserEntity | undefined;
+  ensureUserById: (
+    id: string,
+    loader: (id: string) => Promise<UserEntity | null | undefined>
+  ) => Promise<UserEntity | undefined>;
+  getCachedFileDownloadUrl: (oxyServices: unknown, fileId: string, variant?: string) => Promise<string>;
+  getCachedFileDownloadUrlSync: (oxyServices: unknown, fileId: string, variant?: string) => string;
+  AvatarComponent: React.ComponentType<{ size: number; source?: string; shape?: string; style?: ViewStyle }>;
+  toast: {
+    (message: string, options?: Record<string, unknown>): void;
+    success: (message: string) => void;
+    error: (message: string) => void;
+  };
+  introSound?: number;
+  isDesktop?: boolean;
+  useIsDesktop?: () => boolean;
+  onRoomChanged?: (roomId: string) => void;
+  /**
+   * Optional NativeWind className applied to the floating live-room dock and its
+   * backdrop. Hosts whose web shell uses a DOCUMENT-scroll model (html/body/#root
+   * = height:auto + overflow:visible, the window is the scroller) must pass
+   * `"web:fixed"` so the dock pins to the VIEWPORT bottom instead of resolving
+   * its `position: absolute` against the tall document and sinking to the page
+   * bottom. Omitted on hosts with the default fixed-viewport web model (and on
+   * native, where `web:fixed` is a no-op and the dock pins via `position:
+   * absolute` against the screen-filling root).
+   */
+  dockClassName?: string;
+}
+
+export interface LiveConfigInternal extends LiveConfig {
+  roomsService: RoomsServiceInstance;
+  roomSocketService: RoomSocketService;
+  getRoomToken: GetRoomTokenFn;
+}
+
+const LiveConfigContext = createContext<LiveConfigInternal | null>(null);
+
+export function useLiveConfig(): LiveConfigInternal {
+  const config = useContext(LiveConfigContext);
+  if (!config) throw new Error('useLiveConfig must be used within a LiveConfigProvider');
+  return config;
+}
+
+export function LiveConfigProvider({ config, children }: { config: LiveConfig; children: React.ReactNode }) {
+  const fullConfig = useMemo<LiveConfigInternal>(() => {
+    const roomsService = createRoomsService(config.httpClient);
+    const roomSocketService = new RoomSocketService(config.socketUrl);
+    const getRoomToken = createGetRoomToken(config.httpClient);
+    return { ...config, roomsService, roomSocketService, getRoomToken };
+  }, [config]);
+
+  return (
+    <LiveConfigContext.Provider value={fullConfig}>
+      {children}
+    </LiveConfigContext.Provider>
+  );
+}

package/src/live/context/LiveRoomContext.tsx

@@ -0,0 +1,235 @@
+import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';
+import { StyleSheet, Pressable, useWindowDimensions, Platform, type ViewStyle } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  interpolate,
+  Extrapolation,
+  runOnJS,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BlurView } from 'expo-blur';
+
+import { useLiveConfig } from './LiveConfigContext';
+import { LiveRoomSheet } from '../components/LiveRoomSheet';
+import { MINI_BAR_HEIGHT } from '../components/MiniRoomBar';
+
+interface LiveRoomContextProps {
+  activeRoomId: string | null;
+  joinLiveRoom: (roomId: string) => void;
+  leaveLiveRoom: () => void;
+}
+
+const LiveRoomContext = createContext<LiveRoomContextProps>({
+  activeRoomId: null,
+  joinLiveRoom: () => {},
+  leaveLiveRoom: () => {},
+});
+
+export function useLiveRoom() {
+  return useContext(LiveRoomContext);
+}
+
+const SPRING_CONFIG = { damping: 28, stiffness: 220, overshootClamping: true };
+// Bottom bar: bottom 12 + height 56 + gap 8
+const BOTTOM_BAR_OFFSET = 76;
+const defaultUseIsDesktop = () => false;
+
+export function LiveRoomProvider({ children }: { children: React.ReactNode }) {
+  const config = useLiveConfig();
+  const theme = config.useTheme();
+  // NativeWind class the host supplies to pin the dock to the viewport on web
+  // (e.g. `"web:fixed"` for the document-scroll shell). Undefined on hosts with
+  // the default fixed-viewport model and on native (no-op there).
+  const dockClassName = config.dockClassName;
+  // Inline `position`, resolved per-platform/host so it never fights the
+  // className on web:
+  //   - NATIVE (always): `absolute` — pins against the screen-filling root
+  //     (`web:fixed` is a no-op on native).
+  //   - WEB + host className present (e.g. Mention's document-scroll shell):
+  //     OMIT the inline position so the supplied `web:fixed` class owns it
+  //     (NativeWind lets an inline `position` win over a className, which would
+  //     re-sink the dock to the document bottom).
+  //   - WEB + no host className (e.g. the live-rooms app, fixed-viewport model with
+  //     no NativeWind): `absolute` — pins to the viewport there, preserving the
+  //     prior behavior.
+  const dockPosition = useMemo<ViewStyle>(
+    () => (Platform.OS === 'web' && dockClassName ? {} : { position: 'absolute' }),
+    [dockClassName],
+  );
+  const insets = useSafeAreaInsets();
+  const { height: screenHeight } = useWindowDimensions();
+
+  const useIsDesktopHook = config.useIsDesktop ?? defaultUseIsDesktop;
+  const isDesktop = useIsDesktopHook();
+
+  const [activeRoomId, setActiveRoomId] = useState<string | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const hasBottomBar = !isDesktop;
+  const bottomBarOffset = hasBottomBar ? BOTTOM_BAR_OFFSET : 12;
+  const collapsedHeight = MINI_BAR_HEIGHT;
+  const expandedMaxHeight = screenHeight * 0.85 - bottomBarOffset;
+
+  const progress = useSharedValue(0);
+
+  const sheetAnimStyle = useAnimatedStyle(() => {
+    const h = interpolate(
+      progress.value,
+      [0, 1, 2],
+      [0, collapsedHeight, expandedMaxHeight],
+      Extrapolation.CLAMP,
+    );
+    const inset = 16;
+    const topRadius = interpolate(
+      progress.value,
+      [1, 2],
+      [collapsedHeight / 2, 16],
+      Extrapolation.CLAMP,
+    );
+    const bottomRadius = interpolate(
+      progress.value,
+      [1, 2],
+      [collapsedHeight / 2, 16],
+      Extrapolation.CLAMP,
+    );
+    return {
+      height: h,
+      left: inset,
+      right: inset,
+      borderTopLeftRadius: topRadius,
+      borderTopRightRadius: topRadius,
+      borderBottomLeftRadius: bottomRadius,
+      borderBottomRightRadius: bottomRadius,
+    };
+  });
+
+  const backdropAnimStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(progress.value, [1, 2], [0, 1], Extrapolation.CLAMP),
+  }));
+
+  const joinLiveRoom = useCallback((roomId: string) => {
+    setActiveRoomId(roomId);
+    setIsExpanded(true);
+    progress.value = withSpring(2, SPRING_CONFIG);
+  }, [progress]);
+
+  const clearRoom = useCallback(() => {
+    setActiveRoomId(null);
+    setIsExpanded(false);
+  }, []);
+
+  const leaveLiveRoom = useCallback(() => {
+    setIsExpanded(false);
+    progress.value = withTiming(0, { duration: 250 }, (finished) => {
+      if (finished) runOnJS(clearRoom)();
+    });
+  }, [progress, clearRoom]);
+
+  const handleCollapse = useCallback(() => {
+    setIsExpanded(false);
+    progress.value = withSpring(1, SPRING_CONFIG);
+  }, [progress]);
+
+  const handleExpand = useCallback(() => {
+    setIsExpanded(true);
+    progress.value = withSpring(2, SPRING_CONFIG);
+  }, [progress]);
+
+  const contextValue = useMemo(
+    () => ({ activeRoomId, joinLiveRoom, leaveLiveRoom }),
+    [activeRoomId, joinLiveRoom, leaveLiveRoom]
+  );
+
+  return (
+    <LiveRoomContext.Provider value={contextValue}>
+      {children}
+
+      {activeRoomId && (
+        <Animated.View
+          className={dockClassName}
+          style={[styles.backdrop, dockPosition, backdropAnimStyle]}
+          pointerEvents={isExpanded ? 'auto' : 'none'}
+        >
+          <Pressable style={StyleSheet.absoluteFill} onPress={handleCollapse} />
+        </Animated.View>
+      )}
+
+      {activeRoomId && (
+        <Animated.View
+          className={dockClassName}
+          style={[
+            styles.sheet,
+            dockPosition,
+            {
+              bottom: bottomBarOffset,
+              borderColor: theme.colors.border,
+              ...(Platform.OS === 'web' ? {
+                backgroundColor: `${theme.colors.card}CC`,
+                backdropFilter: 'blur(20px)',
+                WebkitBackdropFilter: 'blur(20px)',
+                boxShadow: `0 2px 16px ${theme.colors.shadow}`,
+              } : {
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: 0.15,
+                shadowRadius: 12,
+                elevation: 8,
+              }),
+            },
+            sheetAnimStyle,
+          ]}
+        >
+          {Platform.OS === 'web' ? (
+            <LiveRoomSheet
+              roomId={activeRoomId}
+              isExpanded={isExpanded}
+              onCollapse={handleCollapse}
+              onExpand={handleExpand}
+              onLeave={leaveLiveRoom}
+            />
+          ) : (
+            <BlurView
+              intensity={80}
+              tint={theme.isDark ? 'dark' : 'light'}
+              experimentalBlurMethod="dimezisBlurView"
+              style={{ flex: 1 }}
+            >
+              <LiveRoomSheet
+                roomId={activeRoomId}
+                isExpanded={isExpanded}
+                onCollapse={handleCollapse}
+                onExpand={handleExpand}
+                onLeave={leaveLiveRoom}
+              />
+            </BlurView>
+          )}
+        </Animated.View>
+      )}
+    </LiveRoomContext.Provider>
+  );
+}
+
+// `position` is intentionally NOT set in these StyleSheet entries — it is
+// supplied at runtime via `dockPosition` (inline) and/or the host's
+// `dockClassName` (web), so an inline `position` here can never override the
+// `web:fixed` class on the document-scroll host.
+const styles = StyleSheet.create({
+  backdrop: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    zIndex: 999,
+  },
+  sheet: {
+    maxWidth: 500,
+    alignSelf: 'center',
+    zIndex: 1000,
+    overflow: 'hidden',
+    borderWidth: 1,
+  },
+});

package/src/live/hooks/useActiveSpeakers.ts

@@ -0,0 +1,39 @@
+import { useState, useEffect, useRef } from 'react';
+import { Room, RoomEvent, Participant } from 'livekit-client';
+
+export function useActiveSpeakers(room: Room | null): Set<string> {
+  const [activeSpeakerIds, setActiveSpeakerIds] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const prevSetRef = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (!room) {
+      if (prevSetRef.current.size > 0) {
+        prevSetRef.current = new Set();
+        setActiveSpeakerIds(new Set());
+      }
+      return;
+    }
+
+    const handleActiveSpeakersChanged = (speakers: Participant[]) => {
+      const newIds = new Set(speakers.map((s) => s.identity));
+      const prev = prevSetRef.current;
+      if (
+        newIds.size !== prev.size ||
+        [...newIds].some((id) => !prev.has(id))
+      ) {
+        prevSetRef.current = newIds;
+        setActiveSpeakerIds(newIds);
+      }
+    };
+
+    room.on(RoomEvent.ActiveSpeakersChanged, handleActiveSpeakersChanged);
+
+    return () => {
+      room.off(RoomEvent.ActiveSpeakersChanged, handleActiveSpeakersChanged);
+    };
+  }, [room]);
+
+  return activeSpeakerIds;
+}

package/src/live/hooks/useRoomAudio.ts

@@ -0,0 +1,103 @@
+import { useState, useEffect, useRef } from 'react';
+import { Platform } from 'react-native';
+import { Room, RoomEvent, Track, ConnectionState } from 'livekit-client';
+import { setAudioModeAsync } from 'expo-audio';
+import { useLiveConfig } from '../context/LiveConfigContext';
+
+let AudioSession: { startAudioSession: () => void; stopAudioSession: () => void } | null = null;
+if (Platform.OS !== 'web') {
+  try { AudioSession = require('@livekit/react-native').AudioSession; } catch {}
+}
+
+interface UseRoomAudioOptions {
+  roomId: string;
+  isSpeaker: boolean;
+  isMuted: boolean;
+  isConnected: boolean;
+}
+
+interface UseRoomAudioReturn {
+  isLiveKitConnected: boolean;
+  localAudioEnabled: boolean;
+  micPermissionDenied: boolean;
+  livekitRoom: Room | null;
+}
+
+export function useRoomAudio({ roomId, isSpeaker, isMuted, isConnected }: UseRoomAudioOptions): UseRoomAudioReturn {
+  const { getRoomToken } = useLiveConfig();
+  const [isLiveKitConnected, setIsLiveKitConnected] = useState(false);
+  const [localAudioEnabled, setLocalAudioEnabled] = useState(false);
+  const [micPermissionDenied, setMicPermissionDenied] = useState(false);
+  const [livekitRoom, setLivekitRoom] = useState<Room | null>(null);
+  const roomRef = useRef<Room | null>(null);
+  const audioElementsRef = useRef<Map<string, HTMLMediaElement>>(new Map());
+
+  useEffect(() => {
+    if (!isConnected || Platform.OS === 'web') return;
+    (async () => {
+      try {
+        await setAudioModeAsync({ shouldPlayInBackground: true, playsInSilentMode: true, interruptionMode: 'duckOthers' });
+      } catch {}
+      if (AudioSession) AudioSession.startAudioSession();
+    })();
+    return () => { if (AudioSession) AudioSession.stopAudioSession(); };
+  }, [isConnected]);
+
+  useEffect(() => {
+    if (!isConnected || !roomId) return;
+    let cancelled = false;
+    const room = new Room({ adaptiveStream: true, dynacast: true });
+    roomRef.current = room;
+    setLivekitRoom(room);
+
+    room.on(RoomEvent.Connected, () => { if (!cancelled) { setIsLiveKitConnected(true); } });
+    room.on(RoomEvent.Disconnected, () => { if (!cancelled) { setIsLiveKitConnected(false); setLocalAudioEnabled(false); } });
+    room.on(RoomEvent.TrackSubscribed, (track, _pub, _participant) => {
+      if (track.kind === Track.Kind.Audio && Platform.OS === 'web' && typeof track.attach === 'function') {
+        const el = track.attach();
+        audioElementsRef.current.set(track.sid ?? '', el);
+      }
+    });
+    room.on(RoomEvent.TrackUnsubscribed, (track) => {
+      if (track.kind === Track.Kind.Audio && Platform.OS === 'web' && typeof track.detach === 'function') {
+        track.detach();
+        audioElementsRef.current.delete(track.sid ?? '');
+      }
+    });
+
+    (async () => {
+      try {
+        const { token, url } = await getRoomToken(roomId);
+        if (cancelled || !url) return;
+        await room.connect(url, token);
+      } catch (err) { console.warn('[RoomAudio] LiveKit connection error:', err); }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (Platform.OS === 'web') {
+        audioElementsRef.current.forEach((el) => { el.pause(); el.srcObject = null; el.remove(); });
+        audioElementsRef.current.clear();
+      }
+      room.disconnect();
+      roomRef.current = null;
+      setLivekitRoom(null);
+      setIsLiveKitConnected(false);
+      setLocalAudioEnabled(false);
+    };
+  }, [isConnected, roomId, getRoomToken]);
+
+  useEffect(() => {
+    const room = roomRef.current;
+    if (!room || room.state !== ConnectionState.Connected) return;
+    const shouldPublish = isSpeaker && !isMuted;
+    room.localParticipant.setMicrophoneEnabled(shouldPublish)
+      .then(() => { setLocalAudioEnabled(shouldPublish); setMicPermissionDenied(false); })
+      .catch((err) => {
+        console.warn('[RoomAudio] Failed to toggle mic:', err);
+        if (err instanceof Error && err.name === 'NotAllowedError') setMicPermissionDenied(true);
+      });
+  }, [isSpeaker, isMuted, isLiveKitConnected]);
+
+  return { isLiveKitConnected, localAudioEnabled, micPermissionDenied, livekitRoom };
+}

package/src/live/hooks/useRoomConnection.ts

@@ -0,0 +1,162 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useAuth } from '@oxyhq/services';
+import { createAudioPlayer } from 'expo-audio';
+import { useLiveConfig } from '../context/LiveConfigContext';
+import type { RoomParticipant, StreamInfo } from '../types';
+
+interface UseRoomConnectionOptions {
+  roomId: string;
+  enabled?: boolean;
+}
+
+interface UseRoomConnectionReturn {
+  isConnected: boolean;
+  participants: RoomParticipant[];
+  myRole: 'host' | 'speaker' | 'listener' | null;
+  isMuted: boolean;
+  speakerRequests: Array<{ userId: string; requestedAt: string }>;
+  activeStream: StreamInfo | null;
+  isRecording: boolean;
+  activeRecordingId: string | null;
+  join: () => void;
+  leave: () => void;
+  toggleMute: () => void;
+  requestToSpeak: () => void;
+  approveSpeaker: (userId: string) => void;
+  denySpeaker: (userId: string) => void;
+  removeSpeaker: (userId: string) => void;
+  isRoomEnded: boolean;
+}
+
+export function useRoomConnection({
+  roomId,
+  enabled = true,
+}: UseRoomConnectionOptions): UseRoomConnectionReturn {
+  const { user, isAuthenticated, isReady, oxyServices } = useAuth();
+  const { roomSocketService, introSound } = useLiveConfig();
+  const userId = user?.id;
+
+  const [isConnected, setIsConnected] = useState(false);
+  const [participants, setParticipants] = useState<RoomParticipant[]>([]);
+  const [isMuted, setIsMuted] = useState(true);
+  const [speakerRequests, setSpeakerRequests] = useState<Array<{ userId: string; requestedAt: string }>>([]);
+  const [isRoomEnded, setIsRoomEnded] = useState(false);
+  const [activeStream, setActiveStream] = useState<StreamInfo | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [activeRecordingId, setActiveRecordingId] = useState<string | null>(null);
+  const hasJoined = useRef(false);
+
+  const myParticipant = participants.find((p) => p.userId === userId);
+  const myRole = myParticipant?.role ?? null;
+
+  useEffect(() => {
+    if (!enabled || !isAuthenticated || !isReady || !userId) return;
+    const token = oxyServices?.getAccessToken() ?? undefined;
+    if (!token) return;
+    roomSocketService.connect(userId, token);
+    const interval = setInterval(() => { setIsConnected(roomSocketService.isConnected); }, 500);
+    return () => { clearInterval(interval); };
+  }, [enabled, isAuthenticated, isReady, userId, roomSocketService, oxyServices]);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const unsubs: Array<() => void> = [];
+
+    unsubs.push(roomSocketService.onParticipantsUpdate((data) => {
+      if (data.roomId === roomId) setParticipants(data.participants);
+    }));
+    unsubs.push(roomSocketService.onParticipantMute((data) => {
+      setParticipants((prev) => prev.map((p) => p.userId === data.userId ? { ...p, isMuted: data.isMuted } : p));
+      if (data.userId === userId) setIsMuted(data.isMuted);
+    }));
+    unsubs.push(roomSocketService.onSpeakerRequestReceived((data) => {
+      if (data.roomId === roomId) {
+        setSpeakerRequests((prev) => {
+          if (prev.some((r) => r.userId === data.userId)) return prev;
+          return [...prev, { userId: data.userId, requestedAt: data.timestamp }];
+        });
+      }
+    }));
+    unsubs.push(roomSocketService.onRoomEnded((data) => {
+      if (data.roomId === roomId) { setIsRoomEnded(true); setActiveStream(null); }
+    }));
+    unsubs.push(roomSocketService.onSpeakerRemoved((data) => {
+      if (data.roomId === roomId) setIsMuted(true);
+    }));
+    unsubs.push(roomSocketService.onStreamStarted((data) => {
+      if (data.roomId === roomId) setActiveStream({ title: data.title, image: data.image, description: data.description, startedAt: data.startedAt, durationSec: data.durationSec });
+    }));
+    unsubs.push(roomSocketService.onStreamStopped((data) => {
+      if (data.roomId === roomId) setActiveStream(null);
+    }));
+    unsubs.push(roomSocketService.onRecordingStarted((data) => {
+      if (data.roomId === roomId) {
+        setIsRecording(true);
+        setActiveRecordingId(data.recordingId);
+      }
+    }));
+    unsubs.push(roomSocketService.onRecordingStopped((data) => {
+      if (data.roomId === roomId) {
+        setIsRecording(false);
+        setActiveRecordingId(null);
+      }
+    }));
+
+    return () => { unsubs.forEach((fn) => fn()); };
+  }, [enabled, roomId, userId, roomSocketService]);
+
+  const join = useCallback(() => {
+    if (hasJoined.current) return;
+    roomSocketService.joinRoom(roomId, (res) => {
+      if (res.success && res.participants) {
+        setParticipants(res.participants);
+        hasJoined.current = true;
+        if (introSound) {
+          try { const player = createAudioPlayer(introSound); player.play(); } catch {}
+        }
+      }
+    });
+  }, [roomId, roomSocketService, introSound]);
+
+  const leave = useCallback(() => {
+    roomSocketService.leaveRoom(roomId);
+    setParticipants([]);
+    hasJoined.current = false;
+  }, [roomId, roomSocketService]);
+
+  const toggleMute = useCallback(() => {
+    const newMuted = !isMuted;
+    setIsMuted(newMuted);
+    roomSocketService.setMute(roomId, newMuted);
+  }, [roomId, isMuted, roomSocketService]);
+
+  const requestToSpeak = useCallback(() => {
+    if (myRole === 'speaker' || myRole === 'host') return;
+    roomSocketService.requestToSpeak(roomId);
+  }, [roomId, myRole, roomSocketService]);
+
+  const approveSpeaker = useCallback((targetUserId: string) => {
+    roomSocketService.approveSpeaker(roomId, targetUserId);
+    setSpeakerRequests((prev) => prev.filter((r) => r.userId !== targetUserId));
+  }, [roomId, roomSocketService]);
+
+  const denySpeaker = useCallback((targetUserId: string) => {
+    roomSocketService.denySpeaker(roomId, targetUserId);
+    setSpeakerRequests((prev) => prev.filter((r) => r.userId !== targetUserId));
+  }, [roomId, roomSocketService]);
+
+  const removeSpeaker = useCallback((targetUserId: string) => {
+    roomSocketService.removeSpeaker(roomId, targetUserId);
+  }, [roomId, roomSocketService]);
+
+  useEffect(() => {
+    return () => {
+      if (hasJoined.current && roomId) {
+        roomSocketService.leaveRoom(roomId);
+        hasJoined.current = false;
+      }
+    };
+  }, [roomId, roomSocketService]);
+
+  return { isConnected, participants, myRole, isMuted, speakerRequests, activeStream, isRecording, activeRecordingId, join, leave, toggleMute, requestToSpeak, approveSpeaker, denySpeaker, removeSpeaker, isRoomEnded };
+}

package/src/live/hooks/useRoomManager.ts

@@ -0,0 +1,17 @@
+import { useState, useCallback } from "react";
+import type { RoomAttachmentData } from "../types";
+
+export const useRoomManager = () => {
+  const [room, setRoom] = useState<RoomAttachmentData | null>(null);
+
+  const attachRoom = useCallback((data: RoomAttachmentData) => { setRoom(data); }, []);
+  const removeRoom = useCallback(() => { setRoom(null); }, []);
+  const hasContent = useCallback(() => {
+    if (!room) return false;
+    return Boolean(room.roomId && room.title?.trim());
+  }, [room]);
+  const loadRoomFromDraft = useCallback((draftRoom: RoomAttachmentData | null) => { setRoom(draftRoom); }, []);
+  const clearRoom = useCallback(() => { setRoom(null); }, []);
+
+  return { room, setRoom, attachRoom, removeRoom, hasContent, loadRoomFromDraft, clearRoom };
+};