From 756d2a98b27a300e48bb495b49c5435f60549c81 Mon Sep 17 00:00:00 2001
From: www-data <www-data@noreply.alice>
Date: Thu, 27 Mar 2025 09:59:15 -0300
Subject: [PATCH] update chat

---
 _includes/player.html | 216 ++++++++++++++++++------------------------
 php/chat/relay.php    |  35 +++++++
 php/chat/send.php     |  11 +++
 3 files changed, 136 insertions(+), 126 deletions(-)
 create mode 100644 php/chat/relay.php
 create mode 100644 php/chat/send.php

diff --git a/_includes/player.html b/_includes/player.html
index 707478c..78c113d 100644
--- a/_includes/player.html
+++ b/_includes/player.html
@@ -1,24 +1,18 @@
-<table id="temporary-table" style="display: none;">   
-        <tr>
-            <td>{{ include.user }}</td>
-        </tr>
-</table>
-
 <div class="live-container">
     <div class="player-container">
         <video
             class="player"
             data-dashjs-player
             {% if page.user %}
-            url="https://cast.alice.ufsj.edu.br/dash/{{page.user}}.mpd"
+            url="https://class.alice.ufsj.edu.br/dash/{{page.user}}.mpd"
             {% endif %}
             autoplay
             controls
-            muted 
+            muted
         ></video>
-        
+
         <div class="player-off">
-            <h1>Offlinee</h1>
+            <h1>Offline</h1>
         </div>
     </div>
 
@@ -30,158 +24,128 @@
                 </div>
                 <div class="chat-views">
                     <i class="fa-solid fa-users"></i>
-                    <!-- <h4>679 pessoas online</h4> -->
                 </div>
             </div>
-    
+
+            <!-- Campo de nome do usuário -->
+            <div class="chat-username" style="margin-bottom: 10px;">
+                <label for="username-input">Seu nome:</label>
+                <input
+                    type="text"
+                    id="username-input"
+                    placeholder="Escolha um nome (ou deixe em branco)"
+                    style="width: 100%; padding: 5px; margin-top: 5px;"
+                />
+            </div>
+
             <div class="chat-lines">
-                <div class="chat-line">
-                    <!-- <p><span class="username">{msg.nome}:</span> {msg.mensagem}</p> -->
-                </div>
+                <!-- Mensagens serão adicionadas aqui via JavaScript -->
             </div>
-    
+
             <div class="chat-input">
-                <form on:submit|preventDefault={sendMessage} class="chat-input-form">
-                    <input class="input chat-enter" placeholder="Converse com o chat aqui" bind:value={message} />
+                <form class="chat-input-form">
+                    <input class="input chat-enter" placeholder="Converse com o chat aqui" />
                     <input type="submit" hidden />
                 </form>
             </div>
         </div>
     </div>
-    
-
 </div>
 
 <script src="/assets/js/dash.all.min.js"></script>
 
 <script>
-    // Obter a string de query da URL
     const queryString = window.location.search;
-    // Criar um objeto URLSearchParams com a string de query
     const urlParams = new URLSearchParams(queryString);
 
+    // =====================
+    // Player da live
+    // =====================
+
+    let streamUser;
     {% if page.user %}
-    const user = "{{page.user}}";
+    streamUser = "{{page.user}}";
     {% else %}
-    const user = urlParams.get('user');
+    streamUser = urlParams.get('user');
     {% endif %}
-    
-    // Exemplo de como usar o valor
-    console.log(user); // Isso vai exibir o valor do parâmetro 'user'
+
+    if (!streamUser) {
+        streamUser = "default"; // fallback para evitar erro
+    }
+
+    console.log("Usuário da live:", streamUser);
     const videoElement = document.querySelector('video');
     const playerOffElement = document.querySelector('.player-off');
-    const url = `https://cast.alice.ufsj.edu.br/dash/${user}.mpd`;
+    const url = `https://class.alice.ufsj.edu.br/dash/${streamUser}.mpd`;
     videoElement.src = url;
-    
-    
-    
+
     fetch(url)
-      .then(response => {
-          if (response.ok) {
-              console.log("Arquivo existe.");
-              playerOffElement.style.display = "none";
-    
-              
-          } else {
-              console.log("Arquivo não encontrado.");
-            //   Coloque o código para ocultar o vídeo aqui
-              videoElement.style.opacity = "0";
-              
-          }
-      })
-    // URL do servidor WebSocket
-    const socket = new WebSocket('wss://cast.alice.ufsj.edu.br/chat/chat');
+        .then(response => {
+            if (response.ok) {
+                console.log("Arquivo existe.");
+                playerOffElement.style.display = "none";
+            } else {
+                console.log("Arquivo não encontrado.");
+                videoElement.style.opacity = "0";
+            }
+        });
 
-    socket.addEventListener('open', () => {
-    console.log('Conexão WebSocket aberta com sucesso!');
-});
+    // =====================
+    // Chat ao vivo
+    // =====================
 
-// Adiciona um manipulador de eventos para lidar com a recepção de mensagens
-socket.addEventListener('message', (event) => {
-    console.log('Mensagem recebida do servidor:', event.data);
-});
-
-// Adiciona um manipulador de eventos para lidar com o fechamento da conexão
-socket.addEventListener('close', (event) => {
-    console.log('Conexão WebSocket fechada:', event.reason || 'Sem motivo específico');
-});
-
-// Adiciona um manipulador de eventos para lidar com erros
-socket.addEventListener('error', (event) => {
-    console.error('Erro no WebSocket:', event);
-});
     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',
