ign4/rf/filmstrip_mod/m0.js

glob_mx.filmstrip_handlers[undefined] = function function_name(argument) {
    clog("default FN HANDLER")
}
glob_mx.dims = glob_mx.dims || {} 

dflt_css = {
      'padding-top': '',
      "min-height": ``,
      "min-width": ``,
      width: ``,
      height: ``,
    
}



function fix_avatar(vid){
    var k,v,bcr
    for (v of  $(vid).filter(".remote_vid,.local_vid")){
        bcr = v.getBoundingClientRect()
        $(v).find(".avatar-container").css({
            width:Math.ceil(bcr.height * .75),
            height:Math.ceil(bcr.height * .75),
        })
    }
}



function resize_thumbs_vertical(cont){
  const computed_css = Object.assign({},dflt_css)

  var aspect = 16/9
  var width = 335
  var thumbs = $(cont).children(".small_vid")
  width = $(cont).width() - 1  
  width = glob_mx.dims.w5
  // computed_css["--v_index"]=`"VERT"`
  var height = Math.round(width/aspect)
  computed_css.height = height
  computed_css["min-height"] = height
  computed_css.width = width
  computed_css["min-width"] = width
  var k,v
  for ([k,v] of Object.entries(computed_css)){
    Number(v) ? computed_css[k] = v + "px" : 0
  }
  // clog("RTHUMBS")
  thumbs.css(computed_css)
  fix_avatar(thumbs)

}

function resize_thumbs_horizontal(cont){
  const computed_css = Object.assign({},dflt_css)

  var aspect = 16/9
  var width = 335
  // computed_css["--v_index"]=`"horizontal"`
  var thumbs = $(cont).children(".small_vid")
  width = ($(cont).height() * aspect) 
  width = ($(cont).height() * aspect) - 1
  width = Math.floor(glob_mx.dims.w5)
  var height = Math.round(width/aspect)
  computed_css.height = height
  computed_css.width = width
  clog("RTH",cont)
  computed_css["min-width"] = width
  var k,v
  for ([k,v] of Object.entries(computed_css)){
    Number(v) ? computed_css[k] = v + "px" : 0
  }
  // clog("RTHUMBS")
  fix_avatar(thumbs)
  thumbs.css(computed_css)


}

function resize_thumbs_center(cont){
  const computed_css = Object.assign({},dflt_css)

  var aspect = 16/9
  var width = 335
  // computed_css["--v_index"]=`"horizontal"`
  var thumbs = $(cont).children(".small_vid")
  width = ($(cont).width() ) - 10
  var height = Math.round(width/aspect)
  computed_css.height = height
  computed_css.width = width
  var k,v
  for ([k,v] of Object.entries(computed_css)){
    Number(v) ? computed_css[k] = v + "px" : 0
  }
  // clog("RTHUMBS")
  thumbs.css(computed_css)
  fix_avatar(thumbs)


}


dflt_css_proto = {

      'padding-top': '',
      "max-height": ``,
      "min-height": ``,
      "max-width": ``,
      "min-width": ``,
      width: ``,
      height: ``,
      top: ``,
      left: ``,
      bottom: ``,
      right: ``,
      position:``,
      tramsform:``,
      // right: ``,
      // right: ``,
    
}

function resize_thumbs_proto(thumbs,css_arg){
  var k,v
  let css
  if (Array.isArray(css_arg)){
    css = Object.assign({},dflt_css_proto,...css_arg)
  } else {
    css = Object.assign({},dflt_css_proto,css_arg)
  }

  if (typeof(css.data) == "object"){
    try{
    Object.assign($(thumbs)[0].dataset,css.data)
} catch(err) {
    clog("dataset err",err)
}
  }
  css["--vdim"] = `"${css.width} x ${css.height}"`
  $(thumbs).css(css)

}





