userscripts/Video Zen.user.js

// ==UserScript==
// @name         Video Zen
// @namespace    http://bullercodeworks.com
// @version      0.2
// @description  Watch video in 'zen' mode
// @author       brian@bullercodeworks.com
// @match        http*://*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function buildZen() {
        var lb = document.createElement('div');
        lb.id='zen_lightbox';
        lb.style.textAlign = 'center';
        lb.style.height = '100%';
        lb.style.width = '100%';
        lb.style.position = 'fixed';
        lb.style.top = '0px';
        lb.style.left = '0px';
        lb.style.zIndex = '99999';
        lb.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
        document.body.prepend(lb);
        var z = document.zenlevel;
        var v = document.getElementsByTagName('video')[0];
        v.style.width='100%';
        v.setAttribute('controls','controls');
        lb.appendChild(v);
        lb.style.display = 'none';
    }
    function zenExists() {
        var lb=document.getElementById('zen_lightbox');
        return lb != null;
    }
    function deleteZen() {
        document.getElementById('zen_lightbox').remove();
    }
    function toggleZen() {
        if(!zenExists()) {
            console.log('Building zen');
            buildZen();
        }
        var lb=document.getElementById('zen_lightbox');
        if(lb.style.display=='none'){
            lb.style.display='block';
        } else {
            document.getElementsByTagName('video')[0].pause();
            lb.style.display='none';
        }
    }
    function pressZenButton() {
        if(zenExists()) {
            deleteZen();
        } else {
            toggleZen();
        }
    }

    function getZenButton() {
        var zenBtn = document.getElementById('zen_button');
        if(zenBtn == null) {
            zenBtn = document.createElement("button");
            zenBtn.id = "zen_button";
            zenBtn.style.position = "absolute";
            zenBtn.innerHTML = "Zen Mode";
            zenBtn.style.zIndex = 100000;
            zenBtn.style.top = 0;
            zenBtn.style.right = 0;
            zenBtn.style.opacity=0.5;
            zenBtn.onclick = pressZenButton;
            document.body.prepend(zenBtn);
        }
        return zenBtn;
    }
    function canZen() {
        var v = document.getElementsByTagName('video')[0];
        console.log(v);
        return v != null;
    }
    function doPressEscape() {
        if(canZen()) {
            if(zenExists()) {
                toggleZen();
            } else {
                console.log("Zen mode can be activated.");
                var btn = getZenButton();
                if(btn.display == 'none') {
                    btn.display = 'absolute';
                } else {
                    btn.display = 'none';
                }
            }
        } else {
            console.log("Zen mode cannot be activated.");
        }
    }

    document.addEventListener('keyup',(e)=>{
        console.log("Event Caught");
        switch(e.code){
            case 'Escape':
                doPressEscape();
                break;
        }
    });
})();