123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716 |
- glob_dev_fns.getTileViewGridDimensions = function(numberOfParticipants,state,maxColumns){
- // return
- if (glob_dev_fns.ret0){return}
- clog("getTileViewGridDimensions....")
- const rui = state['features/base/responsive-ui'];
-
-
- const clientHeight = rui.clientHeight
- const clientWidth = rui.clientWidth
-
-
- // var clo = calc_layout_heper(clientWidth,clientHeight,numberOfParticipants)
-
- // const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
- // {
- // var aspect = 16/9
- var aspect = TILE_ASPECT_RATIO
- const topBottomPadding = 200;
- const sideMargins = 30 * 2;
-
-
- // var thumbs_count = Thumbs.remoteThumbs.length + Thumbs.localThumb.length
-
- var viewWidth = clientWidth - sideMargins
- var viewHeight = clientHeight - topBottomPadding
- clog("",view_width,viewHeight)
- // const r1 = avail_width/avail_height
- const viewAspectRatio = viewWidth/viewHeight
-
- // var clo = calc_layout2(1/((avail_width/avail_height)/aspect),numberOfParticipants)
- var clo = calc_layout2(TILE_ASPECT_RATIO/viewAspectRatio,numberOfParticipants)
- // }
-
- var r = clo.r
- var c = clo.c
-
- // c = clo.r
- // r = clo.c
- // you only need to check
- // if (Math.min(c,r) >= )
- if (r <= clo.n - numberOfParticipants){
- // c -= 1
- clog("cl_trc dec")
- }
- clog("GTVGD",clo,{r,c})
- // return 3
- return c
-
-
-
- }
-
-
-
-
-
-
-
-
-
-
-
- glob_dev_fns.getTileViewGridDimensions = function(state,maxColumns){
- // return
-
-
- // const { iAmRecorder } = state['features/base/config'];
- const iAmRecorder = state['features/base/config'].iAmRecorder;
- const numberOfParticipants = state['features/base/participants'].length - (iAmRecorder ? 1 : 0);
-
-
-
- if (glob_dev_fns.ret0){return}
- clog("getTileViewGridDimensions....")
- const rui = state['features/base/responsive-ui'];
-
-
- const clientHeight = rui.clientHeight
- const clientWidth = rui.clientWidth
-
-
- // var clo = calc_layout_heper(clientWidth,clientHeight,numberOfParticipants)
-
- // const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
- // {
- var aspect = 16/9
- var TILE_ASPECT_RATIO = aspect
- // var aspect = TILE_ASPECT_RATIO
- const topBottomPadding = 200;
- const sideMargins = 30 * 2;
-
- var viewWidth = clientWidth - sideMargins
- var viewHeight = clientHeight - topBottomPadding
- clog("",viewWidth,viewHeight)
- // const r1 = avail_width/avail_height
- const viewAspectRatio = viewWidth/viewHeight
-
- // var clo = calc_layout2(1/((avail_width/avail_height)/aspect),numberOfParticipants)
- var clo = calc_layout2(TILE_ASPECT_RATIO/viewAspectRatio,numberOfParticipants)
- // }
-
- var r = clo.r
- var c = clo.c
-
- // c = clo.r
- // r = clo.c
- // you only need to check
- // if (Math.min(c,r) >= )
- clog("GTVGD0",clo,{r,c})
- if (r <= clo.n - numberOfParticipants){
- // Math.floor()
- var xtra_space = clo.n - numberOfParticipants
- Math.floor(xtra_space/r)
- clog("cl_trc_ dec",{r,c,f:Math.floor(xtra_space/r),rl:xtra_space/r,"x":clo.n - numberOfParticipants,numberOfParticipants,clo})
- // c -= 1
- // c -= Math.floor(xtra_space/r)
- }
- if (r <= (r * c) - numberOfParticipants){
- c -= 1
- clog("cl_trc dec2")
- }
-
-
- clog("GTVGD",clo,{r,c})
- // return 3
- const columnsToMaintainASquare = c
- // const columns = Math.min(columnsToMaintainASquare, maxColumns);
- const columns = Math.min(columnsToMaintainASquare, 100);
- const rows = Math.ceil(numberOfParticipants / columns);
- // const visibleRows = Math.min(maxColumns, rows);
- const visibleRows = rows;
- clog("GTVGD2",{visibleRows,columns})
-
- return {
- columns,
- visibleRows
- };
-
-
- // return c
-
-
-
- }
-
-
-
-
-
-
-
- function calcTileGrid(a,ni){
-
- var dflt = {
- r:1,
- c:1,
- n:1,
- ni:1,
- }
- if (!ni){
- clog("calcTileGrid TILES MAY NOT BE 0")
- // return dflt
- }
-
- var mcnt=100
- var cnt=0
- if (ni < 1){
- clog("calcTileGrid TILES MAY 0",ni)
-
- }
- var r = 1
- var c = 1
- var n = 1
- clog("mx cl_trc",ni,a)
- while (1){
- cnt += 1
- if (mcnt < cnt ){
- clog("calcTileGrid ILOOP",cnt)
- return dflt
- }
- if (r * c < n){
- if ( (c + 1) * a < r + 1 ) {
- c++
- } else {
- r++
- }
- }
- clog("cl_trc",{r,c,n,nn:r*c})
- n=r*c
- if (n >= ni){
- break
- }
- n=n+1
- }
- clog("CL",ni,r,c,n)
- return {
- r:r,
- c:c,
- n:n,
- ni:ni,
- }
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- function calcTileGrid(ratio,tiles){
-
- var dflt = {
- r:1,
- c:1,
- n:1,
- ni:1,
- }
- if (!tiles){
- clog("calcTileGrid TILES MAY NOT BE 0")
- // return dflt
- }
-
- var mcnt=1000000000
- var mcntt=100000000
- var mcnttx=mcntt
- var cnt=0
- if (tiles < 1){
- clog("calcTileGrid TILES MAY 0",tiles)
-
- }
- // avail_tiles
- var rows = 1
- var columns = 1
- var avail_tiles = 0
- // this can become an infinite loop for large numbers due to loss of precision
- if (tiles > 2147483648) {tiles = 1}
- clog("mx cl_trc",tiles,ratio)
- while (avail_tiles < tiles){
- avail_tiles=avail_tiles+1
- cnt += 1
- if (mcnt < cnt ){
- clog("calcTileGrid ILOOP",{rows,columns,avail_tiles,tiles},cnt)
- return dflt
- }
- if (mcnttx < cnt ){
- clog(".calcTileGrid ILOOP.",avail_tiles,avail_tiles+1,{rows,columns,avail_tiles,tiles},jc({rows,columns,avail_tiles,tiles}),cnt)
- mcnttx += mcntt
- // return dflt
- }
-
- if (rows * columns < avail_tiles){
- if ( (columns + 1) * ratio < rows + 1 ) {
- columns++
- } else {
- rows++
- }
- }
- // clog("cl_trc",{r,c,n,nn:r*c})
- avail_tiles=rows*columns
- // if (n >= tiles){
- if (!(avail_tiles < tiles)){
- // break
- }
-
- }
- // clog("CL",tiles,r,c,n,cnt)
- return {
- r:rows,
- c:columns,
- n:avail_tiles,
- ni:tiles,
- }
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- glob_dev_fns.getTileViewGridDimensions_cc = function(numberOfParticipants,state,maxColumns){
- // return
- if (glob_dev_fns.ret0){return}
- clog("getTileViewGridDimensions....")
- const rui = state['features/base/responsive-ui'];
-
-
- const clientHeight = rui.clientHeight
- const clientWidth = rui.clientWidth
-
-
-
- // const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
- var clo = calc_layout_heper(clientWidth,clientHeight,numberOfParticipants)
-
- var r = clo.r
- var c = clo.c
-
- // c = clo.r
- // r = clo.c
- // you only need to check
- // if (Math.min(c,r) >= )
- if (r <= clo.n - numberOfParticipants){
- // c -= 1
- clog("cl_trc dec")
- }
- clog("GTVGD",clo,{r,c})
- // return 3
- return c
-
-
-
- }
-
- glob_dev_fns.getTileViewGridDimensions_sq = function(numberOfParticipants,state,maxColumns){
- // return
- if (glob_dev_fns.ret0){return}
- clog("getTileViewGridDimensions....")
- const rui = state['features/base/responsive-ui'];
-
-
- const clientHeight = rui.clientHeight
- const clientWidth = rui.clientWidth
-
-
- // var clo = calc_layout_heper(clientWidth,clientHeight,numberOfParticipants)
-
- // const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
- // {
- var aspect = 16/9
- var TILE_ASPECT_RATIO = aspect
- // var aspect = TILE_ASPECT_RATIO
- const topBottomPadding = 200;
- const sideMargins = 30 * 2;
-
- var viewWidth = clientWidth - sideMargins
- var viewHeight = clientHeight - topBottomPadding
- clog("",viewWidth,viewHeight)
- // const r1 = avail_width/avail_height
- const viewAspectRatio = viewWidth/viewHeight
-
- // var clo = calc_layout2(1/((avail_width/avail_height)/aspect),numberOfParticipants)
- var clo = calc_layout2(TILE_ASPECT_RATIO/viewAspectRatio,numberOfParticipants)
- // }
-
- var r = clo.r
- var c = clo.c
-
- // c = clo.r
- // r = clo.c
- // you only need to check
- // if (Math.min(c,r) >= )
- if (r <= clo.n - numberOfParticipants){
- // c -= 1
- clog("cl_trc dec")
- }
- clog("GTVGD",clo,{r,c})
- // return 3
- return c
-
-
-
- }
-
-
-
-
-
- // function calc_layout_heper(avail_width,avail_height,thumbs_count){
- function calc_layout_heper(clientWidth,clientHeight,numberOfParticipants){
-
- var aspect = 16/9
-
- // Thumbs = glob_react.Filmstrip._getThumbs()
-
-
- const topBottomPadding = 200;
- const sideMargins = 30 * 2;
-
-
- // var thumbs_count = Thumbs.remoteThumbs.length + Thumbs.localThumb.length
-
- var avail_width = clientWidth - sideMargins
- var avail_height = clientHeight - topBottomPadding
- clog("",avail_width,avail_height)
- const r1 = avail_width/avail_height
-
- const r0 = aspect
-
-
-
- clo = calc_layout2(1/((avail_width/avail_height)/aspect),numberOfParticipants)
- return clo
- }
-
-
-
-
-
-
- glob_dev_fns.setTileViewDimensions_x = function(o,dimensions,windowSize,that){
- // console.trace("STV")
- // SET_TILE_VIEW_DIMENSIONS
- windowSize = o.args[1]
- dimensions = o.args[0]
- clog("glob_dev_fns.setTileViewDimensions",arguments)
-
-
-
- var aspect = 16/9
-
- Thumbs = glob_react.Filmstrip._getThumbs()
-
-
- const topBottomPadding = 200;
- const sideMargins = 30 * 2;
-
-
- var thumbs_count = Thumbs.remoteThumbs.length + Thumbs.localThumb.length
-
- var avail_width = windowSize.clientWidth - sideMargins
- var avail_height = windowSize.clientHeight - topBottomPadding
- clog("",avail_width,avail_height)
- const r1 = avail_width/avail_height
-
- const r0 = aspect
-
- var clo = calc_layout2((avail_width/avail_height)/aspect,thumbs_count)
-
-
-
-
-
-
-
-
-
-
- // calc_layout2
- clog(windowSize,dimensions)
-
-
-
-
-
- var bw = avail_width
- var w2,width
- // clog(xgrp,xgrp.length,clo)
- if ((r1/r0) * (clo.c / clo.r) > 1) {
- w2 = bw / ((r1/r0) * clo.c)
- } else {
- w2 = bw / ( clo.r)
- }
-
- // width = 310
- // w2 =w2 - 12
- w2 =w2 - (10 * aspect)
- // w2 =w2 - 15
- // w2 =w2 - 16
- // width = Math.round(w2)
- width = Math.floor(w2)
-
-
-
- var height = Math.floor(width / (aspect))
- clog(clo)
- var avail_width2 = avail_width
- // if (clo.ni < clo.n){
- // r and c are misnamed!
-
- var col,max_width
- if (clo.c == 2){
- col = Math.ceil(clo.ni / 2)
- max_width = (col + .5) * width
- clog("MX...",col ,avail_width2,max_width)
- if (max_width < avail_width2){
- clog("MX",avail_width2,max_width)
- avail_width2 = max_width
- }
-
- }
-
- if (clo.ni <= clo.n + clo.c){
-
- // avail_width2 = Math.round(width * clo.)
- // avail_width2 = Math.round(avail_width2 - width/2)
-
- }
-
-
-
- // return
- const SET_TILE_VIEW_DIMENSIONS = "SET_TILE_VIEW_DIMENSIONS"
-
- return {ret:{
- type: SET_TILE_VIEW_DIMENSIONS,
- dimensions: {
- gridDimensions: {columns:clo.c,visibleRows:clo.r,},
- xtra:"xtra_val2",
- thumbnailSize:{height,width},
- filmstripWidth:avail_width2
- }
- }};
-
-
-
-
-
- /*
- return {
- dimensions:{
- columns:cl.c,
- visibleRows:cl.r,
- }
- }
-
- */
-
-
- return {ret:{
- type: SET_TILE_VIEW_DIMENSIONS,
- dimensions: {
- gridDimensions: dimensions,
- xtra:"xtra_val",
- thumbnailSize,
- filmstripWidth
- }
- }};
-
-
-
-
- }
-
- // ["Filmstrip", "fs", "rf_filmstrip"]
-
-
- // Calculates the most efficient grid for tiling rectangles of the same size and aspect ratio in a rectangular container
- // This function does NOT take into account margins between tiles. so in practice our result will not be
-
-
-
- // Calculates an efficient grid for tiling rectangles of the same size and aspect ratio in a rectangular container
- // takes as arguments
-
-
-
-
-
-
-
-
- function calcTileGrid0(ratio,tiles){
-
- var dflt = {
- r:1,
- c:1,
- n:1,
- ni:1,
- }
- if (!tiles){
- clog("calcTileGrid TILES MAY NOT BE 0")
- // return dflt
- }
-
- var mcnt=100
- var cnt=0
- if (tiles < 1){
- clog("calcTileGrid TILES MAY 0",tiles)
-
- }
- var r = 1
- var c = 1
- var n = 1
- clog("mx cl_trc",tiles,ratio)
- while (1){
- cnt += 1
- if (mcnt < cnt ){
- clog("calcTileGrid ILOOP",cnt)
- return dflt
- }
- if (r * c < n){
- if ( (c + 1) * ratio < r + 1 ) {
- c++
- } else {
- r++
- }
- }
- clog("cl_trc",{r,c,n,nn:r*c})
- n=r*c
- // if (n >= tiles){
- if (!(n < tiles)){
- break
- }
- n=n+1
- }
- clog("CL",tiles,r,c,n,cnt)
- return {
- r:r,
- c:c,
- n:n,
- ni:tiles,
- }
- }
|