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);
});

    // Variáveis para armazenar o nome do usuário e a mensagem
    let username = prompt('Qual é o seu nome?');
    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>