NicoNicoBrowserInnerFullScreen

ニコニコ動画のブラウザ内最大化やっつけ実装
Wrap lines
// ==UserScript==
// @name         NicoNicoBrowserInnerFullScreen
// @namespace    https://twitter.com/Tescostum/
// @version      2025-01-21.04
// @description  ニコニコ動画のブラウザ内最大化やっつけ実装
// @author       KBT
// @match        https://www.nicovideo.jp/watch/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=nicovideo.jp
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';
    function waitForElement(selector, callback) {
        const element = document.querySelector(selector);
        if (element) {
            callback(element);
            return;
        }

        const observer = new MutationObserver(() => {
            const element = document.querySelector(selector);
            if (element) {
                callback(element);
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true,
        });
    }

    function addMaximizeButton() {
        waitForElement('button[aria-label="全画面表示する"]', (fullscreenButton) => {
            const maximizeButton = document.createElement('button');
            maximizeButton.textContent = "最大化";
            maximizeButton.style.marginLeft = '8px';
            maximizeButton.style.padding = '5px';
            maximizeButton.style.color = 'var(--colors-text-on-layer-medium-em)';
            maximizeButton.style.backgroundColor = 'var(--colors-layer-background)';
            maximizeButton.style.border = 'none';
            maximizeButton.style.borderRadius = '4px';
            maximizeButton.style.cursor = 'pointer';

            fullscreenButton.parentNode.insertBefore(maximizeButton, fullscreenButton.nextSibling);

            let isMaximized = false;
            let originalStyles = {};
            let timeoutId = null;
            const videoPlayer = document.querySelector('div[data-styling-id=":r3:"]');
            const videoPlayerParent = videoPlayer.parentElement;
            let minimizeButton = null;

            function showMinimizeButton() {
                if (!videoPlayer) return;

                minimizeButton = document.createElement('button');
                minimizeButton.textContent = "元に戻す";
                minimizeButton.style.position = 'absolute';

                minimizeButton.style.backgroundColor = 'rgba(0,0,0,0.5)';
                minimizeButton.style.fill = 'white';
                minimizeButton.style.cursor = 'pointer';
                minimizeButton.style.fontSize = '1.2em';
                minimizeButton.style.width = '6em';
                minimizeButton.style.height = '3em';

                videoPlayer.appendChild(minimizeButton);

                minimizeButton.addEventListener('click', () => {
                    if (isMaximized && videoPlayer) {
                        videoPlayer.style.position = originalStyles.position;
                        videoPlayer.style.top = originalStyles.top;
                        videoPlayer.style.left = originalStyles.left;
                        videoPlayer.style.width = originalStyles.width;
                        videoPlayer.style.height = originalStyles.height;
                        videoPlayer.style.backgroundColor = originalStyles.backgroundColor;
                        videoPlayer.style.zIndex = originalStyles.zIndex;
                        isMaximized = false;

                        if (minimizeButton) {
                            _firstMaxWindow = true;
                            minimizeButton.remove();
                            minimizeButton = null;
                        }
                    }
                });
            }


            function hideMinimizeButton() {
                if (minimizeButton) {
                    minimizeButton.remove();
                    minimizeButton = null;
                }
            }

            let _firstMaxWindow = true;
            function handleMouseMove() {
                if (timeoutId) {
                    clearTimeout(timeoutId);
                }
                if (isMaximized) {
                    if(_firstMaxWindow) {
                        _firstMaxWindow = false;
                        return;
                    }
                    if (!minimizeButton) {
                        showMinimizeButton();
                    }
                    timeoutId = setTimeout(hideMinimizeButton, 500);
                } else {
                    hideMinimizeButton();
                }
            }


            maximizeButton.addEventListener('click', () => {
                if (!videoPlayer || !videoPlayerParent) {
                    return;
                }

                if (!isMaximized) {
                    originalStyles = {
                        position: videoPlayer.style.position,
                        top: videoPlayer.style.top,
                        left: videoPlayer.style.left,
                        width: videoPlayer.style.width,
                        height: videoPlayer.style.height,
                        backgroundColor: videoPlayer.style.backgroundColor,
                        zIndex: videoPlayer.style.zIndex
                    };

                    videoPlayer.style.position = 'fixed';
                    videoPlayer.style.top = '0';
                    videoPlayer.style.left = '0';
                    videoPlayer.style.width = '100%';
                    videoPlayer.style.height = '100%';
                    videoPlayer.style.backgroundColor = 'black';
                    videoPlayer.style.zIndex = '9999';
                    isMaximized = true;
                    handleMouseMove();

                }
            });

            videoPlayerParent.addEventListener('mousemove', handleMouseMove);

        })
    }

    addMaximizeButton();
})();
欢迎访问Greasy Fork镜像
