<!DOCTYPE html>
<html lang="en" style="background-color: #272a33;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Receptor</title>
    <script src="../socket.io/socket.io.js"></script>
    <script src="RTCMultiConnection.min.js"></script>
</head>
<style>
    #joinButton {
        background-color: #505163; /* Color verde para el estado activo */
        color: white;
        border: none;
        padding: 4px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        border-radius: 4px;
        transition: background-color 0.3s;
    }
    .fcc-btn {
  background-color: #4e4c5a;
  color: white;
  padding: 8px 25px;
  text-decoration: none;
  border-radius: 5px;
}
.inp {
    background-color: #52586b;
    color: white;
    height: 26px;
    font-size: 17px;
    width: 100px;
    border: none;
    border-radius: 5px;
    padding: 0px 9px;
}
</style>
<body style="font-family: sans-serif;color: white;    background-color: #1d1f26;">
 <div style="display: flex; flex-direction: column; align-content: center; align-items: center;"><h1>Receptor</h1>
    <div style="background-color: #13141a;width: 100%;display: flex;justify-content: center;">
        <!-- Mostrar solo el video recibido -->
        <video style="margin: 29px;min-width: 65%;max-width: 68%;" id="remoteVideo" autoplay playsinline></video>
    </div>

    <div id="moni" style="order: 0;  z-index: 1;  position: absolute;  margin-top: 19%;"><input class="inp" type="text" id="roomId" placeholder="ID" value="Monitor" />
    <button id="joinButton">ACTIVAR</button>
    </div>
    <div>
        <a class="fcc-btn" href="/visualizar.html" >ACTUALIZAR</a>
      
    </div>
    </div>
    </div>
 </div>
    <script>
        const socket = io();
        const connection = new RTCMultiConnection();
  
        connection.socketURL = '/'; // URL del servidor Socket.IO

        connection.session = {
            video: true,
            audio: true,
            oneway: true // Solo recepción de medios
        };
        
       // Función para hacer pantalla completa
        function goFullScreen(element) {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) { // Firefox
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) { // Chrome, Safari
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) { // IE/Edge
                element.msRequestFullscreen();
            }
        }
        // Unirse a la sala especificada
        document.getElementById('joinButton').addEventListener('click', () => {
            const roomId = document.getElementById('roomId').value.trim();

            if (roomId) {
                const joinButton = document.getElementById('joinButton');
                joinButton.disabled = true;
                joinButton.textContent = 'ON >>';
                //startButton.style.display = 'none';
                const moni = document.getElementById('moni');
                //audioDevices.disabled = true;
                //audioDevices.textContent = 'ON >>';
                moni.style.display = 'none';
                // Únete a la sala especificada
                connection.join(roomId);
                // Hacer que el video de recepción ocupe toda la pantalla
                const remoteVideo = document.getElementById('remoteVideo');
                goFullScreen(remoteVideo);
            } else {
                alert('Por favor, ingrese un Room ID válido.');
            }
        });

        // Escuchar los streams de otros participantes
        connection.onstream = function(event) {
            const videoElement = document.getElementById('remoteVideo');
            videoElement.srcObject = event.stream;
        };

        // No solicitamos acceso a medios del receptor en este caso
        // Solo se muestra el video recibido del emisor
        
        
    </script>
</body>
</html>
