☰

Fullscreen Button for fishtank.live

Adds a fullscreen button to the fishtank.live video player.

当前为 2024-07-03 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Fullscreen Button for fishtank.live
// @namespace    http://tampermonkey.net/
// @version      0.7
// @description  Adds a fullscreen button to the fishtank.live video player.
// @author       You
// @match        https://www.fishtank.live/*
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const videoSelectors = [
        '.livepeer-video-player_livepeer-video-player__NRXYi',
        '.livepeer-video-player_livepeer-video-player__NRXYi'
    ];

    const videoSelector = '#livepeer-video-player video';
    const controlsContainerSelector = '.livepeer-video-player_controls__y36El';

    function toggleFullscreen(videoContainer, video) {
        if (!document.fullscreenElement) {
            videoContainer.requestFullscreen().then(() => {
                video.play();  // Ensure the video continues playing when entering fullscreen
            }).catch(err => {
                console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
            });
        } else {
            document.exitFullscreen().then(() => {
                video.play();  // Ensure the video continues playing when exiting fullscreen
            });
        }
    }

    function addFullscreenButton(videoContainer, video, controlsContainer) {
        // Check if fullscreen button already exists to avoid duplicates
        if (controlsContainer.querySelector('.custom-fullscreen-button')) {
            return;
        }

        // Create fullscreen button
        const fullscreenButton = document.createElement('button');
        fullscreenButton.className = 'custom-fullscreen-button';
        fullscreenButton.innerHTML = `<div class="icon_icon__bDzMA"><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M8 4v2H4v4H2V4a2 2 0 012-2h6v2H8zm8 0V2h6a2 2 0 012 2v6h-2V6h-4V4h-2zm0 16h2v-2h4v-4h2v6a2 2 0 01-2 2h-6v-2zM4 14H2v6a2 2 0 002 2h6v-2H4v-4H2v-2z" fill="currentColor"></path></svg></div>`;
        fullscreenButton.style.position = 'absolute';
        fullscreenButton.style.bottom = '10px';
        fullscreenButton.style.right = '8px';
        fullscreenButton.style.zIndex = '1000';
        fullscreenButton.title = 'Fullscreen';

        fullscreenButton.addEventListener('click', () => {
            toggleFullscreen(videoContainer, video);
        });

        // Add the button to the controls container
        controlsContainer.appendChild(fullscreenButton);
    }

    function addCustomCSS() {
        const style = document.createElement('style');
        style.innerHTML = `
            .live-stream-clipping_live-stream-clipping__xkFfU {
                bottom: 25px;
            }
        `;
        document.head.appendChild(style);
    }

    function applyChanges() {
        videoSelectors.forEach(selector => {
            const videoContainer = document.querySelector(selector);
            const video = document.querySelector(videoSelector);
            const controlsContainer = document.querySelector(controlsContainerSelector);

            if (videoContainer && controlsContainer) {
                addFullscreenButton(videoContainer, video, controlsContainer);
                addCustomCSS();
            }
        });
    }

    function handleKeydown(event) {
        if (event.key === 'f' || event.key === 'F') {
            videoSelectors.forEach(selector => {
                const videoContainer = document.querySelector(selector);
                const video = document.querySelector(videoSelector);

                if (videoContainer && video) {
                    toggleFullscreen(videoContainer, video);
                }
            });
        }
    }

    document.addEventListener('keydown', handleKeydown);

    // Use MutationObserver to detect changes in the DOM
    const observer = new MutationObserver(applyChanges);
    observer.observe(document.body, { childList: true, subtree: true });

    // Initial application
    applyChanges();

})();