Greasy Fork is available in English.

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);
})();