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{
|
||||
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
|
||||
---
|
||||
|
||||
<script src="/assets/js/dash.all.min.js"></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>
|
||||
|
||||
<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>
|
||||
<script src="/assets/js/dash.all.min.js">
|
||||
// Obter a string de query da URL
|
||||
const queryString = window.location.search;
|
||||
|
||||
|
|
@ -278,5 +99,49 @@ permalink: /live.html
|
|||
// 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>
|
||||
Loading…
Reference in New Issue