yass/public/viewer.js

const basePath = window.location.pathname.replace(/\/[^\/]+\.[^\/]+$/, '').replace(/\/$/, '');
const socket = io({ path: basePath + '/socket.io' });
const remoteVideo = document.getElementById('remoteVideo');
const overlay = document.getElementById('overlay');

let device;
let recvTransport;
let consumers = {}; // consumerId -> consumer
let hasUserInteracted = false;

// Track user interaction — Chrome mobile needs this before play() works
document.addEventListener('click', () => { hasUserInteracted = true; }, { once: true });
document.addEventListener('touchstart', () => { hasUserInteracted = true; }, { once: true });

// Make overlay clickable to start playback on mobile
if (overlay) {
    overlay.addEventListener('click', () => {
        if (remoteVideo.srcObject) {
            remoteVideo.muted = false;
            remoteVideo.play().then(() => {
                overlay.classList.add('hidden');
                remoteVideo.classList.add('active');
            }).catch(e => console.error('Play failed:', e));
        }
    });
}

function tryPlay() {
    remoteVideo.play().then(() => {
        if (overlay) overlay.classList.add('hidden');
        remoteVideo.classList.add('active');
    }).catch(() => {
        // Autoplay blocked — show tap prompt
        if (overlay) {
            overlay.classList.remove('hidden');
            overlay.querySelector('h1').innerText = 'Tap to Play';
            overlay.querySelector('.status-indicator span:last-child').innerText = 'Stream ready — tap anywhere';
        }
    });
}

async function init() {
    try {
        // 1. Get router RTP capabilities
        const rtpCapabilities = await new Promise((resolve, reject) => {
            socket.emit('getRouterRtpCapabilities', (data) => {
                if (data.error) reject(new Error(data.error));
                else resolve(data);
            });
        });

        // 2. Create mediasoup Device and load capabilities
        device = new mediasoupClient.Device();
        await device.load({ routerRtpCapabilities: rtpCapabilities });

        // 3. Create recv transport
        const transportParams = await new Promise((resolve, reject) => {
            socket.emit('createWebRtcTransport', { direction: 'recv' }, (data) => {
                if (data.error) reject(new Error(data.error));
                else resolve(data);
            });
        });

        recvTransport = device.createRecvTransport(transportParams);

        // Transport 'connect' event: DTLS handshake
        recvTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
            try {
                await new Promise((resolve, reject) => {
                    socket.emit('connectTransport', {
                        transportId: recvTransport.id,
                        dtlsParameters
                    }, (result) => {
                        if (result && result.error) reject(new Error(result.error));
                        else resolve();
                    });
                });
                callback();
            } catch (e) {
                errback(e);
            }
        });

        // 4. Get existing producers and consume them
        const existingProducers = await new Promise((resolve, reject) => {
            socket.emit('getProducers', (data) => {
                if (data.error) reject(new Error(data.error));
                else resolve(data);
            });
        });

        for (const { producerId, kind } of existingProducers) {
            await consumeProducer(producerId, kind);
        }

    } catch (e) {
        console.error('Failed to initialize mediasoup viewer:', e);
    }
}

async function consumeProducer(producerId, kind) {
    try {
        const result = await new Promise((resolve, reject) => {
            socket.emit('consume', {
                transportId: recvTransport.id,
                producerId,
                rtpCapabilities: device.rtpCapabilities
            }, (data) => {
                if (data.error) reject(new Error(data.error));
                else resolve(data);
            });
        });

        const consumer = await recvTransport.consume({
            id: result.id,
            producerId: result.producerId,
            kind: result.kind,
            rtpParameters: result.rtpParameters
        });

        consumers[consumer.id] = consumer;

        // Attach track to the video element
        const { track } = consumer;
        
        if (!remoteVideo.srcObject) {
            remoteVideo.srcObject = new MediaStream();
        }
        remoteVideo.srcObject.addTrack(track);

        // Resume the consumer (server starts them paused)
        await new Promise((resolve, reject) => {
            socket.emit('resumeConsumer', { consumerId: consumer.id }, (result) => {
                if (result && result.error) reject(new Error(result.error));
                else resolve();
            });
        });

        // Try to play after resuming
        tryPlay();

        consumer.on('trackended', () => {
            console.log(`Track ended for consumer ${consumer.id}`);
        });

        consumer.on('transportclose', () => {
            console.log(`Transport closed for consumer ${consumer.id}`);
        });

    } catch (e) {
        console.error('Failed to consume producer:', e);
    }
}

// Listen for new producers (e.g. broadcaster adds audio after starting)
socket.on('newProducer', async ({ producerId, kind }) => {
    if (recvTransport) {
        await consumeProducer(producerId, kind);
    }
});

// Handle producer closed (broadcaster stopped a track)
socket.on('producerClosed', ({ consumerId }) => {
    const consumer = consumers[consumerId];
    if (consumer) {
        if (remoteVideo.srcObject) {
            const track = consumer.track;
            if (track) {
                remoteVideo.srcObject.removeTrack(track);
            }
        }
        consumer.close();
        delete consumers[consumerId];
    }

    if (Object.keys(consumers).length === 0) {
        remoteVideo.classList.remove('active');
        remoteVideo.srcObject = null;
        if (overlay) overlay.classList.remove('hidden');
    }
});

// Broadcaster connected - try to initialize
socket.on('broadcasterConnected', () => {
    if (!device) {
        init();
    } else {
        socket.emit('getProducers', async (producers) => {
            for (const { producerId, kind } of producers) {
                const alreadyConsuming = Object.values(consumers).some(c => c.producerId === producerId);
                if (!alreadyConsuming) {
                    await consumeProducer(producerId, kind);
                }
            }
        });
    }
});

// Broadcaster disconnected
socket.on('broadcasterDisconnected', () => {
    Object.values(consumers).forEach(consumer => {
        consumer.close();
    });
    consumers = {};

    remoteVideo.classList.remove('active');
    remoteVideo.srcObject = null;

    if (overlay) {
        overlay.classList.remove('hidden');
        overlay.querySelector('h1').innerText = 'Offline';
        overlay.querySelector('.status-indicator span:last-child').innerText = 'Waiting for new stream...';
    }
});

// Initialize on connect
socket.on('connect', () => {
    socket.emit('viewer');
    init();
});