ign4/react_fn.js

TILE_ASPECT_RATIO = 16 / 9;
function reth(o){

	return {ret:o}
}
{



var calcTileGrid=glob_react.fns.calcTileGrid
var getMaxColumnCount=glob_react.fns.getMaxColumnCount
let getMaxColumnCount2=glob_react.fns.getMaxColumnCount

let sideMargins=(135 * 2 )+ 20
// let sideMargins=(135 )+ 20
let topBottomPadding=135 + 100

// glob_dev_fns.getTileViewGridDimensions_set_num

// function getTileViewGridDimensions(state: Object, maxColumns: number = getMaxColumnCount()) {
// glob_dev_fns.getTileViewGridDimensions = function(state: Object, maxColumns: number = getMaxColumnCount()) {
glob_dev_fns.getTileViewGridDimensions = function(state, maxColumns = getMaxColumnCount(),maxColumns2 = getMaxColumnCount2()) {
    // When in tile view mode, we must discount ourselves (the local participant) because our
    // tile is not visible.
    const { iAmRecorder } = state['features/base/config'];
    // dev util hook
    // const numberOfParticipants = state['features/base/participants'].length - (iAmRecorder ? 1 : 0);
     //   /*
    var numberOfParticipants = state['features/base/participants'].length - (iAmRecorder ? 1 : 0);
    // clog("r0 num",numberOfParticipants)

    if (window.glob_dev_fns && window.glob_dev_fns.getTileViewGridDimensions_set_num){
        const numberOfParticipants_dev = window.glob_dev_fns.getTileViewGridDimensions_set_num(state,maxColumns,numberOfParticipants)
        if (typeof(numberOfParticipants_dev)=="number"){numberOfParticipants = numberOfParticipants_dev}
    }
    //        */
    
    const { clientHeight, clientWidth } = state['features/base/responsive-ui'];

    // calculate available width and height for tile view.
    // copied from calculateThumbnailSizeForTileView (one variable was dropped)
    // const topBottomPadding = 200;
    // const sideMargins = 30 * 2;

    const viewWidth = clientWidth - sideMargins;
    const viewHeight = clientHeight - topBottomPadding;

    const viewAspectRatio = viewWidth / viewHeight;
    const ratioOfRatios = TILE_ASPECT_RATIO / viewAspectRatio;

    const tileGrid = calcTileGrid(ratioOfRatios, numberOfParticipants);
    let { columns } = tileGrid;
    const { rows, availableTiles } = tileGrid;

    // maybe remove a column, for aesthetics.
        // clog("r0 dec? columns",columns,rows <= availableTiles - numberOfParticipants,columns > 1,rows <= availableTiles - numberOfParticipants && columns > 1)
    // if (rows <= availableTiles - numberOfParticipants && columns > 1) {
    if (rows <= availableTiles - numberOfParticipants) {
        // clog("r0 dec columns",columns)
        columns -= 1;
        // clog("r0 dec columns2",columns)
    }

    const columnsOverflowed = columns > maxColumns;
    // clog("r0 NaN",columnsOverflowed,Math.ceil(numberOfParticipants / columns),Math.min(columns, maxColumns) )
    // clog("r0 NaN2",Math.min(Math.ceil(numberOfParticipants / columns),maxColumns))

    columns = Math.min(columns, maxColumns) || 1;
    let visibleRows = Math.ceil(numberOfParticipants / columns) || 1;

    if (columnsOverflowed) {
        visibleRows = Math.min(visibleRows, maxColumns);
    }
    // clog("r0 gtvd",{columns,visibleRows,numberOfParticipants},tileGrid)
    /*
    return {
        columns,
        visibleRows
    };
    */
    const ret = reth({
        columns,
        visibleRows
    })
    clog("!!!",{numberOfParticipants,clientHeight, clientWidth,tileGrid,iAmRecorder,maxColumns,maxColumns2},arguments,ret)
    return reth({
        columns,
        visibleRows
    });
}

/*
export function calculateThumbnailSizeForTileView({
    columns,
    visibleRows,
    clientWidth,
    clientHeight
}: Object)
*/
glob_dev_fns.calculateThumbnailSizeForTileView = function ({
    columns,
    visibleRows,
    clientWidth,
    clientHeight
}) {
	// clog("calculateThumbnailSizeForTileView new")
    // The distance from the top and bottom of the screen, as set by CSS, to
    // avoid overlapping UI elements.
    // const topBottomPadding = 200;

    // Minimum space to keep between the sides of the tiles and the sides
    // of the window.
    // const sideMargins = 30 * 2;

    const verticalMargins = visibleRows * 10;
    const viewWidth = clientWidth - sideMargins;
    const viewHeight = clientHeight - topBottomPadding - verticalMargins;
    const initialWidth = viewWidth / columns;
    const aspectRatioHeight = initialWidth / TILE_ASPECT_RATIO;
    const height = Math.floor(Math.min(aspectRatioHeight, viewHeight / visibleRows));
    const width = Math.floor(TILE_ASPECT_RATIO * height);

    return reth({
        height,
        width
    });
}

glob_dev_fns.calculateThumbnailSizeForTileView_dev = function ({
    columns,
    visibleRows,
    clientWidth,
    clientHeight,
    sideMargins=0,
    topBottomPadding=0,
    verticalMargin = 10,
    TILE_ASPECT_RATIO=glob_react.fns.TILE_ASPECT_RATIO
}) {
    // clog("calculateThumbnailSizeForTileView new")
    // The distance from the top and bottom of the screen, as set by CSS, to
    // avoid overlapping UI elements.
    // const topBottomPadding = 200;

    // Minimum space to keep between the sides of the tiles and the sides
    // of the window.
    // const sideMargins = 30 * 2;

    const verticalMargins = visibleRows * verticalMargin;
    const viewWidth = clientWidth - sideMargins;
    const viewHeight = clientHeight - topBottomPadding - verticalMargins;
    const initialWidth = viewWidth / columns;
    const aspectRatioHeight = initialWidth / TILE_ASPECT_RATIO;
    const height = Math.floor(Math.min(aspectRatioHeight, viewHeight / visibleRows));
    const width = Math.floor(TILE_ASPECT_RATIO * height);

    return ({
        height,
        width,
        consts:{verticalMargins,
viewWidth,
viewHeight,
initialWidth,
aspectRatioHeight,},
    });
}
}