Chat bug
SSH Build / Deploy (push) Successful in 8s
Details
SSH Build / Deploy (push) Successful in 8s
Details
This commit is contained in:
emerson
parent
7f06081026
commit
49fa605628
|
|
@ -581,3 +581,129 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
.player-off h1{
|
.player-off h1{
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 = `<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);
|
||||||
|
});
|
||||||
227
pages/live.html
227
pages/live.html
|
|
@ -3,186 +3,7 @@ layout: default
|
||||||
permalink: /live.html
|
permalink: /live.html
|
||||||
---
|
---
|
||||||
|
|
||||||
<script src="/assets/js/dash.all.min.js"></script>
|
<script src="/assets/js/dash.all.min.js">
|
||||||
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Obter a string de query da URL
|
// Obter a string de query da URL
|
||||||
const queryString = window.location.search;
|
const queryString = window.location.search;
|
||||||
|
|
||||||
|
|
@ -278,5 +99,49 @@ permalink: /live.html
|
||||||
// Chama a função que envia a mensagem
|
// Chama a função que envia a mensagem
|
||||||
sendMessage(event);
|
sendMessage(event);
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</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>
|
||||||
Loading…
Reference in New Issue