overlay.html

<audio autoplay controls></audio>
<script type="module">
    try{
        const sentry=await import('https://cdn.jsdelivr.net/npm/@sentry/browser@8/+esm')
        sentry.init({
            dsn:'https://94c848565de04860a879df9a34ece8c2@app.glitchtip.com/8354',
            environmet:location.hostname,
            release:"1.1.0"
        })
    }catch(e){
        console.warn('automatic error reporting failed to load',e)
    }

    try{
        if(window.location.search.includes('remotejs')){
            const channel=new URLSearchParams(window.location.search).get('remotejs')
            const script=document.createElement('script')
            script.src='https://remotejs.com/agent/agent.js'
            script.setAttribute("data-consolejs-channel",channel)
            document.head.appendChild(script)
        }
    }catch(e){
        console.warn('remotejs load failed',e)
    }

</script>
<script>
    const client_id='1gsnqnvtrguxysilfqp5gkb1snswmf'
    const queue=[]
    const audio=document.querySelector('audio')
    let dracula=null;
    
    let tba,polly,config,tokens,event_socket,socket_session,params,timer_id
    window.onload=async function(){
        tba=await import('https://tba.sugoidogo.com/tba.mjs')
        polly=await import('https://tts.sugoidogo.com/twitch-polly.mjs')
        tokens=await tba.get_tokens(client_id)
        params=tba.get_url_params()
        config=await fetch('https://ts.sugoidogo.com/'+params.redeem_id,{headers:tokens.auth_headers})
            .then(response=>response.json())
        console.log(config)
        if(config.type=='dracula'){
            dracula=(await import('https://sugoidogo.github.io/dracula_flow/dracula_flow.mjs')).default
        }
        connect_socket()
    }

    function connect_socket(){
        timer_id=null
        if(event_socket){
            event_socket.close()
        }
        event_socket=new WebSocket('wss://eventsub.wss.twitch.tv/ws')
        event_socket.onmessage=function(event){
            const message=JSON.parse(event.data)
            console.log(message.metadata.message_type)
            switch (message.metadata.message_type) {
                case "session_welcome":{
                    socket_session=message.payload.session
                    create_subscription()
                    start_timer(socket_session.keepalive_timeout_seconds)
                    break
                }
                case "session_keepalive":{
                    start_timer(socket_session.keepalive_timeout_seconds)
                    break
                }
                case "notification":{
                    const event=message.payload.event
                    get_redeems(event.id)
                    .then(data=>handle_events(data))
                    break
                }
                default:{
                    console.warn(message)
                }
            }
        }
    }

    async function handle_events(events){
        if(!events){
            console.warn('handle_events skipped, no events provided')
            return
        }
        console.debug(events)
        for(const event of events){
            console.debug(event)
            if(event.status=='UNFULFILLED'){
                if(config.type=='dracula'){
                    speak(await dracula(1),event.id)
                }else if(config.preset || config.type=='preset'){
                    speak(config.presetText,event.id)
                }else{
                    speak(event.user_input,event.id)
                }
            }
            if(event.status=='CANCELED'){
                cancel(event.id)
            }
        }
    }

    function start_timer(seconds){
        if(timer_id){
            clearTimeout(timer_id)
        }
        timer_id=setTimeout(connect_socket,seconds*2000)
    }

    function create_subscription(){
        const headers={'content-type':'application/json'}
        Object.assign(headers,tokens.auth_headers)
        const events=[
            {
                "type": "channel.channel_points_custom_reward_redemption.add",
                "version": "1",
                "condition": {
                    "broadcaster_user_id": tokens.user_id,
                    "reward_id": params.reward_id
                },
                "transport": {
                    "method": "websocket",
                    "session_id":socket_session.id
                }
            },
            {
                "type": "channel.channel_points_custom_reward_redemption.update",
                "version": "1",
                "condition": {
                    "broadcaster_user_id": tokens.user_id,
                    "reward_id": params.reward_id
                },
                "transport": {
                    "method": "websocket",
                    "session_id":socket_session.id
                }
            }
        ]
        for(const event of events){
            const body=JSON.stringify(event)
            fetch('https://api.twitch.tv/helix/eventsub/subscriptions',{
                headers:headers,
                method:'POST',
                body:body
            })
        }
    }

    function speak(Text,id){
        TextType='text'
        Engine='standard'
        Voice=config.voice
        if(config.ssml){
            TextType='ssml'
        }
        if(config.neural){
            Engine='neural'
        }
        polly.SynthesizeSpeech(tokens.auth_headers,Text,Voice,TextType,Engine)
        .then(response=>{
            if(response.ok){
                return response.blob()
            }else{
                throw response
            }
        })
        .then(blob=>{
            const url=URL.createObjectURL(blob)
            queue.push({src:url,id:id})
            if(queue.length==1){
                audio.src=url
            }
        }).catch(error=>{
            console.warn('refunding',error)
            refund(id)
        })
    }

    audio.onended=function(){
        audio.src=null
        queue.shift()
        if(queue.length>0){
            audio.src=queue[0].src
        }
    }

    function cancel(reward_id){
        if(queue.length>0 && queue[0].id==reward_id){
            audio.onended()
        }else{
            for(const reward of queue){
                if(reward.id==reward_id){
                    queue.splice(queue.indexOf(reward),1)
                }
            }
        }
    }

    function refund(reward_id){
        const url=new URL('https://api.twitch.tv/helix/channel_points/custom_rewards/redemptions')
        url.search=new URLSearchParams({
            id:reward_id,
            broadcaster_id:tokens.user_id,
            reward_id:params.redeem_id
        })
        const body=JSON.stringify({status:'CANCELED'})
        const headers={'content-type':'application/json'}
        Object.assign(headers,tokens.auth_headers)
        fetch(url,{
            method:'PATCH',
            headers:headers,
            body:body
        })
    }

    let get_redeems_try_count=0
    function get_redeems(id=null){
        get_redeems_try_count++
        const url=new URL('https://api.twitch.tv/helix/channel_points/custom_rewards/redemptions')
        url.searchParams.append('broadcaster_id',tokens.user_id)
        url.searchParams.append('reward_id',params.redeem_id)
        url.searchParams.append('sort','OLDEST')
        if(id){
            url.searchParams.append('id',id)
        }else{
            url.searchParams.append('status','UNFULFILLED')
            const cursor=localStorage.getItem('cursor')
            if(cursor){
                url.searchParams.append('after',cursor)
            }
        }
        return fetch(url,{headers:tokens.auth_headers})
        .then(response=>response.json())
        .then(json=>{
            if('pagination' in json){
                localStorage.setItem('cursor',json.pagination.cursor)
            }
            if(((!json.data) || json.data.length===0) && get_redeems_try_count<3){
                return get_redeems(id)
            }
            return json.data
        })
    }

</script>