Play Attack on Titan Opening 1 as a Discord ASCII message

README.md

THIS IS CLIENT SIDED AND NO ONE ELSE CAN SEE THIS

1. Send a message with the exact string "START" (without quotes) in any Discord channel.
2. Open the console with CTRL+SHIFT+I.
3. Paste the code below.
4. Hope it works and that the css classes are the same as when I made this.

If it doesn't work, you'll have to change the css selectors.
In the code it's .markup-eYLPri.messageContent-2t3eCI, you'll have to find the new selectors for the message yourself.

Please note that this script downloads about 100mb worth of files, so if you care about your data or have slow internet it might not be a good idea to run this.

RUN THIS AT YOUR OWN RISK!!
THERE IS A REASON DISCORD WARNS YOU NOT TO PASTE SCRIPTS INTO THE CLIENT!!
IF YOU KNOW WHAT YOU'RE DOING YOU CAN READ THE CODE BEFORE YOU PASTE IT!!

THIS MIGHT IN SOME CASES CRASH YOUR DISCORD AND LOG YOU OUT FORCEFULLY!! DISCORD MIGHT ALSO RUN SLOWER AFTER THIS HAS BEEN PLAYED, AND YOU WOULD HAVE TO RESTART IT COMPLETELY TO RESET IT.

If you want to run it you can use the minifed version or the full code, both should work.
The code might be pretty bad, and the parsing is very specific to the .srt files I'm using so don't expect it to work for any .srt file.

P.S
This is entirely client-sided!
This does not modify the message and play the video for anyone else!
It's just a fun useless thing I made because I can.

discord_mini_player_aot_op.js

(()=>{const e=document.createElement("audio");e.style.display="none";const t="https://cdn.discordapp.com/attachments/500416964620189706/";e.src=t+"820290793691545641/aot1.mp3",e.volume=.4,document.body.append(e),e.addEventListener("canplay",()=>{e.pause();const n=[t+"820438470375374878/aot0.srt",t+"820438471436795915/aot1.srt",t+"820438474153787412/aot2.srt",t+"820438466012905513/aot3.srt",t+"820438464113410088/aot4.srt"];let o=0;const l=async()=>fetch(n.shift()).then(async e=>{const t=await e.body.getReader();o++;const n=new TextDecoder("utf-8");console.log("Starting download of chunk",o);let l=[],{value:s,done:a}=await t.read();s=s?n.decode(s):"";const c=/^\n$/gm;let r,i=0;for(;;)if(r=c.exec(s))l.push(s.substring(i,r.index)),i=c.lastIndex;else{if(a)break;let e=s.substr(i);({value:s,done:a}=await t.read()),s=e+(s?n.decode(s):""),i=c.lastIndex=0}return console.log(`Chunk ${o} downloaded and processed!`),l});let s=Array.from(document.querySelectorAll(".markup-eYLPri.messageContent-2t3eCI")).filter(e=>"START"===e.textContent);if(!s||0===s.length)return console.warn("START NOT FOUND!");s=s[s.length-1];let a=!1,c=[];l().then(e=>c=c.concat(e)).finally(()=>{e.play(),(()=>{console.log("RUNNING VIDEO");const t=Date.now();let o=c[c.length-2].trim().split(/\n/gm,2)[1].split("--\x3e")[1].split(":");o=Number(o[o.length-1].replace(",","."))/(c.length-1);const r=()=>{c.length>0?d(c.shift()):(document.body.removeChild(e),console.log("ENDED"),s.textContent="START",delete c)};let i=0;const d=e=>{let d=i*o*1e3,p=Date.now()-t;const h=Math.max(d-p,0);if(!e||e.length<10)return r();if(i++,0===h)return r();let u=e.split(/\d$/gm);if(u.length<3)return r();n.length>0&&c.length<600&&!a&&(a=!0,l().then(e=>c=c.concat(e)).finally(()=>a=!1));let f=['<div style="font-family: monospace;font-size: 15px; line-height: 9px; letter-spacing: 0em;">'];const g=u[2].split("\n");for(let e of g){const t=e.split("S");for(let e of t){if(!e)continue;const t=e.slice(0,6),n=e.slice(6);f.push(`<span style="color: #${t};">${n}</span>`)}f.push("<br>")}f.push("</div>"),s.innerHTML=f.join(""),setTimeout(()=>{r()},h)};e.addEventListener("play",()=>{d(c.shift())})})()})})})();

