Skip to content

Instantly share code, notes, and snippets.

@jonasfrey

jonasfrey/yt_shorts_slider.js

Last active March 7, 2023 21:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jonasfrey/f622153aa78ac4a190015a9cbd3550eb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jonasfrey/f622153aa78ac4a190015a9cbd3550eb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jonasfrey revised this gist Mar 7, 2023. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion yt_shorts_slider.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    // 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",
    }
  2. jonasfrey created this gist Mar 7, 2023.
    139 changes: 139 additions & 0 deletions yt_shorts_slider.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,139 @@
    // import {f_o_html_from_o_js} from "https://deno.land/x/[email protected]/mod.js";

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