AliceClass/_includes/player.html

<div class="live-container">
    <div class="player-container">
        <video
            class="player"
            data-dashjs-player
            {% if page.user %}
            url="https://class.alice.ufsj.edu.br/dash/{{page.user}}.mpd"
            {% endif %}
            autoplay
            controls
            muted
        ></video>

        <div class="player-off">
            <h1>Offline</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>
                </div>
            </div>

            <!-- Campo de nome do usuário -->
            <div class="chat-username" style="margin-bottom: 10px;">
                <label for="username-input">Seu nome:</label>
                <input
                    type="text"
                    id="username-input"
                    placeholder="Escolha um nome (ou deixe em branco)"
                    style="width: 100%; padding: 5px; margin-top: 5px;"
                />
            </div>

            <div class="chat-lines">
                <!-- Mensagens serão adicionadas aqui via JavaScript -->
            </div>

            <div class="chat-input">
                <form class="chat-input-form">
                    <input class="input chat-enter" placeholder="Converse com o chat aqui" />
                    <input type="submit" hidden />
                </form>
            </div>
        </div>
    </div>
</div>

<script src="/assets/js/dash.all.min.js"></script>

<script>
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);

    // =====================
    // Player da live
    // =====================

    let streamUser;
    {% if page.user %}
    streamUser = "{{page.user}}";
    {% else %}
    streamUser = urlParams.get('user');
    {% endif %}

    if (!streamUser) {
        streamUser = "default"; // fallback para evitar erro
    }

    console.log("Usuário da live:", streamUser);
    const videoElement = document.querySelector('video');
    const playerOffElement = document.querySelector('.player-off');
    const chatContainer = document.querySelector('.chat-container');
    const chatForm = document.querySelector('.chat-input-form');
    const usernameInput = document.querySelector('#username-input');
    const chatInputField = document.querySelector('.chat-enter');

    const url = `https://class.alice.ufsj.edu.br/dash/${streamUser}.mpd`;
    videoElement.src = url;

    let chatAtivo = false;

    fetch(url)
        .then(response => {
            if (response.ok) {
                console.log("Arquivo existe.");
                playerOffElement.style.display = "none";
                iniciarChat();
            } else {
                console.log("Arquivo não encontrado.");
                videoElement.style.opacity = "0";

                if (chatContainer) {
                    chatContainer.style.opacity = "0.3";
                    chatContainer.style.pointerEvents = "none";
                }

                if (usernameInput) usernameInput.disabled = true;
                if (chatInputField) chatInputField.disabled = true;
            }
        });

    // =====================
    // Chat ao vivo
    // =====================

    function iniciarChat() {
        chatAtivo = true;

        const nomesAlice = [
            'Alice', 'Chapeleiro Maluco', 'Coelho Branco', 'Rainha de Copas',
            'Gato de Cheshire', 'Lebre de Março', 'Lagarta', 'Dodo',
            'Tweedledee', 'Tweedledum', 'Rainha Vermelha', 'Rei de Copas'
        ];

        function nomeAleatorio() {
            return nomesAlice[Math.floor(Math.random() * nomesAlice.length)];
        }

        let username = nomeAleatorio();

        function setCustomUsername() {
            const customUsername = usernameInput.value.trim();
            username = customUsername || nomeAleatorio();
        }

        const source = new EventSource(`php/chat/relay.php?user=${encodeURIComponent(streamUser)}`);

        let ultimaMensagem = "";

        source.onmessage = function (event) {
            if (event.data !== ultimaMensagem) {
                ultimaMensagem = event.data;
                const msg = JSON.parse(event.data);
                addMessage(msg);
            }
        };

        function sendMessage(event) {
            event.preventDefault();

            const message = document.querySelector('.chat-enter').value;
            if (!message.trim()) return;

            const msgData = {
                nome: username,
                mensagem: message.trim()
            };

            fetch(`php/chat/send.php?user=${encodeURIComponent(streamUser)}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: 'mensagem=' + encodeURIComponent(JSON.stringify(msgData))
            })
            .catch(err => console.error("Erro ao enviar mensagem:", err));

            document.querySelector('.chat-enter').value = '';
        }

        function addMessage(msg) {
            const chatLines = document.querySelector('.chat-lines');
            const newMessage = document.createElement('div');
            newMessage.classList.add('chat-line');
            newMessage.innerHTML = `<p><span class=\"username\">${msg.nome}:</span> ${msg.mensagem}</p>`;

            chatLines.appendChild(newMessage);
            chatLines.scrollTop = chatLines.scrollHeight;
        }

        chatForm.addEventListener('submit', sendMessage);
        usernameInput.addEventListener('change', setCustomUsername);
    }
</script>