discord_player_aot_op.js

(() => {
    const a = document.createElement('audio');
    a.style.display = 'none';
    const discPart = 'https://cdn.discordapp.com/attachments/500416964620189706/';
    a.src = discPart + '820290793691545641/aot1.mp3';
    a.volume = 0.4;
    document.body.append(a);
    a.addEventListener('canplay', () => {
        a.pause();
        const srtSources = [
            discPart + '820438470375374878/aot0.srt',
            discPart + '820438471436795915/aot1.srt',
            discPart + '820438474153787412/aot2.srt',
            discPart + '820438466012905513/aot3.srt',
            discPart + '820438464113410088/aot4.srt',
        ]
        let chunkIndex = 0;
        const getFrames = async () => {
            return fetch(srtSources.shift()).then(async (r) => {
                const reader = await r.body.getReader();
                chunkIndex++;
                const utf8Decoder = new TextDecoder('utf-8');
                console.log('Starting download of chunk', chunkIndex);
                let chunks = [];
                let { value: chunk, done: readerDone } = await reader.read();
                chunk = chunk ? utf8Decoder.decode(chunk, { stream: true }) : '';
                const re = /^\n$/gm;
                let startIndex = 0;
                let result;
                for (; ;) {
                    result = re.exec(chunk);
                    if (!result) {
                        if (readerDone) {
                            break;
                        }
                        let remainder = chunk.substr(startIndex);
                        ({ value: chunk, done: readerDone } = await reader.read());
                        chunk = remainder + (chunk ? utf8Decoder.decode(chunk, { stream: true }) : '');
                        startIndex = re.lastIndex = 0;
                        continue;
                    }
                    chunks.push(chunk.substring(startIndex, result.index));
                    startIndex = re.lastIndex;
                }
                console.log(`Chunk ${chunkIndex} downloaded and processed!`);
                return chunks;
            });
        };

        let m = Array.from(document.querySelectorAll('.markup-eYLPri.messageContent-2t3eCI')).filter((e) => e.textContent === 'START');
        if (!m || m.length === 0) return console.warn('START NOT FOUND!');
        m = m[m.length - 1];

        let gettingFrames = false;
        let frames = [];
        const run = () => {
            console.log('RUNNING VIDEO');
            const startTime = Date.now();
            let timeStep = frames[frames.length - 2].trim().split(/\n/gm, 2)[1].split('-->')[1].split(':');
            timeStep = Number(timeStep[timeStep.length - 1].replace(',', '.')) + Number(timeStep[0]) * 3600 + Number(timeStep[1]) * 60;
            timeStep = timeStep / (frames.length - 1);
            const c = () => {
                if (frames.length > 0) drawFrame(frames.shift())
                else {
                    document.body.removeChild(a);
                    console.log('ENDED');
                    m.textContent = 'START';
                    delete frames;
                }
            };
            let i = 0;

            const drawFrame = (frame) => {
                let targetTime = i * timeStep * 1000.0;
                let fromLast = Date.now() - startTime;
                const t = Math.max(targetTime - fromLast, 0);
                if (!frame || frame.length < 10) return c();
                i++
                if (t === 0) return c();
                let f = frame.split(/\d$/gm);
                if (f.length < 3) return c();

                if (srtSources.length > 0 && frames.length < 600 && !gettingFrames) {
                    gettingFrames = true;
                    getFrames().then(f => frames = frames.concat(f)).finally(() => gettingFrames = false);
                }

                let txt = ['<div style="font-family: monospace;font-size: 15px; line-height: 9px; letter-spacing: 0em;">'];
                const rows = f[2].split('\n');
                for (let r of rows) {
                    const spans = r.split('S');
                    for (let line of spans) {
                        if (!line) continue
                        const c = line.slice(0, 6);
                        const l = line.slice(6);
                        txt.push(`<span style="color: #${c};">${l}</span>`);
                    }
                    txt.push('<br>')
                }
                txt.push('</div>');
                m.innerHTML = txt.join('');
                setTimeout(() => {
                    c();
                }, t);
            };
            a.addEventListener('play', () => {
                drawFrame(frames.shift());
            });
        }

        getFrames().then(f => frames = frames.concat(f)).finally(() => { a.play(); run(); })
    });
})()