ign4/rf/filmstrip_mod/m.js

// this will be refactored into the api and an a filmstrip module

mod_templates = window.mod_templates || $("")

// reload templates
function html_js_handler(rsp) {
	clog("html_js_handler",[...arguments])
	mod_templates = $(`<span>${rsp}</span>`)
	init_api6()
}



html_hooks = {
	create_video_tile(n){
		add_node(n,`#localVideoTileViewContainer`,"before")
	},
	create_vid_toptoolbar_hook(n){
		add_node(n,`.vid_toptoolbar_hook`,"append")
	},
    create_new_toolbox_hook(n){
        add_node(n,`.new_toolbox_hook`,"append")
    },

	create_vid_toptoolbar_hook_after(n){
		add_node(n,`.vid_toptoolbar_hook`,"append")
	},
	// Top of window
	create_top_toolbox_hook(n){
		add_node(n,`.top_toolbox`,"append")
	},
	create_bottom_toolbox_hook(n){
		add_node(n,`.button-group-right`,"prepend")
	},
	create_new_filmstrip(n){
		add_node(n,`#filmstripRemoteVideos`,"prepend")
	},
}



function saftly_remove(n,remove_nodes=true){
	const j =$(n)

	$(`#localVideoTileViewContainer`).append(j.find(".local_vid"))
	$(`#filmstripRemoteVideosContainer`).append(j.find("#localVideoTileViewContainer"))

	$(`#localVideoTileViewContainer`).before(j.find(".remote_vid"))
	remove_nodes ? j.remove() : clog("DO NOT REMOVE")


}

// follow focus EventListener
function ffcb(){
	clog("ffcb",this.value,this.checked,[this,...arguments])
	disp(glob_react.base_conference.setFollowMe(this.checked))
	var follow_focus_force=$("#follow_focus_force")[0] 
	if (follow_focus_force.checked && !this.checked){
		msto.conference.force_follow = this.checked
		follow_focus_force.checked = this.checked

	}
}
// force follow focus EventListener
function fffcb(){
	var follow_focus=$("#follow_focus")[0]

	if (!follow_focus.checked && this.checked){

	follow_focus.checked = this.checked
	ffcb.bind(follow_focus)()
	}
	msto.conference.force_follow = this.checked
}
// number of pseudo videos EventListener
function num_pseudo(){
	msto.conference.repeat = this.value
	setTimeout(refresh_fs_send,100)
}
// overflow scroll EventListener
function scroll_timeout_runner(){
	$("#follow_focus_force")[0] 
	// scroll_send)
	var ov_timeout=$("#ov_timeout")[0]
	var ov_timeout_disable=$("#ov_timeout_disable")[0]
	// ov_timeout_disable
	if (ov_timeout_disable.checked){
		timeout_scroll_glob.stop = 1
	} else {
		timeout_scroll_glob.stop = 0

	}
	if (!isNaN(ov_timeout.value) && ov_timeout.value > .2){
		timeout_scroll_glob.timeout = Math.ceil(ov_timeout.value * 1000)
		msto.conference.scroll_timeout = ov_timeout.value
		timeout_scroll_start()
	}
}


// to

