AliceClass/_includes/player.html

<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"
            {% endif %}
            autoplay
            controls
            muted 
        ></video>
        
        <div class="player-off">
            <h1>Offlinee</h1>
        </div>
    </div>

    <div class="chat">
        <div class="chat-container">
            <div class="chat-info">
                <div>
                    <h1>Live chat</h1>
                </div>
                <div class="chat-views">
                    <i class="fa-solid fa-users"></i>
                    <!-- <h4>679 pessoas online</h4> -->
                </div>
            </div>
    
            <div class="chat-lines">
                <div class="chat-line">
                    <!-- <p><span class="username">{msg.nome}:</span> {msg.mensagem}</p> -->
                </div>
            </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} />
                    <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);

    {% if page.user %}
    const user = "{{page.user}}";
    {% else %}
    const user = urlParams.get('user');
    {% endif %}
    
    // Exemplo de como usar o valor
    console.log(user); // Isso vai exibir o valor do parâmetro 'user'
    const videoElement = document.querySelector('video');
    const playerOffElement = document.querySelector('.player-off');
    const url = `https://cast.alice.ufsj.edu.br/dash/${user}.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');

    socket.addEventListener('open', () => {
    console.log('Conexão WebSocket aberta com sucesso!');
});

// 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'
    ];

    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 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 = '';
    }
    
    // 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;
    }
    
    // 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>