// this handles the layout of all custom filmstrips an the large video element
// todo refactor half of this into the api
function calc_fs_dims(){
    const hd_w = 16
    const hd_h = 9

    const aspect_ratio_hd = hd_w / hd_h

    const aspect_ratio_65 = (hd_w * 6) / (hd_h * 5)
    const aspect_ratio_64 = (hd_w * 6) / (hd_h * 4)


    const state = APP.store.getState();
    var { clientHeight, clientWidth } = state['features/base/responsive-ui'];
    var avail_width  =clientWidth
    // var avail_height =clientHeight - 100
    var avail_height =clientHeight - 45



    var dim_hd = glob_dev_fns.calculateThumbnailSizeForTileView_dev({
            columns:1,
    visibleRows:1,
    clientWidth:avail_width,
    clientHeight:avail_height,
    TILE_ASPECT_RATIO:TILE_ASPECT_RATIO ,
    verticalMargin:0,
    // sideMargins=0,
    // topBottomPadding:100,
    })
    let w5,h5,w53,h53,w54,h54
    h5 = dim_hd.height/5
    w5 = dim_hd.width/5
    let m = 10
    let wm = 10
    let hm = 8
    // w5 = w5 - m
    // h5 = h5 - m


    w53 = w5 * 3
    h53 = h5 * 3
    w54 = w5 * 4
    h54 = h5 * 4
    w5 = w5 - m 
    h5 = h5 - hm

    glob_mx.dims.w5 = w5 
    glob_mx.dims.h5 = h5 
    glob_mx.dims.fw = dim_hd.width 
    glob_mx.dims.fh = dim_hd.height 
    glob_mx.dims.m = m

    h54 = h54  + (hm * 2)
    let vtop 
    let vleft 
    let s_width,h_height
    s_width = w53 
    h_height = h53  + 1 * hm
    vleft = w5 + ( m ) 
    // = h5 + ((m * 2 ) / aspect_ratio_hd) + 1
    vtop = h5 + ( m * 2 ) - 2 
    vtop = h5 + (hm * 1.5)
    clog("....",clientHeight - dim_hd.height  > 100,clientHeight - dim_hd.height,clientHeight , dim_hd.height)

    var top_margin_flag 
    if (clientHeight - dim_hd.height  > 150 ) {

     top_margin_flag = 1
    // $(".fs_container").css({width:dim_hd.width,"min-height":dim_hd.height,"max-height":dim_hd.height + 100})
    resize_thumbs_proto($(".fs_container"),{width:dim_hd.width,"height":dim_hd.height})
    // top_margin_flag = 
    // $(".fs_container").css({width:dim_hd.width,"min-height":dim_hd.height,"max-height":dim_hd.height + 100})
    } else {
     top_margin_flag = 0
    // resize_thumbs_proto($(".fs_container"),{width:dim_hd.width,"height":dim_hd.height})
    resize_thumbs_proto($(".fs_container"),{width:dim_hd.width,"min-height":dim_hd.height,"max-height":dim_hd.height + 100})

    }
    // $(".fs_container").css({width:dim_hd.width,"height":dim_hd.height})
    // fs_type: "vertical"
    resize_thumbs_proto($(".ic1"),[
        {
                 width:dim_hd.width,
        height:h5,
            "--vtext":`"top_fs"`,
            // data:{fs_type: "vertical"},
            data:{fs_type: "horizontal",},
        },])


    resize_thumbs_proto($(".ic2"),[
        {
                 width:w5,
        height:h53,
        top:vtop ,

            "--vtext":`"left_fs"`,
            data:{fs_type: "vertical"},
        },])

    resize_thumbs_proto($(".ic3"),[
        {
                 width:w5,
        height:h53,
        top:vtop,
        left:w54,
        // left:0,
        // right:0,
            "--vtext":`"right_fs"`,
            data:{fs_type: "vertical"},
        },])

    let overflow_vids = $(".ic6").children(".small_vid")
    let overflow_obj = {}
    if (overflow_vids.length > 5){
    }
    overflow_obj.width = w5 * (overflow_vids.length + 1)
    resize_thumbs_proto($(".c6"),[{
        width:dim_hd.width,
        height:h5,
        height:h5 + 20,
        top:h54 - (hm) * .5,
        left:0,}])

    resize_thumbs_proto($(".ic6"),[
        {
                 width:dim_hd.width,
        height:h5 + 10,
        // top:h54 - (hm) * .5,
        // left:0,
        // left:w54,
        // right:0,
            "--vtext":`"bottom_fs"`,
            data:{fs_type: "horizontal"},
        },overflow_obj])


    resize_thumbs_proto($(".ic4"),[
        {
        // height:h53,
        width:s_width,
        // height:h53,
        height:h_height,
        top:vtop - 1,
        left:vleft,
        // left:w54,
        // right:0,
            "--vtext":`"center"`,
            data:{fs_type: "single"},
        },])

    var center_vid = $(".ic4")[0]
    var bcr = center_vid.getBoundingClientRect()
    var bcr_fs = $(".fs_container")[0].getBoundingClientRect()
    glob_mx.dims.top_margin_flag=top_margin_flag
    glob_mx.dims.top_offset=bcr_fs.y
    glob_mx.dims.left_offset=bcr_fs.x
    if (glob_mx.dims.fullframe){
        fullframe()
    }else if (top_margin_flag){
    resize_thumbs_proto($("#largeVideoContainer"),[
        {
        // height:h53,
        width:s_width - m,
        // height:h53,
        height:h_height - hm,
        // top:vtop - 2 + (hm * .5),
        transform: "translate(0%, -50%)",
        top:`calc(50% + ${Math.floor(hm * 1)}px)`,
        top:`calc(50% + ${Math.floor(hm * .7)}px)`,
        left:vleft + (.5 * m),
        position:"relative",
        // outline:"1px solid blue",
        outline:"",
        // "z-index":"10",
        // left:w54,
        // right:0,
            "--vtext":`"center"`,
            data:{fs_type: "single"},
        },])
    } else {
resize_thumbs_proto($("#largeVideoContainer"),[
        {
        // height:h53,
        width:s_width - m,
        // height:h53,
        height:h_height - hm,
        top:vtop - 2 + (hm * .5) + bcr_fs.y,
        // top:h5 + (3 * hm),
        transform: "translate(-50%, 0)",
        // top:`calc(50% + ${Math.floor(hm * 1)}px)`,
        // top:`calc(50% + ${Math.floor(hm * .7)}px)`,
        // left:vleft + (.5 * m),
        left:"50%",
        position:"relative",
        // "z-index":"10",
        // left:w54,
        // right:0,
        // outline:"1px solid red",
        outline:"",
            "--vtext":`"center"`,
            data:{fs_type: "single"},
        },])   
    }

    // #sharedVideo
            // resize_thumbs_proto($(".ic4"),[
            resize_thumbs_proto($("#sharedVideoIFrame.z"),[
        {
        // height:h53,
        width:s_width,
        // height:h53,
        height:h_height,
        top:vtop - 1,
        left:vleft,
        position:"relative",
        // "z-index":"10",
        // left:w54,
        // right:0,
            "--vtext":`"center"`,
            data:{fs_type: "single"},
        },])
resize_thumbs_proto($("#sharedVideoIFrame"),{
        position:"",

})
clog("top",top_margin_flag)
resize_thumbs_proto($("#largeVideoContainer.z,#sharedVideoIFrame"),{position:"",})
}