function refresh_toolbars(){
    saftly_remove(".plugin_top.tbar")
    // this stuff should go in a template

    n = `
    <span class="plugin_top tbar"><span class="outline_indicator ind_1"></span><span class="outline_indicator ind_2"></span><span class="outline_indicator ind_3"></span>
    <div class="m xbox">ABC</div>
    </span>`

    html_hooks.create_vid_toptoolbar_hook_after(n)
    n = `
    <div class="plugin_top tbar">
        <div class="tbox_slide_indicator cutCorner"><div class="tsi"></div></div>
    </div>`

    html_hooks.create_new_toolbox_hook(n)

        n = `
    <div class="plugin_top tbar">
    <span class="lvov_container">
    <span class="toggle_ff lvov">enter fullframe</span>

    <span class="lv_info lvov">
    <span class="autoplay_msg lvov">
    autoplay is probably disabled
    <br>
    click on page to enable playback
    
    </span>
    <br>
    <span class="autoplay_dbg_msg lvov">
    </span>
    <span class="force_enable lvov">force allow autoplay
    
    </span>
    </span>

    </span>
        <div class="tbox_slide_indicator2"></div>
    </div>`
    n = $(n)

    // <span class="lv_info lvov"></span>
    add_node(n,`.lvc_overlay`,"append")


    var v = $("#largeVideoContainer")[0]
    // v.onmousemove=  ff_mm
    v.onmouseenter= ff_me
    v.onmouseleave =ff_ml
    try {
    n.find(".toggle_ff")[0].onclick = toggle_ff
    n.find(".force_enable")[0].onclick = allow_autoplay
    // n.find(".allow_autoplay")[0].onclick = allow_autoplay

    } catch (e){}

    // html_hooks.create_new_toolbox_hook(n)
    $(".tsi").corner("bevel top 20px");
    n = `<span class="plugin_top tbar"><span class="m follow_focus">
<input type="checkbox" id="follow_focus" name="follow_focus">
<label for="follow_focus">
follow focus (moderator only)
</label>

<br>
<input type="checkbox" id="follow_focus_force" name="follow_focus_force">
<label for="follow_focus_force">
force
</label>
</span>
<span class="m follow_focus2">
 <label for="num_pseudo"># of pseudo videos</label>
  <input type="number" id="num_pseudo" name="num_pseudo" value=${window.msto ? msto.conference.repeat || 0 : 0} min=0>
<br>
  <label for="ov_timeout">overflow scroll interval </label>
  <input type="number" id="ov_timeout" name="timeout" min=.4 step=.1 value=${window.msto ? msto.conference.scroll_timeout || 15 : 15}>

<br>
<input type="checkbox" id="ov_timeout_disable" name="ov_timeout_disable">
<label for="ov_timeout_disable" class="inline_input">
disable
</label>
<span class="inline_input"><button id="scroll_now" class="inline_input">scroll now</button></span>

</span>
</span>`

	// add moderator elements
    if (amimod()){

    n = $(n)
    n.find("input#follow_focus")[0].onchange = ffcb
    n.find("input#follow_focus_force")[0].onchange = fffcb
    n.find("input#ov_timeout")[0].onchange = scroll_timeout_runner
    n.find("input#ov_timeout_disable")[0].onchange = scroll_timeout_runner
    n.find("#scroll_now")[0].onclick = scroll_send
    n.find("#num_pseudo")[0].onchange = num_pseudo

    add_node(n,`.subject`,"prepend")
    }
}


// 
function init_api6(){
    clog("init_api6...")
    saftly_remove(".plugin_top")
    // return
    var arr = []
    var n 
    n = `<span class="plugin_top pseudo_vid small_vid "><div class="m2 xbox2">ABC</div></span>`

    const repeat = window.msto ?  msto.conference.repeat || 0 : 0
    if ((!isNaN(repeat) && repeat > 0 )){
    html_hooks.create_video_tile(n.repeat(repeat))
    }

    refresh_toolbars()
    // ff_set_ev()
    
    n = `<span class="plugin_top"><div class="m xbox">ABC</div></span>`
    html_hooks.create_bottom_toolbox_hook(n)


    // n = `<span class="plugin_top abs"><div class="dev_filmstrip">ABC</div></span>`
    // n = `<span class="plugin_top abs"><div class="dev_filmstrip">ABC</div></span>`
    // n= mod_templates.find(".filmstrip_template")[0].outerHTML
    // html_hooks.create_new_filmstrip(n)
    // n = `<span class="plugin_top pseudo_vid small_vid "><div class="m4 xbox3">ABC</div></span>`

    let nj = mod_templates.find("#vspace_filmstrip_template")
    if (nj.length){
    n= mod_templates.find("#vspace_filmstrip_template")[0].outerHTML
    add_node(n,`.vspace`,"append")
    }

    if (window.mod_sort){
    mod_sort()
    }

    dispatch_resize()


}





