ign4/resize_proto.js

function ctstv() {

    const state = APP.store.getState();
    const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
    clog(clientHeight, clientWidth)
    // clog(
    var wh = glob_dev_fns.calculateThumbnailSizeForTileView_dev({
            columns:1,
    visibleRows:1,
    clientWidth,
    clientHeight,
    TILE_ASPECT_RATIO:TILE_ASPECT_RATIO ,
    // sideMargins=0,
    topBottomPadding:100,
    })
        // )
    var width =wh.width
    var height =wh.height
    var w4 = width/4
    var h4 = height/4
    var w34 = w4 * 3
    var h34 = h4 * 3
    clog({
        TILE_ASPECT_RATIO,
        tm:TILE_ASPECT_RATIO * (5/6),
        tm2:(w4 * 6)/(h4 * 5),
        // tm22:(w4 * 6)/(h4 * 5),
        tm3:TILE_ASPECT_RATIO * (6/5),
    })
    

    // $(".ic4").css({
    $(".a1").css({
        height:h34,
        width:w34,
        top:h4,
        left:w4,
        // height:wh.height,
        // width:wh.width,
    })
        $(".ic5").css({
        height:height,
        width:width,
        // top:h4,
        // left:w4,
        // height:wh.height,
        // width:wh.width,
    })

}


dflt_css_proto = {

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

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

  } else {
    css = Object.assign({},dflt_css_proto,css_arg)
  }
  var k,v
  for ([k,v] of Object.entries(css)){
    // Number(v) ? computed_css[k] = v + "px" : 0
  }
  if (typeof(css.data) == "object"){
    try{
    
    Object.assign($(thumbs)[0].dataset,css.data)
    // clog("dataset ....")


} catch(err) {
    clog("dataset err",err)
}
  }
  css["--vdim"] = `"${css.width} x ${css.height}"`
  // clog("RTHUMBS")
  $(thumbs).css(css)

}

function get_avail_width(){
    const TILE_ASPECT_RATIO = 16/9
    const state = APP.store.getState();
    var { clientHeight, clientWidth } = state['features/base/responsive-ui'];
    var avail_width  =clientWidth

    var avail_height =clientHeight - 100
    resize_thumbs_proto($(".a1"),{
        width:clientWidth,
        height:clientHeight,
        "--vtext":`"window"`
    })
    resize_thumbs_proto($(".a2"),{
        width:avail_width,
        height:avail_height,
        "--vtext":`"avail"`
    })

    var wh = 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,
    })
    clog(wh)

    resize_thumbs_proto($(".a3"),{
        width:wh.width,
        height:wh.height,

        "--vtext":`"tile"`
    })

    var width =wh.width
    var height =wh.height
    var w4 = width/4
    var h4 = height/4
    var w34 = w4 * 3
    var h34 = h4 * 3


    resize_thumbs_proto($(".a4z"),{
        width:w4,
        height:h4,

        "--vtext":`"t4"`
    })

    resize_thumbs_proto($(".a5"),{
        width:Math.round(w4),
        height:Math.round(h4),

        "--vtext":`"t4"`
    })
    resize_thumbs_proto($(".a6"),{
        width:Math.round(w34),
        height:Math.round(h34),
        top:h4,
        left:w4,
        // top:h4,

        "--vtext":`"t34"`
    })
    var w =16
    var h =9
    const TILE_ASPECT_RATIO2 = (w * 6) / (h * 5)
    const TILE_ASPECT_RATIO3 = (w * 6) / (h * 4)
    resize_thumbs_proto($(".a7"),{
        width:Math.round(w4),
        height:Math.round(h4),
        // top:h4,
        left:w34 + w4,
        // top:h4,

        "--vtext":`"t4"`
    })

    var w =16
    var h =9











    var wh2 = glob_dev_fns.calculateThumbnailSizeForTileView_dev({
            columns:1,
    visibleRows:1,
    clientWidth:avail_width,
    clientHeight:avail_height,
    TILE_ASPECT_RATIO:TILE_ASPECT_RATIO3 ,
    verticalMargin:0,
    // sideMargins=0,
    // topBottomPadding:100,
    })


    resize_thumbs_proto($(".b1"),{
        width:wh2.width,
        height:wh2.height,

        "--vtext":`"tile_container"`
    })


    width =wh2.width
    height =wh2.height
    w6 = width/6
    h6 = w6 / TILE_ASPECT_RATIO
    // h4 = height/4
    w36 = w6 * 3
    h36 = h6 * 3
    w46 = w6 * 4
    h46 = h6 * 4
    resize_thumbs_proto($(".b2"),{
        width:w6,
        height:h6,

        "--vtext":`"t6"`
    })

    resize_thumbs_proto($(".b2"),{
        width:w6,
        height:h6,

        "--vtext":`"t6"`
    })



    resize_thumbs_proto($(".b3"),{
        width:Math.round(w36),
        height:Math.round(h36),
         width:Math.round(w46),
        height:Math.round(h46),
        left:w6,
        top:h6,

        "--vtext":`"t4"`
    })
    resize_thumbs_proto($(".at"))

    w = 1000
    h = w / TILE_ASPECT_RATIO
     resize_thumbs_proto($(".b1"),{
        width:Math.round(w),
        height:Math.round(h),
        "--vtext":`"TILE_ASPECT_RATIO"`
    })   
    h = w / TILE_ASPECT_RATIO2
     resize_thumbs_proto($(".b2"),{
        width:Math.round(w),
        height:Math.round(h),
        "--vtext":`"TILE_ASPECT_RATIO2"`
    })   
    h = w / TILE_ASPECT_RATIO3
     resize_thumbs_proto($(".b3"),{
        width:Math.round(w),
        height:Math.round(h),
        "--vtext":`"TILE_ASPECT_RATIO3"`
    })   
     w6 = w/6
     h6 = w6 / (16/9)
    h = w / TILE_ASPECT_RATIO3
     resize_thumbs_proto($(".a1"),{
        width:Math.round(w6),
        height:Math.round(h6),
        "--vtext":`"TILE_ASPECT_RATIO3"`
    })  
     resize_thumbs_proto($(".a2"),{
        width:Math.round(w6),
        height:Math.round(h6),
        top:375,
        "--vtext":`"TILE_ASPECT_RATIO3"`
    })  
     w_ = w6  


     resize_thumbs_proto($(".a3"),{
        width:Math.round(w6 * 3),
        height:Math.round(h6 * 3),
        top:h6,
        left:w6,
        "--vtext":`"TILE_ASPECT_RATIO3"`
    })  



     resize_thumbs_proto($(".a4"),{
        width:Math.round(w6),
        height:Math.round(h6),
        top:h6 * 2,
        "--vtext":`"TILE_ASPECT_RATIO3"`
    })  

     resize_thumbs_proto($(".a5"),{
        width:Math.round(w6),
        height:Math.round(h6),
        // top:h6 * 2,
        left:w6 * 2,
        "--vtext":`"TILE_ASPECT_RATIO3"`
    })  

    return {h:clientHeight - 100,clientHeight,clientWidth}

}





