完善观影室

src/hooks/useLiveSync.ts

@@ -0,0 +1,96 @@
+// React Hook for Live Page Synchronization
+'use client';
+
+import { useEffect, useRef, useCallback } from 'react';
+import { useWatchRoomContextSafe } from '@/components/WatchRoomProvider';
+import type { LiveState } from '@/types/watch-room';
+
+interface UseLiveSyncOptions {
+  currentChannelId: string;
+  currentChannelName: string;
+  currentChannelUrl: string;
+  onChannelChange?: (channelId: string, channelUrl: string) => void;
+}
+
+export function useLiveSync({
+  currentChannelId,
+  currentChannelName,
+  currentChannelUrl,
+  onChannelChange,
+}: UseLiveSyncOptions) {
+  const watchRoom = useWatchRoomContextSafe();
+  const syncingRef = useRef(false); // 防止循环同步
+
+  // 检查是否在房间内
+  const isInRoom = !!(watchRoom && watchRoom.currentRoom);
+  const isOwner = watchRoom?.isOwner || false;
+  const currentRoom = watchRoom?.currentRoom;
+  const socket = watchRoom?.socket;
+
+  // 房主：广播频道切换
+  const broadcastChannelChange = useCallback(() => {
+    if (!isOwner || !socket || syncingRef.current || !watchRoom) return;
+
+    if (!currentChannelId || !currentChannelName || !currentChannelUrl) return;
+
+    const state: LiveState = {
+      type: 'live',
+      channelId: currentChannelId,
+      channelName: currentChannelName,
+      channelUrl: currentChannelUrl,
+    };
+
+    console.log('[LiveSync] Broadcasting channel change:', state);
+    watchRoom.changeLiveChannel(state);
+  }, [isOwner, socket, currentChannelId, currentChannelName, currentChannelUrl, watchRoom]);
+
+  // 房员：接收并同步房主的频道切换
+  useEffect(() => {
+    if (!socket || !currentRoom || isOwner || !isInRoom) return;
+
+    const handleLiveChange = (state: LiveState) => {
+      if (syncingRef.current) return;
+
+      console.log('[LiveSync] Received channel change:', state);
+      syncingRef.current = true;
+
+      try {
+        // 调用回调函数来切换频道
+        if (onChannelChange) {
+          onChannelChange(state.channelId, state.channelUrl);
+        }
+      } finally {
+        setTimeout(() => {
+          syncingRef.current = false;
+        }, 1000);
+      }
+    };
+
+    socket.on('live:change', handleLiveChange);
+
+    return () => {
+      socket.off('live:change', handleLiveChange);
+    };
+  }, [socket, currentRoom, isOwner, onChannelChange, isInRoom]);
+
+  // 房主：当频道改变时自动广播
+  useEffect(() => {
+    if (!isOwner || !currentChannelId || !isInRoom) return;
+
+    // 防止初始化时广播
+    if (syncingRef.current) return;
+
+    const timer = setTimeout(() => {
+      broadcastChannelChange();
+    }, 500); // 延迟广播，避免频繁触发
+
+    return () => clearTimeout(timer);
+  }, [isOwner, currentChannelId, currentChannelUrl, broadcastChannelChange, isInRoom]);
+
+  return {
+    isInRoom,
+    isOwner,
+    shouldDisableControls: isInRoom && !isOwner, // 房员禁用频道切换
+    broadcastChannelChange, // 导出供手动调用
+  };
+}