a time slider for youtube short videos

yt_shorts_slider.js

// import {f_o_html_from_o_js} from "https://deno.land/x/[email protected]/mod.js";
// use this chrome extension to inject the script on youtube pages including /shorts/ in the url 
// https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
var o_s_prop_name_s_attribute_name = {
    "s_inner_text": "innerText",
}
let f_b_is_js_object = function(value){
    return typeof value === 'object' && value !== null;
}
var f_o_html_from_o_js = function(
    o_js
){
    // console.log(o_js)
    var o_js_outer = o_js;

    if(typeof o_js.f_o_js  == "function"){
        o_js = o_js.f_o_js(o_js);
    }

    if(!f_b_is_js_object(o_js)){
        // o_js has to be object, 
        return null
    }
    if(o_js.b_render === false){
        return null
    }
    var s_tag = (o_js.s_tag ? o_js.s_tag : 'div'); 
    var o_html = document.createElement(s_tag);
    var a_s_prop_name = Object.keys(o_js);
    for(var s_prop_name of a_s_prop_name){
        if(s_prop_name.indexOf("_") == 0){
            continue
        }

        let value = o_js[s_prop_name];
        
        if(Array.isArray(value)){
            for(var item of value){
                var o_html_child = f_o_html_from_o_js(item);
                if(o_html_child !== null){
                    o_html.appendChild(o_html_child)
                }
            }
        }
        if(
            !Array.isArray(value) 
              && !f_b_is_js_object(value)
        ){

            if(typeof value == "function"){
                o_html[s_prop_name] = function(){
                    value.call(this, o_js);
                } 
            }
            if(typeof value != 'function'){
                o_html[s_prop_name] = value;
                o_html.setAttribute(s_prop_name, value);
            }
        }
        // o_html.addEventListener(s_prop_name, value);

    }
    o_js._o_html = o_html;
    var _f_render = function(){
        var o_html_old = o_js._o_html;
        o_js._o_html = f_o_html_from_o_js(this);
        o_html_old.parentElement.replaceChild(o_js._o_html, o_html_old);
    }
    o_js._f_render = _f_render;
    o_js_outer._f_render = _f_render;
    o_js_outer._o_html = o_html;
    return o_html;
}


// export {f_o_html_from_o_js}

let f_do_from_o_video = function(
    o_video,
    o_gui_div
){

    let n_video_time_nor = 0;
    let s_style = [
        `z-index:1111`, 
        `position:absolute`, 
        `width:100%`
    ].join(';');

    var o_slider = {
        f_o_js: function(){
            console.log(n_video_time_nor)
            return {
                s_tag: "input", 
                type: 'range',
                min: 0, 
                max:1,
                // value: n_video_time_nor,
                // value: 0.5,
                step: 0.001,
                style: s_style,

                oninput: function(){
                    n_video_time_nor = this.value;
                    o_video.currentTime = this.value * o_video.duration
                }
            }
        }

    }
    var o = f_o_html_from_o_js({
        f_o_js(){
            return {
                // id: "main",
                s_tag: "div",
                style: s_style,
                a_o: [
                    o_slider, 
                ]
            }
        },
    })
    // console.log(o)
    let f_render = function(){
        requestAnimationFrame(f_render);
        n_video_time_nor = o_video.currentTime / o_video.duration;
        // o_slider._f_render()
        o_slider._o_html.value = n_video_time_nor
    }
    window.o_slider = o_slider
    var n_frame_id = 0;
    n_frame_id = requestAnimationFrame(f_render)
    
    o_gui_div.appendChild(o);
}

let o_gui_div = document.querySelector(".html5-video-player.ytp-hide-controls");
let o_video = document.querySelector(".video-stream.html5-main-video");
// console.log(o_video)
f_do_from_o_video(o_video, o_gui_div);