youtube storyboards

code.js

(function showStoryboard() {
    var template = ytplayer.config.args.raw_player_response.storyboards.playerStoryboardSpecRenderer.spec;
    function getStoryboardImages(template) {
        var [url, _, _, layer] = template.split('|');
        var [w, h, count, cols, rows, _, _, sig] = layer.split('#');
        var countPerImage = cols * rows;
        var imgCount = Math.ceil(count / countPerImage);

        return Array(imgCount)
            .fill(0)
            .map((_, i) => {
                return {
                    url: url.replace('$L', '2').replace('$N', 'M' + i) + '&sigh=' + encodeURIComponent(sig),
                    w,
                    h,
                    cols,
                    rows,
                };
            });
    }

    function createOverlay() {
        var div = document.createElement('div');
        var close = document.createElement('button');
        div.appendChild(close);
        Object.assign(div.style, {
            position: 'fixed',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            background: 'black',
            overflow: 'auto',
            zIndex: 99999999,
        });
        Object.assign(close.style, {
            position: 'fixed',
            right: '10px',
            top: '10px',
        });
        close.innerText = 'Close';
        close.addEventListener('click', () => {
            div.remove();
        });

        document.body.appendChild(div);
        return div;
    }

    function renderImages() {
        var images = getStoryboardImages(template);
        var overlay = createOverlay();
        for (const {url} of images) {
            const img = document.createElement('img');
            img.src = url;
            img.style.display = 'block';
            img.style.margin = 'auto';
            overlay.appendChild(img);
        }
    }
    renderImages();
})();

storyboards.url

javascript:(function%20showStoryboard()%20%7B%0A%20%20%20%20var%20template%20=%20ytplayer.config.args.raw_player_response.storyboards.playerStoryboardSpecRenderer.spec;%0A%20%20%20%20function%20getStoryboardImages(template)%20%7B%0A%20%20%20%20%20%20%20%20var%20%5Burl,%20_,%20_,%20layer%5D%20=%20template.split('%7C');%0A%20%20%20%20%20%20%20%20var%20%5Bw,%20h,%20count,%20cols,%20rows,%20_,%20_,%20sig%5D%20=%20layer.split('#');%0A%20%20%20%20%20%20%20%20var%20countPerImage%20=%20cols%20*%20rows;%0A%20%20%20%20%20%20%20%20var%20imgCount%20=%20Math.ceil(count%20/%20countPerImage);%0A%0A%20%20%20%20%20%20%20%20return%20Array(imgCount)%0A%20%20%20%20%20%20%20%20%20%20%20%20.fill(0)%0A%20%20%20%20%20%20%20%20%20%20%20%20.map((_,%20i)%20=%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url:%20url.replace('$L',%20'2').replace('$N',%20'M'%20+%20i)%20+%20'&sigh='%20+%20encodeURIComponent(sig),%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20w,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20h,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cols,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rows,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D);%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20createOverlay()%20%7B%0A%20%20%20%20%20%20%20%20var%20div%20=%20document.createElement('div');%0A%20%20%20%20%20%20%20%20var%20close%20=%20document.createElement('button');%0A%20%20%20%20%20%20%20%20div.appendChild(close);%0A%20%20%20%20%20%20%20%20Object.assign(div.style,%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20'fixed',%0A%20%20%20%20%20%20%20%20%20%20%20%20left:%200,%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%200,%0A%20%20%20%20%20%20%20%20%20%20%20%20right:%200,%0A%20%20%20%20%20%20%20%20%20%20%20%20bottom:%200,%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20'black',%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow:%20'auto',%0A%20%20%20%20%20%20%20%20%20%20%20%20zIndex:%2099999999,%0A%20%20%20%20%20%20%20%20%7D);%0A%20%20%20%20%20%20%20%20Object.assign(close.style,%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20'fixed',%0A%20%20%20%20%20%20%20%20%20%20%20%20right:%20'10px',%0A%20%20%20%20%20%20%20%20%20%20%20%20top:%20'10px',%0A%20%20%20%20%20%20%20%20%7D);%0A%20%20%20%20%20%20%20%20close.innerText%20=%20'Close';%0A%20%20%20%20%20%20%20%20close.addEventListener('click',%20()%20=%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20div.remove();%0A%20%20%20%20%20%20%20%20%7D);%0A%0A%20%20%20%20%20%20%20%20document.body.appendChild(div);%0A%20%20%20%20%20%20%20%20return%20div;%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20renderImages()%20%7B%0A%20%20%20%20%20%20%20%20var%20images%20=%20getStoryboardImages(template);%0A%20%20%20%20%20%20%20%20var%20overlay%20=%20createOverlay();%0A%20%20%20%20%20%20%20%20for%20(const%20%7Burl%7D%20of%20images)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20img%20=%20document.createElement('img');%0A%20%20%20%20%20%20%20%20%20%20%20%20img.src%20=%20url;%0A%20%20%20%20%20%20%20%20%20%20%20%20img.style.display%20=%20'block';%0A%20%20%20%20%20%20%20%20%20%20%20%20img.style.margin%20=%20'auto';%0A%20%20%20%20%20%20%20%20%20%20%20%20overlay.appendChild(img);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20renderImages();%0A%7D)();%0A%0A%0A