phantombot-plugins/web/overlay/index.js

$(function () {
    const webSocket = window.socket;
    var lastFollow    = '-',
        lastSub       = '-',
        lastDonator   = '-',
        timer         = '-';

    const getQueryMap = () => {
        let queryString = window.location.search,
            queryParts = queryString.substring(1).split('&'),
            queryMap = new Map();

        for (let part in queryParts) {
            let key = part.substring(0, part.indexOf('=')),
                value = part.substring(part.indexOf('=') + 1, part.length);
            if (key.length > 0 && value.length > 0) queryMap.set(key, value);
        }
        return queryMap;
    }
    const queryMap = getQueryMap();
    const getOrElse = (option, def) => queryMap.has(option) ?  queryMap.get(option): def;

    const refreshUI = () => {
        if(queryMap.single){ $("all").hide(); $("single").show(); }
        else{ $("all").show(); $("single").hide(); }

        $('follow').text(lastFollow);
        $('subscribe').text(lastSub);
        $('donate').text(lastDonator);        
    }

    const handleSocketMessage = (e)=>{
        try {
            let rawMessage = e.data,
                message = JSON.parse(rawMessage);

            if(!message.hasOwnProperty('eventFamily') || message.eventFamily != 'overlay' || 
                !message.hasOwnProperty('eventType') || !message.hasOwnProperty('data'))
                return;

            console.log(message.eventType, message.data)
            if(message.eventType == 'follow') {
                lastFollow = message.data || lastFollow;
            } else if(message.eventType == 'subscribe') {
                lastSub = message.data || lastSub;
            } else if(message.eventType == 'donation') {
                lastDonator = message.data || lastDonator;
            } else if(message.eventType == 'timer') {
                console.log("New timer !! ", message.data)
            }
            refreshUI();
        } catch (ex) {
            console.log(ex)
        }
    };

    socket.addFamilyHandler("overlay", handleSocketMessage);

    $(document).ready(async ()=>{
        if(socket){
            while(socket.getReadyState() === 0){
                await new Promise(r => setTimeout(r, 500));
            }
            socket.getDBValue("get_current_stream_info_lastFollow", 'streamInfo', 'lastFollow', (response)=>{
                if(response.streamInfo) lastFollow = response.streamInfo || lastFollow;
                refreshUI();
            })
            socket.getDBValue("get_current_stream_info_lastSub", 'streamInfo', 'lastSub', (response)=>{
                if(response.streamInfo) lastSub = response.streamInfo || lastSub;
                refreshUI();
            })
            socket.getDBValue("get_current_stream_info_lastDonator", 'streamInfo', 'lastDonator', (response)=>{
                if(response.streamInfo) lastDonator = response.streamInfo || lastDonator;
                refreshUI();
            })
        }
    })

});