From 7ed1cfe3af20e9469befbfa038a1b6efbf28e806 Mon Sep 17 00:00:00 2001 From: emerson Date: Mon, 2 Sep 2024 17:06:34 -0300 Subject: [PATCH] include player --- _data/aulas.json | 13 ++++ _includes/player.html | 177 ++++++++++++++++++++++++++++++++++++++++++ _layouts/aulas.html | 11 ++- _layouts/default.html | 2 + pages/aulas.html | 2 +- pages/live.html | 164 +------------------------------------- 6 files changed, 204 insertions(+), 165 deletions(-) create mode 100644 _includes/player.html diff --git a/_data/aulas.json b/_data/aulas.json index cbf86bc..731bb1e 100644 --- a/_data/aulas.json +++ b/_data/aulas.json @@ -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" } ] diff --git a/_includes/player.html b/_includes/player.html new file mode 100644 index 0000000..ff78b0c --- /dev/null +++ b/_includes/player.html @@ -0,0 +1,177 @@ + + + + + + +
+
+ + +
+

Offlinee

+
+
+ +
+
+
+
+

Live chat

+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/_layouts/aulas.html b/_layouts/aulas.html index 6ec702f..8607a6c 100755 --- a/_layouts/aulas.html +++ b/_layouts/aulas.html @@ -10,7 +10,7 @@ lang: pt
-

{{ page.title }}

+

{{ page.title }}

{{ page.software }} - {{ page.level }}

{{ page.author }}

@@ -30,13 +30,22 @@ lang: pt
{% assign aula_slug = page.title %} {% assign video_aula = '' | append: aula_slug | append: '.mp4' %} + {% if page.live %} + {% else %} + {% include player.html %} + {% endif %}
+ {{ page.description }} +
+ {% for link in page.links %} +
  • {{ link }}
    • + {% endfor %}
    diff --git a/_layouts/default.html b/_layouts/default.html index 8f98a1d..130f6a5 100755 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -6,6 +6,8 @@ + + {% if page.styles %}{{ page.styles }}{% endif %} {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} diff --git a/pages/aulas.html b/pages/aulas.html index e528e56..a408001 100755 --- a/pages/aulas.html +++ b/pages/aulas.html @@ -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> diff --git a/pages/live.html b/pages/live.html index 695ceca..ad918bb 100644 --- a/pages/live.html +++ b/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> \ No newline at end of file +{% include player.html%} \ No newline at end of file