Parad0x
/
OBS-TPA


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
							<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>TPA</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <style>
        body {
            width: 100%;
            min-height: 100vh;
            padding: 1em;
        }
        #main {
            width: 100%;
        }
        .row {
            margin: 0;
        }

        #settOAuthToken {
            display: inline-block; 
            width: calc( 100% - 170px )
        }
        #settGetToken {
            width: 100px;
            float: right;
        }

        #settShowToken {
            width: 60px;
            float: right;
            margin-right: 5px;
        }

        #alerts > form {
            margin-bottom: 1em;
        }

        .btn-remove {
            width: 85px;
        }
        .btn-test {
            width: 55px;
        }

        .custom-file {
            width: calc( 100% - 155px )
        }
        #filepath {
            overflow: hidden;
        }

        .form-btns {
            float:right;
            width: 145px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="row">
            <h3>Settings</h3>
            <a id="hideButton" data-toggle="collapse" data-target="#sett" style="padding: 5px">
            </a>
            <form id="sett" class="col-12 collapse">
                <div class="form-row">
                    <div class="form-group col-12">
                        <label for="settClientToken">Twitch Client ID</label>
                        <input type="text" class="form-control" id="settClientToken">
                    </div>
                    <div class="form-group col-12" style="margin-bottom: 0;">
                        <label for="settOAuthToken" style="display: block;">Twitch OAuth Token</label>
                    </div>
                    <div class="form-group col-12 align-items-center">
                        <input type="password" class="form-control" id="settOAuthToken" readonly>
                        <button class="btn btn-primary" id="settGetToken">Get token</button>
                        <button class="btn btn-danger" id="settShowToken">Show</button>
                    </div>
                    <div class="form-group col-12">
                        <label for="settChannel">Channel</label>
                        <input type="text" class="form-control" id="settChannel">
                    </div>
                    <div class="form-group col-12">
                        <label for="settPort">Port</label>
                        <input type="text" class="form-control" id="settPort">
                    </div>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-primary" id="settSave">Save</button>
                </div>
            </form>
        </div>
        <div>
            <p>
                Twitch Connection: <span id="twitchStatus"></span> <button id="twitchstartstop" class="btn btn-primary">Start/Stop</button> <span id="twitchError" class="error-mesage"></span>
            </p>
            <p>
                WebSocket Server Connection: <span id="wssStatus"></span> <button id="wssstartstop" class="btn btn-primary">Start/Stop</button>
            </p>
        </div>
        <h3>Alerts</h3>
        <div class="row" id="alerts">
        </div>
        <button id="addAlert" class="btn btn-success">Add</button>
        <button id="saveAlert" class="btn btn-primary">Save</button>
        <button id="skipAlert" class="btn btn-danger">Skip</button>
        <button id="abortAlert" class="btn btn-danger">Abort</button>
        <h3>Queue length: <span id="queueCounter"></span></h3>
    </div>
    <script src="lib/feather.min.js"></script>
    <script src="lib/jquery-3.4.1.slim.min.js"></script>
    <script>
        let col2 = $("#sett");
        col2.submit(e => {
            e.preventDefault();
        })
        let isSettingsHidden = localStorage.getItem("isSettingsHidden") == "true";
        let button = document.getElementById("hideButton");
        let svgOptions = {
            class: "align-middle"
        };

        // Showing token
        let oauthFormInput = document.getElementById("settOAuthToken");
        let showButton = document.getElementById("settShowToken");
        showButton.addEventListener("click", ()=>{
            return false;
        })
        showButton.addEventListener("mousedown", ()=>{
            oauthFormInput.setAttribute("type", "text");
            return false;
        })
        showButton.addEventListener("mouseup", ()=>{
            oauthFormInput.setAttribute("type", "password");
            return false;
        })
        showButton.addEventListener("mouseleave", ()=>{
            oauthFormInput.setAttribute("type", "password");
            return false;
        })

        console.log(isSettingsHidden);
        if(!isSettingsHidden){
            col2.addClass("show");
        }

        if(isSettingsHidden){
            button.innerHTML = feather.icons['chevron-down'].toSvg(svgOptions);
        }else{
            button.innerHTML = feather.icons['chevron-up'].toSvg(svgOptions);
        }
        col2.on("show.bs.collapse", ()=>{
            console.log("Show 2");
            localStorage.setItem("isSettingsHidden", "false");
            button.innerHTML = feather.icons['chevron-up'].toSvg(svgOptions);
        })
        col2.on("hide.bs.collapse", ()=>{
            console.log("Hide 2");
            localStorage.setItem("isSettingsHidden", "true");
            button.innerHTML = feather.icons['chevron-down'].toSvg(svgOptions);
        })
        feather.replace()
    </script>
    <script src="lib/popper.min.js"></script>
    <script src="lib/bootstrap.min.js"></script>
    <script src="../dst/web/main.js"></script>
</body>
</html>