app/index.tsx · Ramble-FE

import { VideoStream, VoiceChatControlPanel } from "@/components";
import { useAuth, useLocalMedia, useStompClient, useWebRTC } from "@/hooks";
import Constants from "expo-constants";
import Head from "expo-router/head";
import { StyleSheet, View, useWindowDimensions } from 'react-native';

export default function Index() {
    const appName = Constants.expoConfig?.name || 'App';
    const { isAuthenticated } = useAuth();

    const { mediaStream: localStream, isMediaReady, isMuted, toggleMute } = useLocalMedia(isAuthenticated);
    const { client: stompClient, isConnected: isStompConnected } = useStompClient(isAuthenticated);
    const isWebRTCReady = isAuthenticated && isMediaReady && isStompConnected;

    const { remoteStream, isConnected: isWebRTCConnected, startCall, endCall } = useWebRTC({
        enabled: isWebRTCReady,
        localStream,
        stompClient: stompClient ?? null,
    });

    // 화면 방향에 따라 레이아웃 조정
    const { width, height } = useWindowDimensions();
    const isLandscape = height <= width;

    // 메시지 전송 핸들러 (향후 채팅 기능용)
    const handleSend = (message: string) => {
        if (message.trim()) {
            console.log('메시지 전송:', message);
            // TODO: 채팅 메시지 전송 로직 구현
        }
    };
    
    return (
        <View style={styles.container}>
            <Head>
                <title>{appName} - Video Chat</title>
            </Head>
            
            {/* 화상 채팅 영역 */}
            <View 
                style={[
                    styles.videoContainer, 
                    isLandscape ? { flexDirection: 'row' } : { flexDirection: 'column' }
                ]}
            >
                {/* 상대방 화면 (좌측) */}
                <VideoStream
                    stream={remoteStream}
                    style={styles.video}
                />

                {/* 내 화면 (우측) */}
                <VideoStream
                    stream={localStream}
                    isMirrored={true}
                    isMuted={true}
                    style={styles.video}
                />
            </View>

            {/* 컨트롤 버튼 영역 */}
            <VoiceChatControlPanel
                isMuted={isMuted}
                isPossiblyConnecting={isWebRTCReady}
                isConnected={isWebRTCConnected}
                toggleMute={toggleMute}
                startCall={startCall}
                endCall={endCall}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#1A1A1E',
    },
    videoContainer: {
        flex: 1,
        flexDirection: 'row',
    },
    video: {
        flex: 1,
    },
});