☰

netflix progress and title indicator

adds div with the current title and time use 't' to add "hidden" style to the div along with some default style

// ==UserScript==
// @name         netflix progress and title indicator
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  adds div with the current title and time use 't' to add "hidden" style to the div along with some default style
// @author       Me
// @match        https://www.netflix.com/*
// @grant        none
// ==/UserScript==

function title_getter() {
    var vid, title = "", on = false;
    function refresh_title () {
        try {
            let divs = document.querySelectorAll(".video-title div *");
            if(divs.length === 0){
                divs = document.querySelectorAll(".video-title *");
            }
            title = Array.from(divs).map((x)=>x.textContent).join(" ");
        } catch(e) {
            title = "";
        }
    }
    function refresh_enabled () {
        vid = document.querySelector(".AkiraPlayer video");
        if(vid === null && on) {
            on = false;
            return;
        }
        if(vid !== null && !on) {
            on = true;
        }
    }
    function time() {
        try {
            let cur = +vid.currentTime;
            let dur = +vid.duration;
            return { cur: cur, dur: dur };
        } catch(e) {
            return { cur: 0, dur: 0 };
        }
    }
    return { title: function () { return title; }, time, refresh_title, refresh_enabled, enabled: function () { return on; } };
}

function reappend (n) {
    var w = document.querySelector(".sizing-wrapper");
    if(w !== null){
        if(w.contains(n)) {
            return;
        }
        w.appendChild(n);
    }
}
 function node(cls, c) {
     var parent = document.createElement("div");
     var text = document.createTextNode("");
     parent.appendChild(text);
     if(c != null) {
         for(var n of c) {
             parent.appendChild(n);
         }
     }
     var current;
     var hidden = false;
     parent.className = cls;
     return {
         n: parent,
         set: function (value) {
             if(value == null) {
                 return;
             }
             value = value.toString();
             if(current != value) {
                 text.textContent = value;
                 current = value;
             }
         },
         hide: function () { if(hidden) return; hidden = true; parent.className = cls + " hidden"; },
         show: function () { if(!hidden) return; hidden = false; parent.className = cls; }
     };
 }

function p(number) {
   return (number < 10 ? '0' : '') + number;
}

var CreateStyle = function () {
	function DynamicCss () {
		var s = document.createElement("style");
		s.setAttribute("type", "text/css");
		s.setAttribute("rel", 'stylesheet');
		s.setAttribute("media", 'screen');
		document.head.appendChild(s);
		this.e_container = s;
		this.rules = {};
	}

    var state = 0;
	DynamicCss.prototype = {
		addRule: function (name, selector) {
            if(arguments.length == 1) {
                selector = name;
                name = ++state;
            }
			if(this.rules[name]) {
				return this.rules[name];
            }
			var r = this.rules[name] = new DynamicRule(selector);
			this.e_container.appendChild(r.e_container);
            console.log("RULE", this);
			return r;
		},
		getRule: function (name) {
			return this.rules[name];
		},
		removeRule: function (name) {
			if(this.rules[name]) {
				var r = this.rules[name];
				delete this.rules[name];
				this.e_container.removeChild(r.e_container);
			}
		}
	};

	function DynamicRule (selector) {
		var rule = this.e_container = document.createDocumentFragment();
		rule.appendChild(document.createTextNode(selector + "{"));
		var innerRule = this.e_rules = document.createTextNode("");
		rule.appendChild(innerRule);
		rule.appendChild(document.createTextNode("}\n"));
		this.rules = {};
	}
	DynamicRule.prototype = {
        setDeclarations: function (declarations) {
            for(var key in declarations) {
                this.rules[key] = declarations[key];
            }
			this.redraw();
		},
		setDeclaration: function (key, value) {
			this.rules[key] = value;
			this.redraw();
		},
		removeDeclaration: function (key) {
			delete this.rules[key];
			this.redraw();
		},
		redraw: function () {
			var rule = "", a = this.rules, isFirst = true;
			for(var key in a){
				rule += (!isFirst?";":(isFirst=false||"")) + key + ":" + a[key];
			}
			this.e_rules.nodeValue = rule;
		}
	};

    return function () { return new DynamicCss(); }
}();

(function() {
   var data = title_getter();
   function fmt_time(s) {
        s = s | 0;
        var h = (s / 3600)|0;
        s = s - h * 3600;
        var m = (s / 60)|0;
        s = s - m * 60;
        return `${p(h)}:${p(m)}:${p(s)}`;
    }
    var title = node("title");
    var time = node("time");
    var wholeTitleNode = node("myTitleNode", [title.n, time.n]);
    // css
    var style = CreateStyle();
    style.addRule(".myTitleNode.hidden").setDeclaration("display", "none");
    style.addRule(".myTitleNode").setDeclarations({
        top: "10px",
        position: "fixed",
        left: "10px",
        color: "white",
        right: "10px",
        "z-index": "100",
        "font-size": "2em"
    });
    style.addRule(".myTitleNode .title").setDeclaration("float", "left");
    style.addRule(".myTitleNode .time").setDeclaration("float", "right");

    document.body.appendChild(wholeTitleNode.n);
    setInterval(data.refresh_title, 5000);
    var shown = false;
    document.body.addEventListener('keypress', function (e) {
        if(e.key == 't') {
            shown = shown ? false : true;
            refresh();
        }
    });
    function refresh () {
        data.refresh_enabled();
        reappend(wholeTitleNode.n);
        if(data.enabled() && shown) {
            wholeTitleNode.show();
        } else {
            wholeTitleNode.hide();
            return;
        }
        var my_tit = data.title();
        title.set(my_tit);
        let t = data.time();
        time.set(`${fmt_time(t.cur)} / ${fmt_time(t.dur)}`);
    }
    setInterval(refresh, 500);
})();