include player

_includes/player.html

@@ -0,0 +1,177 @@
+<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>