function fullframe(){
    var w,h
    w = glob_mx.dims.fw
    h = glob_mx.dims.fh
    let top = "50%"
    let transform ="translate(-50%, -50%)"

    if (glob_mx.dims.top_margin_flag){
        top = glob_mx.dims.top_offset+ "px"
        transform = "translate(-50%, 0px)"
        transform = "translate(0%, 0px)"
        glob_mx.dims.top_offset
        // left_offset

    }
    resize_thumbs_proto($("#largeVideoContainer"),[
        {
        // height:h53,
        width:w,
        // height:h53,
        height: h,
        // top:vtop - 2 + (hm * .5) + bcr_fs.y,
        // top:h5 + (3 * hm),
        // transform: "translate(-50%, 0)",
        // transform: "translate(-50%, -50%)",
        // top:`calc(50% + ${Math.floor(hm * 1)}px)`,
        // top:`calc(50% + ${Math.floor(hm * .7)}px)`,
        // left:vleft + (.5 * m),
        // left:"50%",
        transform:"",
        // top:`50% ${glob_mx.dims.top_offset}`,
        top:`calc(50% + ${top}px)`,
        top:glob_mx.dims.top_offset,
        left:glob_mx.dims.left_offset,
        position:"relative",
        // "z-index":"10",
        // left:w54,
        // right:0,
        // outline:"1px solid red",
        outline:"",
            "--vtext":`"center"`,
            data:{fs_type: "single"},
        },])   
}
// fullframe()
// setTimeout(fullframe,100)




function filmstrip_rs(){
    calc_fs_dims()
    clog("filmstrip_rs")
}

glob_mx.filmstrip_handlers.vertical = filmstrip_rs
glob_mx.filmstrip_handlers.horizontal = filmstrip_rs
glob_mx.filmstrip_handlers.center = filmstrip_rs





glob_mx.filmstrip_tile_handlers.vertical = resize_thumbs_vertical
glob_mx.filmstrip_tile_handlers.horizontal = resize_thumbs_horizontal
glob_mx.filmstrip_tile_handlers.center = resize_thumbs_center


































