index.html

<!DOCTYPE html>
<body>
    <h1>Clippy</h1>
    <p>Use the controls below to change settings for your overlay.
        Press "Copy Overlay URL" <b>after</b> you change any settings,
        then paste into your browser source url.</p>
    <p id="login" hidden></p>
    <p id="pass" hidden></p>
    <div id="flex">
        <div>
            <input id='newCommand' type="text">
            <button onclick="addCommand()">Add Command</button>
            <p>Click on a command to remove it</p>
            <ul id="commands">
                <li><button class="command" onclick="removeCommand(this)">!so</button></li>
                <li><button class="command" onclick="removeCommand(this)">!shoutout</button></li>
            </ul>
            <br>
            <input id="autoplay" type="checkbox">
            <label for="autoplay">Auto-play clips from my channel</label>
            <br>
            <input id="autoso" type="checkbox">
            <label for="autoso">Automatically send the first clippy command when getting raided</label>
            <br>
            <input id="firstOn" type="checkbox" onchange="enabled('first',this.checked)">
            <label for="firstOn">Search the last </label>
            <input id="first" type="number" min="1" max="100" step="1" value="20" disabled>
            <label for="first"> clips</label>
            <br>
            <input id="noreplay" type="checkbox" checked>
            <label for="noreplay">Don't use clips already played this session</label>
            <br>
            <input id="samegame" type="checkbox">
            <label for="samegame">Find clips in my category</label>
            <br>
            <input id="lastgame" type="checkbox">
            <label for="lastgame">Find clips in the target's category</label>
            <br>
            <input id="durOn" type="checkbox" onchange="enabled('dur',this.checked)">
            <label for="durOn">Max clip duration in seconds: </label>
            <input id="dur" type="number" min="5" max="60" step="0.1" value="60" disabled>
            <br>
            <input id="views" type="checkbox">
            <label for="views">Most Viewed</label>
            <br>
            <input id="cutOn" type="checkbox" onclick="enabled('cut',this.checked)">
            <label for="cutOn">Clip cutoff in seconds: </label>
            <input id="cut" type="number" min="5" max="60" step="0.1" value="60" disabled>
            <br>
            <button onclick="copyURL()">Copy Overlay URL</button>
        </div>
        <div>
            <input type="checkbox" id="messageOn">
            <label for="messageOn">Send a message in chat</label>
            <br>
            <textarea id="message">Check out $target at https://twitch.tv/$target</textarea>
            <br>
            <label for="headerText">Header:</label>
            <input type="text" id="headerText" value="Check out $target">
            <br>
            <label>
                Custom CSS URI:
                <input type="text" value="twitch.css">
                <button onclick="loadCSS(this)">Load CSS</button>
            </label>
            <br>
            <label>
                Custom CSS File:
                <input type="file" accept="text/css" oninput="readCSS(this)">
            </label>
            <br>
            <textarea id="customcss"></textarea>
            <br>
        </div>
    </div>
</body>
<style>
    div {
        margin-right: 20px;
    }
    #flex {
        display:flex;
    }
    textarea {
        width: 360px;
        height: 50px;
    }
    #customcss {
        height: 360px;
        white-space: pre;
    }
    * {
        vertical-align: top;
    }
</style>
<script>
    const client_id='72wtxvzs6erokrj33lk105whmoo381';
    const newCommandHTML='<li><button class="command" onclick="removeCommand(this)">!command</button></li>';
    const overlayURLBase=window.location.origin+window.location.pathname+'overlay.html';

    function enabled(element,state){
        document.getElementById(element).disabled=!state;
    }

    async function getPass() {
        if(window.location.search){
            localStorage.setItem('search',window.location.search)
        }
        try {
            const pass = new URLSearchParams(document.location.hash.replace('#', '?')).get('access_token')
            if (!pass) {
                throw 'missing access token'
            }
            const search=localStorage.getItem('search')
            if(search){
                localStorage.removeItem('search')
                const params=new URLSearchParams(decodeURIComponent(search))
                params.set('pass',pass)
                window.location.href=overlayURLBase+'?'+params.toString()
            }
            return pass;
        } catch (e) {
            window.location.href = encodeURI(
                'https://id.twitch.tv/oauth2/authorize'
                + '?response_type=token'
                + '&client_id='+client_id
                + '&scope=chat:read chat:edit moderation:read'
            )+'&redirect_uri='+window.location.href.split('?')[0];
            throw e;
        }
    }

    async function getLogin(pass) {
        const response=await fetch('https://api.twitch.tv/helix/users'
            ,{
                headers:{
                    'Authorization':'Bearer '+pass
                    ,'Client-Id':client_id
                }
            }
        )
        const json=await response.json()
        return json['data'][0]['login'];
    }

    async function init(){
        pass.value=await getPass();
        login.value=await getLogin(pass.value);
        config=JSON.parse(localStorage.getItem('clippy'))
        for(const [id, value] of Object.entries(config)){
            console.log(id,value)
            const element=document.getElementById(id)
            if(element==null){
                continue
            }
            switch(element.tagName.toLowerCase()){
                case 'input':
                    switch(element.type){
                        case 'checkbox':
                            element.checked=value
                            if(element.onchange){
                                element.onchange()
                            }
                            break
                        default:
                            element.value=value
                    }
                    break
                case 'ul':
                    for(const button of element.querySelectorAll('button')){
                        removeCommand(button)
                    }
                    for(const command of value){
                        addCommand(command)
                    }
                    break
                default:
                    element.innerHTML=value
            }
        }
    }

    async function removeCommand(element){
        element.parentElement.remove()
    }

    async function addCommand(commandName=null){
        if(commandName==null){
            commandName=newCommand.value;
        }
        const commandHTML=newCommandHTML.replace('!command',commandName);
        console.log(commandHTML)
        commands.innerHTML+=commandHTML;
    }

    async function copyURL() {
        let settings = {}
        settings['customcss']=customcss.value.split(' ').filter((string)=>string!='').join(' ')
        settings['client_id'] = client_id;
        settings['login'] = document.getElementById('login').value;
        settings['pass'] = document.getElementById('pass').value;
        settings['commands'] = []
        for (const button of document.getElementsByClassName('command')) {
            settings['commands'].push(button.innerHTML);
        }
        for (const element of document.querySelectorAll('input,textarea')) {
            switch (element.id) {
                case '':
                case 'newCommand':
                case 'customcss':
                    continue;               
            }
            switch (element.type) {
                case 'file':
                case 'url':
                    continue;
                case 'checkbox':
                    settings[element.id] = element.checked;
                    break;
                default:
                    settings[element.id] = element.value;
                    break;
            }
        }
        const url = new URL(overlayURLBase);
        url.search = new URLSearchParams(settings)
        navigator.clipboard.writeText(url);
        localStorage.setItem('clippy',JSON.stringify(settings))
    }

    async function readCSS(input){
        const reader = new FileReader();
        reader.addEventListener("load", function () {
            customcss.value+='\n'+reader.result
        }, false);
        reader.readAsText(input.files[0]);
    }

    async function loadCSS(button){
        let data=button.parentElement.querySelector('input').value
        data=await fetch(data)
        data=await data.text()
        customcss.value+='\n'+data
    }

    init();

</script>