-        'JotaChina', 'JotaJapão', 'JotaÍndia', 'JotaCoreia', 'JotaTailândia', 
-        'JotaVietnã', 'JotaMalásia', 'JotaIndonésia', 'JotaFilipinas', 
-        'JotaSingapura', 'JotaNepal', 'JotaCamboja', 'JotaMianmar', 
-        'JotaLaos', 'JotaBangladesh', 'JotaSriLanka'
+        '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 nomeAleatorio() {
         return nomesAlice[Math.floor(Math.random() * nomesAlice.length)];
     }
-    // Variáveis para armazenar o nome do usuário e a mensagem
+
     let username = nomeAleatorio();
-    let message = '';
-    
-    // Função que envia a mensagem
+
+    function setCustomUsername() {
+        const customUsername = document.querySelector('#username-input').value.trim();
+        username = customUsername || nomeAleatorio();
+    }
+
+    const source = new EventSource(`php/chat/relay.php?user=${encodeURIComponent(streamUser)}`);
+
+    source.onmessage = function (event) {
+        const msg = JSON.parse(event.data);
+        addMessage(msg);
+    };
+
     function sendMessage(event) {
-      event.preventDefault(); // Previne o comportamento padrão do formulário
-    
-      // Cria um objeto com os dados da mensagem
-      const msgData = {
-          nome: username,
-          mensagem: message
-      };
-    
-      // Envia a mensagem como uma string JSON
-      socket.send(JSON.stringify(msgData));
-    
-      // Limpa o campo de entrada de mensagem
-      document.querySelector('.chat-enter').value = '';
+        event.preventDefault();
+
+        const message = document.querySelector('.chat-enter').value;
+        const msgData = {
+            nome: username,
+            mensagem: message
+        };
+
+        fetch(`php/chat/send.php?user=${encodeURIComponent(streamUser)}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: 'mensagem=' + encodeURIComponent(JSON.stringify(msgData))
+        });
+
+        document.querySelector('.chat-enter').value = '';
     }
-    
-    // Função que adiciona uma nova linha de mensagem ao chat
+
     function addMessage(msg) {
-        console.log(msg);
-        
         const chatLines = document.querySelector('.chat-lines');
-        
-      // Cria o elemento da mensagem
-      const newMessage = document.createElement('div');
-      newMessage.classList.add('chat-line');
-      newMessage.innerHTML = `<p><span class="username">${msg.nome}:</span> ${msg.mensagem}</p>`;
-    
-      // Adiciona a nova mensagem no final da lista de mensagens
-      chatLines.appendChild(newMessage);
-    
-      // Rola o chat para baixo para mostrar a nova mensagem
-      chatLines.scrollTop = chatLines.scrollHeight;
+        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;
     }
-    
-    // Event listener para quando o WebSocket abrir a conexão
-    socket.addEventListener('open', () => {
-      console.log('Conectado ao servidor WebSocket');
-    });
-    
-    // Event listener para quando uma mensagem é recebida do servidor
-    socket.addEventListener('message', event => {
-      // Parseia a mensagem recebida como JSON
-      const msg = JSON.parse(event.data);
-    
-      // Adiciona a mensagem ao chat
-      addMessage(msg);
-    });
-    
-    // Event listener para o envio de mensagem no formulário
-    document.querySelector('.chat-input-form').addEventListener('submit', event => {
-      // Captura o valor do input
-      message = document.querySelector('.chat-enter').value;
-    
-      // Chama a função que envia a mensagem
-      sendMessage(event);
-    });
-</script>
\ No newline at end of file
+
+    document.querySelector('.chat-input-form').addEventListener('submit', sendMessage);
+    document.querySelector('#username-input').addEventListener('change', setCustomUsername);
+</script>
diff --git a/php/chat/relay.php b/php/chat/relay.php
new file mode 100644
index 0000000..1613733
--- /dev/null
+++ b/php/chat/relay.php
@@ -0,0 +1,35 @@
+<?php
+if (!isset($_GET['user'])) {
+    http_response_code(400);
+    exit("Missing user");
+}
+
+$user = preg_replace('/[^a-zA-Z0-9_-]/', '', $_GET['user']);
+header("Content-Type: text/event-stream");
+header("Cache-Control: no-cache");
+header("Connection: keep-alive");
+
+$tmp_file = sys_get_temp_dir() . "/relay_chat_{$user}.txt";
+
+if (!file_exists($tmp_file)) {
+    file_put_contents($tmp_file, '');
+}
+
+$last_modif = 0;
+
+while (true) {
+    clearstatcache();
+    $current_modif = filemtime($tmp_file);
+
+    if ($current_modif > $last_modif) {
+        $last_modif = $current_modif;
+        $data = file_get_contents($tmp_file);
+        echo "data: " . trim($data) . "\n\n";
+        ob_flush();
+        flush();
+    }
+
+    sleep(1);
+}
+?>
+
diff --git a/php/chat/send.php b/php/chat/send.php
new file mode 100644
index 0000000..7dda579
--- /dev/null
+++ b/php/chat/send.php
@@ -0,0 +1,11 @@
+<?php
+if (isset($_POST['mensagem']) && isset($_GET['user'])) {
+    $mensagem = trim($_POST['mensagem']);
+    $user = preg_replace('/[^a-zA-Z0-9_-]/', '', $_GET['user']); // sanitiza o nome do usuário
+
+    if ($mensagem !== '') {
+        $tmp_file = sys_get_temp_dir() . "/relay_chat_{$user}.txt";
+        file_put_contents($tmp_file, $mensagem);
+    }
+}
+?>