// this handles sorting the videos  




function sort_id3(a, b) {
    if (a.id > b.id){
        return 1
    } else if (a.id < b.id){
        return -1
    }
    return 0
}




indexed_tiles = []
indexed_map = window.indexed_map || new Map()
reverse_indexed_map = window.reverse_indexed_map || new Map()

// indexed_map =  new Map()
// reverse_indexed_map =  new Map()

function array_move(arr, old_index, new_index) {
    if (new_index >= arr.length) {
        var k = new_index - arr.length + 1;
        while (k--) {
            arr.push(undefined);
        }
    }
    arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
    return arr; // for testing
};



function mod_sort(){
    var arr = []
    var parr = []
    var ivid = {}
    var k,v
    var j = $(".small_vid:not(.pseudo_vid)")
window.indexed_map =  new Map()
window.reverse_indexed_map =  new Map()

    var part = get_participants()
    var parts =jc(part).sort(sort_id3)
    // clog(parts,part)
    var mod_id = get_mod(part)
    if (mod_id){
    remap_set( $(`#participant_${mod_id.id}`)[0],2)
    }
        

   

    var n 
    var cnt = 0
    for (k of parts){
        // clog("z",k,k.local)
        if (k.isFakeParticipant){ 
    n = `<span class="plugin_top pseudo_vid small_vid youtube_vid"><div class="m2 xbox2">ABC</div></span>`
    if ($(".youtube_vid").length){

    } else {
        // html_hooks.create_video_tile(n)

    }
        // remap_set($(".youtube_vid")[0],0)
        j = $("#sharedVideoContainer")
        remap_set(j[0],2)
        // remap_set( $(`#participant_${mod_id.id}`)[0],1)
        } else {
        j = k.local ? $("#localVideoContainer") : $(`#participant_${k.id}`)
        // get_mod().id

        }
        j.css({"--v_index":`"I: ${cnt}"`})
        j.css({"--v_id":`"${k.id}"`})
        j[0].dataset.v_index = cnt
        arr.push(j[0])
        cnt += 1
    }
    v = $(".pseudo_vid")
    for (k of v){
        // clog(k)
        $(k).css({"--v_index":`"I: ${cnt}"`})
        $(k).css({"--v_id":`"pseudo_${cnt}"`})
        parr.push(k)
        $(k)[0].dataset.v_index = cnt
        cnt += 1
    }



    arr.push(...parr)
    window.arig_tiles = jc(arr)
    // remap_set($(".local_vid")[0],1)
    remap_set($(".local_vid")[0],3)
    // remap_set( $(`#participant_${mod_id.id}`)[0],2)

    arr = remap_sort(arr)
    arr = remap_sort(arr)
    arr = remap_sort(arr)
    window.sorted_tiles = arr





    // for 
}
sorted_tiles = window.sorted_tiles || []
function remap_sort(arr){
    // return
    var k,v
    for ([k,v] of indexed_map){
        // clog(k,v)
        var old_index = arr.indexOf(k)
        // clog("K,v",k,v,old_index)
        array_move(arr,old_index,v)

        // clog(cnt,sorted_tiles.includes(k),v,k)
        // cnt += 1

    }
    return arr

}

function remap_set(vid,loc){
    if (typeof(vid)=="number"){
        vid = sorted_tiles[vid]
    }
    var old = reverse_indexed_map.get(loc)
    // reverse_indexed_map
    indexed_map.delete(old,loc)
    indexed_map.set(vid,loc)
    reverse_indexed_map.set(loc,vid)
    var k,v
    var cnt = 0 
    for ([k,v] of indexed_map){
        // clog(k,v)
        // clog(cnt,sorted_tiles.includes(k),v,k)
        cnt += 1

    }

}






// move videos onto the filmstrips
function new_move(){
    var j 
    try {
        j = jc(window.sorted_tiles)
    } catch (err) {
        clog("NEW MOVE err:",err)
    }
    $(".ic1").append(j.splice(0,5))
    // $(".ic2").append(j.splice(0,3))
    // $(".ic3").append(j.splice(0,3))

    $(".ic2").append(j.splice(0,1))
    $(".ic3").append(j.splice(0,1))


    $(".ic2").append(j.splice(0,1))
    $(".ic3").append(j.splice(0,1))

    $(".ic2").append(j.splice(0,1))
    $(".ic3").append(j.splice(0,1))



    const all_extra = j.splice(0)
    if (all_extra.length > 5){
        $(".ic6").addClass("overflow")
    } else {

        $(".ic6").removeClass("overflow")
    }
    $(".ic6").append(all_extra)
}
















