帰ニコ用ブラウザフルスクリーンスクリプト

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

スクリーンショット
ブラウザフルスクリーンの例

スクリプト起動中、フルスクリーン（モニタ全域）状態にならないようにする
この状態でフルスクリーンに移行すると、プレイヤーレイアウトはフルスクリーン用のレイアウトになる
（生放送での設定→フルスクリーンサイズ→ブラウザサイズに相当する状態）

通常のフルスクリーンを使用したい場合は「モニタサイズフルスクリーン」ボタンから可能
（「...」→「remove」でスクリプトを終了してからフルスクリーン操作をしても可）

ブックマークレット版

userscript版

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

(function () {

    // =====編集可能な変数=====
    const toolPriority = 10;	// editable: 同じ位置に挿入されるツール同士の順序値 大が上

    /** @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 addMaker = (posText, priority, name, parent, defaultBefore)=>{
        if(!Number.isFinite(priority))return;
        return (element)=>{
            element.dataset.toolPosition = posText;
            element.dataset.toolPriority = priority;
            element.dataset.toolName = name;
            let afterTool = [...parent.childNodes]
                .find(v=>{
                    if(v.dataset.toolPosition != posText)return false;
                    let targetPriority = v.dataset.toolPriority - 0;
                    if(targetPriority == priority)return name.localeCompare(v.dataset.toolName || "") < 0;
                    return targetPriority < priority;
                });
            parent.insertBefore(element, afterTool ?? defaultBefore());
        };
    };

    // コメント入力欄より後
    const afterInputAddMaker = (priority, name)=>{
        let base = document.querySelector(`.grid-area_\\[player\\]`);
        if(!base)return;
        return addMaker("afterComment", priority, name, base, ()=>null);
    };

    const toolName = "kinico_browserfull";
    const verString = "0.3";

    (async()=>{
        let onRemoveTodo = [()=>{onRemoveTodo = [];}];
        try{
            let containerAdder;
            {
                // page match
                let i = 10;
                while(!(containerAdder ??= afterInputAddMaker(toolPriority, toolName + verString))){
                    if(i < 0)throw "target page not match";
                    await new Promise(res=>setTimeout(res, 500));
                    i--;
                }
            }

            if(Object.hasOwn(document.body, "requestFullscreen"))throw "mod by other tool(fullscreen)";

            let fromMyButtonFlag = false;
            const modRevert = ()=>{
                delete document.body.requestFullscreen;
            };
            document.body.requestFullscreen = async()=>{
                if(!document.contains(fullScrButton)){
                    modRevert();
                    return document.body.requestFullscreen();
                }
                if(fromMyButtonFlag){
                    fromMyButtonFlag = false;
                    return Object.getPrototypeOf(document.body).requestFullscreen.call(document.body);
                }
            };
            onRemoveTodo.push(modRevert);

            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;
            };
            let fullScrButton = tag(
                "button", {
                    t: "モニタサイズフルスクリーン",
                    s: buttonStyle,
                    e: {
                        click: ()=>{
                            let func = fullScrFuncFinder();
                            if(!func)return;
                            fromMyButtonFlag = true;
                            func(true);
                        },
                    },
                });


            let container = containerBuild(
                [app(tag("div"), text(`ブラウザフルスクリーン ${verString} `), fullScrButton)],
                [],
                [],
                onRemoveTodo,
            );
            containerAdder(container);

        }catch(e){
            console.log(`${toolName}${verString} error:`, e); // eslint-disable-line
            onRemoveTodo.map(v=>v());
        }
    })();

})();

更新履歴

v0.3 change:起動中フルスクリーンにならないように機能変更
- 「連続再生中にブラウザの戻る」等での動画遷移時にモニタサイズフルスクリーンになってしまう現象への対処
v0.2 fix:動画遷移後機能しなくなる
v0.1 初版

コンテンツリスト

帰ニコ用ブラウザフルスクリーンスクリプト

kinico_browserfull_v0.1.html

kinico_browserfull_v0.2.html

kinico_browserfull_v0.3.html