From 49fa605628c5da6c7d1a4e2599c34b4a862903a6 Mon Sep 17 00:00:00 2001 From: emerson Date: Thu, 29 Aug 2024 17:36:14 -0300 Subject: [PATCH] Chat bug --- assets/css/stylesheet.css | 128 ++++++++++++++- assets/js/chat.js | 95 +++++++++++ pages/live.html | 329 +++++++++++--------------------------- 3 files changed, 319 insertions(+), 233 deletions(-) create mode 100644 assets/js/chat.js diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css index 02acd53..03a3f20 100755 --- a/assets/css/stylesheet.css +++ b/assets/css/stylesheet.css @@ -580,4 +580,130 @@ h1, h2, h3, h4, h5, h6 { .player-off h1{ font-size: 48px; -} \ No newline at end of file +} + +.player-container { + position: relative; + /* width: 100%; + height: 100%; */ + + flex-grow: 10; +} + +.player { + width: 100%; + height: 100%; + border-radius: 15px; +} + +.player-off { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); /* Cor de fundo semitransparente */ + color: #fff; + display: flex; + align-items: center; + justify-content: center; + border-radius: 15px; + z-index: 10; /* Garante que a mensagem "Offline" apareça em cima do vídeo */ + +} + +.player-info { + border-radius: 15px; + background-color: #0b1a33; +} + +/* Estilos específicos para o player, se necessário */ +video::-webkit-media-controls { + background-color: hsl(0, 0%, 14%); +} + +video::-webkit-media-controls-play-button { + color: #fff; +} + +.live-container{ + display: flex; + flex-direction: row; + + height: 70vh; + width: 100%; +} + +.chat { +display: flex; +flex-direction: column; +flex-grow: 1; +margin: 15px; +background-color: #0b1a33; +border-radius: 10px; +color: #fff; +} + +.chat-container { + display: flex; + flex-direction: column; + height: 100%; +} + +.chat-info { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + border-bottom: 1px solid #1a2b4d; +} + +.chat h1, .chat h4 { + margin: 0; +} + +.chat-lines { + flex-grow: 1; + overflow-y: auto; + padding: 10px; + background-color: #0b1a33; +} + +.chat-line { + margin-bottom: 10px; +} + +.chat-line p { + margin: 0; + color: #fff; +} + +.username { + font-weight: bold; + color: #4a90e2; + margin-right: 5px; +} + +.chat-input { + padding: 10px; + border-top: 1px solid #1a2b4d; +} + +.chat-input-form { + display: flex; + align-items: center; +} + +.chat-enter { + flex-grow: 1; + padding: 10px; + border: none; + border-radius: 5px; + background-color: #1a2b4d; + color: #fff; +} + +.chat-enter:focus { + outline: none; + background-color: #243b65; +} diff --git a/assets/js/chat.js b/assets/js/chat.js new file mode 100644 index 0000000..208ebf0 --- /dev/null +++ b/assets/js/chat.js @@ -0,0 +1,95 @@ +// 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 = `

${msg.nome}: ${msg.mensagem}

`; + + // 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); +}); diff --git a/pages/live.html b/pages/live.html index 1d2d3dc..bee8d92 100644 --- a/pages/live.html +++ b/pages/live.html @@ -3,8 +3,103 @@ layout: default permalink: /live.html --- - +
@@ -49,234 +144,4 @@ permalink: /live.html
-
- - - - - \ No newline at end of file + \ No newline at end of file