update chat

_includes/player.html

@@ -76,17 +76,33 @@
     console.log("Usuário da live:", streamUser);
     const videoElement = document.querySelector('video');
     const playerOffElement = document.querySelector('.player-off');
+    const chatContainer = document.querySelector('.chat-container');
+    const chatForm = document.querySelector('.chat-input-form');
+    const usernameInput = document.querySelector('#username-input');
+    const chatInputField = document.querySelector('.chat-enter');
+
     const url = `https://class.alice.ufsj.edu.br/dash/${streamUser}.mpd`;
     videoElement.src = url;
 
+    let chatAtivo = false;
+
     fetch(url)
         .then(response => {
             if (response.ok) {
                 console.log("Arquivo existe.");
                 playerOffElement.style.display = "none";
+                iniciarChat();
             } else {
                 console.log("Arquivo não encontrado.");
                 videoElement.style.opacity = "0";
+
+                if (chatContainer) {
+                    chatContainer.style.opacity = "0.3";
+                    chatContainer.style.pointerEvents = "none";
+                }
+
+                if (usernameInput) usernameInput.disabled = true;
+                if (chatInputField) chatInputField.disabled = true;
             }
         });
 
@@ -94,58 +110,70 @@
     // Chat ao vivo
     // =====================
 
-    const nomesAlice = [
-        'Alice', 'Chapeleiro Maluco', 'Coelho Branco', 'Rainha de Copas',
-        'Gato de Cheshire', 'Lebre de Março', 'Lagarta', 'Dodo',
-        'Tweedledee', 'Tweedledum', 'Rainha Vermelha', 'Rei de Copas'
-    ];
+    function iniciarChat() {
+        chatAtivo = true;
 
-    function nomeAleatorio() {
-        return nomesAlice[Math.floor(Math.random() * nomesAlice.length)];
-    }
+        const nomesAlice = [
+            'Alice', 'Chapeleiro Maluco', 'Coelho Branco', 'Rainha de Copas',
+            'Gato de Cheshire', 'Lebre de Março', 'Lagarta', 'Dodo',
+            'Tweedledee', 'Tweedledum', 'Rainha Vermelha', 'Rei de Copas'
+        ];
 
-    let username = nomeAleatorio();
+        function nomeAleatorio() {
+            return nomesAlice[Math.floor(Math.random() * nomesAlice.length)];
+        }
 
-    function setCustomUsername() {
-        const customUsername = document.querySelector('#username-input').value.trim();
-        username = customUsername || nomeAleatorio();
-    }
+        let username = nomeAleatorio();
 
-    const source = new EventSource(`php/chat/relay.php?user=${encodeURIComponent(streamUser)}`);
+        function setCustomUsername() {
+            const customUsername = usernameInput.value.trim();
+            username = customUsername || nomeAleatorio();
+        }
 
-    source.onmessage = function (event) {
-        const msg = JSON.parse(event.data);
-        addMessage(msg);
-    };
+        const source = new EventSource(`php/chat/relay.php?user=${encodeURIComponent(streamUser)}`);
 
-    function sendMessage(event) {
-        event.preventDefault();
+        let ultimaMensagem = "";
 
-        const message = document.querySelector('.chat-enter').value;
-        const msgData = {
-            nome: username,
-            mensagem: message
+        source.onmessage = function (event) {
+            if (event.data !== ultimaMensagem) {
+                ultimaMensagem = event.data;
+                const msg = JSON.parse(event.data);
+                addMessage(msg);
+            }
         };
 
-        fetch(`php/chat/send.php?user=${encodeURIComponent(streamUser)}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-            body: 'mensagem=' + encodeURIComponent(JSON.stringify(msgData))
-        });
+        function sendMessage(event) {
+            event.preventDefault();
 
-        document.querySelector('.chat-enter').value = '';
+            const message = document.querySelector('.chat-enter').value;
+            if (!message.trim()) return;
+
+            const msgData = {
+                nome: username,
+                mensagem: message.trim()
+            };
+
+            fetch(`php/chat/send.php?user=${encodeURIComponent(streamUser)}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: 'mensagem=' + encodeURIComponent(JSON.stringify(msgData))
+            })
+            .catch(err => console.error("Erro ao enviar mensagem:", err));
+
+            document.querySelector('.chat-enter').value = '';
+        }
+
+        function addMessage(msg) {
+            const chatLines = document.querySelector('.chat-lines');
+            const newMessage = document.createElement('div');
+            newMessage.classList.add('chat-line');
+            newMessage.innerHTML = `<p><span class=\"username\">${msg.nome}:</span> ${msg.mensagem}</p>`;
+
+            chatLines.appendChild(newMessage);
+            chatLines.scrollTop = chatLines.scrollHeight;
+        }
+
+        chatForm.addEventListener('submit', sendMessage);
+        usernameInput.addEventListener('change', setCustomUsername);
     }
-
-    function addMessage(msg) {
-        const chatLines = document.querySelector('.chat-lines');
-        const newMessage = document.createElement('div');
-        newMessage.classList.add('chat-line');
-        newMessage.innerHTML = `<p><span class=\"username\">${msg.nome}:</span> ${msg.mensagem}</p>`;
-
-        chatLines.appendChild(newMessage);
-        chatLines.scrollTop = chatLines.scrollHeight;
-    }
-
-    document.querySelector('.chat-input-form').addEventListener('submit', sendMessage);
-    document.querySelector('#username-input').addEventListener('change', setCustomUsername);
 </script>