include player
SSH Build / Deploy (push) Successful in 9s
Details
SSH Build / Deploy (push) Successful in 9s
Details
This commit is contained in:
emerson
parent
94d2cdc667
commit
7ed1cfe3af
|
|
@ -17,5 +17,18 @@
|
|||
"software": ["mixxx"],
|
||||
"level": "Basico",
|
||||
"layout": "aulas"
|
||||
},
|
||||
{
|
||||
"title": "Oficina de beatmaker",
|
||||
"user": "jotachina",
|
||||
"author": "Júlio césar de sousa",
|
||||
"description": "Bem-vindos à oficina de Beatmaker com LMMS! Um software gratuito e de código aberto que permite a criação de beats e produções musicais de alta qualidade. Esta oficina é ideal para quem quer iniciar no mundo da produção musical ou para produtores experientes que desejam explorar novas ferramentas e técnicas. https://alice.ufsj.edu.br/~jotachina/oficinas_lmms/",
|
||||
"links": [
|
||||
"https://live.alice.ufsj.edu.br/p/OficinaLMMS02set",
|
||||
],
|
||||
"date": "02/08/2024",
|
||||
"software": ["lmms"],
|
||||
"level": "Basico",
|
||||
"layout": "aulas"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -10,7 +10,7 @@ lang: pt
|
|||
<div class="aula-title pt-6 pb-6">
|
||||
<div class="detals-aula is is-flex is-flex-direction-row">
|
||||
<div class="detals-aula is is-flex is-flex-direction-column is-flex-grow-1">
|
||||
<h1 class="aula-title">{{ page.title }}</h1>
|
||||
<h1 class="title has-text-white">{{ page.title }}</h1>
|
||||
<h2 class="aula-name">{{ page.software }} - {{ page.level }}</h2>
|
||||
|
||||
<h3 class="aula-name">{{ page.author }}</h3>
|
||||
|
|
@ -30,13 +30,22 @@ lang: pt
|
|||
<div class=" is-flex is-justify-content-center is-align-content-center mt-3">
|
||||
{% assign aula_slug = page.title %}
|
||||
{% assign video_aula = '' | append: aula_slug | append: '.mp4' %}
|
||||
{% if page.live %}
|
||||
<video controls class="aula-video">
|
||||
<source src="{{ site.baseurl }}/videos/{{ page.user }}/dest/{{ video_aula }}" type="video/mp4">
|
||||
Seu navegador não suporta o elemento de vídeo.
|
||||
</video>
|
||||
{% else %}
|
||||
{% include player.html %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="content-aula mt-3 pt-2 pb-2">
|
||||
{{ page.description }}
|
||||
<br>
|
||||
{% for link in page.links %}
|
||||
<li><a href="{{ link }}">{{ link }}</a></li>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
<meta charset="utf-8">
|
||||
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> -->
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/stylesheet.css">
|
||||
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> -->
|
||||
|
||||
{% if page.styles %}{{ page.styles }}{% endif %}
|
||||
<title>
|
||||
{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ lang: pt
|
|||
<div class="box">
|
||||
<div class="box-top">
|
||||
<figure>
|
||||
<img src="{{ site.baseurl }}/videos/{{ aula.user }}/thumbs/{{ aula.title }}.jpg">
|
||||
<img src="{{ site.baseurl }}/videos/{{ aula.user }}/thumbs/{{ aula.title }}.jpg">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
164
pages/live.html
164
pages/live.html
|
|
@ -2,167 +2,5 @@
|
|||
layout: default
|
||||
permalink: /live.html
|
||||
---
|
||||
<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>
|
||||
|
||||
<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);
|
||||
|
||||
// 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('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>
|
||||
{% include player.html%}
|
||||
Loading…
Reference in New Issue