function init_api6(){
    saftly_remove(".plugin_top")
    // return
    // $(".plugin_top").remove()
    var n 
    n = `<span class="plugin_top pseudo_vid small_vid "><div class="m2 xbox2">ABC</div></span>`
    html_hooks.create_video_tile(n.repeat(20))
    n = `<span class="plugin_top pseudo_vid small_vid "><div class="m3 xbox2">ABC</div></span>`
    var arr = []
    // arr[]
    /*
    html_hooks.create_video_tile(n)
    html_hooks.create_video_tile(n)
    html_hooks.create_video_tile(n)
    html_hooks.create_video_tile(n)
    html_hooks.create_video_tile(n)
    html_hooks.create_video_tile(n)
    if (amimod()){
        html_hooks.create_video_tile(n)
    html_hooks.create_video_tile(n)
    html_hooks.create_video_tile(n)
    html_hooks.create_video_tile(n)
    html_hooks.create_video_tile(n)
    html_hooks.create_video_tile(n)    
    }
    */

    // n = `<span class="plugin_top"><div class="m xbox">ABC</div></span>`
    n = `<span class="plugin_top"><div class="m xbox">ABC</div></span>`
    // html_hooks.create_vid_toptoolbar_hook(n)
    html_hooks.create_vid_toptoolbar_hook_after(n)
    
    n = `<span class="plugin_top"><div class="m xbox">ABC</div></span>`
    html_hooks.create_top_toolbox_hook(n)

    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>`
    n= mod_templates.find("#vspace_filmstrip_template")[0].outerHTML
    // n= mod_templates.find("#vspace_filmstrip_proto_template")[0].outerHTML
    // vspace

    add_node(n,`.vspace`,"append")
    if (window.mod_sort){
    mod_sort()

    }

    try {
        dispatch_resize()
    } catch {

    }

}




if (window.saftly_remove){
    init_api6()
    // get_avail_width()
    // clog("REZIE PROTO READY")
}

    // clog("REZIE PROTO LOAD")




// ctstv()