emerson
/
AliceClass
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

include player
SSH Build / Deploy (push) Successful in 9s Details

This commit is contained in:
emerson 2024-09-02 17:06:34 -03:00
parent 94d2cdc667
commit 7ed1cfe3af
6 changed files with 204 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
_data/aulas.json
View File

@ -17,5 +17,18 @@
"software": ["mixxx"], "software": ["mixxx"],
"level": "Basico", "level": "Basico",
"layout": "aulas" "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"
} }
] ]

177
_includes/player.html Normal file
View File

@ -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>

11
_layouts/aulas.html
View File

@ -10,7 +10,7 @@ lang: pt
<div class="aula-title pt-6 pb-6"> <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-row">
<div class="detals-aula is is-flex is-flex-direction-column is-flex-grow-1"> <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> <h2 class="aula-name">{{ page.software }} - {{ page.level }}</h2>
<h3 class="aula-name">{{ page.author }}</h3> <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"> <div class=" is-flex is-justify-content-center is-align-content-center mt-3">
{% assign aula_slug = page.title %} {% assign aula_slug = page.title %}
{% assign video_aula = '' | append: aula_slug | append: '.mp4' %} {% assign video_aula = '' | append: aula_slug | append: '.mp4' %}
{% if page.live %}
<video controls class="aula-video"> <video controls class="aula-video">
<source src="{{ site.baseurl }}/videos/{{ page.user }}/dest/{{ video_aula }}" type="video/mp4"> <source src="{{ site.baseurl }}/videos/{{ page.user }}/dest/{{ video_aula }}" type="video/mp4">
Seu navegador não suporta o elemento de vídeo. Seu navegador não suporta o elemento de vídeo.
</video> </video>
{% else %}
{% include player.html %}
{% endif %}
</div> </div>
<div class="content-aula mt-3 pt-2 pb-2"> <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> </div>
</main> </main>
</div> </div>

2
_layouts/default.html
View File

@ -6,6 +6,8 @@
<meta charset="utf-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="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="{{ 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 %} {% if page.styles %}{{ page.styles }}{% endif %}
<title> <title>
{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}

2
pages/aulas.html
View File

@ -16,7 +16,7 @@ lang: pt
<div class="box"> <div class="box">
<div class="box-top"> <div class="box-top">
<figure> <figure>
<img src="{{ site.baseurl }}/videos/{{ aula.user }}/thumbs/{{ aula.title }}.jpg"> <img src="{{ site.baseurl }}/videos/{{ aula.user }}/thumbs/{{ aula.title }}.jpg">
</figure> </figure>
</div> </div>

164
pages/live.html
View File

@ -2,167 +2,5 @@
layout: default layout: default
permalink: /live.html 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"> {% include player.html%}
<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>