MPP auto-refresh connection

small userscript that refreshes the page automatically if connecting to mpp takes too long

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         MPP auto-refresh connection
// @version      1.0.0 (beta test)
// @description  small userscript that refreshes the page automatically if connecting to mpp takes too long
// @author       ccjt
// @match        *://*/*
// @license      MIT
// @namespace    https://greasyfork.org/users/1459137
// ==/UserScript==

let refreshTimeout = 5e3 // adjust as needed, in milliseconds (5e3 = 5000)
if (typeof MPP !== 'undefined' && typeof MPP === 'object') {
    let connected
    let connectionOpened = null
    MPP.client.ws.onopen = () => {
        // .startsWith because of url formatting quirkiness
        if (!MPP.client.ws.url.startsWith('wss://mppclone.com')) return
        connectionOpened = Date.now()

        function connectedCheck() {
            if (Date.now() - connectionOpened > refreshTimeout && !MPP.client.isConnected()) {
                let failedDiv = document.createElement('div')
                failedDiv.style.cssText = `
                width: 100vw;
                height: 100vh;
                position: fixed;
                top: 0;
                left: 0;
                background-color: #000a;
                backdrop-filter: saturate(150%) blur(10px);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 20px;
                opacity: 0%;
                transition: opacity .5s ease;
                `
                document.body.appendChild(failedDiv)
                requestAnimationFrame(()=>{
                    let i = 2
                    let failedText = document.createElement('a')
                    failedText.textContent = `connection timed out (${refreshTimeout / 1e3}s), refreshing in ${i}s`
                    failedDiv.appendChild(failedText)
                    failedDiv.style.opacity = '100%'
                    setInterval(()=>{
                        i--
                        failedText.textContent = `connection failed, refreshing in ${i}s`
                        if (i <= 0) window.location.reload()
                    }, 1e3)
                })
                return
            }
            requestAnimationFrame(connectedCheck())
        }
        connectedCheck()
    }
}