# 帰ニコ用ブラウザフルスクリーンボタン

旧バージョンで（たしか）ブラウザフルスクリーンという名前だった機能を再現するボタン

スクリーンショット

UIをフルスクリーン用レイアウトに切り替えるが、ブラウザウィンドウがフルスクリーン（モニタ全域）状態にならないようにする
（生放送での設定→フルスクリーンサイズ→ブラウザサイズに相当）

フルスクリーンレイアウトを解除する場合は、単純に通常の「フルスクリーン解除」ボタンで解除できる

# userscript版

// ==UserScript==
// @name kinico_browserfull
// @version 0.1
// @description 帰ニコ用ブラウザフルスクリーンボタン
// @match https://www.nicovideo.jp/watch/*
// @grant none
// @run-at document-start
// ==/UserScript==

(function () {

    /** @return {HTMLElement} */
    let tag = (tagname = "div", {a, s, e, t} = {})=>{
        let dom = document.createElement(tagname);
        for(let k in a)dom.setAttribute(k, a[k]);
        for(let k in s)dom.style[k] = s[k];
        for(let k in e)dom.addEventListener(k, e[k]);
        if(t)dom.textContent = t;
        return dom;
    };
    let text = (/** @type {string} */ text)=>document.createTextNode(text);
    let app = (/** @type {Node} */root, /** @type {Node[]} */...children)=>(
        children.map((v)=>v && root.appendChild(v)),
        root
    );

    const buttonStyle = {borderRadius: "5px", padding: "0px 3px 0px 3px", border: "solid 1px #000", background: "#ddd", color: "#000"};

    const containerBuild = (
        title = [],
        menu = [],
        body = [],
        onRemoveTodo = [],
    )=>{
        let container = tag("div", {
            s: {border: "2px solid #000", padding: 0, margin: 0},
        });

        let header = tag("div", {
            s: {border: "2px solid #666", display: "grid", grid: "auto-flow/auto max-content"},
        });
        header.append(
            ...title,
            tag("button", {t: "\u2026", s: buttonStyle, e: {click: (e)=>{
                e.stopPropagation();
                menuDom.toggleAttribute("hidden");
            }}}),
        );

        let menuDom = tag("div", {a: {hidden: "hidden"}, s: {textAlign: "right"}});
        menuDom.append(
            ...menu,
            tag("button", {t: "remove", s: buttonStyle, e: {click: ()=>{[...onRemoveTodo].map(v=>v());}}}),
        );
        container.append(
            header,
            menuDom,
            ...body,
        );
        container.remove();
        onRemoveTodo.push(()=>{container.remove();});
        return container;
    };

    const verString = "0.1";
    (async()=>{
        let onRemoveTodo = [()=>{onRemoveTodo = [];}];
        try{
            let fullScrFunc;
            let containerAdder;
            const fullScrFuncFinder = ()=>{
                let rootDom = document.querySelector("main");
                if(!rootDom)return;
                let root = rootDom[Object.keys(rootDom).find(v=>v.startsWith("__reactFiber"))];
                if(!root)return;

                let pool = [root];
                while(pool[0]){
                    let t = pool.pop();
                    if(t?.memoizedProps){
                        let f = Object.entries(t.memoizedProps).find(v=>v[0].toLowerCase().includes("setfullscreen"));
                        if(f)return f[1];
                    }
                    if(t.sibling)pool.push(t.sibling);
                    if(t.child)pool.push(t.child);
                }
                return;
            };
            const containerAddFuncMake = ()=>{
                let videoElement = document.querySelector(`main video`);
                let commentInput = document.querySelector(`main textarea`);
                if(!videoElement || !commentInput)return;
                let mainCont = videoElement;
                while(!mainCont.contains(commentInput)){
                    mainCont = mainCont.parentElement;
                }
                return (element)=>{
                    mainCont.parentElement.insertBefore(element, mainCont.nextSibling);
                };
            };
            {
                // page match
                let i = 10;
                while(
                    !(fullScrFunc ??= fullScrFuncFinder()) ||
                    !(containerAdder ??= containerAddFuncMake())
                ){
                    if(i < 0)throw "target page not match";
                    await new Promise(res=>setTimeout(res, 500));
                    i--;
                }
            }
            console.log(fullScrFunc);


            let fullScrButton = tag(
                "button", {
                    t: "ブラウザフルスクリーン",
                    s: buttonStyle,
                    e: {
                        click: ()=>{
                            let tmp = document.body.requestFullscreen;
                            document.body.requestFullscreen = ()=>{
                                delete document.body.requestFullscreen;
                                if(!document.body.requestFullscreen)document.body.requestFullscreen = tmp;
                            };
                            fullScrFunc(true);
                        },
                    },
                });


            let container = containerBuild(
                [app(tag("div"), (fullScrButton), text(" " + verString))],
                [],
                [],
                onRemoveTodo,
            );
            containerAdder(container);

        }catch(e){
            console.log(e); // eslint-disable-line
            onRemoveTodo.map(v=>v());
        }
    })();

})();