const mutationObserverConfig = {
    attributes: true,
    childList: false,
    characterData: false,
};

const connectWebSocket = () => {
    const ws = new WebSocket('ws://localhost:8000/ws/v1/plugin');
    const progressElement = document.querySelector('#progress-bar');
    const mutationObserver = new MutationObserver(() => {
        const promise = new Promise(resolve => {
            const playerBarElement = document.querySelector('ytmusic-player-bar');
            const metadataElement = playerBarElement.querySelector('.middle-controls > .content-info-wrapper');
            const titleElement = metadataElement.querySelector(`yt-formatted-string.title`);
            const subtitleElement = metadataElement.querySelector('span.subtitle > yt-formatted-string.byline');
            const imageElement = playerBarElement.querySelector('img');
            if (titleElement.textContent === '' || subtitleElement.length === 0) return;
            const data = {
                type: 'music',
                attributes: {
                    title: titleElement.textContent,
                    artists: subtitleElement.title.split('•')[0].trim(),
                    progress: progressElement.ariaValueNow / progressElement.ariaValueMax,
                    image: imageElement.src,
                },
            };
            ws.send(JSON.stringify(data));
            resolve();
        });
        promise.then();
    });

    ws.onopen = () => {
        mutationObserver.observe(progressElement, mutationObserverConfig);
    };

    ws.onclose = () => {
        mutationObserver.disconnect();
        connectWebSocket();
    };
};

connectWebSocket();