Hypnotube.com Playlist Auto Fullscreen のソースコード

Hypnotube.com Playlist Auto Fullscreen

Make hypnotube.com video auto fullscreen on playlist plays
右端で折り返す
// ==UserScript==
// @name         Hypnotube.com Playlist Auto Fullscreen
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Make hypnotube.com video auto fullscreen on playlist plays
// @author       MattD
// @license      MIT
// @match        https://hypnotube.com/video/*
// @icon         https://cdn.hypnotube.com/templates/hypnotube/images/touch/fav.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const createExitButton = (video, originalStyles) => {
        const exitBtn = document.createElement('button');
        exitBtn.textContent = '✕';
        Object.assign(exitBtn.style, {
            position: 'fixed',
            top: '10px',
            right: '10px',
            zIndex: '10000',
            width: '30px',
            height: '30px',
            background: 'rgba(0,0,0,0.5)',
            color: 'white',
            border: 'none',
            borderRadius: '50%',
            cursor: 'pointer',
            fontSize: '16px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
        });
        document.body.appendChild(exitBtn);
        exitBtn.addEventListener('click', () => {
            Object.assign(video.style, originalStyles);
            document.body.style.overflow = '';
            exitBtn.remove();
            console.log(`Exited fullscreen`);
        });
    };

    const setFullscreen = () => {
        const video = document.querySelector(".plyr--video");
        if (!video) return;
        const originalStyles = {
            position: video.style.position,
            top: video.style.top,
            left: video.style.left,
            width: video.style.width,
            height: video.style.height,
            zIndex: video.style.zIndex,
            background: video.style.background,
        };
        Object.assign(video.style, {
            position: 'fixed',
            top: '0',
            left: '0',
            width: '100vw',
            height: '100vh',
            zIndex: '9999',
            background: 'black',
        });
        document.body.style.overflow = 'hidden';
        console.log(`Fullscreen set`);
        createExitButton(video, originalStyles);
    };

    const init = () => {
        console.log(`Hypnotube Automatic Fullscreen Init`);
        const isTherePlaylist = document.querySelector(".playlist-widget");
        if (isTherePlaylist){setFullscreen()} else{console.log(`Not in a playlist queue, not setting fullscreen`)}
    };

    document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", init) : init();
})();