AliceClass/pages/live.html

---
layout: default
permalink: /live.html
---

<script src="/assets/js/dash.all.min.js">
       // 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);

// Obter o valor do parâmetro 'user'
const user = urlParams.get('user');

// 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('ws://alice.ufsj.edu.br:8081/chat');

// 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) {
  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>

<div class="live-container">
    <div class="player-container">
        <video
            class="player"
            data-dashjs-player
            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>