function ff_me(){
clog("ff_me")
    // $(".lvov").removeClass("_hide")
    $(".lvov_container").removeClass("_hide")
    // $(".lvov").removeClass("hide")
    // glob_dbg.ff.ts = Date.now()
    // glob_dbg.ff.stop = 0
    // glob_dbg.ff.n = $(".toggle_ff")[0]
    // glob_dbg.ff.mma.shift()s

    // dev_raf()
}
function ff_ml(){
clog("ff_ml")
    $(".lvov_container").addClass("_hide")
    // glob_dbg.ff.stop = 1

}
function ff_mm(){
clog("ff_mm")
glob_dbg.ff.mmc += 1
}
function toggle_ff(){
    clog("TOGGLEFF")
    // glob_dbg.ytp.playVideo()
    // return
    glob_mx.dims.fullframe = !glob_mx.dims.fullframe
    if (glob_mx.dims.fullframe){
        $(".vspace").addClass("_hide")
        $(".toggle_ff")[0].innerHTML = "shrink"
        $(".toggle_ff")[0].innerHTML = "exit fullframe"
        // ._hide
    } else {
        $(".toggle_ff")[0].innerHTML = "enter fullframe"
        $(".vspace").removeClass("_hide")
    }
    dispatch_resize()

}
function allow_autoplay(){
    glob_dbg.ytp.playVideo()
    // clog("ALA")
    setTimeout(allow_autoplay_end,1)

}
function allow_autoplay_end(){
    // glob_dbg.ytp.playVideo()
    clog("allow_autoplay_end")

    if (glob_dbg.slf && glob_dbg.slf.attr_cache && glob_dbg.slf.attr_cache.state == "playing"){

    clog("allow_autoplay_end CONTINUE!")
    } else {

    glob_dbg.ytp.pauseVideo()
    }
    // glob_dbg.ytp.pauseVideo()
    var j = $(".lv_info")
    j.removeClass("_show")



     // $(".allow_autoplay")[0].innerHTML = "should work now"

}


function ff_set_ev(){
    var v = $("#largeVideoContainer")[0]
    // v.onmousemove=  ff_mm
    v.onmouseenter= ff_me
    v.onmouseleave =ff_ml
    $(".toggle_ff")[0].onclick = toggle_ff
    $(".allow_autoplay")[0].onclick = allow_autoplay

}








/*
// example event 
function event_test(){

            tmsgx({
                "type":"event",
                "payload":{path:"z",key:"z",val:"z",etype:"xyz"},
            },"code")
}


function all_plugin_events(e){
	clog("all_plugin_events",[this],[...arguments])
}


glob_mx.event_handlers.e1 = {
	fn:all_plugin_events,
	m:{},
}
*/


function refresh_fs_send(){

            tmsgx({
                "type":"event",
                "payload":'{path,key,val}',
                etype:"refresh_fs"
            },"code")
}

function refresh_fs_proc(){
    init_api6()
mod_sort()
new_move()

dispatch_resize()
	clog("refresh_fs_proc")
}

function scroll_send(){

            tmsgx({
                "type":"event",
                "payload":'{path,key,val}',
                etype:"overflow_scroll"
            },"code")
}


function scroll_proc(e){
	scroll_to()
    // clog("scroll_proc",[this,...arguments])
}


glob_mx.event_handlers.e2 = {
    fn:scroll_proc,
    // fn:nop,
    // m:{etype:"timer_start"},
    m:{etype:"overflow_scroll"},
}

glob_mx.event_handlers.e3 = {
    fn:refresh_fs_proc,
    // fn:nop,
    // m:{etype:"timer_start"},
    m:{etype:"refresh_fs"},
}




if (window.refresh_fs_proc){
	refresh_fs_proc()

}