// the rest of this slides the bottom row if there is overflow.

timeout_scroll_glob = window.timeout_scroll_glob || {
    stop:1,
    timeout:3000,
    rid:0,
    mx_raf:200,
    to_left:1,
}
timeout_scroll_glob.stop=1
function timeout_scroll(rid){
    // clog("Tscroll",rid,timeout_scroll_glob)
    if (timeout_scroll_glob.stop || rid != timeout_scroll_glob.rid){
        // clog("tscroll stop")
        return
    }
        // clog("tscroll continue")
        scroll_send()
    var t = setTimeout(timeout_scroll,timeout_scroll_glob.timeout,rid)

}

function timeout_scroll_start(){
    timeout_scroll_glob.rid += 1
    setTimeout(timeout_scroll,timeout_scroll_glob.timeout,timeout_scroll_glob.rid)

}

function get_bcrs(arr,fs_bcr){
    var ret = {
        arr:[],
        first_left:0,
        first_left_bcr:0,
        first_right:0,
        first_right_bcr:0,
    }
    var s = $(".ic6").children(".small_vid")
    s.removeClass("ir il ilr ir0 il0")
    var k,v,bcr,isleft,isright
    for (v of arr){
        bcr = v.getBoundingClientRect()
        ret.arr.push(bcr)
        isleft = bcr.right < (fs_bcr.right + 10)
        isright = bcr.left > (fs_bcr.left )
        if (isleft && isright){
            $(v).addClass("ilr")
        } else if (isleft){
            $(v).addClass("il")

        } else if (isright){
            $(v).addClass("ir")

        }
        
        if (isleft && ! isright){
            ret.first_left = v
            ret.first_left_bcr = bcr
        }  
        if ( (! ret.first_right ) && !isleft  && isright ){
            ret.first_right = v
            ret.first_right_bcr = bcr

        }
        

    }
    clog("````",ret)
    $(ret.first_right).addClass("ir0")
    $(ret.first_left).addClass("il0")
    return ret

}

function scroll_to(n){
    var fs,fs_bcr,vid_bcr,ifs
    fs =  $(".c6")[0]
    ifs =  $(".ic6")[0]
    var vid

    var s = $(".ic6").children(".small_vid")
    fs_bcr = fs.getBoundingClientRect() 
    var ov = get_bcrs([...s],fs_bcr)
    var tobj = {

    }
    var scroll_to_vid = 0
    if (timeout_scroll_glob.to_left){
        if (ov.first_left){
            scroll_to_vid = ov.first_left
            vid_bcr = ov.first_left_bcr
            tobj.inc_mx = vid_bcr.left - fs_bcr.left
            tobj.inc = -8
        } else {
            timeout_scroll_glob.to_left = 0
        }
    } else {
        if (ov.first_right){
            scroll_to_vid = ov.first_right
            vid_bcr = ov.first_right_bcr
            tobj.inc_mx = vid_bcr.right - fs_bcr.right
            tobj.inc = 8
        } else {
            timeout_scroll_glob.to_left = 1
        }
    }
    scroll_to_vid ?  requestAnimationFrame(raf.bind(timeout_scroll_glob,fs,scroll_to_vid,tobj.inc,tobj.inc_mx,0,0),"z-index") : 0

}
function raf_clog(fs,vid,cnt,ts){
    clog("raf.",cnt,ts)


}

function raf(fs,vid,inc,inc_mx,cnt,ts0,ts){
    fs.scrollBy(inc,0)
    if (Math.abs(inc) < Math.abs(inc_mx) && cnt < timeout_scroll_glob.mx_raf && ts - (ts0 || ts)  < 3000){
    requestAnimationFrame(raf.bind(timeout_scroll_glob,fs,vid,inc,inc_mx - inc ,cnt+1,ts0 || ts))

    } else {
        // clog("FIN",[fs,vid],cnt,ts0,inc_mx,ts,ts-ts0)
        vid.scrollIntoView({ behavior: 'smooth', block: 'nearest' ,inline:"nearest"})
    }

}




if (window.refresh_fs_proc){
    refresh_fs_proc()

}

// $(".video-stream.html5-main-video").play()
// $(".video-stream.html5-main-video").play()
// if ()