ghostream/web/static/js/viewer.js

import { GsWebSocket } from "./modules/websocket.js";
import { ViewerCounter } from "./modules/viewerCounter.js";
import { GsWebRTC } from "./modules/webrtc.js";

/**
 * Initialize viewer page
 * 
 * @param {String} stream 
 * @param {List} stunServers 
 * @param {Number} viewersCounterRefreshPeriod 
 */
export function initViewerPage(stream, stunServers, viewersCounterRefreshPeriod) {
    // Viewer element
    const viewer = document.getElementById("viewer");

    // Default quality
    let quality = "source";

    // Create WebSocket and WebRTC
    const websocket = new GsWebSocket();
    const webrtc = new GsWebRTC(
        stunServers,
        viewer,
        document.getElementById("connectionIndicator"),
    );
    webrtc.createOffer();
    webrtc.onICECandidate(localDescription => {
        websocket.sendLocalDescription(localDescription, stream, quality);
    });
    websocket.onRemoteDescription(sdp => {
        webrtc.setRemoteDescription(sdp);
    });

    // Register keyboard events
    window.addEventListener("keydown", (event) => {
        switch (event.key) {
        case "f":
            // F key put player in fullscreen
            if (document.fullscreenElement !== null) {
                document.exitFullscreen();
            } else {
                viewer.requestFullscreen();
            }
            break;
        case "m":
        case " ":
            // M and space key mute player
            viewer.muted = !viewer.muted;
            event.preventDefault();
            viewer.play();
            break;
        }
    });

    // Create viewer counter
    const viewerCounter = new ViewerCounter(
        document.getElementById("connected-people"),
        stream,
    );
    viewerCounter.regularUpdate(viewersCounterRefreshPeriod);
    viewerCounter.refreshViewersCounter();

    // Side widget toggler
    const sideWidgetToggle = document.getElementById("sideWidgetToggle");
    const sideWidget = document.getElementById("sideWidget");
    if (sideWidgetToggle !== null && sideWidget !== null) {
        // On click, toggle side widget visibility
        sideWidgetToggle.addEventListener("click", function () {
            if (sideWidget.style.display === "none") {
                sideWidget.style.display = "block";
                sideWidgetToggle.textContent = "»";
            } else {
                sideWidget.style.display = "none";
                sideWidgetToggle.textContent = "«";
            }
        });
    }

    // Video quality toggler
    document.getElementById("quality").addEventListener("change", (event) => {
        quality = event.target.value;
        console.log(`Stream quality changed to ${quality}`);

        // Restart WebRTC negociation
        webrtc.createOffer();
    });
}