misuzu-interim/assets/js/misuzu/_main.js

var Misuzu = function() {
    const UIHARU_API = location.protocol + '//uiharu.' + location.host;

    timeago.render($qa('time'));
    hljs.initHighlighting();

    Misuzu.initQuickSubmit(); // only used by the forum posting form
    Misuzu.Forum.Editor.init();
    Misuzu.Events.dispatch();
    Misuzu.initLoginPage();

    const embeds = Array.from($qa('.js-msz-embed-media'));
    if(embeds.length > 0) {
        $as(embeds);

        const uiharu = new Uiharu(UIHARU_API)
            elems = new Map(embeds.map(function(elem) { return [elem.dataset.mszEmbedUrl, elem]; }));

        uiharu.lookupMany(Array.from(elems.keys()), function(resp) {
            if(resp.results === undefined)
                return; // rip

            for(const result of resp.results) {
                if(result.error) {
                    console.error(result.error);
                    continue;
                }

                if(result.info.title === undefined) {
                    console.warn('Media is no longer available.');
                    continue;
                }

                let elem = elems.get(result.url);

                (function(elem, info) {
                    const replaceElement = function(body) {
                        $ib(elem, body);
                        $r(elem);
                        elem = body;
                    };

                    const createEmbedPH = function(type, info, onclick, width, height) {
                        let infoChildren = [];

                        infoChildren.push({
                            tag: 'h1',
                            attrs: {
                                className: 'embedph-info-title',
                            },
                            child: info.title,
                        });

                        if(info.description) {
                            let firstLine = info.description.split("\n")[0].trim();
                            if(firstLine.length > 300)
                                firstLine = firstLine.substring(0, 300).trim() + '...';

                            infoChildren.push({
                                tag: 'div',
                                attrs: {
                                    className: 'embedph-info-desc',
                                },
                                child: firstLine,
                            });
                        }

                        infoChildren.push({
                            tag: 'div',
                            attrs: {
                                className: 'embedph-info-site',
                            },
                            child: info.site_name,
                        });

                        let style = info.color === undefined ? '' : ('--embedph-colour: ' + info.color);

                        if(width !== undefined)
                            style += 'width: ' + width.toString() + ';';
                        if(height !== undefined)
                            style += 'height: ' + height.toString() + ';';

                        let bgElem;
                        if(info.image !== undefined) {
                            bgElem = {
                                tag: 'img',
                                attrs: {
                                    src: info.image,
                                },
                            };
                        } else {
                            bgElem = {};
                        }

                        return $e({
                            attrs: {
                                href: 'javascript:void(0);',
                                className: ('embedph embedph-' + type),
                                style: style,
                            },
                            child: [
                                {
                                    attrs: {
                                        className: 'embedph-bg',
                                    },
                                    child: bgElem,
                                },
                                {
                                    attrs: {
                                        className: 'embedph-fg',
                                    },
                                    child: [
                                        {
                                            attrs: {
                                                className: 'embedph-info',
                                            },
                                            child: {
                                                attrs: {
                                                    className: 'embedph-info-wrap',
                                                },
                                                child: [
                                                    {
                                                        attrs: {
                                                            className: 'embedph-info-bar',
                                                        },
                                                    },
                                                    {
                                                        attrs: {
                                                            className: 'embedph-info-body',
                                                        },
                                                        child: infoChildren,
                                                    }
                                                ],
                                            },
                                        },
                                        {
                                            attrs: {
                                                className: 'embedph-play',
                                                onclick: function(ev) {
                                                    if(ev.target.tagName.toLowerCase() !== 'a')
                                                        onclick(ev);
                                                },
                                            },
                                            child: [
                                                {
                                                    attrs: {
                                                        className: 'embedph-play-internal',
                                                    },
                                                    child: {
                                                        tag: 'i',
                                                        attrs: {
                                                            className: 'fas fa-play fa-4x fa-fw',
                                                        },
                                                    },
                                                },
                                                {
                                                    tag: 'a',
                                                    attrs: {
                                                        className: 'embedph-play-external',
                                                        href: info.url,
                                                        target: '_blank',
                                                        rel: 'noopener',
                                                    },
                                                    child: ('or watch on ' + info.site_name + '?'),
                                                }
                                            ],
                                        }
                                    ],
                                },
                            ],
                        });
                    };

                    if(info.type === 'youtube:video') {
                        let embedUrl = 'https://www.youtube.com/embed/' + info.youtube_video_id + '?rel=0&autoplay=1';

                        if(info.youtube_start_time)
                            embedUrl += '&t=' + encodeURIComponent(info.youtube_start_time);

                        if(info.youtube_playlist) {
                            embedUrl += '&list=' + encodeURIComponent(info.youtube_playlist);

                            if(info.youtube_playlist_index)
                                embedUrl += '&index=' + encodeURIComponent(info.youtube_playlist_index);
                        }

                        replaceElement(createEmbedPH('youtube', info, function() {
                            replaceElement($e({
                                attrs: {
                                    className: 'embed embed-youtube',
                                },
                                child: {
                                    tag: 'iframe',
                                    attrs: {
                                        frameborder: 0,
                                        allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
                                        allowfullscreen: 'allowfullscreen',
                                        src: embedUrl,
                                    },
                                },
                            }));
                        }));
                    } else if(info.type === 'niconico:video') {
                        let embedUrl = 'https://embed.nicovideo.jp/watch/' + info.nicovideo_video_id + '/script?w=100%25&h=100%25&autoplay=1';

                        if(info.nicovideo_start_time)
                            embedUrl += '&from=' + encodeURIComponent(info.nicovideo_start_time);

                        replaceElement(createEmbedPH('nicovideo', info, function() {
                            replaceElement($e({
                                attrs: {
                                    className: 'embed embed-nicovideo',
                                },
                                child: {
                                    tag: 'script',
                                    attrs: {
                                        async: 'async',
                                        src: embedUrl,
                                    },
                                },
                            }));
                        }));
                    } else if(info.type === 'media') {
                        if(info.is_video) {
                            let width = info.width,
                                height = info.height;

                            const gcd = function(a, b) {
                                return (b == 0) ? a : gcd(b, a % b);
                            };

                            let ratio = gcd(width, height),
                                widthRatio = width / ratio,
                                heightRatio = height / ratio;

                            if(width > height) {
                                width = Math.min(640, width);
                                height = Math.ceil((width / widthRatio) * heightRatio).toString() + 'px';
                                width = width.toString() + 'px';
                            } else {
                                height = Math.min(360, height);
                                width = Math.ceil((height / heightRatio) * widthRatio).toString() + 'px';
                                height = height.toString() + 'px';
                            }

                            replaceElement(createEmbedPH('external', info, function() {
                                replaceElement($e({
                                    attrs: {
                                        className: 'embed embed-external',
                                    },
                                    child: {
                                        tag: 'video',
                                        attrs: {
                                            autoplay: 'autoplay',
                                            controls: 'controls',
                                            src: info.url,
                                            style: {
                                                width: width,
                                                height: height,
                                            },
                                        },
                                    },
                                }));
                            }, width, height));
                        } else if(info.is_audio) {
                            // coming someday
                        }
                    }
                })(elem, result.info);
            }
        });
    }
};
Misuzu.showMessageBox = function(text, title, buttons) {
    if($q('.messagebox'))
        return false;

    text = text || '';
    title = title || '';
    buttons = buttons || [];

    var element = document.createElement('div');
    element.className = 'messagebox';

    var container = element.appendChild(document.createElement('div'));
    container.className = 'container messagebox__container';

    var titleElement = container.appendChild(document.createElement('div')),
        titleBackground = titleElement.appendChild(document.createElement('div')),
        titleText = titleElement.appendChild(document.createElement('div'));

    titleElement.className = 'container__title';
    titleBackground.className = 'container__title__background';
    titleText.className = 'container__title__text';
    titleText.textContent = title || 'Information';

    var textElement = container.appendChild(document.createElement('div'));
    textElement.className = 'container__content';
    textElement.textContent = text;

    var buttonsContainer = container.appendChild(document.createElement('div'));
    buttonsContainer.className = 'messagebox__buttons';

    var firstButton = null;

    if(buttons.length < 1) {
        firstButton = buttonsContainer.appendChild(document.createElement('button'));
        firstButton.className = 'input__button';
        firstButton.textContent = 'OK';
        firstButton.addEventListener('click', function() { element.remove(); });
    } else {
        for(var i = 0; i < buttons.length; i++) {
            var button = buttonsContainer.appendChild(document.createElement('button'));
            button.className = 'input__button';
            button.textContent = buttons[i].text;
            button.addEventListener('click', function() {
                element.remove();
                buttons[i].callback();
            });

            if(firstButton === null)
                firstButton = button;
        }
    }

    document.body.appendChild(element);
    firstButton.focus();
    return true;
};
Misuzu.initLoginPage = function() {
    var updateForm = function(avatarElem, usernameElem) {
        var xhr = new XMLHttpRequest;
        xhr.addEventListener('readystatechange', function() {
            if(xhr.readyState !== 4)
                return;

            var json = JSON.parse(xhr.responseText);
            if(!json)
                return;

            if(json.name)
                usernameElem.value = json.name;
            avatarElem.src = json.avatar;
        });
        // need to figure out a url registry system again, current one is too much overhead so lets just do this for now
        xhr.open('GET', '/auth/login.php?resolve=1&name=' + encodeURIComponent(usernameElem.value));
        xhr.send();
    };

    var loginForms = $c('js-login-form');

    for(var i = 0; i < loginForms.length; ++i)
        (function(form) {
            var loginTimeOut = 0,
                loginAvatar = form.querySelector('.js-login-avatar'),
                loginUsername = form.querySelector('.js-login-username');

            updateForm(loginAvatar, loginUsername);
            loginUsername.addEventListener('keyup', function() {
                if(loginTimeOut)
                    return;
                loginTimeOut = setTimeout(function() {
                    updateForm(loginAvatar, loginUsername);
                    clearTimeout(loginTimeOut);
                    loginTimeOut = 0;
                }, 750);
            });
        })(loginForms[i]);
};
Misuzu.initQuickSubmit = function() {
    var ctrlSubmit = Array.from($qa('.js-quick-submit, .js-ctrl-enter-submit'));
    if(!ctrlSubmit)
        return;

    for(var i = 0; i < ctrlSubmit.length; ++i)
        ctrlSubmit[i].addEventListener('keydown', function(ev) {
            if((ev.code === 'Enter' || ev.code === 'NumpadEnter') // i hate this fucking language so much
                && ev.ctrlKey && !ev.altKey && !ev.shiftKey && !ev.metaKey) {
                // hack: prevent forum editor from screaming when using this keycombo
                //       can probably be done in a less stupid manner
                Misuzu.Forum.Editor.allowWindowClose = true;

                this.form.submit();
                ev.preventDefault();
            }
        });
};