ign4

New_folder/ntd.txt

@@ -0,0 +1 @@
+aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

baks/fbp_reducer.js

@@ -0,0 +1,249 @@
+// @flow
+
+import { ReducerRegistry, set } from '../redux';
+
+import {
+    DOMINANT_SPEAKER_CHANGED,
+    PARTICIPANT_ID_CHANGED,
+    PARTICIPANT_JOINED,
+    PARTICIPANT_LEFT,
+    PARTICIPANT_UPDATED,
+    PIN_PARTICIPANT,
+    SET_LOADABLE_AVATAR_URL
+} from './actionTypes';
+import { LOCAL_PARTICIPANT_DEFAULT_ID, PARTICIPANT_ROLE } from './constants';
+
+/**
+ * Participant object.
+ * @typedef {Object} Participant
+ * @property {string} id - Participant ID.
+ * @property {string} name - Participant name.
+ * @property {string} avatar - Path to participant avatar if any.
+ * @property {string} role - Participant role.
+ * @property {boolean} local - If true, participant is local.
+ * @property {boolean} pinned - If true, participant is currently a
+ * "PINNED_ENDPOINT".
+ * @property {boolean} dominantSpeaker - If this participant is the dominant
+ * speaker in the (associated) conference, {@code true}; otherwise,
+ * {@code false}.
+ * @property {string} email - Participant email.
+ */
+
+declare var APP: Object;
+
+/**
+ * The participant properties which cannot be updated through
+ * {@link PARTICIPANT_UPDATED}. They either identify the participant or can only
+ * be modified through property-dedicated actions.
+ *
+ * @type {string[]}
+ */
+const PARTICIPANT_PROPS_TO_OMIT_WHEN_UPDATE = [
+
+    // The following properties identify the participant:
+    'conference',
+    'id',
+    'local',
+
+    // The following properties can only be modified through property-dedicated
+    // actions:
+    'dominantSpeaker',
+    'pinned'
+];
+
+/**
+ * Listen for actions which add, remove, or update the set of participants in
+ * the conference.
+ *
+ * @param {Participant[]} state - List of participants to be modified.
+ * @param {Object} action - Action object.
+ * @param {string} action.type - Type of action.
+ * @param {Participant} action.participant - Information about participant to be
+ * added/removed/modified.
+ * @returns {Participant[]}
+ */
+ReducerRegistry.register('features/base/participants', (state = [], action) => {
+    var ret
+    switch (action.type) {
+    case SET_LOADABLE_AVATAR_URL:
+    case DOMINANT_SPEAKER_CHANGED:
+    case PARTICIPANT_ID_CHANGED:
+    case PARTICIPANT_UPDATED:
+    case PIN_PARTICIPANT:
+        // var ret2 = _participant(p, action)
+        // ret =state.map(p => ret2);
+        ret =state.map(p => _participant(p, action));
+        ret = new Proxy(ret,gen_proxy())
+        // clog("ATYPE",{ret,ret2,p ,action})
+        clog("ATYPE",action.type,{ret})
+        return ret
+        // return state.map(p => _participant(p, action));
+
+
+    case PARTICIPANT_JOINED:
+            // dev inspect
+        const participant_new = _participantJoined(action)
+        clog("PARTICIPANT_JOINED RFN dev inspect",{state,action,participant_new})
+        ret = [ ...state, participant_new ]
+        clog("PARTICIPANT_JOINED RFN dev inspect2",ret)
+        ret = new Proxy(ret,gen_proxy())
+        clog("PARTICIPANT_JOINED RFN dev inspect3",ret)
+        // const ret = new Proxy([ ...state, participant_new ],rprox)
+        return ret;
+        // return [ ...state, _participantJoined(action) ];
+
+    case PARTICIPANT_LEFT: {
+        // XXX A remote participant is uniquely identified by their id in a
+        // specific JitsiConference instance. The local participant is uniquely
+        // identified by the very fact that there is only one local participant
+        // (and the fact that the local participant "joins" at the beginning of
+        // the app and "leaves" at the end of the app).
+        const { conference, id } = action.participant;
+
+        return state.filter(p =>
+            !(
+                p.id === id
+
+                    // XXX Do not allow collisions in the IDs of the local
+                    // participant and a remote participant cause the removal of
+                    // the local participant when the remote participant's
+                    // removal is requested.
+                    && p.conference === conference
+                    && (conference || p.local)));
+    }
+    }
+
+    return state;
+});
+
+/**
+ * Reducer function for a single participant.
+ *
+ * @param {Participant|undefined} state - Participant to be modified.
+ * @param {Object} action - Action object.
+ * @param {string} action.type - Type of action.
+ * @param {Participant} action.participant - Information about participant to be
+ * added/modified.
+ * @param {JitsiConference} action.conference - Conference instance.
+ * @private
+ * @returns {Participant}
+ */
+function _participant(state: Object = {}, action) {
+    switch (action.type) {
+    case DOMINANT_SPEAKER_CHANGED:
+        // Only one dominant speaker is allowed.
+        return (
+            set(state, 'dominantSpeaker', state.id === action.participant.id));
+
+    case PARTICIPANT_ID_CHANGED: {
+        // A participant is identified by an id-conference pair. Only the local
+        // participant is with an undefined conference.
+        const { conference } = action;
+
+        if (state.id === action.oldValue
+                && state.conference === conference
+                && (conference || state.local)) {
+            return {
+                ...state,
+                id: action.newValue
+            };
+        }
+        break;
+    }
+
+    case SET_LOADABLE_AVATAR_URL:
+    case PARTICIPANT_UPDATED: {
+        const { participant } = action; // eslint-disable-line no-shadow
+        let { id } = participant;
+        const { local } = participant;
+
+        if (!id && local) {
+            id = LOCAL_PARTICIPANT_DEFAULT_ID;
+        }
+
+        if (state.id === id) {
+            const newState = { ...state };
+
+            for (const key in participant) {
+                if (participant.hasOwnProperty(key)
+                        && PARTICIPANT_PROPS_TO_OMIT_WHEN_UPDATE.indexOf(key)
+                            === -1) {
+                    newState[key] = participant[key];
+                }
+            }
+
+            return newState;
+        }
+        break;
+    }
+
+    case PIN_PARTICIPANT:
+        // Currently, only one pinned participant is allowed.
+        return set(state, 'pinned', state.id === action.participant.id);
+    }
+
+    return state;
+}
+
+/**
+ * Reduces a specific redux action of type {@link PARTICIPANT_JOINED} in the
+ * feature base/participants.
+ *
+ * @param {Action} action - The redux action of type {@code PARTICIPANT_JOINED}
+ * to reduce.
+ * @private
+ * @returns {Object} The new participant derived from the payload of the
+ * specified {@code action} to be added into the redux state of the feature
+ * base/participants after the reduction of the specified
+ * {@code action}.
+ */
+function _participantJoined({ participant }) {
+    const {
+        avatarID,
+        avatarURL,
+        botType,
+        connectionStatus,
+        dominantSpeaker,
+        email,
+        isFakeParticipant,
+        isJigasi,
+        loadableAvatarUrl,
+        local,
+        name,
+        pinned,
+        presence,
+        role
+    } = participant;
+    let { conference, id } = participant;
+
+    if (local) {
+        // conference
+        //
+        // XXX The local participant is not identified in association with a
+        // JitsiConference because it is identified by the very fact that it is
+        // the local participant.
+        conference = undefined;
+
+        // id
+        id || (id = LOCAL_PARTICIPANT_DEFAULT_ID);
+    }
+
+    return {
+        avatarID,
+        avatarURL,
+        botType,
+        conference,
+        connectionStatus,
+        dominantSpeaker: dominantSpeaker || false,
+        email,
+        id,
+        isFakeParticipant,
+        isJigasi,
+        loadableAvatarUrl,
+        local: local || false,
+        name,
+        pinned: pinned || false,
+        presence,
+        role: role || PARTICIPANT_ROLE.NONE
+    };
+}

clone/cui5.js

@@ -0,0 +1,390 @@
+
+
+
+
+twsfn5 = window.twsfn5 || {}
+
+vc2 = {
+    key:"key",
+}
+
+
+
+
+
+
+if (!window.gws){
+    window.gws = {
+        sockets:{},
+    }
+}
+gws.twsfn5 = twsfn5
+
+// gws
+
+
+
+
+// Object.keys(twsfn5_bak)
+// Object.keys(twsfn5)
+
+// Object.keys(twsfn5_bak) +"" == Object.keys(twsfn5)+""
+
+
+
+
+function connect_helper5(){
+        var o = {  
+            // ':8943/ws/vts/'
+            // url:'wss://' + window.location.host + '/ws/vts2/' + window.roomName.toLowerCase() + '/?CONN',
+            url:'wss://' + window.location.host + ':8943/ws/vts2/' + window.roomName.toLowerCase() + '/?CONN',
+            wsfn:twsfn5,
+            name:"ws_n15",
+        }
+        clog("o",o)
+        connect_ws_arg(o)
+}
+
+
+
+
+
+// connect_ws_arg()
+
+
+        // 'wss://' + window.location.host +
+        // '/ws/vts/' + window.roomName + '/?qqAAAAAAAAAAAAAAAAA'
+
+
+
+
+    twsfn5.ts_t2x = function(data) {
+        clog("ts_t2x",data)
+        var k,v
+        for ([k,v] of Object.entries(data.obj.times)){
+            clog(k,v.t - data.obj.t0 )
+        }
+    }
+
+
+    twsfn5.ts_t0x = function(data) {
+        // clog("pub_msg",pub_msg)
+        var msg = {}
+        msg[vc2.key] = "ts_t1"
+        twsfn5.s(msg)
+    }
+
+    twsfn5.ts_test = function(data) {
+        // clog("pub_msg",pub_msg)
+        // var msg = {}
+        // msg[vc2.key] = "ts_t1"
+        // twsfn.s(msg)
+        clog("jx twsfn5.ts_test TEST")
+    }
+
+    twsfn5.pub_msg = function(data) {
+        clog("pub_msg",data)
+        // var msg = {}
+        // msg[vc2.key] = "pong"
+        // twsfn5.s(msg)
+    }
+
+
+
+
+
+
+    twsfn5.qdb_got = function(data) {
+        clog("jx qdb_data",data)
+        clog("jx qdb_got",data.obj)
+        clog(data.obj)
+    }
+
+    twsfn5.qdb_got3 = function(data) {
+        clog("jx qdb_data",data)
+        clog("jx qdb_got",data.obj)
+        clog("~jx~",data.obj.participants,data.obj.corners)
+    }
+
+    twsfn5.recv_corners = function(data) {
+        // clog("jx qdb_data",data)
+        // clog("jx qdb_got",data.obj)
+        glob_corner.corners=data.obj.corners
+        cad_ts5r()
+        clog("~jx~",data.obj.participants,data.obj.corners)
+    }
+
+    twsfn5.pingpong = function(data) {
+        // clog("VFB5 PONG2!")
+
+        var msg = {}
+        msg[vc2.key] = "pong"
+        twsfn5.s(msg)
+    }
+
+
+
+
+    twsfn5.onmessage = function(e) {
+        var recv_ts_u0 = window.performance.now()
+        var recv_ts = Date.now()
+        var recv_ts_u1 = window.performance.now()
+        // clog("VFB MSG",e)
+
+        // clog()
+        // return
+        var data = JSON.parse(e.data);
+        data.recv_ts = recv_ts
+        data.recv_ts_u0 = recv_ts_u0
+        data.recv_ts_u1 = recv_ts_u1
+        if (data.type != "pingpong"){
+            // clog("ixq twsfn5.onmessage")
+        }
+        // clog("VFB data",data)
+        // clog("WS ONMSG",data)
+        if (data.message != undefined){
+            // twsfn5.on_chat_message(data)
+        }
+        if (data.type != undefined && twsfn5[data.type]){
+            twsfn5[data.type](data,e)
+
+        } else {
+            clog("VFB data",data)
+        }
+    };
+
+    twsfn5.onopen = function(e) {
+        clog("jx ONCON...")
+        chatSocket.onopen
+        // clog("jx ONCON....")
+        // window.qdb ? onconnect : console.err("ERR no qdb")
+        // window.qdb ? window.qdb.onconnect() : console.error(" jx ERR no qdb")
+        window.qdb ? window.qdb.onconnect_2() : console.error(" jx ERR no qdb")
+        // console.error(" jx ERR test")
+        // console.error(" jx ERR test2")
+        // clog("jx ONCON... fin")
+    }
+    twsfn5.onclose = function(e) {
+        console.error('VFB2 vChat socket closed unexpectedly');
+        setTimeout(connect_helper5,1400)
+        // setTimeout(vconnect_ws,1400)
+    };
+
+
+ twsfn5.s=   function(o){
+
+        if (o.key != "pong"){
+            // clog("ixq twsfn5.send")
+        }
+
+    var vchatSocket = gws.sockets["ws_n15"]
+        // .send(JSON.stringify(o));
+        // twsfn5.s0 =
+         vchatSocket.send(JSON.stringify(o));
+    }
+
+// s =twsfn5.s
+// vconnect_ws()
+
+
+
+
+
+
+// delete qdb
+{
+
+class QDB {
+    constructor(){
+        this.db = {}
+    }
+    onconnect(){
+
+        qdb.get_corners()
+    }
+    onconnect_2(){
+        clog("JX onconnect_2")
+        // qdb.get_corners()
+        // setTimeout(this.get_corners.bind(this,1000))
+
+        setTimeout(this.get_corners.bind(this),100)
+        setTimeout(this.get_corners.bind(this),2000)
+        get_cui_html(rldi.files["cui3.html"])
+
+        // setTimeout(this.get_corners.bind(this,1000))
+        // setTimeout(this.get_corners.bind(this,))
+        // setTimeout(qdb.get_corners.bind(this,100)
+
+        // qdb.get_corners()
+    }
+
+    send(o){
+        twsfn5.s(o)
+    }
+    q(action){
+        this.send({"key":"qdb","action":action})
+
+    }
+    get_db(){
+        this.send({"key":"qdb","action":"get_db"})
+
+    }
+    get_db2(){
+        this.send({"key":"qdb","action":"get_db2"})
+
+    }
+
+    
+    set_db(){
+        this.send({"key":"qdb","action":"set_db"})
+
+    }
+
+    update(){
+
+    }
+    proc_response(data){
+        clog("jx proc_response",data)
+    }
+
+    updated(){
+
+    }
+
+    set_corners(corner_name){
+        this.send({"key":"qdb","action":"set_corners","corner_name":corner_name})
+    }
+    get_corners(corner_name){
+        clog("jx get_corners abc 123",this)
+        this.send({"key":"qdb","action":"get_corners"})
+    }
+    add_corner(corner_name){
+        this.send({"key":"qdb","action":"add_corner","corner_name":corner_name})
+    }
+    remove_corner(corner_name){
+        this.send({"key":"qdb","action":"remove_corner","corner_name":corner_name})
+    }
+    move(corner_name){
+        this.send({"key":"qdb","action":"move","corner_name":corner_name})
+    }
+
+
+    time_sync(){
+        clog("TIME SYNC")
+        // Date.now()
+
+
+        this.send({"key":"qdb","action":"time_sync","t0":Date.now(),"t0_u":window.performance.now()})
+    }
+
+    // server_ts
+
+
+
+
+
+
+
+
+}
+window.QDB = QDB
+}
+function replace_proto(){
+    window.qdb.__proto__ = QDB.prototype
+    var vchatSocket = gws.sockets["ws_n15"]
+    var wsfn = twsfn5
+
+    vchatSocket.onmessage = wsfn.onmessage
+    vchatSocket.onclose = wsfn.onclose  
+    vchatSocket.onopen = wsfn.onopen  
+
+}
+if (!window.qdb){
+    window.qdb = new QDB()
+
+} 
+
+
+
+
+window.QDB_def0 = QDB + ""
+if (window.QDB_def0 != window.QDB_def){
+    if (window.QDB_def){
+
+window.QDB_def = QDB + ""
+replace_proto()
+    }
+window.QDB_def = QDB + ""
+}
+if (window.qdb){
+    twsfn5.client_qbd = window.qdb.proc_response
+}
+
+twsfn5.get_db = function(){
+
+}
+twsfn5.server_ts = function(data,e){
+    var ts_u1 = window.performance.now()
+
+    var t1 = Date.now()
+    var t0 = data.req.t0
+    var ts = data.server_time
+    var tsx =ts * 1000
+    var ta = (t0+t1)/2
+    tsd = new Date(ts*1000)
+    t0d = new Date(t0)
+    t1d = new Date(t1)
+    td2 = ta - tsx
+    td  =  tsx - ta
+    tarr = [[t1,"t1"],[tsx,"tsx"],[t0,"t0"],[ta,"ta"],[td,"td"],[td2,"td2"]]
+    tobj = {t1,tsx,t0,ta,td,td2}
+
+    clog("ts:",t1 - data.recv_ts,ts_u1- data.recv_ts_u1,data)
+    // clog("ts:",{t0,ts,t1})
+
+    // clog("ts3:",(t0+t1)/2 - (ts *1000),t0 - t1)
+
+    t01 = t0 - t1
+    t01_u = data.req.t0_u - ts_u1
+
+    clog("ts3:",(t0+t1)/2 - tsx,t0-tsx,t1-tsx,t0 - t1)
+    if (!qdb.td){
+        qdb.td = 0
+    }
+    clog("ts4:",qdb.td - td,"~",qdb.td,td)
+    clog("ts5:",t01,t01_u)
+    qdb.td = td
+    qdb.td2 = td2
+    if (window.clock_info_draw){
+        clock_info_draw()
+    }
+
+}
+twsfn5.update_db = function(){}
+twsfn5.updated_db = function(){}
+
+
+
+
+
+function rld_continues(){
+    clog("vfb jx RC")
+    if (window.stop_flag){
+        return 
+    }
+    twsfn5.s({"key":"rld"})
+    setTimeout(rld_continues,500)
+}
+
+
+
+
+
+// connect_helper5()
+
+
+
+// setTimeout
+
+
+clog("BX5")

clone/fake_resize.js

@@ -0,0 +1,41 @@
+
+// make the App think you resized the window
+function dispatch_resize(store = APP.store) {
+        // store.dispatch(clientResized_dev(innerWidth, innerHeight));
+        store.dispatch({
+        type: "CLIENT_RESIZED",
+        clientHeight:innerHeight,
+        clientWidth:innerWidth,
+    });
+        // clog("dispatch_resize")
+}
+
+// unused old fn to add pseudo videos
+function add_spans(n=1,xtra=0){
+	var s = `
+	<span class="pseudo_vid videocontainer"></span>
+	`
+	$(".pseudo_vid").remove()
+	if (!xtra){
+	n = n - APP.store.getState()["features/base/participants"].length
+	}
+	var k,v
+	for (var i = 0; i < n; i++) {
+		// Things[i]
+		clog("..",i)
+	$("#filmstripRemoteVideosContainer").append(s)
+	}
+	dispatch_resize()
+}
+
+
+
+
+
+
+fs_dec_list = [
+"resizeThumbnailsForHorizontalView",
+"resizeThumbnailsForVerticalView",
+// "resizeThumbnailsForTileView",
+]
+dec_fns = {}

clone/fs.css

@@ -0,0 +1,313 @@
+
+
+.tile-view #filmstripRemoteVideos {
+	margin: 135 0 100 0;
+}
+
+
+
+
+
+.vid_container > .small_vid {
+	display: inline-block;
+}
+
+
+
+.small_vid{
+	/*box-sizing: content-box;*/
+	box-sizing: border-box;
+	margin: 4px 5px;/
+	/*background-clip: border-box;*/
+	background-clip: content-box;
+	outline: unset;
+}
+.dev_filmstrip {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+
+.vid_container{
+	z-index: 6;
+}
+
+
+
+
+
+.ic4  {
+	/*vertical-align: */
+	vertical-align: middle;
+	text-align: center;
+	/*outline: 2px solid red;*/
+
+	align-items: center;
+	/*margin: auto;*/
+	display: flex;
+	/*flex-wrap: */
+}
+
+.ic4 .small_vid  {
+	display: inline-block !important;
+	margin: auto;
+}
+
+
+
+.fs_container{
+	position: relative;
+	display: inline-block;
+	height: 100%;
+	margin: auto;
+
+}
+
+#sharedVideoIFrame {
+	width: 100% !important;
+	height: 100% !important;
+}
+
+#videospace{
+	vertical-align: center;
+	--lvw: 100% !important;;
+}
+ 
+.youtube_vid {
+	outline: 5px dotted red;
+}
+
+
+
+.ic1 {
+
+  display: flex;
+  justify-content: center;
+
+	justify-content:center;
+
+}
+
+
+
+#sharedVideoIFrame,#sharedVideo {
+	display: unset !important;
+	opacity: 1 !important;
+}
+
+#largeVideoWrapper {
+	width: 100% !important;
+	height: 100% !important;
+	top: 0 !important;
+	bottom: 0 !important;
+	left: 0 !important;
+	right: 0 !important;
+}
+
+.large-video-background{
+	display: none !important;
+}
+
+
+.indicator_hook {
+pointer-events: none;
+}
+
+
+.vid_toptoolbar_hook {
+	position: absolute;
+}
+
+
+#toggleFilmstripButton,[aria-label="Toggle tile view"] {
+	display: none !important;
+}
+
+.videocontainer__toptoolbar{
+	z-index: auto !important;
+}
+
+
+/* this is important this covers large video  */
+.cont.c4{
+	z-index: 0;
+}
+
+
+.dev_hook:not(.vspace,.top_toolbox){
+	display: none;
+}
+.xbox {
+	display: none ;
+
+}
+
+
+
+
+
+
+
+.vid_toptoolbar_hook{
+	width: 100%;
+	height: 0%;
+	padding-bottom: 56.25%;
+}
+
+
+
+
+
+.outline_indicator{
+	/*outline: 1px solid #0000;*/
+	outline: 2px solid #000;
+	outline: 0px solid #fff;
+	outline-offset: -15px;
+	--voffc: -3px; 
+	--voff:  2px;
+	--voffw: 2px; 
+	width: 100%;
+	height: 100%;
+	position: absolute;
+
+}
+
+.active-speaker .outline_indicator.ind_1{
+	outline-offset: 5px;
+	outline-offset: calc((var(--voff) * 3 ) + var(--voffc));
+	outline-width: var(--voffw);
+	outline-color: #0ff;
+}
+.videoContainerFocused .outline_indicator.ind_2{
+	outline-offset: 3px;
+	outline-offset: calc((var(--voff) * 2 ) + var(--voffc));
+	outline-width: var(--voffw);
+	outline-color: #f00;
+}
+.local_vid .outline_indicator.ind_3{
+	outline-offset: 1px;
+	outline-offset: calc((var(--voff) * 1 ) + var(--voffc));
+	outline-width: var(--voffw);
+	outline-color: #fff;
+}
+
+
+
+
+
+.remote-video-menu-trigger, .remotevideomenu {
+	z-index: 10;
+}
+
+.follow_focus {
+	z-index: 20;
+	position: absolute;
+	left: 250px;
+	pointer-events:auto;
+
+}
+
+.follow_focus2 {
+	z-index: 20;
+	position: absolute;
+	right: 100px;
+	pointer-events:auto;
+
+}
+
+.dev_hook.top_toolbox{
+	pointer-events: none;
+	z-index: -1;
+}
+
+
+#react > div {
+		/*background-color: rgb(27, 38, 56);*/
+		/*background-color: rgb(71, 71, 71);*/
+		background-color: #374757;
+}
+
+
+.new-toolbox .toolbox-background {
+/*
+    background-image: linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.4),rgba(0,0,0,.1),rgba(0,0,0,0));
+
+
+    --vr0: rgba(0,0,0,1);
+    --vr1: rgba(0,0,0,.6);
+    --vr2: rgba(0,0,0,.4);
+    --vr3: rgba(0,0,0,0);
+
+    background-image: linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,.5),rgba(0,0,0,.2),rgba(0,0,0,0));
+*/
+
+    --vr0:  rgba(0,0,0,1)  0%;
+    --vr1:  rgba(0,0,0,.6) 25%;
+    --vr2:  rgba(0,0,0,.3) 55%;
+    --vr3:  rgba(0,0,0,0)  100%;
+
+    background-image: linear-gradient(to top,var(--vr0),var(--vr1),var(--vr2),var(--vr3));
+}
+.button-group-center {
+	position: relative;
+}
+
+
+
+/*
+.il {
+	outline: 4px inset #ff0;
+}
+
+.ir {
+	outline: 4px inset #f00;
+	
+}
+
+
+.ilr {
+	outline: 4px inset #0ff;
+}
+
+.ir0 {
+	border-radius: 30px;
+}
+
+.il0 {
+	border-radius: 30px;
+}
+.ic3 {
+	background: #ff08;
+
+}
+.ic2 {
+	background: #00f8;
+
+}
+*/
+
+
+
+.follow_focus,.follow_focus2 {
+	background-color: #0008;
+}
+
+
+.inline_input {
+	display: inline;
+}
+
+#ov_timeout,#num_pseudo{
+	width: 4em;
+}
+
+/*.presence-label, */
+
+.subject {
+	overflow: visible;
+}

clone/fs_hook.js

@@ -0,0 +1,87 @@
+
+
+
+
+function resize_filmstrips(that,fn_name,args=[]){
+
+}
+function resize_filmstrips2(that,fn_name,args=[]){
+	
+}
+
+
+glob_mx.filmstrip_handlers = glob_mx.filmstrip_handlers || {}
+glob_mx.filmstrip_tile_handlers = glob_mx.filmstrip_tile_handlers || {}
+
+
+
+// run callbacks for all filmstrips on resize
+function resizeThumbnailsForCustomView(that,fn_name,args=[]){
+    const thumbs = glob_react.Filmstrip._getThumbs()
+    const all_thumbs = $(".small_vid")
+    const custom_thumbs = all_thumbs.not(thumbs.remlocThumbs)
+    const vid_containers = $(".vid_container")
+    const loose_thumbs = custom_thumbs.not(vid_containers.children())
+    var k,v 
+    let fs_handler_key
+    let fs_handler 
+    let fs_tile_handler
+    let fs_handlers = new Map()
+    let i
+    // console.trace("rtscv...")
+
+    let fs_tile_handlers = []
+    for (v of vid_containers){
+      // clog(":",v,v.dataset.fs_type)
+      fs_handler_key = v.dataset.fs_handler
+      // clog("~",v,v.dataset,fs_handler)
+      fs_tile_handler = glob_mx.filmstrip_tile_handlers[fs_handler_key] || nop
+      fs_handler = glob_mx.filmstrip_handlers[fs_handler_key] || nop
+      // glob_mx.filmstrip_tile_handlers[fs_handler_key] ? glob_mx.filmstrip_tile_handlers[fs_handler_key](v) : 1
+      // fs_tile_handlers.push([glob_mx.filmstrip_tile_handlers[fs_handler_key] || nop,v])
+      // fs_handlers.setD(glob_mx.filmstrip_handlers[fs_handler_key] || nop,)
+      fs_tile_handlers.push([fs_tile_handler,v])
+      fs_handlers.setD(fs_handler,[])
+      i = fs_handlers.get(fs_handler)
+      i.push(v)
+
+      // glob_mx.filmstrip_handlers
+    }
+    clog("fs_tile_handlers",fs_tile_handlers)
+    for ([k,v] of fs_handlers){
+    	// clog("ft0",k,v)
+    	k(v)
+    }
+    for ([k,v] of fs_tile_handlers){
+    	// clog("ft",k,v)
+    	k(v)
+
+    }
+
+
+    // return
+    // const custom_thumbs = all_thumbs
+
+    var aspect = 16/18
+    var width = 135
+    var height = Math.round(width/aspect)
+    loose_thumbs.css({
+      'padding-top': '',
+      "min-height": `${height}px`,
+      "min-width": `${width}px`,
+      width: `${width}px`,
+      height: `${height}px`,
+    })
+
+    clog("rtscv",fn_name,[that,...args])
+
+
+}
+
+
+
+
+
+function onover(){
+	clog(this,[...arguments])
+}

clone/inspect_utils.js

@@ -0,0 +1,10 @@
+
+
+function jclone(obj){
+	return Array.isArray(obj) ?  $.extend(true,[],obj) :  $.extend(true,{},obj)
+}
+function jx(obj){
+	return JSON.parse(JSON.stringify(obj))
+}
+window.jc = jclone
+

clone/m/_m_utils.js

@@ -0,0 +1,139 @@
+
+
+
+
+if (!window.glob_mx){
+	// window.glob_mx={}
+}
+function disp(o){
+	APP.store.dispatch(o)
+}
+
+
+// default event handler this should match all events
+mhndlr_opt_null = {
+from: undefined,
+handler: "onAll",
+id: null,
+name: null,
+// "http://jitsi.org/jitmeet"
+ns: null,
+options: {matchBareFromJid: false, ignoreNamespaceFragment: false},
+type: null,
+user: true,
+cstr:"test"
+};
+
+
+
+mhndlr_opt_x = {
+	cstr:"?",
+	ns:"corner_mx",
+	handler:mhndlr,
+
+}
+
+
+function add_handler_m(handler) {
+	var phx = APP.connection.xmpp.connection._stropheConn.handlers[0].__proto__;
+
+	var hxa=Object.create(phx)
+	Object.assign(hxa,mhndlr_opt_null,handler)
+	APP.connection.xmpp.connection._stropheConn.addHandlers.push(hxa)
+}
+
+
+function tmsgx(data,tag="div",attrs={}){
+	// return
+	var ns = {xmlns:"corner_mx"}
+	var msg = $build("message",{ to: window.APP.conference._room.room.roomjid,
+            type: 'groupchat',
+             });
+	var payload=JSON.stringify(data)
+
+	Object.assign({},ns,attrs)
+
+	msg.c(tag, payload,Object.assign({},ns,attrs)).up();
+	// console.log("zzzz")
+	APP.conference._room.room.connection.send(msg)
+}
+
+
+
+function tmsgx2(data,opt_arg={},attrs={}){
+	// return
+	dflt_opt = {
+	tag:"code",
+	type:"chat",
+	to:window.APP.conference._room.room.roomjid,
+	}
+	var opt = Object.assign({},dflt_opt,opt_arg)
+
+	var ns = {xmlns:"corner_mx"}
+	var msg = $build("message",{ to: opt.to,
+            type: opt.type,
+             });
+	var payload=JSON.stringify(data)
+
+	Object.assign({},ns,attrs)
+
+	msg.c(opt.tag, payload,Object.assign({},ns,attrs)).up();
+	// console.log("zzzz")
+	APP.conference._room.room.connection.send(msg)
+}
+function tmsgx3(data,opt_arg={},attrs={}){
+	// return
+	dflt_opt = {
+	tag:"code",
+	// type:"chat",
+	to:window.APP.conference._room.room.roomjid,
+	}
+	var opt = Object.assign({},dflt_opt,opt_arg)
+	clog("T:",data,opt,opt.type)
+	if (!opt.type){
+		clog("NO TYPE")
+	opt.to == dflt_opt.to ? opt.type = "groupchat" : opt.type = "chat"
+	}
+	clog("T:",data,opt,opt.type)
+
+	var ns = {xmlns:"corner_mx"}
+	var msg = $build("message",{ to: opt.to,
+            type: opt.type,
+            // from: "nnnx@conference.jfidev.com/3db7bf15",
+            // xtra: "nnnx@conference.jfidev.com/3db7bf15",
+             });
+	var payload=JSON.stringify(data)
+
+	Object.assign({},ns,attrs)
+
+	msg.c(opt.tag, payload,Object.assign({},ns,attrs)).up();
+	// console.log("zzzz")
+	APP.conference._room.room.connection.send(msg)
+}
+
+
+
+function mhndlr_rld_dflt(a0,a1,a2,a3,a4){
+	clog("mhndlr... dflt")
+	return true
+}
+if (!window.mhndlr_rld){
+	window.mhndlr_rld = mhndlr_rld_dflt
+}
+function mhndlr(a0,a1,a2,a3,a4){
+	// clog("MH!")
+	setTimeout(window.mhndlr_rld,1,this,a0,a1,a2,a3,a4)
+	return true
+}
+
+
+function init_mx(){
+	clog("INITMX")
+	add_handler_m(mhndlr_opt_x)
+	// add_handler_m(mhndlr_opt_x_all)
+}
+
+// init_mx will be called once we join th confrence
+ifn_obj.init_conf_join.push(init_mx)
+
+

clone/m/_m_utils0.js

@@ -0,0 +1,302 @@
+
+
+
+
+if (!window.glob_mx){
+	// window.glob_mx={}
+}
+
+
+
+
+
+/*
+msto_qx = {
+	local:{},
+	conference:{},
+	participant:{},
+}
+
+
+
+msto_qx = {
+	private_local:{},
+	participant_local:{},
+	conference:{},
+	participant:{
+		'<id_0>':{},
+		'<id_1>':{},
+		'<id_...>':{},
+		'<id_n>':{
+			rkey:{},
+		},
+
+	},
+}
+*/
+mhndlr_opt_null = {
+from: undefined,
+handler: "onAll",
+id: null,
+name: null,
+// "http://jitsi.org/jitmeet"
+ns: null,
+options: {matchBareFromJid: false, ignoreNamespaceFragment: false},
+type: null,
+user: true,
+cstr:"test"
+};
+// cstr:"onMsgx"
+
+
+
+mhndlr_opt_x = {
+	cstr:"?",
+	ns:"corner_mx",
+	handler:mhndlr,
+
+}
+function rtrue(){
+	// clog("rtrue...",this,arguments)
+	// console.trace("rtrue")
+	return true
+}
+function rtrue2(){
+	clog("rtrue2...",this,arguments)
+	// console.trace("rtrue2")
+	return true
+}
+function rtrue3(){
+	clog("rtrue3...",this,arguments)
+	// console.trace("rtrue2")
+	allevnt(...arguments)
+	return true
+}
+mhndlr_opt_x_all = {
+	cstr:"?",
+	ns:"jabber:client",
+	// name:"message",
+	type:"groupchat",
+	handler:allevnt,
+	// isMatch:rtrue2,
+	// run:rtrue3,
+	// namespaceMatch:rtrue,
+
+
+}
+
+function add_handler_m(argument) {
+	// minit()
+	// if (!th.phx){
+		// th.
+	// }
+		// var phx = APP.conference._room.room.connection.handlers[0].__proto__;
+		var phx = APP.connection.xmpp.connection._stropheConn.handlers[0].__proto__;
+
+	var hxa=Object.create(phx)
+	Object.assign(hxa,mhndlr_opt_null,mhndlr_opt_x)
+	// APP.conference._room.room.connection.handlers.push(hxa)
+	APP.connection.xmpp.connection._stropheConn.addHandlers.push(hxa)
+	// th.hxa=hxa
+	// th.hx
+	// body...
+}
+function add_handler_m2(argument) {
+	clog("ADD HANDLER M2")
+	// minit()
+	// if (!th.phx){
+		// th.
+	// }
+		// var phx = APP.conference._room.room.connection.handlers[0].__proto__;
+		var phx = APP.connection.xmpp.connection._stropheConn.handlers[0].__proto__;
+
+	var hxa=Object.create(phx)
+	Object.assign(hxa,mhndlr_opt_null,mhndlr_opt_x_all)
+	// APP.conference._room.room.connection.handlers.push(hxa)
+	APP.connection.xmpp.connection._stropheConn.addHandlers.push(hxa)
+	return hxa
+	// th.hxa=hxa
+	// th.hx
+	// body...
+}
+
+function tmsgx(data,tag="div",attrs={}){
+	// return
+	var ns = {xmlns:"corner_mx"}
+	var msg = $build("message",{ to: window.APP.conference._room.room.roomjid,
+            type: 'groupchat',
+             });
+	var payload=JSON.stringify(data)
+
+	Object.assign({},ns,attrs)
+
+	msg.c(tag, payload,Object.assign({},ns,attrs)).up();
+	console.log("zzzz")
+	APP.conference._room.room.connection.send(msg)
+}
+
+
+
+function tmsgx2(data,opt_arg={},attrs={}){
+	// return
+	dflt_opt = {
+	tag:"code",
+	type:"chat",
+	to:window.APP.conference._room.room.roomjid,
+	}
+	var opt = Object.assign({},dflt_opt,opt_arg)
+
+	var ns = {xmlns:"corner_mx"}
+	var msg = $build("message",{ to: opt.to,
+            type: opt.type,
+             });
+	var payload=JSON.stringify(data)
+
+	Object.assign({},ns,attrs)
+
+	msg.c(opt.tag, payload,Object.assign({},ns,attrs)).up();
+	console.log("zzzz")
+	APP.conference._room.room.connection.send(msg)
+}
+function tmsgx3(data,opt_arg={},attrs={}){
+	// return
+	dflt_opt = {
+	tag:"code",
+	// type:"chat",
+	to:window.APP.conference._room.room.roomjid,
+	}
+	var opt = Object.assign({},dflt_opt,opt_arg)
+	clog("T:",data,opt,opt.type)
+	if (!opt.type){
+		clog("NO TYPE")
+	opt.to == dflt_opt.to ? opt.type = "groupchat" : opt.type = "chat"
+	}
+	clog("T:",data,opt,opt.type)
+
+	var ns = {xmlns:"corner_mx"}
+	var msg = $build("message",{ to: opt.to,
+            type: opt.type,
+            // from: "nnnx@conference.jfidev.com/3db7bf15",
+            // xtra: "nnnx@conference.jfidev.com/3db7bf15",
+             });
+	var payload=JSON.stringify(data)
+
+	Object.assign({},ns,attrs)
+
+	msg.c(opt.tag, payload,Object.assign({},ns,attrs)).up();
+	console.log("zzzz")
+	APP.conference._room.room.connection.send(msg)
+}
+
+function mhndlr_rld_dflt(a0,a1,a2,a3,a4){
+	// clog("mhndlr....",a0,a1,a2)
+	clog("mhndlr... dflt")
+	// setTimeout(window.onAll_rld_v2,1,this,a0,a1,a2,a3,a4)
+	return true
+}
+if (!window.mhndlr_rld){
+	window.mhndlr_rld = mhndlr_rld_dflt
+}
+function mhndlr(a0,a1,a2,a3,a4){
+	// clog("MH!")
+	setTimeout(window.mhndlr_rld,1,this,a0,a1,a2,a3,a4)
+	return true
+}
+function allevnt(a0,a1,a2,a3,a4){
+	clog("MH! allevnt")
+	setTimeout(window.allevnt_rld,1,this,a0,a1,a2,a3,a4)
+	return true
+}
+function rld_room(room){
+	clog("rld_room...",room)
+	window.location.assign(room)
+}
+function allevnt_rld(a0,a1,a2,a3,a4){
+	// clog("MH!")
+	// clog("allevnt_rld",a0,a1,a2,a3,a4)
+
+	var msg = a1.querySelector(`body`)
+	if (!msg){
+		return
+	}
+	// clog("allevnt_rld...",a1)
+
+
+	// clog("allevnt_rldw",_from.split("/").pop())
+	// clog(msg)
+	// return
+	// @Joseph-Innace
+	// clog(msg.innerHTML)
+	var msg_txt = msg.innerHTML 
+	if (msg_txt.startsWith("moveto=")){
+		var room = msg_txt.split("=").pop()
+		if (room){
+	var _from = a1.getAttribute("from").split("/").pop()
+	if (get_local().id == _from){
+		rld_room(room)
+	} else {
+		setTimeout(rld_room,2000,room)
+
+	}
+	// get_local().id
+
+		}
+
+		// clog("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!",msg_txt.split("~"),msg_txt.split("~").pop())
+	} 
+	// clog($(a1))
+	// clog("z",$(a1)[0].innerHTML)
+
+	// setTimeout(window.mhndlr_rld,1,this,a0,a1,a2,a3,a4)
+	return true
+}
+/*
+
+delete Root_io
+{
+
+class Root_io {
+	constructor(){}
+	_pub_msg(m){
+		clog("ixi PUB MSG",m)
+	}
+	_rec_msg(m){
+		clog("ixi REC MSG",m)
+	}
+}
+window.Root_io = Root_io
+}
+*/
+// function allevnt(){
+
+// }
+clog("ZZZZZZZZZ")
+function init_mx(){
+	clog("INITMX3")
+	add_handler_m(mhndlr)
+	add_handler_m2(allevnt)
+}
+
+ifn_obj.init_conf_join.push(init_mx)
+
+
+
+// sto_event
+// sto_update
+
+
+// pub_msg
+// rec_msg
+
+
+// set_local
+
+
+
+
+
+
+
+
+
+

clone/m/m_api.js

@@ -0,0 +1,286 @@
+
+
+
+// this file enables loading modules after pageload
+
+
+
+
+
+function get_cui_html(file) {
+	clog("get_cui_html",this,arguments)
+	// console.trace("~IX~ ixr")
+	clog("~IX~ ixr")
+	// for (var file of this.arr){
+		var aii 
+		aii= $.ajax({
+			// url: "ign/cui.html",
+			url: file.url,
+			// data: file.qs,
+			cache:false,
+			// complete:complete_html,
+			success: file.success || proc_cui_html,
+			// error: err_html,
+			// dataType: "text"
+			dataType: "html"
+		})
+		aii.file = file
+		// aii.rldh=file
+	// }
+}
+
+
+
+function cui_respH(){
+	clog("cui_respH")
+}
+
+function cui_diffH(file){
+	clog("cui_diffH",this,arguments)
+	// get_cui_html(file)	
+}
+
+
+
+
+
+
+function proc_cui_html(rsp,status,xhr){
+	clog("proc_cui_html",this,arguments)
+	/*
+	gxh.success = {
+		that:this,
+		rsp,status,xhr,
+		args:arguments,
+	}
+	*/
+	// insert_cui_html(rsp)
+	// rsp
+}
+function insert_cui_html(innerHTML){
+	clog("insert_cui_html....")
+	window.cui_html = innerHTML
+	t5i2.crnr_init()
+	// t5i2.crnr_refresh()
+
+	// var n
+	//  n = document.createElement("div")
+	// n = document.querySelector("#xh_root")
+	// n ? n.innerHTML = innerHTML : 0
+	// event_html(n)
+}
+
+
+function dflt_api_handler(){
+	clog("dflt_api_handler NOT IMPLIMENTED")
+}
+
+function add_rld_html(){
+	// js files
+	// html
+	// css
+
+
+
+
+rldi.files["ign/m/timer/rhtml.html"]=  {url: "ign/m/timer/rhtml.html",
+ qs: {v:1}, respH: cui_respH, diffH: cui_diffH,
+ cached:"z z",
+ success:proc_cui_html,
+}
+
+
+
+}
+
+/*
+var reqt = {
+	url:"",
+	respH:dflt_handler,
+	diffH:diff_handler,
+}
+
+*/
+
+
+
+
+// jsrh
+// cssrh
+api_dflts = {
+	dflt:window.reqt || {url:"", respH:dflt_handler, diffH:diff_handler,},
+	js:{
+		diffH:jsrh,
+		// diffH:jsrh,
+		qs:{v:1},
+	},
+	css:{
+		diffH:cssrh,
+		qs:{v:1},
+
+	},
+	html:{
+
+		diffH:html_rld_cb,
+		qs:{v:1},
+	},
+}
+
+
+api_test = {}
+
+// <script class="rld" src="ign/m/m_api.js?c=023"></script>
+function insert_js(file){
+	var n = document.createElement("SCRIPT")
+	n.classList.add("rld")
+	n.src=file.url + "?_="+new Date().getTime()
+	// n.rel="stylesheet"
+	$(`script.rld[src^="`+file.url+`"]`).remove()
+	$(".m0.module").after(n)
+}
+function insert_css(file){
+	var url = file.url
+	var n = document.createElement("LINK")
+	n.classList.add("rld")
+	n.href=file.url + "?_="+new Date().getTime()
+	n.rel="stylesheet"
+	 $(`link.rld[href^="`+file.url+`"]`).remove()
+	$(".m0.module").after(n)
+}
+function html_rld_cb(){
+	clog("html_rld_cb!")
+
+}
+
+
+function html_rld_cb2(){
+	clog("html_rld_cb2!",this,[...arguments])
+
+}
+function html_rld_cb3(){
+	clog("html_rld_cb3!",this,[...arguments])
+}
+function html_rld_cb4(rsp,status,xhr){
+	clog("html_rld_cb4!",this,[...arguments])
+	// window[this.success_js](rsp,status,xhr)
+	window[xhr.file.success_js](rsp,status,xhr)
+}
+
+
+function register_rld(file){
+	clog("RR",file)
+	file.cached = rls[file.url]
+	rldi.files[file.url] =  file
+
+}
+
+
+window.qto_stop = 0
+window.qto_cnt = 0
+function qto_init(){
+	window.qto_stop = 0
+window.qto_cnt = 0
+	// setTimeout(qto_stop_fn,1000)
+	setTimeout(qto_stop_fn,100)
+	qto()
+
+}
+function qto_stop_fn(){
+	clog("qto_stop_fn")
+	window.qto_stop =1
+}
+function qto(){
+	clog("QTO",window.qto_cnt)
+	// clog("QTO",window.qto_cnt,$(`script.rld[src^="ign/m/timer/m.js"]`))
+	window.qto_cnt += 1
+	if (!window.qto_stop){
+		setTimeout(qto,1)
+	}
+
+}
+
+
+
+	// $(`script.rld[src^="ign/m/timer/m.js"]`).remove()
+	// ign/m/timer/m.js
+
+
+
+
+// mtx ={js:["ign/m/timer/m.js"],css:["ign/m/timer/m.css"],html:["ign/m/timer/m.html"]}
+// mtx ={js:["ign/m/timer/m.js"],css:["ign/m/timer/m.css"],html:[{url:"ign/m/timer/m.html",diffH:html_rld_cb2,success:html_rld_cb4,}]}
+mtx ={	
+	// js:["ign/m/timer/m.js","ign/m/timer/m0.js"],
+	js:["ign/clone/m/timer/m0.js","ign/clone/m/timer/m.js",],
+	css:["ign/clone/m/timer/m.css"],
+	html:[{url:"ign/clone/m/timer/m.html",diffH:get_cui_html,success:html_rld_cb4,success_js:"html_js_handler"}]
+	}
+
+function add_module(o){
+	var k,v
+	let file 
+		// qto_init()
+		// file = jclone(api_dflts.css)
+	for (k of o.css || []){
+		if (typeof(k) == "string"){
+			 file = $.extend(true,{},api_dflts.css, {url:k})
+		} else {
+			 file = $.extend(true,{},api_dflts.css, k)
+		}
+		// file = jclone(api_dflts.css)
+		// file.url = k
+
+		register_rld(file)
+		insert_css(file)
+
+		api_test[file.url]=file
+		clog("~",k)
+	}
+	for (k of o.js || []){
+		if (typeof(k) == "string"){
+			 file = $.extend(true,{},api_dflts.js, {url:k})
+		} else {
+			 file = $.extend(true,{},api_dflts.js, k)
+		}
+		// file = jclone(api_dflts.js)
+		// file.url = k
+
+		register_rld(file)
+		insert_js(file)
+
+		api_test[file.url]=file
+		clog("~",k)
+	}
+	for (k of o.html || []){
+		if (typeof(k) == "string"){
+			 file = $.extend(true,{},api_dflts.html, {url:k})
+		} else {
+			 file = $.extend(true,{},api_dflts.html, k)
+		}
+		// file = jclone(api_dflts.html)
+		// file.url = k
+		register_rld(file)
+		api_test[file.url]=file
+		clog("~",k)
+		rfile = file
+		get_cui_html(file)
+	}
+
+
+}
+
+
+
+
+
+
+// jquery helper
+function add_node(n,rn,i) {
+	$(rn)[i](n)
+}
+
+
+setTimeout(add_module,300,mtx)
+
+
+// add_module(mtx )

clone/m/m_api_html.js

@@ -0,0 +1,239 @@
+
+
+
+
+
+
+
+
+
+
+// insert
+
+
+// insert
+
+
+
+// small_video after
+// small_video ui
+// psudo_small_video
+
+// location ui
+// psudo location ui
+
+
+
+// small_video_toolbar
+
+
+// pseudo_small_video
+// small_video_ui
+// small_video_after
+
+
+
+
+
+
+
+function init_api0(){
+	$(".plugin_top").remove()
+	var n
+	n = `<div class="plugin_top"><div class="m">ABC</div></div>`
+	// n = `<span class="plugin_top"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top pseudo_vid small_vid"><span class="m">ABC</span></span>`
+	// n = `<span class="plugin_top pseudo_vid videocontainer this_con rloc remote_vid small_vid display-avatar-only"></span>`
+	n = `<span class="plugin_top pseudo_vid videocontainer this_con rloc remote_vid small_vid display-avatar-only"><span class="m">ABC</span></span>`
+
+	// add_node(n,`.small_vid`,"append")
+	// add_node(n,`.small_vid`,"after")
+	// add_node(n,`.jdiv`,"append")
+	// add_node(n,`.cont.c1`,"append")
+
+}
+
+// vroot.vproc.sizes
+
+
+// toolbox-content
+// button-group-left
+// button-group-center
+// button-group-right
+// toolbox-button
+
+function init_api(){
+	$(".plugin_top").remove()
+	var n
+	n = `<div class="plugin_top toolbox-button "><div class="cbar">ABC</div></div>`
+	n = `<span class="plugin_top pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top hidden_vid pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top hidden_vid pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	// n = `<span class="plugin_top pseudo_vid"><span class="m">ABC</span></span>`
+	// n = `<span class="plugin_top pseudo_vid videocontainer this_con rloc remote_vid small_vid display-avatar-only"></span>`
+	// n = `<span class="plugin_top pseudo_vid videocontainer this_con rloc remote_vid small_vid display-avatar-only"><span class="m">ABC</span></span>`
+
+	// add_node(n,`.small_vid`,"append")
+	// add_node(n,`.small_vid`,"after")
+
+
+
+
+	// add_node(n,`.remote_vid,#localVideoTileViewContainer`,"after")
+	n = `<span class="plugin_top pseudo_vid small_vid "><div class="m">ABC</div></span>`
+	add_node(n,`.remote_vid,#localVideoTileViewContainer`,"after")
+
+
+
+
+
+
+	// add_node(n,`.jdiv`,"append")
+
+	// add_node(n,`.button-group-center`,"append")
+	// add_node(n,`.button-group-right`,"prepend")
+	// add_node(n,`.jdiv`,"prepend")
+
+
+	// add_node(n,`.cont`,"prepend")
+	// add_node(n,`.cont`,"after")
+	try {
+		dispatch_resize()
+	} catch {
+
+	}
+
+}
+
+
+function init_api2(){
+	$(".plugin_top").remove()
+	// dispatch_resize()
+	// return
+	var n
+	n = `<div class="plugin_top toolbox-button "><div class="cbar">ABC</div></div>`
+	n = `<span class="plugin_top pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top hidden_vid pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top hidden_vid pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	// n = `<span class="plugin_top pseudo_vid"><span class="m">ABC</span></span>`
+	// n = `<span class="plugin_top pseudo_vid videocontainer this_con rloc remote_vid small_vid display-avatar-only"></span>`
+	// n = `<span class="plugin_top pseudo_vid videocontainer this_con rloc remote_vid small_vid display-avatar-only"><span class="m">ABC</span></span>`
+
+	// add_node(n,`.small_vid`,"append")
+
+
+
+
+	// add_node(n,`.remote_vid,#localVideoTileViewContainer`,"after")
+	n = `<span class="plugin_top pseudo_vid small_vid "><div class="m">ABC</div></span>`
+	// add_node(n,`.small_vid`,"after")
+	// add_node(n,`.remote_vid,#localVideoTileViewContainer`,"after")
+	// add_node(n,`.remote-videos-container`,"append")
+	add_node(n,`#localVideoTileViewContainer`,"before")
+
+
+
+	// n = `<span class="plugin_top "><div class="m">ABC</div></span>`
+	// n = `<span class="plugin_top overlay"><div class="m">ABC</div></span>`
+
+
+
+	// add_node(n,`.jdiv`,"append")
+/*
+	add_node(n,`.button-group-center`,"append")
+	add_node(n,`.button-group-right`,"append")
+	add_node(n,`.button-group-left`,"append")
+
+
+	add_node(n,`.button-group-center`,"prepend")
+	add_node(n,`.button-group-right`,"prepend")
+	add_node(n,`.button-group-left`,"prepend")
+*/
+	// add_node(n,`.toolbox-content`,"prepend")
+	// add_node(n,`.toolbox-content`,"before")
+	// add_node(n,`.toolbox-content`,"after")
+
+	// add_node(n,`.toolbox-background`,"after")
+	// add_node(n,`.toolbox-background`,"append")
+	// add_node(n,`.toolbox-background`,"append")
+
+	// add_node(n,`.new-toolbox`,"append")
+	// add_node(n,`.new-toolbox`,"prepend")
+	// add_node(n,`#react`,"prepend")
+	// add_node(n,`body`,"prepend")
+	// add_node(n,`body`,"append")
+
+
+
+
+	// add_node(n,`.jdiv`,"prepend")
+	// add_node(n,`.jdiv`,"append")
+
+
+	// add_node(n,`.cont`,"prepend")
+	// add_node(n,`.cont`,"after")
+	try {
+		dispatch_resize()
+	} catch {
+
+	}
+
+
+}
+
+function init_api3(){
+	$(".plugin_top").remove()
+	// dispatch_resize()
+	// return
+	var n
+	// ".top_toolbox,.vid_toptoolbar_hook"
+	n = `<div class="plugin_top toolbox-button "><div class="cbar">ABC</div></div>`
+	n = `<span class="plugin_top pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top hidden_vid pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top hidden_vid pseudo_vid small_vid"><div class="m">ABC</div></span>`
+
+	n = `<span class="plugin_top pseudo_vid small_vid "><div class="m2 xbox">ABC</div></span>`
+
+
+	add_node(n,`#localVideoTileViewContainer`,"before")
+	n = `<span class="plugin_top"><div class="m xbox">ABC</div></span>`
+	add_node(n,`.top_toolbox,.vid_toptoolbar_hook`,"append")
+	// add_node(n,`.dev_hook`,"append")
+	add_node(n,`.button-group-right`,"prepend")
+
+	try {
+		dispatch_resize()
+	} catch {
+
+	}
+
+}
+// Add Psudo vid
+// video toolbar hook
+// window top margin
+// window window bottom toolbar
+
+
+
+function add_node(n,rn,i) {
+	$(rn)[i](n)
+	// after
+	// $(".plugin_top")
+
+
+	// body...
+
+
+}
+init_api3()
+// C:\bspace\repos\jmc\ign_kutd\m\m_api_html.js
+
+
+
+
+// div.dev_hook.top_toolbox.jdiv
+// div.dev_hook.indicator_hook.vid_toptoolbar_hook.jdiv.t0
+
+
+
+

clone/m/m_const.js

@@ -0,0 +1,146 @@
+
+
+window.m_const = {
+
+}
+
+
+window.m_const.exclude = Symbol("exclude")
+window.m_const.include = Symbol("include")
+// window.m_const.exclude = Symbol("include")
+
+
+
+// glob_react.Filmstrip._getThumbs = function (onlyVisible = false) {
+_getThumbs_mod_junk = function (onlyVisible = false) {
+        // let selector = 'span';
+
+        // console.log("crnr flm getThumbs",!!(window.log_tb))
+        // console.log("crnr flm getThumbs",this,this.filmstripRemoteVideos)
+        // window.log_tb ? log_tb(new Error(),"getThumbs") : 0
+        
+
+        // console.trace("getThumbs_tb")
+        let selector = '.remote_vid,.pseudo_vid';
+        selector = window.glob_sel || selector;
+        let filter = '';
+
+        if (onlyVisible) {
+            filter += ':visible';
+        }
+
+        // const remoteThumbs = this.filmstripRemoteVideos.children(selector);
+        // const remoteThumbs = this.filmstripRemoteVideos.find(selector);
+        const filmstripRemoteVideos =  $('#filmstripRemoteVideosContainer')
+        // const localThumb = $('#localVideoContainer');
+        // const localThumb = filmstripRemoteVideos.children('#localVideoContainer');
+        const localThumb = filmstripRemoteVideos.children("#localVideoTileViewContainer").children('#localVideoContainer');
+        // const localThumb = filmstripRemoteVideos.children($('#localVideoContainer'));
+        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).filter(filter) : filmstripRemoteVideos.find(selector);
+        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).children(filter) : filmstripRemoteVideos.children(selector);
+        const remoteThumbs = filter ? filmstripRemoteVideos.children(selector).filter(filter) : filmstripRemoteVideos.children(selector);
+        
+
+        // clog("$$$",localThumb.hasClass('hidden') ,localThumb.find(".local_vid").length,filmstripRemoteVideos.find("#localVideoContainer").length)
+        clog("$$$2",localThumb.length, (localThumb.hasClass('hidden') ,localThumb.find(".local_vid").length || filmstripRemoteVideos.find("#localVideoContainer").length))
+
+        // Exclude the local video container if it has been hidden.
+        // if (localThumb.hasClass('hidden') && ( ! (localThumb.find(".local_vid").length && filmstripRemoteVideos.find(#localVideoContainer)) ) ) {
+        // if (localThumb.hasClass('hidden') || ( ! (localThumb.find(".local_vid").length || filmstripRemoteVideos.find("#localVideoContainer")) ) ) {
+        // if (localThumb.hasClass('hidden') || ( ! (localThumb.find(".local_vid").length || filmstripRemoteVideos.find("#localVideoContainer").length) ) ) {
+        if (localThumb.hasClass('hidden') || ! localThumb.length  ) {
+            return { remoteThumbs };
+        }
+        // return { remoteThumbs };
+
+        return { remoteThumbs,
+            localThumb };
+}
+
+
+
+glob_react.Filmstrip._getThumbs_works = function (onlyVisible = false) {
+    // _getThumbs_works(onlyVisible = false) {
+        // let selector = 'span';
+
+        // console.log("crnr flm getThumbs",!!(window.log_tb))
+        // console.log("crnr flm getThumbs",this,this.filmstripRemoteVideos)
+        // window.log_tb ? log_tb(new Error(),"getThumbs") : 0
+        
+
+        // console.trace("getThumbs_tb")
+        let selector = '.remote_vid,.pseudo_vid';
+        selector = window.glob_sel || selector;
+        let filter = '';
+
+        if (onlyVisible) {
+            filter += ':visible';
+        }
+
+        const localThumb = $('#localVideoContainer');
+        // const remoteThumbs = this.filmstripRemoteVideos.children(selector);
+        // const remoteThumbs = this.filmstripRemoteVideos.find(selector);
+        const filmstripRemoteVideos =  $('#filmstripRemoteVideosContainer')
+        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).filter(filter) : filmstripRemoteVideos.find(selector);
+        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).children(filter) : filmstripRemoteVideos.children(selector);
+        const remoteThumbs = filter ? filmstripRemoteVideos.children(selector).filter(filter) : filmstripRemoteVideos.children(selector);
+
+        // Exclude the local video container if it has been hidden.
+        if (localThumb.hasClass('hidden')) {
+            return { remoteThumbs };
+        }
+
+        return { remoteThumbs,
+            localThumb };
+
+    }
+
+
+
+ glob_react.Filmstrip._getThumbs_buggy = function(onlyVisible = false) {
+    // _getThumbs(onlyVisible = false) {
+        // let selector = 'span';
+
+        // console.log("crnr flm getThumbs",!!(window.log_tb))
+        // console.log("crnr flm getThumbs",this,this.filmstripRemoteVideos)
+        // window.log_tb ? log_tb(new Error(),"getThumbs") : 0
+        
+
+        // console.trace("getThumbs_tb")
+        let selector = '.remote_vid,.pseudo_vid';
+        selector = window.glob_sel || selector;
+        let filter = '';
+
+        if (onlyVisible) {
+            filter += ':visible';
+        }
+
+        // const remoteThumbs = this.filmstripRemoteVideos.children(selector);
+        // const remoteThumbs = this.filmstripRemoteVideos.find(selector);
+        const filmstripRemoteVideos =  $('#filmstripRemoteVideosContainer')
+        // const localThumb = $('#localVideoContainer');
+        // $("#filmstripLocalVideoThumbnail > *")
+        // const localThumb = filmstripRemoteVideos.children("#localVideoTileViewContainer").children('#localVideoContainer');
+        // const localThumb = filmstripRemoteVideos.children("#localVideoTileViewContainer").children('#localVideoContainer');
+        const localThumb = $("#filmstripRemoteVideosContainer > #localVideoTileViewContainer,#filmstripLocalVideoThumbnail").children('#localVideoContainer');
+
+
+        // const localThumb = filmstripRemoteVideos.children($('#localVideoContainer'));
+        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).filter(filter) : filmstripRemoteVideos.find(selector);
+        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).children(filter) : filmstripRemoteVideos.children(selector);
+        const remoteThumbs = filter ? filmstripRemoteVideos.children(selector).filter(filter) : filmstripRemoteVideos.children(selector);
+
+        // Exclude the local video container if it has been hidden.
+        // if (localThumb.hasClass('hidden') && ( ! (localThumb.find(".local_vid").length && filmstripRemoteVideos.find(#localVideoContainer)) ) ) {
+        if (localThumb.hasClass('hidden')  || ! localThumb.length )  {
+            return { remoteThumbs };
+        }
+
+        return { remoteThumbs,
+            localThumb };
+
+    }
+
+
+// glob_react.Filmstrip._getThumbs = glob_react.Filmstrip._getThumbs_works
+// glob_react.Filmstrip._getThumbs = glob_react.Filmstrip._getThumbs_buggy

clone/m/m_req.js

@@ -0,0 +1,135 @@
+
+window.ifn_obj =  window.ifn_obj || {	init_conf_join:[], }
+
+function get_mod(participants){
+	if (!participants){
+	participants = get_participants()
+	}
+	var k,v
+	for (v of participants){
+		if (v.role == "moderator"){
+			clog("cui_mod_cd",[v],v.corner_data)
+			return v
+		}
+	}
+}
+function get_participants(){
+	return APP.store.getState()["features/base/participants"]
+}
+function get_local(participants){
+	if (!participants){
+	participants = get_participants()
+	}
+	var k,v
+	for (v of participants){
+		if (v.local){
+			return v
+		}
+	}
+	return APP.store.getState()["features/base/participants"]
+}
+function amimod() {
+	try {
+	return get_local().role == "moderator"
+	} catch (e) {
+		console.error("AM I MOD ERR: is evrything inited?",e)
+		// clog("AM I MOD ERR: is evrything inited?",e)
+	}
+}
+
+
+
+function Someone_Left_Handler(o){
+	delete msto.participants[o.action.participant.id]
+}
+
+
+// reflow all your filmstrips
+function Someone_Left_or_Joined_Handler(o){
+	try {
+		APP.store.dispatch(window.glob_react.video_layout.setTileView(false))
+		APP.store.dispatch(window.glob_react.rf_filmstrip.setFilmstripVisible(false))
+		if (! $("#vspace_filmstrip_template").length){
+		    init_api6()
+		}
+			refresh_toolbars()
+			mod_sort()
+			new_move()
+			dispatch_resize()
+	} catch(err) {
+		console.error("Someone_Left_or_Joined_Handler err:", err)
+	}
+}
+
+
+
+
+
+// dispay moderator toolbar if you become moderator
+window.iammod = window.iammod || false
+function amimodnow(){
+	var iammod = amimod()
+	window.iammod = iammod
+	if (iammod){
+		refresh_toolbars()
+	}
+}
+
+
+
+
+// run init callbacks after CONFERENCE_JOINED
+function cji(){
+	if (window.init_m){
+		// setTimeout(window.init_m())
+	}
+	if (ifn_obj && ifn_obj.init_conf_join){
+		var k,v
+		for ([k,v] of Object.entries(ifn_obj.init_conf_join)){
+			v()
+		}
+	}
+}
+
+
+
+// safe to remove
+function stv(o,ta){
+	clog(o,ta)
+}
+
+
+// this is called with setTimeout so we can throw errors without wrecking everything
+function dev_middleware_listner(o) {
+	if (!o.action.type){
+		return
+	}
+	// if (o.action.type != "ENDPOINT_MESSAGE_RECEIVED"){
+		// CONFERENCE_JOINED
+	// clog("QXI",o.action.type)
+	// }
+
+
+	
+	switch(o.action.type){
+		case "PARTICIPANT_UPDATED":
+			window.iammod ? 0 : amimodnow()
+
+		break;
+		case "PARTICIPANT_LEFT":
+			setTimeout(Someone_Left_Handler,1,o)
+			// setTimeout(Someone_Left_Handler,1000,o)
+		case "PARTICIPANT_JOINED":
+			setTimeout(Someone_Left_or_Joined_Handler,1,o)
+			// setTimeout(Someone_Left_or_Joined_Handler,300,o)
+		break;
+		// case "SET_TILE_VIEW":
+		// stv(o,[this,arguments])
+		break;
+		case "CONFERENCE_JOINED":
+			setTimeout(cji,1)
+		break;
+
+	}
+}
+

clone/m/m_utils.js

@@ -0,0 +1,713 @@
+
+// This file creates and syncs msto
+// msto is a recursive proxy that synchronizes itself between all meeting participants
+// you can get a clone of the object by typing jc(msto) into your dev console 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+if (!window.glob_mx ){
+	window.glob_mx={}
+
+glob_mx.prom = {}
+glob_mx.event_handlers = {}
+glob_mx.cb = {
+	init_db:{}
+}
+glob_mx.filmstrip_handlers  = {}
+//glob_mx.filmstrip_handlers = glob_mx.filmstrip_handlers || {}
+
+}
+
+
+
+function match(mx,m,o){
+	var k,v,k2,v2
+	var r = 0
+		// clog("@",mx,m,o)
+	for ([k,v] of Object.entries(m || {})){
+		v2 = o[k]
+    // clog("M~",k,typeof(v),typeof(v2),v,v2)
+		if (typeof(v) == "string" && typeof(v2) == "string") {
+			r += !(v==v2)
+		} else if (Array.isArray(v) && Array.isArray(v2)){
+			r += !(isSubset_arr(v,v2))
+		} else if (Array.isArray(v) && typeof(v2) == "string"){
+      // r += !(isSubset_arr(v2,v))
+      r += !v.includes(v2)
+			// clog("!!!!!!!!!!!!!",v,v2,isSubset_arr(v2,v))
+		} else if (Array.isArray(v2) && typeof(v) == "string"){
+			r += !(v2.includes(v))
+		}
+		if (r){
+			return !r
+		}
+	}
+	return !r
+}
+
+
+function isSubset(subset,superset){
+    for (var elem of subset) {
+        if (!superset.includes(elem)) {
+            return false;
+        }
+    }
+    return true;  
+}
+
+function isSubset_arr(subset,superset){
+    for (var elem of subset) {
+    	if (Array.isArray(elem)){
+
+    		if (!new Set(elem).intersection(superset).size){
+    			return false
+    		}
+    	} else if (!superset.includes(elem)) {
+            return false;
+        }
+    }
+    return true;  
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function dispatch_events(e,key){
+	var k,v
+	e.parsed.etype ? 1 : e.parsed.etype = "null"
+	var mflag =0
+		clog("dispatch_events??",e,key)
+
+	for ([k,v] of Object.entries(glob_mx.event_handlers || {}) ) {
+		clog("dispatch_events:",k)
+		if (v.m){
+			mflag = match({},v.m,e.parsed)
+		mflag ? v.fn(e) : 1
+		}
+	}
+}
+
+
+function run_cbs(key){
+	var k,v
+		clog("RUN_CB??",key,glob_mx.cb[key])
+
+	for ([k,v] of Object.entries(glob_mx.cb[key]|| {}) ) {
+		clog("RUN_CB:",k)
+		v()
+	}
+}
+
+
+
+
+
+
+function wait(ms) {
+  return new Promise(r => setTimeout(r, ms));
+}
+
+function attr_info(n){
+	var k,v
+	var ret ={}
+	// clog(".")
+	for (k in n.attributes){
+		// clog(k)
+	}
+	// clog("~")
+	for (k of n.attributes){
+	// for (k of n.attributes){
+		// clog(k)
+	}
+	// clog("--")
+	for ([k,v] of Object.entries(n.attributes)){
+		// clog(k,v,v+"+")
+		// clog("+",[k,v],v)
+		ret[v.name]= v.value
+		// clog(typeof(k),typeof(v))
+	}
+	return ret
+
+
+}
+
+
+
+
+
+
+// ai.from.split((a0,a1,a2,a3)=>{clog({a0,a1,a2,a3});return "z"})
+// tmsgx3({type:"db_sync_request"})
+function mhndlr_rld(that,m){
+	try {
+		window.mx=m
+		var n = m.querySelector(`code`)
+		if (!n){return}
+		var parsed = JSON.parse(n.innerHTML)
+		var ai = attr_info(m)
+		window.ai=ai
+		// clog("FROM",ai.from == glob_mx.all_jids[0])
+		// var id = ai.from.split().slice(-1)[0]
+		var id = ai.from.split("/").pop()
+
+		clog("mhndlr_rld2",m,parsed,n,n.dataset)
+		var o = parsed.payload
+		switch (parsed.type){
+			case "set_msg":
+				pf._set_recv(o.path,o.key,o.val)
+			break;
+			case "event":
+				clog("~event~",parsed)
+				dispatch_events({parsed,ai,m,that})
+			break;
+			case "msg_test":
+				clog("msg_test",parsed)
+			break;
+			case "db_sync_request":
+				// tmsgx3({type:"db_sync_response",payload:pf.root})
+				tmsgx3({type:"db_sync_response",payload:pf.root},{to:ai.from})
+				
+				clog("db_sync_request",parsed)
+			break;
+			case "db_sync_response":
+				if (id == glob_mx.local_id){
+					clog( "db_sync_response ...")
+					break
+
+				}
+					if (glob_mx.prom.init_db_resolve){
+						glob_mx.prom.init_db_resolve({aaa:"dsr",pl:parsed.payload})
+
+					}
+
+				clog("db_sync_response",ai.from == glob_mx.local_id,ai.from,parsed)
+			break;
+
+		}
+		/*
+
+
+		if (parsed.type == "set_msg"){
+			var o = parsed.payload
+			pf._set_recv(o.path,o.key,o.val)
+		} 
+		if (parsed.type == "msg_test"){
+			clog("msg_test",parsed)
+		} 
+		*/
+
+	} catch (err) {
+		clog("mhndlr err:",err)
+	}
+	return true
+}
+
+isProxy = Symbol("isProxy")
+
+
+tlu = {
+	object:"",
+	string:true,
+	number:true,
+	undefined:true,
+	boolean:true,
+}
+
+
+
+function type_info(o){
+	var t 
+	var flags = {
+		leaf:false,
+		deep_not_prx:false,
+		prx:false,
+		isObj:false,
+		isArr:false,
+		els:false,
+	}
+	t = typeof(o)
+	flags.t=t
+	if (!(o === null)){
+		flags.isArr = Array.isArray(o)
+		flags.isObj = Object.prototype == o.__proto__
+	}
+
+	if (tlu[t] === true || o === null){
+		flags.leaf = true
+	} else if (t == "object" && o.__prx){
+		flags.prx = true
+	} else if (t == "object" && (flags.isArr || flags.isObj)){
+		flags.prx = false
+		flags.deep_not_prx = true
+	} else {
+		clog("ELSE")
+		flags.els = true
+	}	
+
+	return flags
+
+	clog(t,flags)
+}
+
+
+
+
+
+function deep_prop(o,p){
+	try {
+	var arr = jc(p)
+	var ret = o
+	while (arr.length){
+		// clog("deep_prop",arr,ret)
+		ret = ret[arr.shift()]
+	}
+	// clog("deep_prop ret",ret)
+	return ret
+	} catch(err){console.error("DEEP_PROP ERR:",err)}
+}
+
+
+
+
+delete Proxy_Factory
+{
+
+class Proxy_Factory {
+	constructor(o,n="dflt"){
+		this.db = o
+		this.n = n
+		this.hidden_props = ["add_proxy","_set","walker","walker_start","prxy","_sett","_sett2"]
+		this._pub_cb =[]
+		this.__prx = true
+		this.SymPrx = Symbol("SymPrx")
+	}
+	init(o){
+		// clog("BP",this,this.baseProp,this.__proto__.baseProp,window.baseProp)
+		this.root = o
+	}
+	sync(o){
+		this.root = jc(o.root)
+		o._pub_cb.push(this._set_recv.bind(this))
+	}
+	get prxy(){
+		return this
+	}
+
+	_set(o,k,v,prx,a0){
+		this.obj[k]=prx
+	}
+
+	_sett(o,k,v,prx,a0){
+		clog("_SETT",this,arguments)
+	}
+	_sett2(o,k,v,prx,a0){
+		clog("_SETT2",this,arguments)
+	}
+
+	set_pub(obj, prop, val,receiver){
+		// clog("qia_pub",obj, prop, val,receiver)
+		// clog("qia_pub2",this.n,obj.__path_arr, prop, jx(val))
+		this._set_pub(obj.__path_arr, prop, jx(val))
+
+	}
+	_set_pub(path,key,val){
+		var k,v
+					// /*
+
+			tmsgx({
+				"type":"set_msg",
+				"payload":{path,key,val},
+			},"code")
+			//		*/
+		for (v of this._pub_cb){
+			v(path,key,val)
+
+		}
+	}
+
+	_set_recv(path,prop,val){
+		// return
+		var p = path
+		var nprop =deep_prop(this.root,p)
+		var dpth = nprop.__dpth
+		if (tlu[typeof(val)]){
+		nprop._set(nprop,prop,val,val)
+		} else {
+		nprop._set(nprop,prop,val,new Proxy(val,this))
+		nprop[prop].add_proxy(nprop,prop,val,dpth+1)
+		}
+		// var tf = {}
+		// this.walker(nprop[prop],tf,dpth+2)
+		this.walker(nprop[prop],{},dpth+2)
+	}
+
+	set(obj, prop, val,receiver){
+		// clog("prx_db set ",this,obj, prop, val,receiver,val.__prx)
+		if (obj[prop] === val){
+			return Reflect.set(...arguments)
+		}
+
+		this.set_pub(obj, prop, val,receiver)
+		this.event_proc("set")
+		
+		if ("__prx" == prop){
+			this.__prx=val
+			return this.__prx
+		}
+
+		if (typeof(val) === "object" && val != null && !(val.__prx)){
+			var ret = Reflect.set(...arguments)
+			this.set_obj(obj, prop, val,receiver)
+			return ret
+		} 
+
+		return Reflect.set(...arguments)
+	}
+	get(obj, prop,receiver){
+		// clog("prx_db get ...",prop==isProxy,this,obj, prop,receiver)
+		if (this.hidden_props.includes(prop)){
+			switch (prop){
+				case "add_proxy":
+				return this.add_proxy.bind(this)
+			break;
+				case "prxy":
+				return this
+				case "_set":
+				// clog("_SET")
+				// return this._set.bind({this})
+				return this._set.bind({that:this,obj, prop,receiver})
+				case "_sett":
+				return this._sett.bind({that:this,obj, prop,receiver})
+				case "_sett2":
+				return this._sett2.bind({that:this})
+				case "walker_start":
+				return this.walker_start
+				case "walker":
+				return this.walker
+			break;
+			}
+		}
+
+		if (isProxy == prop){ return true }
+		if ("__prx" == prop){ return this.__prx }
+
+		return Reflect.get(...arguments)
+	}
+	add_proxy(o,k,v,dpth){
+		// clog("~add_proxy~",o,k,v,dpth)
+		// clog("~add_proxy~",o.__prx,o,k,v,dpth,xpath)
+		var xpath = o.__path
+		var apath = o.__path_arr
+		this.event_proc("add_proxy")
+		if (!apath){
+			apath=[]
+		}
+
+		if (!xpath){
+			xpath="ROOT!"
+		}
+
+		Object.defineProperty(v,"__path_arr",Object.assign({value:apath.concat(k),},this.baseProp))
+		Object.defineProperty(v,"__path",Object.assign({value:xpath+":"+k,},this.baseProp))
+		Object.defineProperty(v,"__dpth",Object.assign({value:dpth,},this.baseProp))
+
+	}
+	set_obj(obj, prop, val,receiver){
+		var dpth = obj.__dpth
+		var tf = {}
+		this.walker(receiver,tf,dpth)
+	}
+
+	walker(o,tfo,dpth=0){
+		clog("qia WALK",this)
+		if (dpth > 7){
+			console.error("MAX DEPTH")
+			return
+		}
+		var k,v
+		var tf 
+			for ([k,v] of Object.entries(o)){
+				tf = type_info(v)
+				if (tf.deep_not_prx){
+					o._set(o,k,v,new Proxy(v,this.prxy))
+					o[k].add_proxy(o,k,v,dpth)
+				this.walker(o[k],tf,dpth+1)
+				}
+			}
+	}
+	walker_start(o,dpth){
+		var tf = type_info(o)
+		o.add_proxy({},[],o,-1)
+		this.walker(o,tf,0)
+	}
+	event_proc(e){}
+}
+window.Proxy_Factory = Proxy_Factory
+
+Proxy_Factory.prototype.baseProp={
+	writable: true,
+	// enumerable: true,
+	enumerable: false,
+	configurable: true,
+	}
+}
+
+
+function arr_match(m,o){
+	var k,v
+	var r = 0
+	for ([k,v] of Object.entries(m || {})){
+		if (o[k] != v.valueOf()){
+			r += 1
+			return !r
+		}
+
+	// for ([k,v] in m){
+		// case 
+		clog(k,v)
+	}
+	return !r
+}
+
+permissions_def = {
+	participants:{
+		m:["participants"],
+		fn(set_scope,match){
+
+
+			clog("FN....",match.fp,match.fp[1] == window.glob_mx.local_id)
+			if (match.fp[1] != window.glob_mx.local_id)
+				throw "permission err"
+			return 
+		},
+	}
+}
+// 
+// msto.my_data.prxy.__proto__.__proto__.set.call(msto.my_data.prxy,msto.participants,"abc2",{})
+permissions_def__set = {
+	participants:{
+		m:["participants"],
+		fn(set_scope,match){
+
+
+			clog("FN....",match.fp,match.fp[1] == window.glob_mx.local_id)
+			if (match.fp[1] != window.glob_mx.local_id)
+				// throw "permission err"
+			return 
+		},
+	}
+}
+
+
+{
+	class Proxy_Permissions extends Proxy_Factory {
+		constructor(a,a1){
+			super(...arguments)
+		}
+		set(obj, prop, val,receiver){
+			clog("PRX_PERM",obj.__path_arr,prop)
+			var k,v
+			var r
+			var matched 
+			var fp = obj.__path_arr.concat(prop)
+			for ([k,v] of Object.entries(permissions_def)){
+				matched = arr_match(v.m,fp)
+				if (matched){
+					r = v.fn({that:this,obj, prop, val,receiver},{fp,k,v}) || {}
+				}
+				// if (r.return)
+			}
+			// case
+			// if (obj.__path_arr && obj.__path_arr.length){}
+			super.set(obj, prop, val,receiver)
+		}
+		_set(){
+			clog("Proxy_Permissions _set")
+			super._set(...arguments)
+		}
+	}
+	window.Proxy_Permissions = Proxy_Permissions
+}
+
+
+msto_z = {
+	// private_local:{},
+	// participant_local:{},
+	conference:{},
+	participants:{
+	},
+}
+
+
+
+
+
+function pfnf(o){
+	return  function(resolve, reject){
+		o.resolve=resolve
+		o.reject=reject
+		// clog(arguments)
+	}
+}
+
+
+
+
+
+
+
+
+function init_db_cb(){
+}
+function init_sync_participant(){
+}
+function init_db(objx){
+		var obj
+	if (objx.participants){
+		obj = objx
+	} else {
+		obj = objx.pl
+	}
+	// var obj = obj.pl
+	clog("INIT DB...",objx,obj)
+pf = new Proxy_Permissions({},"pf")
+msto_prx = new Proxy(obj,pf)
+window.msto_prx0 =msto_prx
+// msto_prx = new Proxy(msto_z,pf)
+pf.init(msto_prx)
+msto_prx.walker_start(msto_prx)
+
+pf.root.participants[glob_mx.local_id] = {}
+
+
+window.msto= {
+	participants:pf.root.participants,
+	conference:pf.root.conference,
+	my_data:pf.root.participants[glob_mx.local_id],
+	private_local:{},
+}
+// var k,v
+clog("RUN_CB...")
+run_cbs("init_db")
+}
+
+function init_mu(persistent_mods){
+	// .role == "moderator"
+		clog(">>>>>>>>>>>>>>>>>>>.. RUN_CB")
+var participants = get_participants()
+clog(participants)
+
+
+
+
+var local = get_local(participants)
+	if (window.glob_mx.local_id && persistent_mods && local.role=="moderator"){
+		// if window.glob_mx.local_id
+		clog("no RUN_CB")
+
+		return
+	}
+window.glob_mx.local_id = local.id
+var k,v
+window.glob_mx.all_ids = []
+window.glob_mx.all_jids = []
+for (v of participants){
+	window.glob_mx.all_ids.push(v.id)
+	window.glob_mx.all_jids.push(`nnnx@conference.jfidev.com/${v.id}`)
+}	
+	var rr = {}
+	var prom1 = new Promise(pfnf(rr));
+	prom1.then(init_db)
+	// setTimeout(rr.reject,2000,"RESP DB Timeout")
+	// setTimeout(rr.resolve,4000,"RESP DB Timeout")
+	// setTimeout(rr.resolve,4000,msto_z)
+	// setTimeout(rr.resolve,4000,{aaa:"timedout",pl:msto_z})
+	setTimeout(rr.resolve,5000,{aaa:"timedout",pl:msto_z})
+
+	if (participants.length > 1){
+	glob_mx.prom.init_db_resolve = rr.resolve
+		tmsgx3({type:"db_sync_request"})
+
+	} else {
+		// glob_mx.prom.init_db_resolve(msto_z)
+		rr.resolve(msto_z)
+	// init_db()
+
+	}
+}
+
+
+
+
+function create_db(){
+	
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+function isident(){
+	return JSON.stringify(pf.root) == JSON.stringify(pf2.root)
+}
+
+
+
+function init_mu_runner(){
+	if (window.glob_mx.conf_joined){
+		init_mu(...arguments)
+	}
+}
+
+
+function init_mx2(){
+	clog("INITMX3")
+	window.glob_mx.conf_joined =1
+	init_mu_runner()
+	// add_handler_m(mhndlr)
+}
+ifn_obj.init_conf_join.push(init_mx2)
+
+// init_mu_runner("auto")
+init_mu_runner("")
+
+

clone/m/mdev.js

@@ -0,0 +1,418 @@
+
+
+
+
+
+
+
+
+o = {a:2,b:3}
+
+// Object.defineProperties()
+Object.defineProperty(o,"b",{
+	enumerable:false,
+})
+Object.defineProperty(o,"c",{
+	enumerable:false,
+})
+Object.defineProperty(o,"d",{
+	// enumerable:false,
+})
+
+zxc2 = Object.getOwnPropertyDescriptors (o)
+// zxc2.a.enumerable=false
+
+
+
+ 
+function okv(obj) {
+	var k,v
+	for ([k,v] of Object.entries(obj))
+	// body...
+	clog("!",k,v)
+}
+
+cnt = 0
+
+
+
+prxt = {
+	set:function(obj, prop, val,receiver){
+		clog("prxt set ",obj, prop, val,receiver)
+		return
+
+		return Reflect.set(...arguments)
+	},
+	get:function(obj, prop,receiver){
+
+
+
+
+
+		
+		if (window.cnt){
+		window.cnt+=1
+		clog("prxt get ret",cnt,prop)
+			return
+		}
+		window.cnt+=1
+		clog("prxt get",obj, prop,receiver)
+		// clog("prxt get",prop)
+		// clog("prxt get")
+		return
+
+		return Reflect.get(...arguments)
+	},
+	// __prx:true,
+	// rec:
+
+}
+
+
+
+
+delete obsObj
+{
+
+class obsObj {
+	constructor(o){
+		this.db = o
+	}
+	_pub_msg(m){
+		clog("ixi PUB MSG",m)
+	}
+	_rec_msg(that,m){
+		clog("ixi REC MSG2",m)
+	}
+	__noSuchMethod__(){
+		clog("__lookupGetter__~",arguments)
+	}
+}
+window.obsObj = obsObj
+glob_mx.obsobj =new obsObj({})
+glob_mx.obsobj2 =new obsObj({})
+}
+
+
+glob_mx.obsobj.__proto__ = new Proxy(glob_mx.obsobj.__proto__,prxt)
+
+delete Magic
+{
+
+class Magic {
+    constructor () {
+        return new Proxy(this, this);
+    }
+    get (target, prop) {
+        return this[prop] || 'MAGIC';
+    }
+}
+window.Magic = Magic
+glob_mx.magic =new Magic({})
+glob_mx.magic2 =new Magic({})
+// glob_mx.magic3 =new Magic({})
+}
+// __lookupGetter__
+
+// function replacer(a0,a1,a2,a3,a4){
+hdn = [
+"__path_arr",
+"__path",
+"__dpth",
+]
+
+function replacer(key,val){
+	// clog("REP",key,val,this)
+	var v,k
+	if (typeof(val) == "object" && val != null){
+		// val._add="Z"
+		v = Object.assign({},val)
+		for (k of hdn){
+			v[k] = val[k]
+		}
+		return v
+	}
+	return val
+	// return a0
+}
+
+
+function jh(o){
+	return JSON.parse(JSON.stringify(o, replacer))
+}
+
+
+s1 ={a:{b:{c:3}}}
+// JSON.stringify({a:{b:{c:3}}}, replacer)
+// JSON.stringify({}, replacer)
+// JSON.stringify({a:{b:{c:3}}}, replacer)
+// JSON.stringify({}, replacer[, space]])
+// 
+m = {}
+m.m0 = {
+	// k:["z2"]
+}
+m.m1 = {
+	k:["z2","z3"]
+}
+m.m2 = {
+	k:["z3"]
+}
+// m.
+
+
+function isSubset(subset,superset){
+    for (var elem of subset) {
+        if (!superset.includes(elem)) {
+            return false;
+        }
+    }
+    return true;  
+}
+
+function isSubset_arr(subset,superset){
+    for (var elem of subset) {
+    	if (Array.isArray(elem)){
+
+    		if (!new Set(elem).intersection(superset).size){
+    			return false
+    		}
+    	} else if (!superset.includes(elem)) {
+            return false;
+        }
+    }
+    return true;  
+}
+
+
+function sym_info(o){
+	var k,v 
+	for ([k,v] of Object.entries(syms)){
+		// clog(k,v)
+		clog(k,o[v])
+	}
+}
+
+function art(m,o){
+	var k,v
+	var r = 0
+	var ret = {}
+	var md =Object.getOwnPropertyDescriptors(m)
+
+	for ([k,v] of Object.entries(md)){
+		if (typeof(v.value) == "symbol"){
+			r+=1
+			ret[k]=v.value
+		}
+
+
+	// for ([k,v] in m){
+		// case 
+		clog(k,typeof(v.value),v.value,[v])
+	}
+	return {cnt:r,o:ret}
+}
+syms = art(Symbol).o
+
+function match(mx,m,o){
+	var k,v,k2,v2
+	var r = 0
+		// clog("@",mx,m,o)
+	for ([k,v] of Object.entries(m || {})){
+		v2 = o[k]
+    // clog("M~",k,typeof(v),typeof(v2),v,v2)
+		if (typeof(v) == "string" && typeof(v2) == "string") {
+			r += !(v==v2)
+		} else if (Array.isArray(v) && Array.isArray(v2)){
+			r += !(isSubset_arr(v,v2))
+		} else if (Array.isArray(v) && typeof(v2) == "string"){
+      // r += !(isSubset_arr(v2,v))
+      // r += !(isSubset_arr(v2,v))
+      r += !v.includes(v2)
+			// clog("!!!!!!!!!!!!!",v,v2,isSubset_arr(v2,v))
+		} else if (Array.isArray(v2) && typeof(v) == "string"){
+			r += !(v2.includes(v))
+		}
+		if (r){
+			return !r
+		}
+	}
+	return !r
+}
+
+
+// clog("m1,m2",match({},m.m1,m.m2))
+// clog("m2,m1",match({},m.m2,m.m1))
+
+// clog("m2,m0",match({},m.m2,m.m0))
+// clog("m0,m2",match({},m.m0,m.m2))
+
+
+a = ["A","B","C"]
+a1 = ["A","B",,"D"]
+a1[-1]="z"
+a1["q"]="z2"
+s2 = "str2"
+
+r1 = [/a\d/,/b[a-z]\d/]
+
+delete Str
+{
+
+class Str extends String {
+	// constructor(o){
+		// super(o)
+	// }
+	/*
+		this.db = o
+	}
+	_pub_msg(m){
+		clog("ixi PUB MSG",m)
+	}
+	_rec_msg(that,m){
+		clog("ixi REC MSG2",m)
+	}
+	*/
+}
+window.Str = Str
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function gpt(){
+	try {
+	clog("gx gpt",get_participants)
+	clog("gx gpt2",get_participants())
+
+	}	catch (err) {
+
+	clog("gx gpt err:",err)
+	}
+}
+
+gpt()
+
+
+
+{
+
+class QString extends String {
+    isEmpty() {
+        return this.length === 0;
+    }
+    concat(){
+      return new QString(this + Array.prototype.join.call(arguments, ''));
+    }
+}
+
+var testQStr1 = new QString("abc");
+var testQStr2 = new QString("as easy as");
+var testQStr3 = new QString("123");
+var testStr3 = new String("123");
+
+console.log(testQStr1,testQStr1 == "abc");
+test1 = testQStr1.concat(testQStr2,testQStr3);
+console.log(test1,test1=="abcas easy as123");
+
+
+
+
+}
+
+
+
+
+
+
+
+
+
+
+function switch_t(m,o){
+	// var t 
+	// var flags = {
+	// 	leaf:"??",
+	// 	prx:"??",
+	// }
+	// t = typeof(o)	
+	// t=o
+	// var s1 = t
+	// var s2 = 2
+	// var s0 = [s1,s2]
+	// switch (...s0){
+	switch (o[0],o[1]){
+		case m[0][0],m[0][1]:
+		clog("m0")
+	break;
+		case  m[1][0],m[1][1]:
+		clog("m1")
+		clog(m[1][0],m[1][1],":",o[0],o[1])
+		// clog("~MX~","tlu")
+	break;
+	default:
+		clog("default")
+
+	}
+}
+o1 = []
+m1 = [[],[]]
+function wait(ms) {
+  return new Promise(r => setTimeout(r, ms));
+}
+pfn1= async function(resolve, reject) {
+	clog("RESV")
+  // resolve('Success!');
+	window.pfn1_cb = function(/*resolve, reject*/) {
+  resolve('Success!');
+	}
+	await wait(3000)
+	
+	reject("TIMED_OUT")
+}
+pfn2=  function(resolve, reject) {
+	clog("RESV")
+  resolve({zzz:'Success!'});
+
+
+}
+
+prm ={}
+
+// prm.resolve("zzz")
+// promise1 = new Promise(pfn1);
+
+
+promise1 = new Promise(pfnf(prm));
+
+setTimeout(prm.reject,3000,"ST REJ")
+
+	clog("and then")
+promise1.then(function(value) {
+  console.log(this,value,arguments);
+  // expected output: "Success!"
+});
+
+promise1.then(function(value) {
+  console.log("this,value,arguments");
+  // expected output: "Success!"
+});
+
+promise1.catch(function(value) {
+  console.log("REJECT",this,value,arguments);
+  // expected output: "Success!"
+});
+	clog("and then...")
+
+
+prm.resolve("11111zzz","zzzzzzz")

clone/m/moveto.js

@@ -0,0 +1,60 @@
+
+
+
+
+
+mhndlr_opt_x_all = {
+	cstr:"?",
+	ns:"jabber:client",
+	// name:"message",
+	type:"groupchat",
+	handler:allevnt,
+	// isMatch:rtrue2,
+	// run:rtrue3,
+	// namespaceMatch:rtrue,
+
+
+}
+
+function allevnt(a0,a1,a2,a3,a4){
+	// clog("MH! allevnt")
+	setTimeout(window.allevnt_rld,1,this,a0,a1,a2,a3,a4)
+	return true
+}
+function rld_room(room){
+	clog("rld_room...",room)
+	window.location.assign(room)
+}
+function allevnt_rld(a0,a1,a2,a3,a4){
+	var msg = a1.querySelector(`body`)
+	if (!msg){
+		return
+	}
+	var msg_txt = msg.innerHTML 
+	if (msg_txt.startsWith("moveto=")){
+		var room = msg_txt.split("=").pop()
+		if (room){
+	var _from = a1.getAttribute("from").split("/").pop()
+	if (get_local().id == _from){
+		rld_room(room)
+	} else {
+		setTimeout(rld_room,2000,room)
+
+	}
+
+		}
+
+	} 
+	return true
+}
+
+
+
+function init_mx(){
+	clog("INITMX moveto")
+	// add_handler_m(mhndlr_opt_x)
+	add_handler_m(mhndlr_opt_x_all)
+}
+
+ifn_obj.init_conf_join.push(init_mx)
+

clone/m/timer/m.css

@@ -0,0 +1,145 @@
+
+.abs {
+	background: #0080;
+	position: absolute;
+	z-index: 100;
+	top:0;
+	left:0;
+	right: 0;
+	bottom: 0;
+	margin: inherit;
+}	
+
+
+
+
+.icont {
+	/*background: #0ff8;*/
+
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+
+
+.xbox {
+	width: 25px;
+	height: 25px;
+	/*color: #0000;*/
+	color: #000;
+	background: #0ff;
+	background-image: linear-gradient(to top left, #ff8 50%, #0ff 50%);
+}
+
+.xbox2 {
+	width: 25px;
+	height: 25px;
+	position: relative;
+	position: absolute;
+	color: #000;
+	background-image: linear-gradient(to top left, #ff8 50%, #0ff 50%);
+}
+
+
+
+.small_vid .xbox:after,.small_vid .xbox2:after{
+/*.xbox:after,.xbox2:after{*/
+	content: "???";
+	z-index: 0;
+	white-space: pre-wrap;
+	content: var(--v_index,":???:") "\A" var(--v_id,":???:");
+	background-color: #fff;
+	position:absolute;
+	top: 0;
+	width: 75px;
+	height: 45px;
+	left: 0;
+	/*right: 0;*/
+	/*bottom: 0;*/
+}
+
+
+.xbox.m2s {
+	width: 75px;
+	height: 75px;
+
+	width: 100%;
+	height: 100%;
+
+	background: #ff8;
+	background-image: linear-gradient(to top left, #ff8 50%, #0ff 50%);
+
+
+}
+
+
+
+
+.pseudo_vid {
+	background-color: #f00;
+	background-image: linear-gradient(to top left, #ff8 50%, #0ff 50%);
+}
+
+
+.tile-view .pseudo_vid,.vertical-filmstrip .pseudo_vid{
+	background-size:contain;
+	/*border: 2px solid transparent !important;*/
+	margin:4 5px;
+	width: 100%;
+}
+
+.small_vid {
+	display: block;
+}
+.pseudo_vid {
+	/*display: none;*/
+	position: relative;
+	/*position: absolute;*/
+}
+
+
+
+.vspace {
+	position: absolute;
+	/*height: 500px;*/
+	height: 100%;
+	width: 100%;
+	/*width: calc(100% - 4px);*/
+	width: calc(100% );
+	width: calc(100% - 4px);
+	/*background-color: #555;*/
+	height: calc(100% - 4px);
+	border-radius: 100px;
+
+}
+
+
+.m4 {
+	width: 50px;
+	height: 50px;
+	top: 200px;
+	left: 10px;
+	z-index: 100; 
+	position: relative;
+	background-color: #00f;
+}
+
+
+
+
+.cont {
+	/*position: relative;*/
+	position: absolute;
+
+}
+
+.toolbox-background{
+	z-index: 100 !important;
+}
+
+
+
+.c6 {
+	overflow-x: scroll;
+}

clone/m/timer/m.html

@@ -0,0 +1,156 @@
+
+
+
+
+
+
+
+HI THIS is AN HTML SNIPIT
+
+
+<!-- <div class="mp1">abc</div>
+<div class="mp2">def</div> -->
+
+
+
+
+<span class="plugin_top abs filmstrip_template"><div class="dev_filmstrip">
+	<span class="cont c1">
+		<div class="icont ic1"></div>
+	</span>
+	<span class="cont c2">
+		<div class="icont ic2"></div>
+	</span>
+	<span class="cont c3">
+		<div class="icont ic3"></div>
+	</span>
+</div></span>
+
+
+
+
+<span id="vspace_filmstrip_template0" class="plugin_top abs2"><div class="dev_filmstrip">
+	<span class="cont c1">
+		<div class="icont ic1 vid_container" data-fs_type="vertical" data-fs_handler="vertical"></div>
+	</span>
+	<span class="cont c2">
+		<div class="icont ic2 vid_container" data-fs_type="horizontal" data-fs_handler="horizontal"></div>
+	</span>
+	<span class="cont c3">
+		<div class="icont ic3 vid_container" data-fs_type="vertical" data-fs_handler="vertical"></div>
+	</span>
+	<span class="cont c6">
+		<div class="icont ic6 vid_container" data-fs_type="horizontal" data-fs_handler="horizontal"></div>
+	</span>
+	<span class="cont c5">
+		<div class="icont ic5 vid_container" data-fs_type="single" data-fs_handler="center"></div>
+		<div class="at a1"></div>
+		<div class="at a2"></div>
+		<div class="at a3"></div>
+		<div class="at a4"></div>
+	</span>
+	<span class="cont c4">
+		<div class="icont ic4 vid_container" data-fs_type="single"></div>
+	</span>
+</div></span>
+
+
+
+
+
+
+
+
+
+
+
+<!-- 
+<input type="checkbox" name="">
+ -->
+
+
+
+
+
+
+
+
+
+<span id="vspace_filmstrip_template" class="plugin_top abs2"><div class="dev_filmstrip">
+	<span class="fs_container">
+	<span class="cont c2">
+		<div class="icont ic2 vid_container" data-fs_type="vertical" data-fs_handler="vertical"></div>
+	</span>
+	<span class="cont c1">
+		<div class="icont ic1 vid_container" data-fs_type="horizontal" data-fs_handler="horizontal"></div>
+	</span>
+	<span class="cont c3">
+		<div class="icont ic3 vid_container" data-fs_type="vertical" data-fs_handler="vertical"></div>
+	</span>
+	<span class="cont c6">
+		<div class="icont ic6 vid_container" data-fs_type="horizontal" data-fs_handler="horizontal"></div>
+	</span>
+	<!-- 
+	<span class="cont c5">
+		<div class="icont ic5 vid_container" data-fs_type="single" data-fs_handler="center"></div>
+		<div class="at a1"></div>
+		<div class="at a2"></div>
+		<div class="at a3"></div>
+		<div class="at a4"></div>
+	</span>
+	 -->
+	<span class="cont c4">
+		<div class="icont ic4 vid_container" data-fs_type="single" data-fs_handler="center"></div>
+	</span>
+	</span>
+</div></span>
+
+
+
+
+
+
+
+
+
+<span id="vspace_filmstrip_proto_template" class="plugin_top abs2"><div class="dev_filmstrip">
+	<!-- 
+	<span class="cont c1">
+		<div class="icont ic1 vid_container" data-fs_type="vertical"></div>
+	</span>
+	<span class="cont c2">
+		<div class="icont ic2 vid_container" data-fs_type="horizontal"></div>
+	</span>
+	<span class="cont c3">
+		<div class="icont ic3 vid_container" data-fs_type="vertical"></div>
+	</span>
+	 -->
+
+	<span class="cont c5">
+		<!-- <div class="icont ic5 vid_container" data-fs_type="single"></div> -->
+		<div class="at a1"></div>
+		<div class="at a2"></div>
+		<div class="at a3"></div>
+		<div class="at a4"></div>
+		<div class="at a5"></div>
+		<div class="at a6"></div>
+		<div class="at a7"></div>
+		<div class="at a8"></div>
+
+
+
+		<div class="at at2 b1"></div>
+		<div class="at at2 b2"></div>
+		<div class="at at2 b3"></div>
+		<div class="at at2 b4"></div>
+		<div class="at at2 b5"></div>
+		<div class="at at2 b6"></div>
+		<div class="at at2 b7"></div>
+		<div class="at at2 b8"></div>
+
+
+	</span>
+	<span class="cont c4">
+		<!-- <div class="icont ic4 vid_container" data-fs_type="single"></div> -->
+	</span>
+</div></span>

clone/m/timer/m.js

@@ -0,0 +1,278 @@
+
+// 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_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 = `<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(){
+    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()
+    
+    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()
+
+
+}
+
+
+
+
+
+/*
+// 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()
+
+}
+

clone/m/timer/m0.js

@@ -0,0 +1,755 @@
+
+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 = 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.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()
+    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 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))
+    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()
+
+}

clone/m/timer/mod_de_utils.js

@@ -0,0 +1,16 @@
+
+function get_hook_types(){
+	var j = $(".dev_hook")
+	var ret = {}
+	var ret = new Map()
+	var k,v
+	for (k of j){
+		v = "."+[...k.classList].join(".")
+		ret.setD(v,0)
+		// ret.get(v) + 1
+		ret.set(v,ret.get(v) + 1)
+		// clog("~",k)
+	}
+	return ret
+
+}

clone/preload.js

@@ -0,0 +1,168 @@
+
+
+// this file sets up global vars to load react functions
+
+
+
+
+
+// clog = console.log
+// function nop(){}
+
+glob_dev_hooks = window.glob_dev_hooks || {}
+glob_dev_fns = window.glob_dev_fns || {}
+window.glob_react = window.glob_react || {i:"r0"}
+
+
+
+orig_classes = window.orig_classes || {}
+react_trc_log = window.react_trc_log || {}
+react_trc_log = window.react_trc_log || {}
+
+TILE_ASPECT_RATIO = 16 / 9;
+
+
+
+
+glob_dev_fns.getTileViewGridDimensions_set_num = function(state,maxColumns,onumberOfParticipants){
+	// return
+	clog("SET NUM PRT")
+	var numberOfParticipants
+	// if (window.glob_dev_fns && window.glob_dev_fns.ret0){return onumberOfParticipants}
+		try {
+    var thumbs = glob_react.Filmstrip._getThumbs()
+			
+// numberOfParticipants = thumbs.remoteThumbs.length + thumbs.localThumb  thumbs.localThumb.length
+numberOfParticipants = thumbs.remoteThumbs.length 
+if (thumbs.localThumb){
+numberOfParticipants += thumbs.localThumb.length 
+
+}
+		} catch(e) {
+			clog("getTileViewGridDimensions_set_num err:",e)
+			return onumberOfParticipants
+
+		}
+	// clog("getTileViewGridDimensions_set_num ret:",numberOfParticipants,thumbs,onumberOfParticipants)
+	// numberOfParticipants < onumberOfParticipants ? numberOfParticipants = onumberOfParticipants : 1
+	// clog("getTileViewGridDimensions_set_num ret2:",numberOfParticipants,thumbs,onumberOfParticipants)
+	// clog("NUM",numberOfParticipants)
+return numberOfParticipants
+
+
+}
+
+
+// below are debug and trace utilities 
+
+window.glob_dbg = window.glob_dbg || {
+	log:{},
+	logs:{},
+}
+
+
+
+
+function log_tb(err,key){
+	var key
+	try{
+
+	key in window.glob_dbg.logs ? 1 : window.glob_dbg.logs[key]=[]
+	// key in window.glob_dbg.log ? 1 : window.glob_dbg.log[key]=[]
+	window.glob_dbg.logs[key].push(err.stack)
+	// window.glob_dbg.log[key].push(err)
+	// clog("LOG_TB",key,err)
+	} catch (e){
+		clog("LOG TB",key,"ERR:",e)
+	}
+	// return new Error()
+}
+
+function clone_class() {
+	var k,v,p 
+	if (orig_classes.SmallVideoOrig){
+		return
+	}
+	orig_classes.SmallVideoOrig = {}
+	for ([k,p] of Object.entries(Object.getOwnPropertyDescriptors(SmallVideoOrig.prototype))) {
+		v=p.value
+		orig_classes.SmallVideoOrig[k]=v
+	}
+
+}
+
+
+
+
+function loop_vids(vids = $(".small_vid")){
+	clog("vids",vids)
+	var k,v
+	// for (k in [...vids]){
+	for (k of vids){
+		clog("..",k)
+	}
+}
+
+
+function log_info0(key){
+	var ret = new Map()
+	var k,v
+	var arr
+	for (v of glob_dbg.log[key]){
+		ret.setD(v.stack,0)
+		ret.set(v.stack,ret.get(v.stack) + 1)
+		arr = v.stack.split("\n")
+		clog(arr[2])
+
+		// v.
+		// clog(k,v)
+	}
+	return ret
+
+}
+
+
+function log_info(key,line_num=2,num_lines=1){
+	var ret = new Map()
+	var ret1 = new Map()
+	var line 
+	var k,v
+	var arr
+	for (v of glob_dbg.logs[key]){
+		ret.setD(v,0)
+		ret.set(v,ret.get(v) + 1)
+		arr = v.split("\n")
+		// clog(arr[3])
+		// clog(arr[2])
+		// line = arr[line_num]
+		line = arr.slice(line_num,line_num+num_lines).join("\n")
+		// if ("an")
+		if (line.includes("anony")){
+
+		} else {
+			// continue
+		}
+
+		// clog(line)
+		ret1.setD(line,0)
+		ret1.set(line,ret1.get(line) + 1)
+
+		// v.
+		// clog(k,v)
+	}
+	return ret1
+
+}
+
+
+function map_loop(m){
+	var k,v
+	for ([k,v] of m){
+		clog(k,v)
+	}
+}
+
+
+
+
+// XMPPAttachInfo.data = {atr:"modme"}

clone/proto_ext.js

@@ -0,0 +1,91 @@
+Map.prototype.setD = function(k,v){
+	if (!this.has(k)){
+		this.set(k,v)
+		// clog("SetD")
+		return 1
+	}
+		// clog("SetD0")
+}
+
+Set.prototype.isSuperset = function(subset) {
+    for (var elem of subset) {
+        if (!this.has(elem)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+Set.prototype.union = function(setB) {
+    var union = new Set(this);
+    for (var elem of setB) {
+        union.add(elem);
+    }
+    return union;
+}
+
+Set.prototype.intersection = function(setB) {
+    var intersection = new Set();
+    for (var elem of setB) {
+        if (this.has(elem)) {
+            intersection.add(elem);
+        }
+    }
+    return intersection;
+}
+
+Set.prototype.difference = function(setB) {
+    var difference = new Set(this);
+    for (var elem of setB) {
+        difference.delete(elem);
+    }
+    return difference;
+}
+
+
+
+
+
+
+
+
+
+
+Set.prototype.union_update = function(setB) {
+    var union = this;
+    for (var elem of setB) {
+        union.add(elem);
+    }
+    return union;
+}
+
+Set.prototype.intersection_update = function(setB) {
+    var intersection = this
+    for (var elem of setB) {
+        if (!this.has(elem)) {
+            intersection.delete(elem);
+        }
+    }
+    return intersection;
+}
+
+Set.prototype.difference_update = function(setB) {
+    var difference = this;
+    for (var elem of setB) {
+        difference.delete(elem);
+    }
+    return difference;
+}
+
+/*
+Set.prototype.symDifference = function(setB) {
+    var difference = new Set(this.union(setB));
+     var intersection = new Set(this.intersection(setB));
+    for (var elem of intersection) {
+        difference.delete(elem);
+    }
+    return difference;
+}
+*/
+
+console.log("test")

clone/r0.css

@@ -0,0 +1,84 @@
+
+
+
+#filmstripRemoteVideos{
+overflow-x: auto !important;
+
+}
+
+.hidden_vid {
+	position: relative;
+	/*position: absolute;*/
+	width:     80px !important;
+	min-width: 80px !important;
+	display: none;
+
+}
+
+
+.overlay {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	outline: 2px solid #0ff;
+	background-color: #ff08;
+	background-color: #0ff8;
+	/*z-index: 351;*/
+}
+
+
+
+
+
+.top_toolbox {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	height: 100px;
+	background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(71,71,71,0));
+	background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(71,71,71,0));
+
+}
+
+
+
+
+
+
+.new-toolbox .toolbox-content  .audio-preview .toolbox-button{
+	    margin-left:  0px;
+
+}
+.new-toolbox .toolbox-content  .video-preview .toolbox-button{
+	    margin-right: 0px;
+
+}
+
+.new-toolbox .toolbox-content .toolbox-button{
+	    margin-right: 4px;
+	    margin-left:  4px;
+}
+.button-group-right {
+	width: 25% !important;
+}
+.button-group-left{
+	width: 25% !important;
+}
+.button-group-center {
+	width: 50% !important;
+}
+
+
+.subject {
+	background-image:unset;
+	text-align: unset;
+	padding-left: 75px;
+	padding-right: 75px;
+
+}
+.env_info {
+	position: absolute;
+	/*display: none;*/
+}

clone/r0.js

@@ -0,0 +1,287 @@
+// clog = console.log
+// function nop(){}
+
+glob_dev_hooks = window.glob_dev_hooks || {}
+glob_dev_fns = window.glob_dev_fns || {}
+window.glob_react = window.glob_react || {i:"r0"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function wt(a1,a2){
+	var c = 0
+	var cmx = 10
+	clog(a1 < a2,a1 > a2)
+	while (a1 < a2){
+		c += 1
+		clog(".",c)
+		if (cmx < c){clog("r",c);return}
+
+	}
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function FS_dec2(fn) {
+  return function() {
+  	// dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    clog("SVD",{ret,that:this,args:[...arguments]})
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+  	// const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	// if (ret2){
+  		// return ret2.ret
+  	// }
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    return ret;
+  }
+}
+
+
+// svop = jc(SmallVideoOrig.prototype)
+// svop = jc(SmallVideoOrig)
+// svop = Object.assign({},glob_react.Filmstrip)
+// svop = Object.assign({},SmallVideoOrig.prototype)
+// function save_orig()
+orig_classes = window.orig_classes || {}
+react_trc_log = window.react_trc_log || {}
+react_trc_log = window.react_trc_log || {}
+window.react_trc_log.SmallVideoTrc0= ["$avatar",
+ "_setThumbnailSize",
+ "bindHoverHandler",
+ "initBrowserSpecificProperties",
+ "_renderDisplayName",
+ "$avatar",
+ "initializeAvatar",
+ "_getAudioLevelContainer",
+ "_getAudioLevelContainer",
+ "updateAudioLevelIndicator",
+ "addAudioLevelIndicator",
+ "updateIndicators",
+ "isCurrentlyOnLargeVideo",
+ "_isHovered",]
+
+
+
+
+
+react_trc_log.SmallVideoTrc = ["_renderDisplayName",
+"_setThumbnailSize",
+"showDominantSpeakerIndicator",
+"setVideoMutedView",
+"initBrowserSpecificProperties",
+"bindHoverHandler",
+"addAudioLevelIndicator",]
+
+
+
+glob_dev_fns.getTileViewGridDimensions_set_num = function(state,maxColumns,onumberOfParticipants){
+	// return
+	// clog("SET NUM PRT")
+	var numberOfParticipants
+	// if (window.glob_dev_fns && window.glob_dev_fns.ret0){return onumberOfParticipants}
+		try {
+    var thumbs = glob_react.Filmstrip._getThumbs()
+			
+// numberOfParticipants = thumbs.remoteThumbs.length + thumbs.localThumb  thumbs.localThumb.length
+numberOfParticipants = thumbs.remoteThumbs.length 
+if (thumbs.localThumb){
+numberOfParticipants += thumbs.localThumb.length 
+
+}
+		} catch(e) {
+			clog("getTileViewGridDimensions_set_num err:",e)
+			return onumberOfParticipants
+
+		}
+	// clog("getTileViewGridDimensions_set_num ret:",numberOfParticipants,thumbs,onumberOfParticipants)
+	// numberOfParticipants < onumberOfParticipants ? numberOfParticipants = onumberOfParticipants : 1
+	// clog("getTileViewGridDimensions_set_num ret2:",numberOfParticipants,thumbs,onumberOfParticipants)
+	// clog("NUM",numberOfParticipants)
+return numberOfParticipants
+
+
+}
+
+
+
+
+window.glob_dbg = window.glob_dbg || {
+	log:{},
+	logs:{},
+}
+
+
+
+
+
+
+
+function log_tb(err,key){
+	var key
+	try{
+
+	key in window.glob_dbg.logs ? 1 : window.glob_dbg.logs[key]=[]
+	// key in window.glob_dbg.log ? 1 : window.glob_dbg.log[key]=[]
+	window.glob_dbg.logs[key].push(err.stack)
+	// window.glob_dbg.log[key].push(err)
+	// clog("LOG_TB",key,err)
+	} catch (e){
+		clog("LOG TB",key,"ERR:",e)
+	}
+	// return new Error()
+}
+
+
+
+
+
+
+
+
+
+
+
+
+function clone_class() {
+	var k,v,p 
+	if (orig_classes.SmallVideoOrig){
+		return
+	}
+	orig_classes.SmallVideoOrig = {}
+	for ([k,p] of Object.entries(Object.getOwnPropertyDescriptors(SmallVideoOrig.prototype))) {
+		v=p.value
+		orig_classes.SmallVideoOrig[k]=v
+	}
+
+}
+clog("R0...",window.SmallVideoOrig)
+
+function loop_proto(){
+	var k,v,p 
+	for ([k,p] of Object.entries(Object.getOwnPropertyDescriptors(SmallVideoOrig.prototype))) {
+		// clog("~",k,v)
+		v=p.value
+		clog("~",k,typeof(v))
+		if (typeof(v) == "function"){
+		SmallVideoOrig.prototype[k] = FS_dec2(v)
+
+		}
+
+	}
+}
+
+
+
+
+
+
+
+function loop_vids(vids = $(".small_vid")){
+	clog("vids",vids)
+	var k,v
+	// for (k in [...vids]){
+	for (k of vids){
+		clog("..",k)
+	}
+}
+
+
+function log_info0(key){
+	var ret = new Map()
+	var k,v
+	var arr
+	for (v of glob_dbg.log[key]){
+		ret.setD(v.stack,0)
+		ret.set(v.stack,ret.get(v.stack) + 1)
+		arr = v.stack.split("\n")
+		clog(arr[2])
+
+		// v.
+		// clog(k,v)
+	}
+	return ret
+
+}
+
+
+function log_info(key,line_num=2,num_lines=1){
+	var ret = new Map()
+	var ret1 = new Map()
+	var line 
+	var k,v
+	var arr
+	for (v of glob_dbg.logs[key]){
+		ret.setD(v,0)
+		ret.set(v,ret.get(v) + 1)
+		arr = v.split("\n")
+		// clog(arr[3])
+		// clog(arr[2])
+		// line = arr[line_num]
+		line = arr.slice(line_num,line_num+num_lines).join("\n")
+		// if ("an")
+		if (line.includes("anony")){
+
+		} else {
+			// continue
+		}
+
+		// clog(line)
+		ret1.setD(line,0)
+		ret1.set(line,ret1.get(line) + 1)
+
+		// v.
+		// clog(k,v)
+	}
+	return ret1
+
+}
+
+
+function map_loop(m){
+	var k,v
+	for ([k,v] of m){
+		clog(k,v)
+	}
+}
+
+
+
+
+// XMPPAttachInfo.data = {atr:"modme"}

clone/r1.js

@@ -0,0 +1,41 @@
+
+// make the App think you resized the window
+function dispatch_resize(store = APP.store) {
+        // store.dispatch(clientResized_dev(innerWidth, innerHeight));
+        store.dispatch({
+        type: "CLIENT_RESIZED",
+        clientHeight:innerHeight,
+        clientWidth:innerWidth,
+    });
+        // clog("dispatch_resize")
+}
+
+// unused old fn to add pseudo videos
+function add_spans(n=1,xtra=0){
+	var s = `
+	<span class="pseudo_vid videocontainer"></span>
+	`
+	$(".pseudo_vid").remove()
+	if (!xtra){
+	n = n - APP.store.getState()["features/base/participants"].length
+	}
+	var k,v
+	for (var i = 0; i < n; i++) {
+		// Things[i]
+		clog("..",i)
+	$("#filmstripRemoteVideosContainer").append(s)
+	}
+	dispatch_resize()
+}
+
+
+
+
+
+
+fs_dec_list = [
+"resizeThumbnailsForHorizontalView",
+"resizeThumbnailsForVerticalView",
+// "resizeThumbnailsForTileView",
+]
+dec_fns = {}

clone/r2.js

@@ -0,0 +1,220 @@
+
+// this file contains decorator functions
+
+
+
+
+
+
+function FS_dec(fn) {
+  return function() {
+  	dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+    console.log('FSD',fn.name);
+    console.trace('FSD_trc  '+fn.name);
+    // log_tb()
+    window.log_tb(new Error(),fn.name)
+  	const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	if (ret2){
+  		return ret2.ret
+  	}
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    return ret;
+  }
+}
+
+
+
+
+
+// if ((!window.glob_orig) && ){
+
+// }
+
+// glob_react.rf_filmstrip.calculateThumbnailSizeForTileView
+
+// calculateThumbnailSizeForTileView
+
+dec_fns = {
+	resizeThumbnailsForTileView:{
+		pre:function(){
+			// console.trace("resizeThumbnailsForTileView")
+
+		},
+		post:function(){
+
+		},
+
+	}
+}
+
+
+function rt(w,h = 0,force = true){
+	h ? 0 : h = w / (16/9)   
+	glob_react.Filmstrip.resizeThumbnailsForTileView(w,h,force)
+}
+
+function dec_fs2(){
+	var k,v
+	glob_react.rf_filmstrip.calculateThumbnailSizeForTileView = FS_dec(glob_react.rf_filmstrip.calculateThumbnailSizeForTileView)
+
+	// for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		// clog("~",k,v.name)
+		// glob_react.Filmstrip[k] = FS_dec(v)
+	// }
+
+}
+
+
+
+function dec_fs(){
+	var k,v
+	for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		clog("~",k,v.name)
+		glob_react.Filmstrip[k] = FS_dec(v)
+		// glob_react.Filmstrip[k] = v
+	}
+
+}
+fs_dec_list = [
+"resizeThumbnailsForHorizontalView",
+"resizeThumbnailsForVerticalView",
+// "resizeThumbnailsForTileView",
+]
+
+function undec_fs(){
+	var k,v
+	for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		// clog("~",k,v.name)
+		// glob_react.Filmstrip[k] = FS_dec(v)
+		glob_react.Filmstrip[k] = v
+	}	
+}
+
+
+
+modkeys =  ["calculateThumbnailSizeForTileView",
+"TILE_VIEW_SIDE_MARGINS",
+"SET_TILE_VIEW_DIMENSIONS",]
+
+// glob_react.rf_filmstrip
+function check_mod_keys(){
+	var k
+	for (k of modkeys){
+		clog(k,glob_react.rf_filmstrip[k])
+	}
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function log_info3(o){
+	var i,k,v
+	for ([k,v] of o.ret3){
+		if (v.fn.size >= 3){
+			clog(k,v)
+		}
+	}
+}
+function log_info2(key,line_num=2,num_lines=1){
+	var ret = new Map()
+	var ret2 = new Map()
+	var ret3 = new Map()
+	var ret4 = new Map()
+	// var ret = new Map()
+	var i,k,v
+	var i2,k2,v2
+	var i3,k3,v3
+	var i4,k4,v4
+	var line 
+	var arr
+	key = 2
+	// var 
+
+	// for ([k,v] of Object.values(glob_dbg.logs)){
+	// for (v of [...Object.values(glob_dbg.logs)]){
+	for ([k,v] of Object.entries(glob_dbg.logs)){
+		// clog([k,v])
+		for (v2 of v){
+			ret.setD(v2,{c:0,fn:k})
+			i = ret.get(v2)
+			i.c += 1
+			// ret.set(v2,ret.get(v2) + 1)
+		}
+	}
+	for ([k,v] of ret){
+		arr = k.split("\n")
+		i =  ret.get(k)
+		// k2 = i.fn: arr[key]
+		k2 = `${i.fn}: ${arr[key]}`
+		ret2.setD(k2,{c:0})
+		i2 =  ret2.get(k2)
+		i2.c += i.c
+
+
+		for ([k3,v3] of Object.entries(arr)){
+			// clog(k3,v3)
+			v4 = k3 + ": " +v3
+			ret4.setD(v4,{fn:new Set()})
+
+			ret3.setD(v3,{fn:new Set()})
+			i3 = ret3.get(v3)
+			i3.fn.add(i.fn)
+		}
+
+
+	}
+	clog(ret2)
+
+
+	return {ret,ret2,ret3,ret4}
+	var ret1 = new Map()
+	var line 
+	var arr
+	for (v of glob_dbg.logs[key]){
+		ret.setD(v,0)
+		ret.set(v,ret.get(v) + 1)
+		arr = v.split("\n")
+		// clog(arr[3])
+		// clog(arr[2])
+		// line = arr[line_num]
+		line = arr.slice(line_num,line_num+num_lines).join("\n")
+		// if ("an")
+		if (line.includes("anony")){
+
+		} else {
+			// continue
+		}
+
+		// clog(line)
+		ret1.setD(line,0)
+		ret1.set(line,ret1.get(line) + 1)
+
+		// v.
+		// clog(k,v)
+	}
+	return ret1
+
+}
+// clog(log_info3(log_info2()))
+// clog(log_info2())

clone/react_fn.js

@@ -0,0 +1,183 @@
+
+
+/*
+these functions are slighty modified versions of their react counterparts
+*/
+
+
+
+
+
+
+
+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,},
+    });
+}
+}
+
+
+
+
+

clone/resize_hook.js

@@ -0,0 +1,354 @@
+
+
+// these functions allow you to decorate react classes
+// they should be rewriten so you can handle any class
+
+
+
+
+
+
+function FS_dec_resize(fn) {
+  return function() {
+    clog("rtscv0",glob_react.Filmstrip._getThumbs())
+    resize_filmstrips(this,fn.name,arguments)
+  	dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    resize_filmstrips2(this,fn.name,arguments)
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+    // console.log('FSD',fn.name);
+    
+    // console.trace('FSD_trc  '+fn.name);
+    // log_tb()
+    // window.log_tb(new Error(),fn.name)
+    clog("rtscv1",glob_react.Filmstrip._getThumbs())
+    resizeThumbnailsForCustomView(this,fn.name,arguments)
+  	const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	if (ret2){
+  		return ret2.ret
+  	}
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    clog("rtscv2",glob_react.Filmstrip._getThumbs())
+    return ret;
+  }
+}
+function FS_dec_proto(fn,fn_name) {
+  return function() {
+    clog("fdp0",fn_name,glob_react.Filmstrip._getThumbs())
+    dec_fns[fn_name] && dec_fns[fn_name].pre ? dec_fns[fn_name].pre({that:this, arguments}) : 1
+    if (fn_name == "updateDOMLocation") {
+      this.updateDOMLocation2()
+    }
+    const ret = fn.apply(this, arguments);
+    // console.log('FSD',fn_name,ret, [this,...arguments]);
+    // console.log('FSD',fn_name);
+    
+    // console.trace('FSD_trc  '+fn_name);
+    // log_tb()
+    // window.log_tb(new Error(),fn_name)
+    // clog("rtscv1",glob_react.Filmstrip._getThumbs())
+    // resizeThumbnailsForCustomView(this,fn_name,arguments)
+    clog("fdp2",fn_name,glob_react.Filmstrip._getThumbs())
+    const ret2 = dec_fns[fn_name] && dec_fns[fn_name].post ? dec_fns[fn_name].post({that:this, arguments}) : 0
+    if (ret2){
+      return ret2.ret
+    }
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    // clog("rtscv2",glob_react.Filmstrip._getThumbs())
+    return ret;
+  }
+}
+
+
+
+function undec_fs(){
+  var k,v
+  for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+  // for ([k,v] of Object.entries(glob_react.Filmstrip)){
+    // clog("~",k,v.name)
+    // glob_react.Filmstrip[k] = FS_dec(v)
+    glob_react.Filmstrip[k] = v
+  } 
+}
+
+
+function undec_class(){
+  var k,v
+  var proto = glob_orig.vidClass.LocalVideo
+  // var proto = glob_react.vidClass.LocalVideo.prototype
+  // for ([k,v] of iter_desc(proto)){
+  for ([k,v] of Object.entries(proto)){
+    // glob_react.Filmstrip[k] = v
+    // clog(k,v)
+    glob_react.vidClass.LocalVideo.prototype[k] = v.value
+    // clog(k,v)
+  } 
+}
+
+
+
+
+function dec_fs_proto(){
+  var k,v
+  save_orig()
+  undec_class()
+  var proto = glob_orig.vidClass.LocalVideo
+  for ([k,v] of Object.entries(proto)){
+    // glob_react.Filmstrip[k] = v
+    // glob_react.vidClass.LocalVideo.prototype[k] = FS_dec_proto(v)
+    glob_react.vidClass.LocalVideo.prototype[k] = FS_dec_proto(v.value,k)
+    // clog(k,v)
+  } 
+  // glob_react.vidClass.LocalVideo.prototype.updateDOMLocation = updateDOMLocation
+  glob_react.vidClass.LocalVideo.prototype.updateDOMLocation = updateDOMLocation2
+  // updateDOMLocation
+  /*
+  for (k of fs_dec_list){
+    clog("~",k)
+    v = glob_orig.Filmstrip[k]
+    glob_react.Filmstrip[k] = FS_dec_resize(v)
+  }
+  */
+  return
+  for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+  // for ([k,v] of Object.entries(glob_react.Filmstrip)){
+    // clog("~",k,v.name,v)
+    clog("~",k,v.name)
+    // glob_react.Filmstrip[k] = FS_dec(v)
+  }
+
+}
+
+
+function dec_fs_resize(){
+  var k,v
+  save_orig()
+  undec_fs()
+  dec_fs_proto()
+
+  for (k of fs_dec_list){
+    clog("~",k)
+    v = glob_orig.Filmstrip[k]
+    glob_react.Filmstrip[k] = FS_dec_resize(v)
+  }
+  return
+  for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+  // for ([k,v] of Object.entries(glob_react.Filmstrip)){
+    // clog("~",k,v.name,v)
+    clog("~",k,v.name)
+    // glob_react.Filmstrip[k] = FS_dec(v)
+  }
+
+}
+
+
+
+
+
+
+function test_thumbs(){
+  var ret = glob_react.Filmstrip._getThumbs()
+  clog(ret)
+  return ret
+
+}
+
+
+
+function updateDOMLocation2() {
+        clog("updateDOMLocation2",this,arguments)
+        // this._updateVideoElement();
+        clog("UDL 00")
+        // return
+        // if (!this.container || !this.container.parentElement) {
+        if (!this.container ) {
+            return;
+        }
+        // dev trc 
+        // ...
+
+        clog("UDL 10",this.container.parentElement)
+
+        var custom_local = 0
+        this.container.parentElement ? custom_local = this.container.parentElement.classList.contains("icont") : 0
+        if (this.container.parentElement && !custom_local) {
+            this.container.parentElement.removeChild(this.container);
+        }
+        // return
+        clog("UDL 20")
+        const appendTarget = shouldDisplayTileView(APP.store.getState())
+            ? document.getElementById('localVideoTileViewContainer')
+            : document.getElementById('filmstripLocalVideoThumbnail');
+        // if ()
+        !custom_local && appendTarget && appendTarget.appendChild(this.container);
+        clog("UDL 30")
+        clog("")
+        this._updateVideoElement();
+        clog("UDL 40")
+    }
+
+
+
+
+
+
+
+function updateDOMLocation() {
+
+        if (!this.container) {
+            return;
+        }
+        // dev trc 
+        // ...
+        if (this.container.parentElement) {
+            this.container.parentElement.removeChild(this.container);
+        }
+
+        const appendTarget = shouldDisplayTileView(APP.store.getState())
+            ? document.getElementById('localVideoTileViewContainer')
+            : document.getElementById('filmstripLocalVideoThumbnail');
+
+        appendTarget && appendTarget.appendChild(this.container);
+        this._updateVideoElement();
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function save_orig_prototype(classes){
+  var i,k,v
+  var i2,k2,v2
+  var o
+  var ret = {}
+  // o = glob_react.vidClass.LocalVideo.prototype
+  // o  = tobj
+  // o = glob_react.vidClass.LocalVideo
+  // for ([k,v] of Object.entries(glob_react.vidClass)){
+  // for ([k,v] of Object.entries(o)){
+  // for ([k2,v2] of Object.entries(glob_react.vidClass)){
+  for ([k2,v2] of Object.entries(classes)){
+      clog("...",k2)
+      ret[k2] = {}
+      o = v2.prototype
+    for ([k,v] of iter_desc(o)){
+
+      // clog(k,v)
+      ret[k2][k]=v
+      clog(k2,k,v)
+    }
+  }
+  clog("><",Object.getOwnPropertyDescriptors(o))
+  return ret
+
+}
+
+function save_orig(){
+// console.trace("SAVE-ORIG")
+glob_orig = window.glob_orig || {
+  Filmstrip:{},
+  fs:{},
+  rf_filmstrip:{},
+}
+
+
+  glob_orig.Filmstrip = Object.assign({},glob_react.Filmstrip)
+  glob_orig.fs = Object.assign({},glob_react.fs)
+  glob_orig.rf_filmstrip = Object.assign({},glob_react.rf_filmstrip)
+  glob_orig.vidClass = save_orig_prototype(glob_react.vidClass)
+  // glob_orig.vidClass.LocalVideo_proto = Object.assign({},glob_react.vidClass.LocalVideo.prototype)
+  // glob_orig.vidClass2  = jc(glob_react.vidClass)
+  // glob_orig.rf_filmstrip = Object.assign({},glob_react.rf_filmstrip)
+  save_orig = nop
+}
+
+// glob_react.vidClass.LocalVideo.prototype
+// 
+
+
+
+
+
+if (window.glob_orig){
+
+save_orig = nop
+// save_orig()
+}
+if (!window.glob_orig && window.glob_react){
+
+// save_orig = nop
+save_orig()
+}
+if (window.glob_orig && window.glob_react){
+// dec_fs()
+// dec_fs_resize()
+// save_orig = nop
+// save_orig()
+}
+
+
+
+
+
+if (window.glob_orig && window.glob_react){
+// dec_fs()
+dec_fs_resize()
+// save_orig = nop
+// save_orig()
+}
+
+
+
+
+
+function* iter_desc(o){
+  var i,k,v
+  i = 0
+  for ([k,v] of Object.entries(Object.getOwnPropertyDescriptors(o))){
+    yield [k,v]
+    i += 1
+  }
+
+}
+
+
+
+
+
+
+
+
+function glvcb(elm){
+  // clog("GLVCB",this,[...arguments])
+  try{
+  return  elm.isLocal
+
+  } catch{}
+}
+
+function get_local_vid(){
+  return glob_dev_hooks.smallvids.filter(glvcb)[0]
+
+}

clone/toy.js

@@ -0,0 +1,156 @@
+
+
+
+function fn4({c,r}){
+	clog(c,r)
+}
+
+
+
+function fn3({c,r}){
+	clog("fn3",c,r)
+	fn4(...arguments)
+}
+
+
+
+function fn2(a,b="ar2"){
+	// fn2(...arguments)
+	// parameters
+	// par
+	clog(arguments[0],arguments[1],arguments[2])
+	clog(a,b,[arguments])
+}
+
+function fn1(a,b="ar1"){
+	fn2(...arguments)
+}
+
+
+
+
+
+
+
+
+toy = {
+	dflt_obj:{
+		k1:"dflt",
+		k2:"dflt",
+		k3:"dflt",
+		k4:"dflt",
+		k5:"dflt",
+		k6:"dflt",
+	},
+	o1:{
+		k2:"abc",
+		k3:"abc2",
+		k4:"abc4",
+	},
+	arr:[
+		{
+		k2:"abc_arr",
+		k4:"arr0",
+		},
+		{
+		k3:"arr1",
+		k3:"arr1",
+		},
+	],
+
+}
+
+
+function obj_assign_arr(o,arr=[]){
+	// var ret = Object.assign({},toy.dflt_obj,o,...arr)
+	var ret = Object.assign({},toy.dflt_obj,o,arr)
+	clog(ret)
+	return ret
+}
+// calc_fs_dims()
+
+// obj_assign_arr(toy.o1,toy.arr)
+// dispatch_resize()
+
+
+
+// $("[style*='--v']")
+
+
+
+
+
+
+
+
+
+function filter(o,f=""){
+	var k,v
+	var ret = {} 
+	for ([k,v] of Object.entries(o)){
+		k.endsWith(f) ? ret[k]=v :1
+	}
+return ret
+}
+
+
+
+function dispatch_evnt(){
+	var v
+	for (v of $(".remote-video-menu-trigger")){
+		// onmouseenter
+		// var e = new MouseEvent("onmouseenter",{bubbles: true})
+		// var e = new MouseEvent("onmouseover",{bubbles: true})
+		var e = new MouseEvent("mouseover",{bubbles: true})
+		v.dispatchEvent(e)
+		// onmouseover
+		// clog([v])
+	}	
+}
+
+
+
+function disp(o){
+	APP.store.dispatch(o)
+}
+// glob_react.base_conference.setFollowMe(true)
+// disp(glob_react.base_conference.setFollowMe(true))
+// 
+
+clog('TEST')
+
+
+
+
+
+
+
+
+toy_arr = ["a","b","c","d","e","f","g",]
+toy_arr2 = []
+
+function tta(){
+	var k,v
+	var arr = toy_arr
+	delete arr[4]
+	var ret = []
+	for ([k,v] of Object.entries(arr)){
+		clog("~",k,v)
+
+	}
+}
+
+// tta()
+
+
+
+/*function rcom2(){
+	var k,v
+	var k2,v2
+	for ([k,v] of Object.entries(rldi.files) ){
+		// clog(k,v.cached == rls[k],v.cached,rls[k])
+		clog(k)
+	}
+	clog(Object.entries(rldi.files).length)
+
+}*/

clone/universals.js

@@ -0,0 +1,16 @@
+
+
+clog = console.log
+function nop(){}
+// clog = nop
+
+function rcom2(){
+	var k,v
+	var k2,v2
+	for ([k,v] of Object.entries(rldi.files) ){
+		// clog(k,v.cached == rls[k],v.cached,rls[k])
+		clog(k)
+	}
+	clog(Object.entries(rldi.files).length)
+
+}

cui5.js

@@ -0,0 +1,390 @@
+
+
+
+
+twsfn5 = window.twsfn5 || {}
+
+vc2 = {
+    key:"key",
+}
+
+
+
+
+
+
+if (!window.gws){
+    window.gws = {
+        sockets:{},
+    }
+}
+gws.twsfn5 = twsfn5
+
+// gws
+
+
+
+
+// Object.keys(twsfn5_bak)
+// Object.keys(twsfn5)
+
+// Object.keys(twsfn5_bak) +"" == Object.keys(twsfn5)+""
+
+
+
+
+function connect_helper5(){
+        var o = {  
+            // ':8943/ws/vts/'
+            // url:'wss://' + window.location.host + '/ws/vts2/' + window.roomName.toLowerCase() + '/?CONN',
+            url:'wss://' + window.location.host + ':8943/ws/vts2/' + window.roomName.toLowerCase() + '/?CONN',
+            wsfn:twsfn5,
+            name:"ws_n15",
+        }
+        clog("o",o)
+        connect_ws_arg(o)
+}
+
+
+
+
+
+// connect_ws_arg()
+
+
+        // 'wss://' + window.location.host +
+        // '/ws/vts/' + window.roomName + '/?qqAAAAAAAAAAAAAAAAA'
+
+
+
+
+    twsfn5.ts_t2x = function(data) {
+        clog("ts_t2x",data)
+        var k,v
+        for ([k,v] of Object.entries(data.obj.times)){
+            clog(k,v.t - data.obj.t0 )
+        }
+    }
+
+
+    twsfn5.ts_t0x = function(data) {
+        // clog("pub_msg",pub_msg)
+        var msg = {}
+        msg[vc2.key] = "ts_t1"
+        twsfn5.s(msg)
+    }
+
+    twsfn5.ts_test = function(data) {
+        // clog("pub_msg",pub_msg)
+        // var msg = {}
+        // msg[vc2.key] = "ts_t1"
+        // twsfn.s(msg)
+        clog("jx twsfn5.ts_test TEST")
+    }
+
+    twsfn5.pub_msg = function(data) {
+        clog("pub_msg",data)
+        // var msg = {}
+        // msg[vc2.key] = "pong"
+        // twsfn5.s(msg)
+    }
+
+
+
+
+
+
+    twsfn5.qdb_got = function(data) {
+        clog("jx qdb_data",data)
+        clog("jx qdb_got",data.obj)
+        clog(data.obj)
+    }
+
+    twsfn5.qdb_got3 = function(data) {
+        clog("jx qdb_data",data)
+        clog("jx qdb_got",data.obj)
+        clog("~jx~",data.obj.participants,data.obj.corners)
+    }
+
+    twsfn5.recv_corners = function(data) {
+        // clog("jx qdb_data",data)
+        // clog("jx qdb_got",data.obj)
+        glob_corner.corners=data.obj.corners
+        cad_ts5r()
+        clog("~jx~",data.obj.participants,data.obj.corners)
+    }
+
+    twsfn5.pingpong = function(data) {
+        // clog("VFB5 PONG2!")
+
+        var msg = {}
+        msg[vc2.key] = "pong"
+        twsfn5.s(msg)
+    }
+
+
+
+
+    twsfn5.onmessage = function(e) {
+        var recv_ts_u0 = window.performance.now()
+        var recv_ts = Date.now()
+        var recv_ts_u1 = window.performance.now()
+        // clog("VFB MSG",e)
+
+        // clog()
+        // return
+        var data = JSON.parse(e.data);
+        data.recv_ts = recv_ts
+        data.recv_ts_u0 = recv_ts_u0
+        data.recv_ts_u1 = recv_ts_u1
+        if (data.type != "pingpong"){
+            // clog("ixq twsfn5.onmessage")
+        }
+        // clog("VFB data",data)
+        // clog("WS ONMSG",data)
+        if (data.message != undefined){
+            // twsfn5.on_chat_message(data)
+        }
+        if (data.type != undefined && twsfn5[data.type]){
+            twsfn5[data.type](data,e)
+
+        } else {
+            clog("VFB data",data)
+        }
+    };
+
+    twsfn5.onopen = function(e) {
+        clog("jx ONCON...")
+        chatSocket.onopen
+        // clog("jx ONCON....")
+        // window.qdb ? onconnect : console.err("ERR no qdb")
+        // window.qdb ? window.qdb.onconnect() : console.error(" jx ERR no qdb")
+        window.qdb ? window.qdb.onconnect_2() : console.error(" jx ERR no qdb")
+        // console.error(" jx ERR test")
+        // console.error(" jx ERR test2")
+        // clog("jx ONCON... fin")
+    }
+    twsfn5.onclose = function(e) {
+        console.error('VFB2 vChat socket closed unexpectedly');
+        setTimeout(connect_helper5,1400)
+        // setTimeout(vconnect_ws,1400)
+    };
+
+
+ twsfn5.s=   function(o){
+
+        if (o.key != "pong"){
+            // clog("ixq twsfn5.send")
+        }
+
+    var vchatSocket = gws.sockets["ws_n15"]
+        // .send(JSON.stringify(o));
+        // twsfn5.s0 =
+         vchatSocket.send(JSON.stringify(o));
+    }
+
+// s =twsfn5.s
+// vconnect_ws()
+
+
+
+
+
+
+// delete qdb
+{
+
+class QDB {
+    constructor(){
+        this.db = {}
+    }
+    onconnect(){
+
+        qdb.get_corners()
+    }
+    onconnect_2(){
+        clog("JX onconnect_2")
+        // qdb.get_corners()
+        // setTimeout(this.get_corners.bind(this,1000))
+
+        setTimeout(this.get_corners.bind(this),100)
+        setTimeout(this.get_corners.bind(this),2000)
+        get_cui_html(rldi.files["cui3.html"])
+
+        // setTimeout(this.get_corners.bind(this,1000))
+        // setTimeout(this.get_corners.bind(this,))
+        // setTimeout(qdb.get_corners.bind(this,100)
+
+        // qdb.get_corners()
+    }
+
+    send(o){
+        twsfn5.s(o)
+    }
+    q(action){
+        this.send({"key":"qdb","action":action})
+
+    }
+    get_db(){
+        this.send({"key":"qdb","action":"get_db"})
+
+    }
+    get_db2(){
+        this.send({"key":"qdb","action":"get_db2"})
+
+    }
+
+    
+    set_db(){
+        this.send({"key":"qdb","action":"set_db"})
+
+    }
+
+    update(){
+
+    }
+    proc_response(data){
+        clog("jx proc_response",data)
+    }
+
+    updated(){
+
+    }
+
+    set_corners(corner_name){
+        this.send({"key":"qdb","action":"set_corners","corner_name":corner_name})
+    }
+    get_corners(corner_name){
+        clog("jx get_corners abc 123",this)
+        this.send({"key":"qdb","action":"get_corners"})
+    }
+    add_corner(corner_name){
+        this.send({"key":"qdb","action":"add_corner","corner_name":corner_name})
+    }
+    remove_corner(corner_name){
+        this.send({"key":"qdb","action":"remove_corner","corner_name":corner_name})
+    }
+    move(corner_name){
+        this.send({"key":"qdb","action":"move","corner_name":corner_name})
+    }
+
+
+    time_sync(){
+        clog("TIME SYNC")
+        // Date.now()
+
+
+        this.send({"key":"qdb","action":"time_sync","t0":Date.now(),"t0_u":window.performance.now()})
+    }
+
+    // server_ts
+
+
+
+
+
+
+
+
+}
+window.QDB = QDB
+}
+function replace_proto(){
+    window.qdb.__proto__ = QDB.prototype
+    var vchatSocket = gws.sockets["ws_n15"]
+    var wsfn = twsfn5
+
+    vchatSocket.onmessage = wsfn.onmessage
+    vchatSocket.onclose = wsfn.onclose  
+    vchatSocket.onopen = wsfn.onopen  
+
+}
+if (!window.qdb){
+    window.qdb = new QDB()
+
+} 
+
+
+
+
+window.QDB_def0 = QDB + ""
+if (window.QDB_def0 != window.QDB_def){
+    if (window.QDB_def){
+
+window.QDB_def = QDB + ""
+replace_proto()
+    }
+window.QDB_def = QDB + ""
+}
+if (window.qdb){
+    twsfn5.client_qbd = window.qdb.proc_response
+}
+
+twsfn5.get_db = function(){
+
+}
+twsfn5.server_ts = function(data,e){
+    var ts_u1 = window.performance.now()
+
+    var t1 = Date.now()
+    var t0 = data.req.t0
+    var ts = data.server_time
+    var tsx =ts * 1000
+    var ta = (t0+t1)/2
+    tsd = new Date(ts*1000)
+    t0d = new Date(t0)
+    t1d = new Date(t1)
+    td2 = ta - tsx
+    td  =  tsx - ta
+    tarr = [[t1,"t1"],[tsx,"tsx"],[t0,"t0"],[ta,"ta"],[td,"td"],[td2,"td2"]]
+    tobj = {t1,tsx,t0,ta,td,td2}
+
+    clog("ts:",t1 - data.recv_ts,ts_u1- data.recv_ts_u1,data)
+    // clog("ts:",{t0,ts,t1})
+
+    // clog("ts3:",(t0+t1)/2 - (ts *1000),t0 - t1)
+
+    t01 = t0 - t1
+    t01_u = data.req.t0_u - ts_u1
+
+    clog("ts3:",(t0+t1)/2 - tsx,t0-tsx,t1-tsx,t0 - t1)
+    if (!qdb.td){
+        qdb.td = 0
+    }
+    clog("ts4:",qdb.td - td,"~",qdb.td,td)
+    clog("ts5:",t01,t01_u)
+    qdb.td = td
+    qdb.td2 = td2
+    if (window.clock_info_draw){
+        clock_info_draw()
+    }
+
+}
+twsfn5.update_db = function(){}
+twsfn5.updated_db = function(){}
+
+
+
+
+
+function rld_continues(){
+    clog("vfb jx RC")
+    if (window.stop_flag){
+        return 
+    }
+    twsfn5.s({"key":"rld"})
+    setTimeout(rld_continues,500)
+}
+
+
+
+
+
+// connect_helper5()
+
+
+
+// setTimeout
+
+
+clog("BX5")

custom_resize.js

@@ -0,0 +1,449 @@
+clog("!")
+
+
+
+
+
+
+glob_mx.filmstrip_handlers = glob_mx.filmstrip_handlers || {}
+
+
+
+
+
+
+dflt_css = {
+
+      'padding-top': '',
+      "min-height": ``,
+      "min-width": ``,
+      width: ``,
+      height: ``,
+    
+}
+function resize_thumbs(thumbs,css){
+  const computed_css = Object.assign({},dflt_css,css)
+  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)
+
+}
+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  
+  // 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)
+
+}
+
+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
+  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)
+
+
+}
+
+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).height() * aspect) 
+  width = ($(cont).height() * aspect) - 1
+  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)
+
+
+}
+
+
+function resize_filmstrips(that,fn_name,args=[]){
+
+}
+function resize_filmstrips2(that,fn_name,args=[]){
+	
+}
+
+
+function resizeThumbnailsForCustomView(that,fn_name,args=[]){
+    const thumbs = glob_react.Filmstrip._getThumbs()
+    const all_thumbs = $(".small_vid")
+    const custom_thumbs = all_thumbs.not(thumbs.remlocThumbs)
+    const vid_containers = $(".vid_container")
+    const loose_thumbs = custom_thumbs.not(vid_containers.children())
+    var k,v 
+    for (v of vid_containers){
+      // clog(":",v,v.dataset.fs_type)
+      switch (v.dataset.fs_type){
+        case "vertical":{
+          resize_thumbs_vertical(v)
+          /*
+          resize_thumbs($(v).children(".small_vid"),{
+                  width: `${100}px`,
+                height: `${100}px`,
+          })
+          */
+          break;
+        }
+        case "horizontal":{
+          resize_thumbs_horizontal(v)
+
+          break;
+        }
+        case "single":{
+          resize_thumbs_center(v)
+
+          break;
+        }
+
+        default:{
+
+          break;
+        }
+        clog("HI")
+      }
+    }
+    // return
+    // const custom_thumbs = all_thumbs
+
+    var aspect = 16/18
+    var width = 135
+    var height = Math.round(width/aspect)
+    loose_thumbs.css({
+      'padding-top': '',
+      "min-height": `${height}px`,
+      "min-width": `${width}px`,
+      width: `${width}px`,
+      height: `${height}px`,
+    })
+
+    clog("rtscv",fn_name,[that,...args])
+
+
+}
+
+
+
+
+function calc_fs_dims0(){
+    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 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,
+    })
+
+
+    var dim_65 = glob_dev_fns.calculateThumbnailSizeForTileView_dev({
+            columns:1,
+    visibleRows:1,
+    clientWidth:avail_width,
+    clientHeight:avail_height,
+    TILE_ASPECT_RATIO:aspect_ratio_65 ,
+    verticalMargin:0,
+    // sideMargins=0,
+    // topBottomPadding:100,
+    })
+
+    var dim_64 = glob_dev_fns.calculateThumbnailSizeForTileView_dev({
+            columns:1,
+    visibleRows:1,
+    clientWidth:avail_width,
+    clientHeight:avail_height,
+    TILE_ASPECT_RATIO:aspect_ratio_64 ,
+    verticalMargin:0,
+    // sideMargins=0,
+    // topBottomPadding:100,
+    })
+    clog("~~",dim_hd)
+
+
+
+
+    resize_thumbs_proto($(".a1"),{
+        width:clientWidth,
+        height:clientHeight,
+        "--vtext":`"window"`
+    })
+    resize_thumbs_proto($(".a2"),{
+        width:avail_width,
+        height:avail_height,
+        "--vtext":`"avail"`
+    })
+
+
+    resize_thumbs_proto($(".b2"),[dim_hd,
+    	{
+    		"--vtext":`"dim_hd"`
+    	},])
+
+    resize_thumbs_proto($(".b3"),[dim_65,
+    	{
+    		"--vtext":`"dim_65"`
+    	},])
+
+    resize_thumbs_proto($(".b4"),[dim_64,
+    	{
+    		"--vtext":`"dim_64"`
+    	},])
+    let w5,h5,w53,h53,w54,h54
+    h5 = dim_hd.height/5
+    w5 = dim_hd.width/5
+
+    w53 = w5 * 3
+    h53 = h5 * 3
+    w54 = w5 * 4
+    h54 = h5 * 4
+    resize_thumbs_proto($(".a3z"),[
+    	{
+    		        width:w5,
+        height:h5,
+    		"--vtext":`"t5"`
+    	},])
+
+
+    resize_thumbs_proto($(".a4"),[
+    	{
+    		     width:dim_hd.width,
+        height:h5,
+    		"--vtext":`"top_fs"`
+    	},])
+    resize_thumbs_proto($(".a5"),[
+    	{
+    		     width:w5,
+        height:h53,
+        top:h5,
+    		"--vtext":`"left_fs"`,
+    	},])
+
+    resize_thumbs_proto($(".a6"),[
+    	{
+    		     width:w5,
+        height:h53,
+        top:h5,
+        left:w54,
+        // right:0,
+    		"--vtext":`"right_fs"`,
+    	},])
+
+    resize_thumbs_proto($(".a7"),[
+    	{
+    		     width:dim_hd.width,
+        height:h5,
+        top:h54,
+        // left:w54,
+        // right:0,
+    		"--vtext":`"bottom_fs"`,
+    	},])
+
+
+
+    // resize_thumbs_proto($(".b2"),dim_hd)
+
+
+
+}
+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 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
+
+    w53 = w5 * 3
+    h53 = h5 * 3
+    w54 = w5 * 4
+    h54 = h5 * 4
+
+
+
+
+    // 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:h5,
+
+    		"--vtext":`"left_fs"`,
+    		data:{fs_type: "vertical"},
+    	},])
+
+    resize_thumbs_proto($(".ic3"),[
+    	{
+    		     width:w5,
+        height:h53,
+        top:h5,
+        left:w54,
+        // left:0,
+        // right:0,
+    		"--vtext":`"right_fs"`,
+    		data:{fs_type: "vertical"},
+    	},])
+
+    resize_thumbs_proto($(".ic6"),[
+    	{
+    		     width:dim_hd.width,
+        height:h5,
+        top:h54,
+        left:0,
+        // left:w54,
+        // right:0,
+    		"--vtext":`"bottom_fs"`,
+    		data:{fs_type: "horizontal"},
+    	},])
+
+
+    resize_thumbs_proto($(".ic4"),[
+    	{
+    		     width:w53,
+        height:h53,
+        height:h53,
+        top:h5,
+        left:w5,
+        // left:w54,
+        // right:0,
+    		"--vtext":`"center"`,
+    		data:{fs_type: "single"},
+    	},])
+
+}
+
+
+
+function new_move(){
+	var j 
+	try {
+		j = jc(window.sorted_tiles)
+	} catch (err) {
+		clog("NEW MOVE err:",err)
+	}
+	// var j = $(".small_vid")
+	$(".ic1").append(j.splice(2,5))
+	$(".ic2").append(j.splice(0,3))
+	$(".ic3").append(j.splice(0,3))
+	$(".ic6").append(j.splice(0,5))
+	$(".ic4").append(j.splice(0,1))
+}
+
+function move_info(){
+	var j = $(".small_vid")
+	var k,v
+	for (v of j){
+		clog(v)
+	}
+	// $(".ic1").append(j.splice(2,5))
+	// $(".ic2").append(j.splice(0,3))
+	// $(".ic3").append(j.splice(0,3))
+	// $(".ic6").append(j.splice(0,5))
+	// $(".ic4").append(j.splice(0,1))
+}
+
+
+if (window.saftly_remove){
+    init_api6()
+    // calc_fs_dims0()
+    calc_fs_dims()
+    new_move()
+    // get_avail_width()
+    // clog("REZIE PROTO READY")
+}
+
+
+
+

deep_walk.js

@@ -0,0 +1,323 @@
+
+
+
+
+
+function* keyVal(obj){
+  for (let en in obj){
+    yield [en,obj[en]]
+  }
+}
+
+function* keyVal2(obj){
+  let ctr = 0
+  for (let en in obj){
+    yield [ctr++,en,obj[en]]
+  }
+}
+
+_deep_walk = {}
+_deep_walk.mx_ = 15000
+_deep_walk.mx_depth = 8
+// _deep_walk.mx_depth = 6
+_deep_walk.cnt = 0
+_deep_walk.depth = 0
+_deep_walk.skip_walk = 1
+_deep_walk.k = new Set()
+_deep_walk.stops = new Set()
+
+_deep_walk.m = new Map()
+
+_deep_walk_dflt = {
+	path:[],
+	paths:[],
+	names:[],
+}
+
+// kvt(APP.store.getState())
+
+
+function kvt(o,path=[],d=0) {
+		// clog(":",d,path.join("."))
+		_deep_walk.st ? clog(d,path.join(".")) :1
+
+	if (o.skip_walk){
+		clog("skip_walk",d ,_deep_walk.cnt)
+		_deep_walk.st = 1
+		return
+	} else if(_deep_walk.cnt > _deep_walk.mx_) {
+		clog("_deep_walk.cnt > _deep_walk.mx_")
+		return
+	} else if (d > _deep_walk.mx_depth){
+		clog("d > _deep_walk.mx_depth",_deep_walk.cnt,d)
+		return
+	}
+	// _deep_walk.cnt += 1
+
+	var k,v
+	var new_obj
+	var ometa
+	var breadth_first = []
+	for ([k,v] of keyVal(o)){
+		_deep_walk.cnt += 1
+		// clog("cntx",_deep_walk.cnt)
+ if(_deep_walk.cnt > _deep_walk.mx_) {
+		clog("_deep_walk.cnt > _deep_walk.mx_ 1")
+		return
+	}
+		if (k.includes("handler")){
+			clog(d,_deep_walk.cnt,[...path,k].join("."))
+		}
+		// clog(_deep_walk.cnt,k)
+
+		// if (typeof(v) != "object" && typeof(v) != "function"){
+
+
+
+			/*
+
+		if (typeof(v) != "object" || ( v && v.nodeName)){
+		// _deep_walk.k.add(typeof(v) === undefined ? "_undefined" : typeof(v) )
+		_deep_walk.stops.add( typeof(v) )
+
+			// return
+			continue
+		}
+			*/
+
+
+
+
+
+
+
+
+		// _deep_walk.cnt += 1
+		// new_obj = _deep_walk.m.has(o)
+		new_obj = _deep_walk.m.setD(v,jc(_deep_walk_dflt))
+		ometa = _deep_walk.m.get(v)
+		ometa.names.push(k)
+		ometa.paths.push([...path,k])
+
+		_deep_walk.k.add(k === undefined ? "_undefined" : k )
+
+
+		if (typeof(v) != "object" || ( v && v.nodeName)){
+		// _deep_walk.k.add(typeof(v) === undefined ? "_undefined" : typeof(v) )
+		_deep_walk.stops.add( typeof(v) )
+
+			// return
+			continue
+		}
+
+
+
+		
+		if (new_obj && typeof(v) == "object" && v){
+			breadth_first.push(k)
+
+			// kvt(v,[...path,k],d+1)
+		}
+
+	}
+	for ([k,v] of keyVal(o)){
+		// clog("cntx2",_deep_walk.cnt)
+ if(_deep_walk.cnt > _deep_walk.mx_) {
+		clog("_deep_walk.cnt > _deep_walk.mx_ 2")
+		return
+	}
+
+		if (breadth_first.includes(k)){
+			kvt(v,[...path,k],d+1)
+
+		}
+
+	}
+
+
+	if (!d){
+		clog("FIN!")
+	}
+
+}
+
+
+
+
+
+function kvt00(o,path=[],d=0) {
+		// clog(":",d,path.join("."))
+		_deep_walk.st ? clog(d,path.join(".")) :1
+
+	if (o.skip_walk){
+		clog("skip_walk",d ,_deep_walk.cnt)
+		_deep_walk.st = 1
+		return
+	} else if(_deep_walk.cnt > _deep_walk.mx_) {
+		clog("_deep_walk.cnt > _deep_walk.mx_")
+		return
+	} else if (d > _deep_walk.mx_depth){
+		clog("d > _deep_walk.mx_depth")
+		return
+	}
+	// _deep_walk.cnt += 1
+
+	var k,v
+	var new_obj
+	var ometa
+	var breadth_first = []
+	for ([k,v] of keyVal(o)){
+		_deep_walk.cnt += 1
+		clog("cntx",_deep_walk.cnt)
+ if(_deep_walk.cnt > _deep_walk.mx_) {
+		clog("_deep_walk.cnt > _deep_walk.mx_ 1")
+		return
+	}
+		if (k.includes("handler")){
+			clog(d,_deep_walk.cnt,[...path,k].join("."))
+		}
+		// clog(_deep_walk.cnt,k)
+
+		// if (typeof(v) != "object" && typeof(v) != "function"){
+		if (typeof(v) != "object" || ( v && v.nodeName)){
+		// _deep_walk.k.add(typeof(v) === undefined ? "_undefined" : typeof(v) )
+		_deep_walk.stops.add( typeof(v) )
+
+			// return
+			continue
+		}
+		// _deep_walk.cnt += 1
+		// new_obj = _deep_walk.m.has(o)
+		new_obj = _deep_walk.m.setD(v,jc(_deep_walk_dflt))
+		ometa = _deep_walk.m.get(v)
+		ometa.names.push(k)
+		ometa.paths.push([...path,k])
+
+		_deep_walk.k.add(k === undefined ? "_undefined" : k )
+		if (new_obj && typeof(v) == "object" && v){
+			breadth_first.push(k)
+
+			// kvt(v,[...path,k],d+1)
+		}
+
+	}
+	for ([k,v] of keyVal(o)){
+		clog("cntx2",_deep_walk.cnt)
+ if(_deep_walk.cnt > _deep_walk.mx_) {
+		clog("_deep_walk.cnt > _deep_walk.mx_ 2")
+		return
+	}
+
+		if (breadth_first.includes(k)){
+			kvt(v,[...path,k],d+1)
+
+		}
+
+	}
+
+
+	if (!d){
+		clog("FIN!")
+	}
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function kvt0(o,path=[],d=0) {
+		// clog(":",d,path.join("."))
+
+	if (o.skip_walk){
+		clog("skip_walk")
+		return
+	} else if(_deep_walk.cnt > _deep_walk.mx_) {
+		clog("_deep_walk.cnt > _deep_walk.mx_")
+		return
+	} else if (d > _deep_walk.mx_depth){
+		clog("d > _deep_walk.mx_depth")
+		return
+	}
+	// _deep_walk.cnt += 1
+
+	var k,v
+	var new_obj
+	var ometa
+	// var 
+	for ([k,v] of keyVal(o)){
+		if (k.includes("handler")){
+			clog(d,_deep_walk.cnt,[...path,k].join("."))
+		}
+		// clog(_deep_walk.cnt,k)
+
+		// if (typeof(v) != "object" && typeof(v) != "function"){
+		if (typeof(v) != "object" || ( v && v.nodeName)){
+		// _deep_walk.k.add(typeof(v) === undefined ? "_undefined" : typeof(v) )
+		_deep_walk.stops.add( typeof(v) )
+
+			// return
+			continue
+		}
+		_deep_walk.cnt += 1
+		// new_obj = _deep_walk.m.has(o)
+		new_obj = _deep_walk.m.setD(v,jc(_deep_walk_dflt))
+		ometa = _deep_walk.m.get(v)
+		ometa.names.push(k)
+		ometa.paths.push([...path,k])
+
+		_deep_walk.k.add(k === undefined ? "_undefined" : k )
+		if (new_obj && typeof(v) == "object" && v){
+
+			kvt0(v,[...path,k],d+1)
+		}
+
+	}
+	if (!d){
+		clog("FIN!")
+	}
+
+}
+
+
+
+
+
+
+
+
+
+
+function lmap(m){
+	var k,v 
+	var cnt
+	var cnt_mx
+	cnt_mx = 6000
+	var ret = {
+		types:new Set(),
+	}
+	cnt = 0
+	for ([k,v] of m){
+		cnt += 1
+		// clog(cnt,k,v)
+		ret.types.add(typeof(k))
+		if (cnt > cnt_mx){
+			clog("RET")
+
+			return
+		}
+	}
+	ret.cnt = cnt
+	ret.cnt_mx = cnt_mx
+	// clog()
+	return ret
+}

deep_walk2.js

@@ -0,0 +1,461 @@
+
+
+
+
+_deep_walk2 = {
+	mx_cnt:100,
+	cnt:0,
+	mx_depth:2,
+	m:new Map(),
+}
+
+_deep_walk_dflt2 = {
+	path:[],
+	paths:[],
+	names:[],
+	kv:[],
+	cnt:0,
+}
+
+
+function breadth_first(o,p,d){
+	var k,v,cnt,ometa
+	cnt = 0
+	for ([k,v] of o){
+	_deep_walk2.cnt +=1
+		cnt += 1
+		// _deep_walk2.m
+		_deep_walk2.m.setD(v,jc(_deep_walk_dflt))
+		ometa = _deep_walk.m.get(v)
+		ometa.names.push(k)
+		ometa.cnt += 1
+		// clog()
+
+	}
+
+}
+
+
+function get_type_proto_(o){
+	const type = typeof(o)
+	if (type !== "object"){
+		return type
+	} else if (o == null){
+		return "null"
+	}
+	try {
+		return o.__proto__
+	} catch (err){
+		console.log("get_type_proto_ err",err)
+		return "err"
+	}
+}
+
+
+vanilla_objs= new Set([get_type_proto_([]),get_type_proto_({})])
+function v_obj(type){
+	return vanilla_objs.has(type)
+	// if (vanilla_objs)
+}
+
+
+kvt_types = new Set()
+
+
+
+
+
+// rdeep(_deep_dev,window,{},0)
+
+
+
+function should_i_stop(that,o,meta,d){
+	if (d > that.mx_depth){
+		clog("init stop","depth",that.mx_cnt,d)
+		that.stop = 1
+	} else {
+		// clog("mx~",d > that.mx_depth,d , that.mx_depth)
+	}
+
+	if (that.cnt > that.mx_cnt){
+		clog("init stop","mx_cnt",that.mx_cnt,d)
+		that.stop = 1
+	}
+
+	if (that.stop){
+		return 1
+	}
+
+}
+
+function* wlk(that,o,meta,d){
+	// let i,k,v
+  let ctr = 0
+  for (let en in o){
+    yield [ctr++,en,o[en]]
+  }
+
+}
+
+
+tobj = {
+	x:{x2:"abc"},
+	"a":{
+		"a2":{
+			"a3":{a4:"xyz"},
+			"b3":{
+				b4:"xyz2",
+				c4:"xyz3",
+				},
+
+		},
+	},
+	z:{z2:"abcz"},
+}
+tobj2 = {
+	a:{k1:"v1"},
+	b:{k2:"v2"},
+}
+tobj.c=tobj.a
+_deep_dev_dflt =  {
+
+	mt:new Map(),
+	m:new Map(),
+	mq:new Map(),
+	mx_depth:8,
+	// mx_depth:5,
+
+	mx_cnt:3500,
+	cnt2:0,
+	cnt_loop:250,
+	// mx_cnt:1500,
+	cnt:0,
+}
+_deep_dev = window._deep_dev || _deep_dev_dflt
+_deep_walk_dflt3 = {
+	path:[],
+	paths:[],
+	names:[],
+	kv:[],
+	cnt:0,
+	depth:0,
+}
+
+
+function rdeep_init(that,o){
+	_deep_dev = jc(_deep_dev_dflt)
+
+	// _deep_dev.mq.setD(window,jc(_deep_walk_dflt3))
+
+	// _deep_dev.mq.setD(tobj,jc(_deep_walk_dflt3))
+	_deep_dev.mq.setD(APP.store.getState(),jc(_deep_walk_dflt3))
+	// _deep_dev.mq.setD(o,jc(_deep_walk_dflt3))
+	// _deep_dev.mq.setD("zz",jc(_deep_walk_dflt3))
+	rdeep(_deep_dev,window,{},0)
+	// _deep_dev 
+}
+
+
+
+
+
+
+function q_up(that,o,ometa){
+	let i,k,v
+	var meta 
+	var new_obj 
+	for ([i,k,v] of keyVal2(o)){
+
+
+	if (typeof(o) == "object"){
+		// clog("")
+	} else {
+		// HA HA
+		continue
+
+	}
+
+
+		// meta = jc(_deep_walk_dflt3)
+
+	new_obj = _deep_dev.m.setD(v,jc(_deep_walk_dflt3))
+	meta = _deep_dev.m.get(v)
+	new_obj ? ( meta.depth = ometa.depth + 1 , meta.path = [...ometa.path,k]) : 0
+	meta.names.push(k)
+	// meta.path = [...ometa.path,k]
+	if (k=="k2"){
+		tobj.a.k3="!@#$%^"
+	}
+	meta.cnt += 1
+
+	// clog("Q_UP")
+	// clog("Q~",i,k,v,meta.cnt,new_obj)
+
+	_deep_dev.mq.setD(v,meta)
+
+	}
+}
+
+
+
+function rdeep(that,o,meta_x,d){
+	var ometa,new_obj
+	if (should_i_stop(that,o,meta_x,d)){
+		clog("Stopping",that.mx_cnt,d)
+		return
+	}
+	clog("!001")
+	if (typeof(o) != "object"){
+		return
+	}
+
+
+	/*
+	if (should_i_iter(that,o,meta_x,d)){
+		clog("Stopping",that.mx_cnt,d)
+		return
+	}
+	*/
+	// let 
+	clog("!002")
+	let i,k,v
+	for ([k,v] of that.mq){
+		that.cnt += 1
+		that.cnt2 += 1
+		if (that.cnt2 > that.cnt_loop){
+			clog(that.cnt,that.cnt2,k,v)
+			that.cnt2= 0
+
+		}
+
+	if (should_i_stop(that,o,meta_x,v.depth)){
+		clog("Stopping",that.cnt,that.mx_cnt,v.depth)
+		return
+	}
+		clog(that.cnt,v.depth,v.path)
+		q_up(that,k,v)
+		// tobj.a.k3="!@#$%^"
+		// _deep_dev.mq.setD("zz2",jc(_deep_walk_dflt3))
+		// _deep_dev.mq.setD(k,jc(_deep_walk_dflt3))
+
+
+		// clog("M~",v.depth,k,v)
+
+	} 
+	clog("!004")
+	/*
+	for ([i,k,v] of wlk(that,o,meta,d)){
+		clog(d,"~",i,k,v)
+		_deep_dev.m.setD(v,jc(_deep_walk_dflt3))
+		// rdeep(that,v,meta,d+1)
+	}
+	for ([i,k,v] of wlk(that,o,meta,d)){
+		// clog(d,"~",i,k,v)
+
+		rdeep(that,v,meta,d+1)
+	}
+	*/
+
+}
+
+
+
+
+//  ["features/base/conference", "conference", "_audioAnalyser", "_vadEmitter", "_vadProcessor", "_wasmInterface", "HEAP8"]
+//  ["features/base/conference", "conference", "_audioAnalyser", "_vadEmitter", "_vadProcessor", "_wasmInterface", "HEAP8"]
+// APP.store.getState()["features/base/conference"][ "conference"][ "_audioAnalyser"][ "_vadEmitter"][ "_vadProcessor"][ "_wasmInterface"][ "HEAP8"]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function rdeep_init0(that,o){
+	var meta = {
+		path :[]
+	}
+	var d = 0
+
+	ometa = _deep_dev.m.get(type)
+
+		// new_obj = _deep_dev.mt.setD(v,jc(_deep_walk_dflt2))
+		// ometa = _deep_dev.mt.get(v)
+	ometa.kv.push([i,k,v])
+	ometa.cnt += 1
+
+
+	_deep_dev.m.setD(o,jc(_deep_walk_dflt3))
+	// _deep_dev 
+}
+
+
+
+function rdeep0(that,o,meta,d){
+	var ometa,new_obj
+	if (should_i_stop(that,o,meta,d)){
+		clog("Stopping",that.mx_cnt,d)
+		return
+	}
+	if (typeof(o) != "object"){
+		return
+	}
+	/*
+	if (should_i_iter(that,o,meta,d)){
+		clog("Stopping",that.mx_cnt,d)
+		return
+	}
+	*/
+	// let 
+	let i,k,v
+	for ([i,k,v] of wlk(that,o,meta,d)){
+		clog(d,"~",i,k,v)
+		_deep_dev.m.setD(v,jc(_deep_walk_dflt3))
+		// rdeep(that,v,meta,d+1)
+	}
+	for ([i,k,v] of wlk(that,o,meta,d)){
+		// clog(d,"~",i,k,v)
+
+		rdeep(that,v,meta,d+1)
+	}
+
+}
+
+
+
+function kvt2(o){
+	var k,v,i,cnt,ometa
+	var new_obj
+	var type 
+	cnt = 0
+	if (_deep_dev.cnt > _deep_dev.cnt){
+		return
+	}
+	// for ([k,v,i] of keyVal2(o)){
+	// for ([i,k,v] of keyVal(o)){
+	for ([i,k,v] of keyVal2(o)){
+		type = get_type_proto_(v)
+		if (typeof(type) == "string"){
+			continue
+		}
+		_deep_dev.cnt += 1
+
+		new_obj = _deep_dev.mt.setD(type,jc(_deep_walk_dflt2))
+		ometa = _deep_dev.mt.get(type)
+
+		// new_obj = _deep_dev.mt.setD(v,jc(_deep_walk_dflt2))
+		// ometa = _deep_dev.mt.get(v)
+		ometa.kv.push([i,k,v])
+		ometa.cnt += 1
+
+
+		// clog(cnt,i,k,v)
+		cnt +=1
+
+	}
+	_deep_dev.cnt = cnt
+	clog(cnt)
+
+}
+
+
+function kvt3(o,p,d){
+	var k,v,i,cnt,ometa
+	var new_obj
+	var type 
+	cnt = 0
+	// for ([k,v,i] of keyVal2(o)){
+	// for ([i,k,v] of keyVal(o)){
+	for ([i,k,v] of keyVal2(o)){
+		type = get_type_proto_(v)
+		if (typeof(type) == "string"){
+			// continue
+		}
+
+		new_obj = _deep_dev.mt.setD(type,jc(_deep_walk_dflt2))
+		ometa = _deep_dev.mt.get(type)
+
+		// new_obj = _deep_dev.mt.setD(v,jc(_deep_walk_dflt2))
+		// ometa = _deep_dev.mt.get(v)
+		ometa.kv.push([i,k,v])
+		ometa.cnt += 1
+
+
+		// clog(cnt,i,k,v)
+		cnt +=1
+
+	}
+	// _deep_dev.cnt = cnt
+	clog(cnt)
+
+}
+// kvt2
+
+function proto_info(m){
+	var i,k,v,v2
+	var cnt = 0
+	// for ([i,k,v,v2] of m){
+	for ([k,v] of m){
+		// clog(cnt,i,k,v)
+		// v
+		clog(cnt,"~",v.cnt,k,v)
+		cnt += 1
+	}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function search_map(m,s){
+	// s = s.ti
+	var i,k,v
+	var cnt = 0
+	for ([k,v] of m){
+		// if (typeof(k) == "string" &&  k.toLowerCase().includes("tile") ){
+		// if (typeof(k) == "string" &&  k.toLowerCase().includes("JiC") ){
+		if (typeof(k) == "string" && ( k.toLowerCase().includes(s) || v.names.join().includes(s) ) ){
+		// if (typeof(k) == "string"  ){
+			clog(cnt,k,v)
+			cnt += 1
+
+		}
+	}
+}

efile.js

@@ -0,0 +1,15 @@
+console.log("EFILE3")
+
+
+console.log(`
+
+    <div class="env_info">
+        
+        REMOTE_ADDR:<!--#echo var="REMOTE_ADDR" --><br>
+        indexv:<!--#echo var="indexv" --><br>
+        index:<!--#echo var="index" --><br>
+        http_referer:<!--#echo var="http_referer" --><br>
+    </div>
+	`)
+
+

fs.css

@@ -0,0 +1,592 @@
+
+
+.tile-view #filmstripRemoteVideos {
+	margin: 135 0 100 0;
+}
+
+
+.vid_container {
+/*display:flex;*/
+/*flex-wrap:wrap;*/
+    /*align-content: center;*/
+    /*align-content: */
+    /*align-items: center;*/
+}
+
+
+.vid_container > .small_vid {
+	display: inline-block;
+/*display:flex;*/
+/*flex-wrap:wrap;*/
+    /*align-content: center;*/
+    /*align-content: */
+    /*align-items: center;*/
+}
+
+
+.at {
+	/*top: 100px;*/
+	/*left: 100px;*/
+	color: #fff;
+	border: 1px solid #fff;
+	box-sizing: border-box;
+	width: 50px;
+	height: 50px;
+	outline: 2px solid blue;
+	position: absolute;
+	border-radius: 10px;
+}
+
+.at:after{
+	position: absolute;
+	width: 100%;
+	/*height: 100%;*/
+	text-align: right;
+	align-content:space-between;
+	content: "aaaa:";
+	content: var(--vdim,"zzzq");
+	/*background: red;*/
+	padding-right: 5px;
+
+	bottom: 0;
+	right: 0;
+	/*margin-top: 100;*/
+	/*text-align:;*/
+	vertical-align: text-bottom;
+}
+
+
+.at:before{
+	position: absolute;
+	width: 100%;
+	right: 0;
+	padding-right: 5px;
+	/*padding-right: 5px;*/
+	/*height: 100%;*/
+	text-align: right;
+	align-content:space-between;
+	content: "aaaa:";
+	content: var(--vtext,"zzz");
+	/*background: red;*/
+	bottom: 2em;
+	/*margin-top: 100;*/
+	/*text-align:;*/
+	vertical-align: text-bottom;
+}
+
+.icont.z:before{
+	position: absolute;
+	width: 100%;
+	right: 0;
+	padding-right: 5px;
+	/*padding-right: 5px;*/
+	/*height: 100%;*/
+	text-align: right;
+	align-content:space-between;
+	content: "aaaa:";
+	content: var(--vtext,"zzz");
+	/*background: red;*/
+	bottom: 2em;
+	/*margin-top: 100;*/
+	/*text-align:;*/
+	vertical-align: text-bottom;
+}
+
+
+.at2{
+	outline-color: #ff0;
+}
+
+
+.a2:before {
+
+	bottom: -2em;
+}
+
+
+
+.small_vid{
+	border: 0px inset #f00;
+	/*border: 1px solid #f000;*/
+	box-sizing: content-box;
+	box-sizing: border-box;
+	margin: 4px 5px;
+	/*outline-offset: -139px;*/
+	/*padding: 10px;*/
+	background-clip: border-box;
+	background-clip: content-box;
+	/*position: relative;*/
+	/*opacity: .5;*/
+	outline: unset;
+	/*z-index: 6;*/
+	/*--v-index: "abc" !important;*/
+}
+.dev_filmstrip {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	display: inline-flex;
+    align-items: center;
+    justify-content: center;
+	/*vertical-align: middle;*/
+	/*position: relative;*/
+	/*position: absolute;*/
+	/*display: inline-block;*/
+	/*opacity: 0;*/
+
+}
+
+
+
+#filmstripRemoteVideosContainer {
+	opacity: .9;
+}
+
+.vid_container{
+	z-index: 6;
+	/*outline: unset !important;*/
+	/*outline: unset;*/
+	/*background-color: #f000 !important;*/
+	/*opacity: .1;*/
+}
+
+
+.c4 {
+	/*opacity: 0;*/
+}
+
+
+.ic4  {
+	/*vertical-align: */
+	vertical-align: middle;
+	text-align: center;
+	/*outline: 2px solid red;*/
+
+	align-items: center;
+	/*margin: auto;*/
+	display: flex;
+	/*flex-wrap: */
+}
+
+.ic4 .small_vid  {
+	/*align-self: center;*/
+	/*vertical-align: */
+	/*display: block;*/
+	display: inline-block !important;
+	/*margin: 0 auto;*/
+	margin: auto;
+	/*flex: 1;*/
+	/*margin: 10px;*/
+	/*margin: 0px;*/
+	/*align-items: center;*/
+}
+
+
+
+.fs_container{
+	position: absolute;
+
+	position: relative;
+	display: inline-block;
+	/*outline: 20px solid blue;*/
+	/*outline-offset: -50px;*/
+	/*width: 100%;*/
+	height: 100%;
+	/*padding: auto;*/
+	margin: auto;
+}
+
+#sharedVideoIFrame {
+	/*width: unset !important;*/
+	/*height: unset !important;*/
+	width: 100% !important;
+	height: 100% !important;
+	/*width: var(--lvw,500px);*/
+	/*height: 100% !important;*/
+
+}
+#largeVideoContainer {
+	/*margin: 50% 0;*/
+	/*width: 800px;*/
+	/*transform: translate(0%, -50%);*/
+	/*height: 300px;*/
+	/*vertical-align: center;*/
+	/*position: absolute !important;*/
+	/*display: inline-block;*/
+}
+#videospace{
+	vertical-align: center;
+}
+.vspace {
+	/*width: 800px;*/
+	/*opacity: 0;*/
+	/*height: 300px;*/
+	/*z-index: 0;*/
+} 
+.small_vid {
+	/*opacity: 0;*/
+
+}
+
+#etherpad {
+	/*z-index: -1;*/
+}
+
+#videospace {
+	--lvw: 100% !important;;
+}
+
+.youtube_vid {
+	outline: 5px dotted red;
+}
+
+#sharedVideoContainer {
+	/*sharedVideoContainer*/
+	/*outline: 3px solid red;*/
+}
+
+.ic1 {
+
+  display: flex;
+  justify-content: center;
+  /*align-items: center;*/
+
+	/*display: inline-flex;*/
+	/*align-items: center;*/
+	justify-content:center;
+
+}
+
+
+#largeVideoContainer {
+	/*width: 50%;*/
+}
+
+
+
+
+.filmstrip {
+	/*z-index: -1 !important;*/
+}
+
+#etherpad {
+	/*display: none !important;*/
+}
+
+#sharedVideo {
+	/*top: -10px !important;*/
+	/*opacity: 1 !important;*/
+	/*
+	--vtext:"center"; --vdim:" x "; opacity: 0; display: none; width: 1708px; height: 899px;
+
+	*/
+}
+
+
+
+#sharedVideoIFrame,#sharedVideo {
+	display: unset !important;
+	opacity: 1 !important;
+}
+
+#largeVideoWrapper {
+	width: 100% !important;
+	height: 100% !important;
+	top: 0 !important;
+	bottom: 0 !important;
+	left: 0 !important;
+	right: 0 !important;
+}
+
+.large-video-background{
+	display: none !important;
+}
+
+
+.indicator_hook {
+
+pointer-events: none;
+}
+
+
+.vid_toptoolbar_hook {
+	position: absolute;
+}
+
+
+#toggleFilmstripButton,[aria-label="Toggle tile view"] {
+	display: none !important;
+}
+
+.videocontainer__toptoolbar{
+	z-index: auto !important;
+}
+#sharedVideo{
+	/*z-index: unset !important;*/
+
+}
+#sharedVideoIFrame{
+	/*z-index: 9 !important;*/
+
+}
+
+.cont.c4{
+	z-index: 0;
+}
+
+
+.dev_hook:not(.vspace,.top_toolbox){
+	display: none;
+}
+.xbox {
+	display: none ;
+
+}
+
+.videoContainerFocused {
+	/*outline: 1px solid #0ff;*/
+}
+
+.active-speaker{
+	/*outline: 1px solid #ff0;*/
+
+}
+
+.videoContainerFocused {
+	/*outline: 1px solid #0ff;*/
+}
+
+.vid_toptoolbar_hook{
+	width: 100%;
+	/*outline: 1px solid blue;*/
+	/*background-color: red;*/
+	/*outline: 1px solid #000;*/
+	height: 0%;
+	/*padding-top: 56.25%;*/
+	padding-bottom: 56.25%;
+}
+
+
+
+
+
+.outline_indicator{
+	/*outline: 1px solid #0000;*/
+	outline: 2px solid #000;
+	outline: 0px solid #fff;
+	outline-offset: -15px;
+	--voffc: -3px; 
+	--voff:  2px;
+	--voffw: 2px; 
+	width: 100%;
+	height: 100%;
+	position: absolute;
+
+}
+
+.active-speaker .outline_indicator.ind_1{
+	outline-offset: 5px;
+	outline-offset: calc((var(--voff) * 3 ) + var(--voffc));
+	outline-width: var(--voffw);
+	outline-color: #0ff;
+}
+.videoContainerFocused .outline_indicator.ind_2{
+	outline-offset: 3px;
+	outline-offset: calc((var(--voff) * 2 ) + var(--voffc));
+	outline-width: var(--voffw);
+	outline-color: #f00;
+}
+.local_vid .outline_indicator.ind_3{
+	outline-offset: 1px;
+	outline-offset: calc((var(--voff) * 1 ) + var(--voffc));
+	outline-width: var(--voffw);
+	outline-color: #fff;
+}
+
+
+
+.local_vid {
+	/*outline: 2px solid #fff;*/
+}
+
+.remote-video-menu-trigger, .remotevideomenu {
+	z-index: 10;
+}
+
+
+.small_vid .videocontainer__toptoolbar * {
+	/*outline-width: 0 !important;*/
+}
+
+.follow_focus * {
+	pointer-events:auto;
+
+}
+.follow_focus {
+	z-index: 20;
+	position: absolute;
+	left: 250px;
+	pointer-events:auto;
+
+}
+
+.follow_focus2 {
+	z-index: 20;
+	position: absolute;
+	right: 100px;
+	pointer-events:auto;
+
+}
+
+.dev_hook.top_toolbox{
+	pointer-events: none;
+	z-index: -1;
+}
+
+
+#react > div {
+	/*background-color: #1B5668;*/
+		/*background-color: #1B3648;*/
+		/*background-color: #1B2638;*/
+		background-color: rgb(27, 38, 56);
+		background-color: rgb(71, 71, 71);
+		background-color: #374757;
+
+		/*background-color: #245;*/
+		/*background-color: #134;*/
+		/*background-color: #fff;*/
+
+	/*color: red !important;*/
+}
+.toolbox-background {
+	/*height: 400px !important;*/
+
+}
+#new-toolbox,.toolbox-background {
+	/*bottom: 0 !important;*/
+}
+.new-toolbox .toolbox-background {
+
+    /*background-image: linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));*/
+    background-image: linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.4),rgba(0,0,0,.1),rgba(0,0,0,0));
+
+
+    --vr0: rgba(0,0,0,1);
+    --vr1: rgba(0,0,0,.6);
+    --vr2: rgba(0,0,0,.4);
+    --vr3: rgba(0,0,0,0);
+
+
+    --vr0:  rgba(0,0,0,1)  0%;
+    --vr1:  rgba(0,0,0,.6) 25%;
+    --vr2:  rgba(0,0,0,.3) 55%;
+    --vr3:  rgba(0,0,0,0)  100%;
+
+    background-image: linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,.5),rgba(0,0,0,.2),rgba(0,0,0,0));
+    background-image: linear-gradient(to top,var(--vr0),var(--vr1),var(--vr2),var(--vr3));
+
+
+
+    /*background-image: linear-gradient(to 58%,rgba(0,0,0,1),rgba(0,0,0,0));*/
+}
+.button-group-center {
+	position: relative;
+}
+/*.button-group-center:before {*/
+.toolbox-background.z:before {
+	content: "";
+
+	width: 158px;
+	width: 178px;
+	top: 80px;
+	transform: translate(0%, -50%);
+	transform: translate(-50%, 0%);
+
+	left: 50%;
+	height: 100px;
+	position: absolute;
+	z-index: -6;
+	background-color: #8883;
+}
+
+
+/*.toolbox-background:after {*/
+.new-toolbox.z:before {
+	content: "";
+
+	width: 158px;
+	width: 178px;
+	top: 80px;
+	transform: translate(0%, -50%);
+	transform: translate(-50%, 0%);
+	top:0;
+	left: 50%;
+	height: 100px;
+	position: absolute;
+	/*z-index: -6;*/
+	background-color: #8883;
+	/*background-color: #888;*/
+}
+
+.button-group-center.z:before {
+	content: "";
+
+	width: 158px;
+	width: 178px;
+	top: -10px;
+	/*left: 0;*/
+	height: 100px;
+	position: absolute;
+	z-index: -6;
+	background-color: #8883;
+	background-color: #888;
+}
+
+
+
+
+.il {
+	outline: 4px inset #ff0;
+
+}
+
+.ir {
+	outline: 4px inset #f00;
+	
+}
+
+
+.ilr {
+	outline: 4px inset #0ff;
+}
+
+.ir0 {
+	border-radius: 30px;
+}
+
+.il0 {
+	border-radius: 30px;
+}
+
+
+.follow_focus,.follow_focus2 {
+	background-color: #0008;
+}
+
+
+.inline_input {
+	display: inline;
+}
+
+#ov_timeout,#num_pseudo{
+	width: 4em;
+}
+
+/*.presence-label, */
+.subject *{
+	/*overflow: visible !important;*/
+	/*overflow: visible;*/
+}
+.subject {
+	overflow: visible;
+}

fs_hook.js

@@ -0,0 +1,84 @@
+
+
+
+
+function resize_filmstrips(that,fn_name,args=[]){
+
+}
+function resize_filmstrips2(that,fn_name,args=[]){
+	
+}
+
+
+glob_mx.filmstrip_handlers = glob_mx.filmstrip_handlers || {}
+glob_mx.filmstrip_tile_handlers = glob_mx.filmstrip_tile_handlers || {}
+
+function resizeThumbnailsForCustomView(that,fn_name,args=[]){
+    const thumbs = glob_react.Filmstrip._getThumbs()
+    const all_thumbs = $(".small_vid")
+    const custom_thumbs = all_thumbs.not(thumbs.remlocThumbs)
+    const vid_containers = $(".vid_container")
+    const loose_thumbs = custom_thumbs.not(vid_containers.children())
+    var k,v 
+    let fs_handler_key
+    let fs_handler 
+    let fs_tile_handler
+    let fs_handlers = new Map()
+    let i
+    // console.trace("rtscv...")
+
+    let fs_tile_handlers = []
+    for (v of vid_containers){
+      // clog(":",v,v.dataset.fs_type)
+      fs_handler_key = v.dataset.fs_handler
+      // clog("~",v,v.dataset,fs_handler)
+      fs_tile_handler = glob_mx.filmstrip_tile_handlers[fs_handler_key] || nop
+      fs_handler = glob_mx.filmstrip_handlers[fs_handler_key] || nop
+      // glob_mx.filmstrip_tile_handlers[fs_handler_key] ? glob_mx.filmstrip_tile_handlers[fs_handler_key](v) : 1
+      // fs_tile_handlers.push([glob_mx.filmstrip_tile_handlers[fs_handler_key] || nop,v])
+      // fs_handlers.setD(glob_mx.filmstrip_handlers[fs_handler_key] || nop,)
+      fs_tile_handlers.push([fs_tile_handler,v])
+      fs_handlers.setD(fs_handler,[])
+      i = fs_handlers.get(fs_handler)
+      i.push(v)
+
+      // glob_mx.filmstrip_handlers
+    }
+    clog("fs_tile_handlers",fs_tile_handlers)
+    for ([k,v] of fs_handlers){
+    	// clog("ft0",k,v)
+    	k(v)
+    }
+    for ([k,v] of fs_tile_handlers){
+    	// clog("ft",k,v)
+    	k(v)
+
+    }
+
+
+    // return
+    // const custom_thumbs = all_thumbs
+
+    var aspect = 16/18
+    var width = 135
+    var height = Math.round(width/aspect)
+    loose_thumbs.css({
+      'padding-top': '',
+      "min-height": `${height}px`,
+      "min-width": `${width}px`,
+      width: `${width}px`,
+      height: `${height}px`,
+    })
+
+    clog("rtscv",fn_name,[that,...args])
+
+
+}
+
+
+
+
+
+function onover(){
+	clog(this,[...arguments])
+}

i4/i11.html

@@ -0,0 +1,85 @@
+<html itemscope itemtype="http://schema.org/Product" prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/html">
+  <head>
+    <!--#include virtual="head.html" -->
+    <meta charset="utf-8">
+    <meta http-equiv="content-type" content="text/html;charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!--#include virtual="base.html" -->
+
+    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+    <link rel="stylesheet" href="css/all.css">
+
+
+
+    <script class="rld" src="ign/rf/u/universals.js?c=023"></script>
+    <script class="" src="ign/rf/u/proto_ext.js?c=023"></script>
+    
+    <script class="rld" src="ign/rf/inspect_utils.js?c=023"></script>
+
+    <script class="rld" src="ign/rf/preload.js?c=023"></script>
+    <script class="rld" src="ign/rf/keyboard_dev_fn.js?c=023"></script>
+    <script class="rld" src="ign/rf/m/m_req.js?c=023"></script>
+
+
+    <!-- <script class="rld" src="ign/rf/proxy_dev.js?c=023"></script> -->
+
+    <!-- <script class="rld" src="ign/rf/quick_tiling_fix.js?c=023"></script> -->
+
+
+
+
+
+
+      <script class="" src="inline_script.js"></script>
+    <script><!--#include virtual="/config.js" --></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
+    <!--#include virtual="connection_optimization/connection_optimization.html" -->
+    <script src="libs/do_external_connect.min.js?v=1"></script>
+    <script><!--#include virtual="/interface_config.js" --></script>
+    <!-- 
+    <script><!--#include virtual="/interface_config_dev.js" --></script>
+     -->
+
+      <script class="rld" src="ign/rf/m2/interface_config_dev.js"></script>
+    <script><!--#include virtual="/logging_config.js" --></script>
+    <script src="libs/lib-jitsi-meet.min.js?v=139"></script>
+    <script src="libs/app.bundle.min.js?v=139"></script>
+
+
+    <script src="rldjs/rldjs2.js?v=139"></script>
+    <script class="rld rrld" src="ign/rls.js?c=023"></script>
+
+    <script class="rld" src="ign/rf/react_fn.js?c=023"></script>
+    <script class="rld" src="ign/rf/jquery.corner.js?c=023"></script>
+    <script class="rld" src="ign/rf/fake_resize.js?c=023"></script>
+
+    <script class="rld" src="ign/rf/m/_m_utils.js?c=023"></script>
+    <script class="rld" src="ign/rf/m/m_utils.js?c=023"></script>
+    <script class="rld" src="ign/rf/m/m_api.js?c=023"></script>
+
+    <script class="rld" src="ign/rf/m/moveto.js?c=023"></script>
+    <script class="rld" src="ign/rf/fs_hook.js?c=023"></script>
+    <script class="rld" src="ign/rf/resize_hook.js?c=023"></script>
+    <script class="rld" src="ign/rf/class_dec.js?c=023"></script>
+    <script class="rld" src="ign/rf/svm.js?c=023"></script>
+
+    <script class="rld" src="ign/rf/m2/m2.js?c=023"></script>
+    <script class="rld" src="ign/rf/m2/toy2.js?c=023"></script>
+
+    <link class="rld" rel="stylesheet" href="ign/rf/m2/m2.css?c=023">
+    <link class="rld" rel="stylesheet" href="ign/rf/r0.css?c=023">
+    <link class="rld" rel="stylesheet" href="ign/rf/fs.css?c=023">
+    <!--#include virtual="title.html" -->
+    <!--#include virtual="plugin.head.html" -->
+    <!--#include virtual="static/welcomePageAdditionalContent.html" -->
+    <!--#include virtual="static/settingsToolbarAdditionalContent.html" -->
+  <meta class="m0 module">
+
+  </head>
+  <body>
+    <!--#include virtual="body.html" -->
+    <div id="react"></div>
+    <!-- CT  11 4-->
+  </body>
+</html>
+
+

i4/lobby.js

@@ -0,0 +1,51 @@
+clog("L1")
+
+// clog(navigator)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function insert_lobby() {
+	// body...
+	clog("This is lobby2")
+var mod_path ="ign/rf/i4m/"
+
+mtx_2 ={	
+	// js:["ign/m/timer/m.js","ign/m/timer/m0.js"],
+	js:[`${mod_path}m0.js`,`${mod_path}m.js`,],
+	css:[`${mod_path}m.css`],
+	html:[{url:`${mod_path}m.html`,diffH:get_cui_html,success:html_rld_cb4,success_js:"html_js_handler_lobby"}]
+	}
+
+	setTimeout(add_module,300,mtx_2)
+
+
+
+}
+
+
+
+
+
+if (location.pathname.endsWith("/")){
+insert_lobby()
+}
+
+
+
+// setTimeout(add_module,300,mtx)
+
+
+
+

inspect_utils.js

@@ -0,0 +1,38 @@
+
+
+function jclone(obj){
+	// clog("JC")
+	return Array.isArray(obj) ?  $.extend(true,[],obj) :  $.extend(true,{},obj)
+	console.trace("JC")
+	return JSON.parse(JSON.stringify(obj))
+	return Array.isArray(obj) ?  $.extend(true,[],obj) :  $.extend(true,{},obj)
+}
+function jx(obj){
+	// clog("JC")
+	// console.trace("JC")
+	return JSON.parse(JSON.stringify(obj))
+	// return Array.isArray(obj) ?  $.extend(true,[],obj) :  $.extend(true,{},obj)
+	// return Array.isArray(obj) ?  $.extend(true,[],obj) :  $.extend(true,{},obj)
+}
+jc = jclone
+
+// gcx = jx(glob_corner)
+// gcc = jc(glob_corner)
+function q_walker_h(o,m,max_depth) {
+	// body...
+}
+
+function q_walker(o,m,depth,max_depth) {
+	if (depth > max_depth){
+		return
+	}
+	// body...
+}
+
+
+
+
+
+// console.log("IU")
+
+

junk_dev

@@ -0,0 +1,10 @@
+
+
+
+function event_test(){
+
+            tmsgx({
+                "type":"event",
+                "payload":'{path,key,val}',
+            },"code")
+}

junk_dev.js

@@ -0,0 +1,253 @@
+
+
+
+function event_test(){
+
+            tmsgx({
+                "type":"event",
+                "payload":'{path,key,val}',
+            },"code")
+}
+
+
+function event_test(){
+
+            tmsgx({
+                "type":"event",
+                "payload":'{path,key,val}',
+            },"code")
+}
+
+
+function all_plugin_events(e){
+	// clog("all_plugin_events",[this],[...arguments])
+}
+
+
+glob_mx.event_handlers.e1 = {
+	fn:all_plugin_events,
+	fn:nop,
+	// m:{etype:"timer_start"},
+	m:{},
+}
+
+
+
+glob_mx.event_handlers.e2 = {
+	fn:all_plugin_events,
+	fn:nop,
+	// m:{etype:"timer_start"},
+	m:{etype:"z"},
+}
+
+function sort_id(a, b) {
+	return a > b
+	/*
+  if (a is less than b by some ordering criterion) {
+    return -1;
+  }
+  if (a is greater than b by the ordering criterion) {
+    return 1;
+  }
+  // a must be equal to b
+  return 0;
+	*/
+}
+function sort_id2(a, b) {
+	return a < b
+}
+
+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=0
+// reverse_indexed_map=0
+indexed_map = window.indexed_map || new Map()
+reverse_indexed_map = window.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(){
+	// if (amimod()){} else {return}
+	var arr = []
+	var ivid = {}
+	var k,v
+	var j = $(".small_vid:not(.pseudo_vid)")
+	// clog(j)
+	var part = get_participants()
+	var parts =jc(part).sort(sort_id3)
+	// clog(parts,part)
+	var cnt = 0
+	for (k of parts){
+		// clog(k)
+		j = k.local ? $("#localVideoContainer") : $(`#participant_${k.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}"`})
+		arr.push(k)
+		$(k)[0].dataset.v_index = cnt
+		cnt += 1
+	}
+	remap_sort(arr)
+	window.sorted_tiles = arr
+
+
+
+
+
+	// for 
+}
+
+function remap_sort(arr){
+	var k,v
+	for ([k,v] of indexed_map){
+		// clog(k,v)
+		var old_index = sorted_tiles.indexOf(k)
+		array_move(arr,old_index,v)
+
+		// clog(cnt,sorted_tiles.includes(k),v,k)
+		// cnt += 1
+
+	}
+
+}
+
+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
+
+	}
+
+}
+
+// sort_results = []
+sort_results = new Map()
+
+function test_sort(){
+	// if (amimod()){} else {return}
+	var arr = []
+	var ivid = {}
+	var k,v
+	var j = $(".small_vid:not(.pseudo_vid)")
+	// clog(j)
+	var part = get_participants()
+	var p1 = jc(part)
+	var parts =jc(part).sort(sort_id3)
+	// clog(parts,part)
+	var cnt = 0
+	var ret = {
+		arr:[],
+		arr_id:[],
+		arr_j:[],
+	}
+	var i
+	for (k of parts){
+		// clog(k)
+		j = k.local ? $("#localVideoContainer") : $(`#participant_${k.id}`)
+		// j.css({"--v_index":`"I2: ${cnt}"`})
+		// j[0].dataset.v_index = cnt
+		ret.arr.push(k)
+		ret.arr_j.push(j)
+		ret.arr_id.push(k.id)
+
+		cnt += 1
+	}
+	v = $(".pseudo_vid")
+	for (k of v){
+		// clog(k)
+		// $(k).css({"--v_index":`"I2: ${cnt}"`})
+		// j[0].dataset.v_index = cnt
+		cnt += 1
+	}
+		sort_results.setD(JSON.stringify(ret.arr_id),{c:0})
+		i = sort_results.get(JSON.stringify(ret.arr_id))
+		i.c += 1
+
+	clog(sort_results)
+	return ret
+
+
+
+
+
+	// for 
+}
+
+
+
+
+a1 = [2,54,2.5,"a","b"]
+a1 = ["2","_54","2.5","zas","AA","","xyz","a","b"]
+a2 = ["2","_54","2.5","zas","AA","","xyz","b","a"]
+
+
+mod_sort()
+
+
+
+
+
+
+function quick_layout(){
+    init_api6()
+    // calc_fs_dims0()
+    calc_fs_dims()
+    // setTimeout(quick_layout2,1000)
+    new_move()
+    mod_sort()
+    dispatch_resize()
+
+}
+function quick_layout2(){
+    // init_api6()
+    // calc_fs_dims0()
+    // calc_fs_dims()
+    new_move()
+    mod_sort()
+    dispatch_resize()
+
+}
+
+quick_layout()

m/_m_utils.js

@@ -0,0 +1,302 @@
+
+
+
+
+if (!window.glob_mx){
+	// window.glob_mx={}
+}
+
+
+
+
+
+/*
+msto_qx = {
+	local:{},
+	conference:{},
+	participant:{},
+}
+
+
+
+msto_qx = {
+	private_local:{},
+	participant_local:{},
+	conference:{},
+	participant:{
+		'<id_0>':{},
+		'<id_1>':{},
+		'<id_...>':{},
+		'<id_n>':{
+			rkey:{},
+		},
+
+	},
+}
+*/
+mhndlr_opt_null = {
+from: undefined,
+handler: "onAll",
+id: null,
+name: null,
+// "http://jitsi.org/jitmeet"
+ns: null,
+options: {matchBareFromJid: false, ignoreNamespaceFragment: false},
+type: null,
+user: true,
+cstr:"test"
+};
+// cstr:"onMsgx"
+
+
+
+mhndlr_opt_x = {
+	cstr:"?",
+	ns:"corner_mx",
+	handler:mhndlr,
+
+}
+function rtrue(){
+	// clog("rtrue...",this,arguments)
+	// console.trace("rtrue")
+	return true
+}
+function rtrue2(){
+	clog("rtrue2...",this,arguments)
+	// console.trace("rtrue2")
+	return true
+}
+function rtrue3(){
+	clog("rtrue3...",this,arguments)
+	// console.trace("rtrue2")
+	allevnt(...arguments)
+	return true
+}
+mhndlr_opt_x_all = {
+	cstr:"?",
+	ns:"jabber:client",
+	// name:"message",
+	type:"groupchat",
+	handler:allevnt,
+	// isMatch:rtrue2,
+	// run:rtrue3,
+	// namespaceMatch:rtrue,
+
+
+}
+
+function add_handler_m(argument) {
+	// minit()
+	// if (!th.phx){
+		// th.
+	// }
+		// var phx = APP.conference._room.room.connection.handlers[0].__proto__;
+		var phx = APP.connection.xmpp.connection._stropheConn.handlers[0].__proto__;
+
+	var hxa=Object.create(phx)
+	Object.assign(hxa,mhndlr_opt_null,mhndlr_opt_x)
+	// APP.conference._room.room.connection.handlers.push(hxa)
+	APP.connection.xmpp.connection._stropheConn.addHandlers.push(hxa)
+	// th.hxa=hxa
+	// th.hx
+	// body...
+}
+function add_handler_m2(argument) {
+	clog("ADD HANDLER M2")
+	// minit()
+	// if (!th.phx){
+		// th.
+	// }
+		// var phx = APP.conference._room.room.connection.handlers[0].__proto__;
+		var phx = APP.connection.xmpp.connection._stropheConn.handlers[0].__proto__;
+
+	var hxa=Object.create(phx)
+	Object.assign(hxa,mhndlr_opt_null,mhndlr_opt_x_all)
+	// APP.conference._room.room.connection.handlers.push(hxa)
+	APP.connection.xmpp.connection._stropheConn.addHandlers.push(hxa)
+	return hxa
+	// th.hxa=hxa
+	// th.hx
+	// body...
+}
+
+function tmsgx(data,tag="div",attrs={}){
+	// return
+	var ns = {xmlns:"corner_mx"}
+	var msg = $build("message",{ to: window.APP.conference._room.room.roomjid,
+            type: 'groupchat',
+             });
+	var payload=JSON.stringify(data)
+
+	Object.assign({},ns,attrs)
+
+	msg.c(tag, payload,Object.assign({},ns,attrs)).up();
+	console.log("zzzz")
+	APP.conference._room.room.connection.send(msg)
+}
+
+
+
+function tmsgx2(data,opt_arg={},attrs={}){
+	// return
+	dflt_opt = {
+	tag:"code",
+	type:"chat",
+	to:window.APP.conference._room.room.roomjid,
+	}
+	var opt = Object.assign({},dflt_opt,opt_arg)
+
+	var ns = {xmlns:"corner_mx"}
+	var msg = $build("message",{ to: opt.to,
+            type: opt.type,
+             });
+	var payload=JSON.stringify(data)
+
+	Object.assign({},ns,attrs)
+
+	msg.c(opt.tag, payload,Object.assign({},ns,attrs)).up();
+	console.log("zzzz")
+	APP.conference._room.room.connection.send(msg)
+}
+function tmsgx3(data,opt_arg={},attrs={}){
+	// return
+	dflt_opt = {
+	tag:"code",
+	// type:"chat",
+	to:window.APP.conference._room.room.roomjid,
+	}
+	var opt = Object.assign({},dflt_opt,opt_arg)
+	clog("T:",data,opt,opt.type)
+	if (!opt.type){
+		clog("NO TYPE")
+	opt.to == dflt_opt.to ? opt.type = "groupchat" : opt.type = "chat"
+	}
+	clog("T:",data,opt,opt.type)
+
+	var ns = {xmlns:"corner_mx"}
+	var msg = $build("message",{ to: opt.to,
+            type: opt.type,
+            // from: "nnnx@conference.jfidev.com/3db7bf15",
+            // xtra: "nnnx@conference.jfidev.com/3db7bf15",
+             });
+	var payload=JSON.stringify(data)
+
+	Object.assign({},ns,attrs)
+
+	msg.c(opt.tag, payload,Object.assign({},ns,attrs)).up();
+	console.log("zzzz")
+	APP.conference._room.room.connection.send(msg)
+}
+
+function mhndlr_rld_dflt(a0,a1,a2,a3,a4){
+	// clog("mhndlr....",a0,a1,a2)
+	clog("mhndlr... dflt")
+	// setTimeout(window.onAll_rld_v2,1,this,a0,a1,a2,a3,a4)
+	return true
+}
+if (!window.mhndlr_rld){
+	window.mhndlr_rld = mhndlr_rld_dflt
+}
+function mhndlr(a0,a1,a2,a3,a4){
+	// clog("MH!")
+	setTimeout(window.mhndlr_rld,1,this,a0,a1,a2,a3,a4)
+	return true
+}
+function allevnt(a0,a1,a2,a3,a4){
+	clog("MH! allevnt")
+	setTimeout(window.allevnt_rld,1,this,a0,a1,a2,a3,a4)
+	return true
+}
+function rld_room(room){
+	clog("rld_room...",room)
+	window.location.assign(room)
+}
+function allevnt_rld(a0,a1,a2,a3,a4){
+	// clog("MH!")
+	// clog("allevnt_rld",a0,a1,a2,a3,a4)
+
+	var msg = a1.querySelector(`body`)
+	if (!msg){
+		return
+	}
+	// clog("allevnt_rld...",a1)
+
+
+	// clog("allevnt_rldw",_from.split("/").pop())
+	// clog(msg)
+	// return
+	// @Joseph-Innace
+	// clog(msg.innerHTML)
+	var msg_txt = msg.innerHTML 
+	if (msg_txt.startsWith("moveto=")){
+		var room = msg_txt.split("=").pop()
+		if (room){
+	var _from = a1.getAttribute("from").split("/").pop()
+	if (get_local().id == _from){
+		rld_room(room)
+	} else {
+		setTimeout(rld_room,2000,room)
+
+	}
+	// get_local().id
+
+		}
+
+		// clog("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!",msg_txt.split("~"),msg_txt.split("~").pop())
+	} 
+	// clog($(a1))
+	// clog("z",$(a1)[0].innerHTML)
+
+	// setTimeout(window.mhndlr_rld,1,this,a0,a1,a2,a3,a4)
+	return true
+}
+/*
+
+delete Root_io
+{
+
+class Root_io {
+	constructor(){}
+	_pub_msg(m){
+		clog("ixi PUB MSG",m)
+	}
+	_rec_msg(m){
+		clog("ixi REC MSG",m)
+	}
+}
+window.Root_io = Root_io
+}
+*/
+// function allevnt(){
+
+// }
+clog("ZZZZZZZZZ")
+function init_mx(){
+	clog("INITMX3")
+	add_handler_m(mhndlr)
+	add_handler_m2(allevnt)
+}
+
+ifn_obj.init_conf_join.push(init_mx)
+
+
+
+// sto_event
+// sto_update
+
+
+// pub_msg
+// rec_msg
+
+
+// set_local
+
+
+
+
+
+
+
+
+
+

m/m_api.js

@@ -0,0 +1,311 @@
+
+
+
+
+
+
+
+
+
+function get_cui_html(file) {
+	clog("get_cui_html",this,arguments)
+	// console.trace("~IX~ ixr")
+	clog("~IX~ ixr")
+	// for (var file of this.arr){
+		var aii 
+		aii= $.ajax({
+			// url: "ign/cui.html",
+			url: file.url,
+			// data: file.qs,
+			cache:false,
+			// complete:complete_html,
+			success: file.success || proc_cui_html,
+			// error: err_html,
+			// dataType: "text"
+			dataType: "html"
+		})
+		aii.file = file
+		// aii.rldh=file
+	// }
+}
+
+
+
+function cui_respH(){
+	clog("cui_respH")
+}
+
+function cui_diffH(file){
+	clog("cui_diffH",this,arguments)
+	// get_cui_html(file)	
+}
+
+
+
+
+
+
+function proc_cui_html(rsp,status,xhr){
+	clog("proc_cui_html",this,arguments)
+	/*
+	gxh.success = {
+		that:this,
+		rsp,status,xhr,
+		args:arguments,
+	}
+	*/
+	// insert_cui_html(rsp)
+	// rsp
+}
+function insert_cui_html(innerHTML){
+	window.cui_html = innerHTML
+	t5i2.crnr_init()
+	// t5i2.crnr_refresh()
+
+	// var n
+	//  n = document.createElement("div")
+	// n = document.querySelector("#xh_root")
+	// n ? n.innerHTML = innerHTML : 0
+	// event_html(n)
+}
+
+
+function dflt_api_handler(){
+	clog("dflt_api_handler NOT IMPLIMENTED")
+}
+
+function add_rld_html(){
+	// js files
+	// html
+	// css
+
+
+
+
+rldi.files["ign/m/timer/rhtml.html"]=  {url: "ign/m/timer/rhtml.html",
+ qs: {v:1}, respH: cui_respH, diffH: cui_diffH,
+ cached:"z z",
+ success:proc_cui_html,
+}
+
+
+
+}
+
+
+
+
+
+
+// jsrh
+// cssrh
+api_dflts = {
+	dflt:reqt,
+	js:{
+		diffH:jsrh,
+		// diffH:jsrh,
+		qs:{v:1},
+	},
+	css:{
+		diffH:cssrh,
+		qs:{v:1},
+
+	},
+	html:{
+
+		diffH:html_rld_cb,
+		qs:{v:1},
+	},
+}
+
+
+api_test = {}
+
+// <script class="rld" src="ign/m/m_api.js?c=023"></script>
+function insert_js(file){
+	var n = document.createElement("SCRIPT")
+	n.classList.add("rld")
+	n.src=file.url + "?_="+new Date().getTime()
+	// n.rel="stylesheet"
+	$(`script.rld[src^="`+file.url+`"]`).remove()
+	$(".m0.module").after(n)
+}
+function insert_css(file){
+	var url = file.url
+	var n = document.createElement("LINK")
+	n.classList.add("rld")
+	n.href=file.url + "?_="+new Date().getTime()
+	n.rel="stylesheet"
+	 $(`link.rld[href^="`+file.url+`"]`).remove()
+	$(".m0.module").after(n)
+}
+function html_rld_cb(){
+	clog("html_rld_cb!")
+
+}
+
+
+function html_rld_cb2(){
+	clog("html_rld_cb2!",this,[...arguments])
+
+}
+function html_rld_cb3(){
+	clog("html_rld_cb3!",this,[...arguments])
+}
+function html_rld_cb4(rsp,status,xhr){
+	clog("html_rld_cb4!",this,[...arguments])
+	// window[this.success_js](rsp,status,xhr)
+	window[xhr.file.success_js](rsp,status,xhr)
+}
+
+
+function register_rld(file){
+	clog("RR",file)
+	file.cached = rls[file.url]
+	rldi.files[file.url] =  file
+
+}
+
+
+window.qto_stop = 0
+window.qto_cnt = 0
+function qto_init(){
+	window.qto_stop = 0
+window.qto_cnt = 0
+	// setTimeout(qto_stop_fn,1000)
+	setTimeout(qto_stop_fn,100)
+	qto()
+
+}
+function qto_stop_fn(){
+	clog("qto_stop_fn")
+	window.qto_stop =1
+}
+function qto(){
+	clog("QTO",window.qto_cnt)
+	// clog("QTO",window.qto_cnt,$(`script.rld[src^="ign/m/timer/m.js"]`))
+	window.qto_cnt += 1
+	if (!window.qto_stop){
+		setTimeout(qto,1)
+	}
+
+}
+
+
+
+	// $(`script.rld[src^="ign/m/timer/m.js"]`).remove()
+	// ign/m/timer/m.js
+
+
+
+
+// mtx ={js:["ign/m/timer/m.js"],css:["ign/m/timer/m.css"],html:["ign/m/timer/m.html"]}
+// mtx ={js:["ign/m/timer/m.js"],css:["ign/m/timer/m.css"],html:[{url:"ign/m/timer/m.html",diffH:html_rld_cb2,success:html_rld_cb4,}]}
+mtx ={	
+	// js:["ign/m/timer/m.js","ign/m/timer/m0.js"],
+	js:["ign/m/timer/m0.js","ign/m/timer/m.js",],
+	css:["ign/m/timer/m.css"],
+	html:[{url:"ign/m/timer/m.html",diffH:get_cui_html,success:html_rld_cb4,success_js:"html_js_handler"}]
+	}
+
+function add_module(o){
+	var k,v
+	let file 
+		// qto_init()
+		// file = jclone(api_dflts.css)
+	for (k of o.css || []){
+		if (typeof(k) == "string"){
+			 file = $.extend(true,{},api_dflts.css, {url:k})
+		} else {
+			 file = $.extend(true,{},api_dflts.css, k)
+		}
+		// file = jclone(api_dflts.css)
+		// file.url = k
+
+		register_rld(file)
+		insert_css(file)
+
+		api_test[file.url]=file
+		clog("~",k)
+	}
+	for (k of o.js || []){
+		if (typeof(k) == "string"){
+			 file = $.extend(true,{},api_dflts.js, {url:k})
+		} else {
+			 file = $.extend(true,{},api_dflts.js, k)
+		}
+		// file = jclone(api_dflts.js)
+		// file.url = k
+
+		register_rld(file)
+		insert_js(file)
+
+		api_test[file.url]=file
+		clog("~",k)
+	}
+	for (k of o.html || []){
+		if (typeof(k) == "string"){
+			 file = $.extend(true,{},api_dflts.html, {url:k})
+		} else {
+			 file = $.extend(true,{},api_dflts.html, k)
+		}
+		// file = jclone(api_dflts.html)
+		// file.url = k
+		register_rld(file)
+		api_test[file.url]=file
+		clog("~",k)
+		rfile = file
+		get_cui_html(file)
+	}
+	/*
+	// clog()
+	var css_url = "ign/m/timer/m.css"
+	var css_file = {
+		url:css_url,
+		diffH:cssrh,
+		qs:{v:1},
+	}
+	rldi.files[css_file.url] =  css_file
+	// var n = document.createElement("LINK")
+	// n.classList.add("rld")
+	// n.href=css_url + "?_="+new Date().getTime()
+	// n.rel="stylesheet"
+	// $(".m0.module").after(n)
+
+	// n.class="rld"
+
+	// return n
+
+	*/
+	    // <link class="rld" rel="stylesheet" href="ign/r0.css?c=023">
+	// rldi.files[css_file.url] =  css_file
+	// insert_css()
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// get_cui_html(rfile)
+
+
+
+
+
+
+
+setTimeout(add_module,300,mtx)
+
+
+// add_module(mtx )

m/m_api_html.js

@@ -0,0 +1,239 @@
+
+
+
+
+
+
+
+
+
+
+// insert
+
+
+// insert
+
+
+
+// small_video after
+// small_video ui
+// psudo_small_video
+
+// location ui
+// psudo location ui
+
+
+
+// small_video_toolbar
+
+
+// pseudo_small_video
+// small_video_ui
+// small_video_after
+
+
+
+
+
+
+
+function init_api0(){
+	$(".plugin_top").remove()
+	var n
+	n = `<div class="plugin_top"><div class="m">ABC</div></div>`
+	// n = `<span class="plugin_top"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top pseudo_vid small_vid"><span class="m">ABC</span></span>`
+	// n = `<span class="plugin_top pseudo_vid videocontainer this_con rloc remote_vid small_vid display-avatar-only"></span>`
+	n = `<span class="plugin_top pseudo_vid videocontainer this_con rloc remote_vid small_vid display-avatar-only"><span class="m">ABC</span></span>`
+
+	// add_node(n,`.small_vid`,"append")
+	// add_node(n,`.small_vid`,"after")
+	// add_node(n,`.jdiv`,"append")
+	// add_node(n,`.cont.c1`,"append")
+
+}
+
+// vroot.vproc.sizes
+
+
+// toolbox-content
+// button-group-left
+// button-group-center
+// button-group-right
+// toolbox-button
+
+function init_api(){
+	$(".plugin_top").remove()
+	var n
+	n = `<div class="plugin_top toolbox-button "><div class="cbar">ABC</div></div>`
+	n = `<span class="plugin_top pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top hidden_vid pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top hidden_vid pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	// n = `<span class="plugin_top pseudo_vid"><span class="m">ABC</span></span>`
+	// n = `<span class="plugin_top pseudo_vid videocontainer this_con rloc remote_vid small_vid display-avatar-only"></span>`
+	// n = `<span class="plugin_top pseudo_vid videocontainer this_con rloc remote_vid small_vid display-avatar-only"><span class="m">ABC</span></span>`
+
+	// add_node(n,`.small_vid`,"append")
+	// add_node(n,`.small_vid`,"after")
+
+
+
+
+	// add_node(n,`.remote_vid,#localVideoTileViewContainer`,"after")
+	n = `<span class="plugin_top pseudo_vid small_vid "><div class="m">ABC</div></span>`
+	add_node(n,`.remote_vid,#localVideoTileViewContainer`,"after")
+
+
+
+
+
+
+	// add_node(n,`.jdiv`,"append")
+
+	// add_node(n,`.button-group-center`,"append")
+	// add_node(n,`.button-group-right`,"prepend")
+	// add_node(n,`.jdiv`,"prepend")
+
+
+	// add_node(n,`.cont`,"prepend")
+	// add_node(n,`.cont`,"after")
+	try {
+		dispatch_resize()
+	} catch {
+
+	}
+
+}
+
+
+function init_api2(){
+	$(".plugin_top").remove()
+	// dispatch_resize()
+	// return
+	var n
+	n = `<div class="plugin_top toolbox-button "><div class="cbar">ABC</div></div>`
+	n = `<span class="plugin_top pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top hidden_vid pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top hidden_vid pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	// n = `<span class="plugin_top pseudo_vid"><span class="m">ABC</span></span>`
+	// n = `<span class="plugin_top pseudo_vid videocontainer this_con rloc remote_vid small_vid display-avatar-only"></span>`
+	// n = `<span class="plugin_top pseudo_vid videocontainer this_con rloc remote_vid small_vid display-avatar-only"><span class="m">ABC</span></span>`
+
+	// add_node(n,`.small_vid`,"append")
+
+
+
+
+	// add_node(n,`.remote_vid,#localVideoTileViewContainer`,"after")
+	n = `<span class="plugin_top pseudo_vid small_vid "><div class="m">ABC</div></span>`
+	// add_node(n,`.small_vid`,"after")
+	// add_node(n,`.remote_vid,#localVideoTileViewContainer`,"after")
+	// add_node(n,`.remote-videos-container`,"append")
+	add_node(n,`#localVideoTileViewContainer`,"before")
+
+
+
+	// n = `<span class="plugin_top "><div class="m">ABC</div></span>`
+	// n = `<span class="plugin_top overlay"><div class="m">ABC</div></span>`
+
+
+
+	// add_node(n,`.jdiv`,"append")
+/*
+	add_node(n,`.button-group-center`,"append")
+	add_node(n,`.button-group-right`,"append")
+	add_node(n,`.button-group-left`,"append")
+
+
+	add_node(n,`.button-group-center`,"prepend")
+	add_node(n,`.button-group-right`,"prepend")
+	add_node(n,`.button-group-left`,"prepend")
+*/
+	// add_node(n,`.toolbox-content`,"prepend")
+	// add_node(n,`.toolbox-content`,"before")
+	// add_node(n,`.toolbox-content`,"after")
+
+	// add_node(n,`.toolbox-background`,"after")
+	// add_node(n,`.toolbox-background`,"append")
+	// add_node(n,`.toolbox-background`,"append")
+
+	// add_node(n,`.new-toolbox`,"append")
+	// add_node(n,`.new-toolbox`,"prepend")
+	// add_node(n,`#react`,"prepend")
+	// add_node(n,`body`,"prepend")
+	// add_node(n,`body`,"append")
+
+
+
+
+	// add_node(n,`.jdiv`,"prepend")
+	// add_node(n,`.jdiv`,"append")
+
+
+	// add_node(n,`.cont`,"prepend")
+	// add_node(n,`.cont`,"after")
+	try {
+		dispatch_resize()
+	} catch {
+
+	}
+
+
+}
+
+function init_api3(){
+	$(".plugin_top").remove()
+	// dispatch_resize()
+	// return
+	var n
+	// ".top_toolbox,.vid_toptoolbar_hook"
+	n = `<div class="plugin_top toolbox-button "><div class="cbar">ABC</div></div>`
+	n = `<span class="plugin_top pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top hidden_vid pseudo_vid small_vid"><div class="m">ABC</div></span>`
+	n = `<span class="plugin_top hidden_vid pseudo_vid small_vid"><div class="m">ABC</div></span>`
+
+	n = `<span class="plugin_top pseudo_vid small_vid "><div class="m2 xbox">ABC</div></span>`
+
+
+	add_node(n,`#localVideoTileViewContainer`,"before")
+	n = `<span class="plugin_top"><div class="m xbox">ABC</div></span>`
+	add_node(n,`.top_toolbox,.vid_toptoolbar_hook`,"append")
+	// add_node(n,`.dev_hook`,"append")
+	add_node(n,`.button-group-right`,"prepend")
+
+	try {
+		dispatch_resize()
+	} catch {
+
+	}
+
+}
+// Add Psudo vid
+// video toolbar hook
+// window top margin
+// window window bottom toolbar
+
+
+
+function add_node(n,rn,i) {
+	$(rn)[i](n)
+	// after
+	// $(".plugin_top")
+
+
+	// body...
+
+
+}
+init_api3()
+// C:\bspace\repos\jmc\ign_kutd\m\m_api_html.js
+
+
+
+
+// div.dev_hook.top_toolbox.jdiv
+// div.dev_hook.indicator_hook.vid_toptoolbar_hook.jdiv.t0
+
+
+
+

m/m_const.js

@@ -0,0 +1,146 @@
+
+
+window.m_const = {
+
+}
+
+
+window.m_const.exclude = Symbol("exclude")
+window.m_const.include = Symbol("include")
+// window.m_const.exclude = Symbol("include")
+
+
+
+// glob_react.Filmstrip._getThumbs = function (onlyVisible = false) {
+_getThumbs_mod_junk = function (onlyVisible = false) {
+        // let selector = 'span';
+
+        // console.log("crnr flm getThumbs",!!(window.log_tb))
+        // console.log("crnr flm getThumbs",this,this.filmstripRemoteVideos)
+        // window.log_tb ? log_tb(new Error(),"getThumbs") : 0
+        
+
+        // console.trace("getThumbs_tb")
+        let selector = '.remote_vid,.pseudo_vid';
+        selector = window.glob_sel || selector;
+        let filter = '';
+
+        if (onlyVisible) {
+            filter += ':visible';
+        }
+
+        // const remoteThumbs = this.filmstripRemoteVideos.children(selector);
+        // const remoteThumbs = this.filmstripRemoteVideos.find(selector);
+        const filmstripRemoteVideos =  $('#filmstripRemoteVideosContainer')
+        // const localThumb = $('#localVideoContainer');
+        // const localThumb = filmstripRemoteVideos.children('#localVideoContainer');
+        const localThumb = filmstripRemoteVideos.children("#localVideoTileViewContainer").children('#localVideoContainer');
+        // const localThumb = filmstripRemoteVideos.children($('#localVideoContainer'));
+        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).filter(filter) : filmstripRemoteVideos.find(selector);
+        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).children(filter) : filmstripRemoteVideos.children(selector);
+        const remoteThumbs = filter ? filmstripRemoteVideos.children(selector).filter(filter) : filmstripRemoteVideos.children(selector);
+        
+
+        // clog("$$$",localThumb.hasClass('hidden') ,localThumb.find(".local_vid").length,filmstripRemoteVideos.find("#localVideoContainer").length)
+        clog("$$$2",localThumb.length, (localThumb.hasClass('hidden') ,localThumb.find(".local_vid").length || filmstripRemoteVideos.find("#localVideoContainer").length))
+
+        // Exclude the local video container if it has been hidden.
+        // if (localThumb.hasClass('hidden') && ( ! (localThumb.find(".local_vid").length && filmstripRemoteVideos.find(#localVideoContainer)) ) ) {
+        // if (localThumb.hasClass('hidden') || ( ! (localThumb.find(".local_vid").length || filmstripRemoteVideos.find("#localVideoContainer")) ) ) {
+        // if (localThumb.hasClass('hidden') || ( ! (localThumb.find(".local_vid").length || filmstripRemoteVideos.find("#localVideoContainer").length) ) ) {
+        if (localThumb.hasClass('hidden') || ! localThumb.length  ) {
+            return { remoteThumbs };
+        }
+        // return { remoteThumbs };
+
+        return { remoteThumbs,
+            localThumb };
+}
+
+
+
+glob_react.Filmstrip._getThumbs_works = function (onlyVisible = false) {
+    // _getThumbs_works(onlyVisible = false) {
+        // let selector = 'span';
+
+        // console.log("crnr flm getThumbs",!!(window.log_tb))
+        // console.log("crnr flm getThumbs",this,this.filmstripRemoteVideos)
+        // window.log_tb ? log_tb(new Error(),"getThumbs") : 0
+        
+
+        // console.trace("getThumbs_tb")
+        let selector = '.remote_vid,.pseudo_vid';
+        selector = window.glob_sel || selector;
+        let filter = '';
+
+        if (onlyVisible) {
+            filter += ':visible';
+        }
+
+        const localThumb = $('#localVideoContainer');
+        // const remoteThumbs = this.filmstripRemoteVideos.children(selector);
+        // const remoteThumbs = this.filmstripRemoteVideos.find(selector);
+        const filmstripRemoteVideos =  $('#filmstripRemoteVideosContainer')
+        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).filter(filter) : filmstripRemoteVideos.find(selector);
+        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).children(filter) : filmstripRemoteVideos.children(selector);
+        const remoteThumbs = filter ? filmstripRemoteVideos.children(selector).filter(filter) : filmstripRemoteVideos.children(selector);
+
+        // Exclude the local video container if it has been hidden.
+        if (localThumb.hasClass('hidden')) {
+            return { remoteThumbs };
+        }
+
+        return { remoteThumbs,
+            localThumb };
+
+    }
+
+
+
+ glob_react.Filmstrip._getThumbs_buggy = function(onlyVisible = false) {
+    // _getThumbs(onlyVisible = false) {
+        // let selector = 'span';
+
+        // console.log("crnr flm getThumbs",!!(window.log_tb))
+        // console.log("crnr flm getThumbs",this,this.filmstripRemoteVideos)
+        // window.log_tb ? log_tb(new Error(),"getThumbs") : 0
+        
+
+        // console.trace("getThumbs_tb")
+        let selector = '.remote_vid,.pseudo_vid';
+        selector = window.glob_sel || selector;
+        let filter = '';
+
+        if (onlyVisible) {
+            filter += ':visible';
+        }
+
+        // const remoteThumbs = this.filmstripRemoteVideos.children(selector);
+        // const remoteThumbs = this.filmstripRemoteVideos.find(selector);
+        const filmstripRemoteVideos =  $('#filmstripRemoteVideosContainer')
+        // const localThumb = $('#localVideoContainer');
+        // $("#filmstripLocalVideoThumbnail > *")
+        // const localThumb = filmstripRemoteVideos.children("#localVideoTileViewContainer").children('#localVideoContainer');
+        // const localThumb = filmstripRemoteVideos.children("#localVideoTileViewContainer").children('#localVideoContainer');
+        const localThumb = $("#filmstripRemoteVideosContainer > #localVideoTileViewContainer,#filmstripLocalVideoThumbnail").children('#localVideoContainer');
+
+
+        // const localThumb = filmstripRemoteVideos.children($('#localVideoContainer'));
+        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).filter(filter) : filmstripRemoteVideos.find(selector);
+        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).children(filter) : filmstripRemoteVideos.children(selector);
+        const remoteThumbs = filter ? filmstripRemoteVideos.children(selector).filter(filter) : filmstripRemoteVideos.children(selector);
+
+        // Exclude the local video container if it has been hidden.
+        // if (localThumb.hasClass('hidden') && ( ! (localThumb.find(".local_vid").length && filmstripRemoteVideos.find(#localVideoContainer)) ) ) {
+        if (localThumb.hasClass('hidden')  || ! localThumb.length )  {
+            return { remoteThumbs };
+        }
+
+        return { remoteThumbs,
+            localThumb };
+
+    }
+
+
+// glob_react.Filmstrip._getThumbs = glob_react.Filmstrip._getThumbs_works
+// glob_react.Filmstrip._getThumbs = glob_react.Filmstrip._getThumbs_buggy

m/m_req.js

@@ -0,0 +1,172 @@
+
+window.ifn_obj =  window.ifn_obj || {	init_conf_join:[], }
+
+function get_mod(participants){
+	if (!participants){
+	participants = get_participants()
+	}
+	var k,v
+	for (v of participants){
+		if (v.role == "moderator"){
+			clog("cui_mod_cd",[v],v.corner_data)
+			return v
+		}
+	}
+}
+function get_participants(){
+	return APP.store.getState()["features/base/participants"]
+}
+function get_local(participants){
+	if (!participants){
+	participants = get_participants()
+	}
+	var k,v
+	for (v of participants){
+		if (v.local){
+			return v
+		}
+	}
+	return APP.store.getState()["features/base/participants"]
+}
+// function am_i_mod() {
+function amimod() {
+	// clog("BX am i mod")
+	try {
+
+	// clog("BX",APP.store.getState())
+	// clog("BXi",get_participants(),get_mod(),get_local())
+	return get_local().role == "moderator"
+	// get_local().role == "moderator" ?  $("body").addClass("dev") : 0
+	} catch (e) {
+
+	// clog("BX wai err:",e)
+	}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+function Someone_Left_Handler(o){
+	// amimod
+	clog("PARTICIPANT_LEFT:...",{that:this,args:[...arguments]},amimod())
+	// o.action.participant.id
+	delete msto.participants[o.action.participant.id]
+}
+
+function Someone_Left_or_Joined_Handler(o){
+	// amimod
+	clog("PARTICIPANT_Left_or_Joined:...",{that:this,args:[...arguments]},amimod())
+	try {
+		APP.store.dispatch(window.glob_react.video_layout.setTileView(false))
+APP.store.dispatch(window.glob_react.rf_filmstrip.setFilmstripVisible(false))
+		if (! $("#vspace_filmstrip_template").length){
+		    init_api6()
+		}
+refresh_toolbars()
+mod_sort()
+new_move()
+
+dispatch_resize()
+	} catch(err) {
+		clog("Someone_Left_or_Joined_Handler err:", err)
+	}
+	// o.action.participant.id
+
+	// delete msto.participants[o.action.participant.id]
+}
+
+
+window.iammod = window.iammod || false
+
+function amimodnow(){
+	var iammod = amimod()
+	window.iammod = iammod
+	if (iammod){
+		refresh_toolbars()
+	}
+	// clog("qxi","amimodnow",amimod())
+}
+
+
+
+
+
+function cji(){
+	clog("      qxi cji.")
+
+	if (window.init_m){
+		// setTimeout(window.init_m())
+	}
+	clog('TMX ifn_obj.init_conf_join',ifn_obj.init_conf_join)
+	if (ifn_obj && ifn_obj.init_conf_join){
+		var k,v
+		for ([k,v] of Object.entries(ifn_obj.init_conf_join)){
+			v()
+		}
+	}
+	// clog("      qxi",$(".contx"))
+	// t5i2.crnr_init()
+	// modify_corners()
+	// clog("      qxi .",$(".contx"),$(".remove_btn,.remove_btn"))
+	// remove_btn
+	// add_corner_btn
+	// clog("      qxi cji-fin")
+}
+function stv(o,ta){
+	clog(o,ta)
+}
+function dev_middleware_listner(o) {
+	if (!o.action.type){
+		return
+	}
+	if (o.action.type != "ENDPOINT_MESSAGE_RECEIVED"){
+		// CONFERENCE_JOINED
+	// clog("QXI",o.action.type)
+	}
+
+
+	
+	switch(o.action.type){
+		case "PARTICIPANT_UPDATED":
+			// clog("~qxi~",o)
+			window.iammod ? 0 : amimodnow()
+
+			// setTimeout(aim,1,o)
+		break;
+		case "PARTICIPANT_LEFT":
+			setTimeout(Someone_Left_Handler,1,o)
+			setTimeout(Someone_Left_Handler,1000,o)
+		case "PARTICIPANT_Joined":
+		case "PARTICIPANT_JOINED":
+			setTimeout(Someone_Left_or_Joined_Handler,1,o)
+			// setTimeout(Someone_Left_or_Joined_Handler,300,o)
+		// clog("PARTICIPANT_LEFT:",{that:this,args:[...arguments]})
+		break;
+		case "SET_TILE_VIEW":
+		stv(o,[this,arguments])
+		break;
+		// SET_TILE_VIEW
+		case "CONFERENCE_JOINED":
+			clog("qxi ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
+			setTimeout(cji,1)
+		break;
+
+	}
+
+	
+	// return
+	// clog("qxi",o)
+	// clog("qxi",o,o.action)
+	// clog("qxi",o.action.type)
+	// body...
+}
+

m/m_utils.js

@@ -0,0 +1,715 @@
+
+if (!window.glob_mx ){
+	window.glob_mx={}
+
+glob_mx.prom = {}
+glob_mx.event_handlers = {}
+glob_mx.cb = {
+	init_db:{}
+}
+glob_mx.filmstrip_handlers  = {}
+//glob_mx.filmstrip_handlers = glob_mx.filmstrip_handlers || {}
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function match(mx,m,o){
+	var k,v,k2,v2
+	var r = 0
+		// clog("@",mx,m,o)
+	for ([k,v] of Object.entries(m || {})){
+		v2 = o[k]
+    // clog("M~",k,typeof(v),typeof(v2),v,v2)
+		if (typeof(v) == "string" && typeof(v2) == "string") {
+			r += !(v==v2)
+		} else if (Array.isArray(v) && Array.isArray(v2)){
+			r += !(isSubset_arr(v,v2))
+		} else if (Array.isArray(v) && typeof(v2) == "string"){
+      // r += !(isSubset_arr(v2,v))
+      // r += !(isSubset_arr(v2,v))
+      r += !v.includes(v2)
+			// clog("!!!!!!!!!!!!!",v,v2,isSubset_arr(v2,v))
+		} else if (Array.isArray(v2) && typeof(v) == "string"){
+			r += !(v2.includes(v))
+		}
+		if (r){
+			return !r
+		}
+	}
+	return !r
+}
+
+
+function isSubset(subset,superset){
+    for (var elem of subset) {
+        if (!superset.includes(elem)) {
+            return false;
+        }
+    }
+    return true;  
+}
+
+function isSubset_arr(subset,superset){
+    for (var elem of subset) {
+    	if (Array.isArray(elem)){
+
+    		if (!new Set(elem).intersection(superset).size){
+    			return false
+    		}
+    	} else if (!superset.includes(elem)) {
+            return false;
+        }
+    }
+    return true;  
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function dispatch_events(e,key){
+	var k,v
+	e.parsed.etype ? 1 : e.parsed.etype = "null"
+	var mflag =0
+		clog("dispatch_events??",e,key)
+
+	for ([k,v] of Object.entries(glob_mx.event_handlers || {}) ) {
+		clog("dispatch_events:",k)
+		if (v.m){
+			mflag = match({},v.m,e.parsed)
+		mflag ? v.fn(e) : 1
+		}
+	}
+}
+
+
+function run_cbs(key){
+	var k,v
+		clog("RUN_CB??",key,glob_mx.cb[key])
+
+	for ([k,v] of Object.entries(glob_mx.cb[key]|| {}) ) {
+		clog("RUN_CB:",k)
+		v()
+	}
+}
+
+
+
+
+
+
+function wait(ms) {
+  return new Promise(r => setTimeout(r, ms));
+}
+
+function attr_info(n){
+	var k,v
+	var ret ={}
+	// clog(".")
+	for (k in n.attributes){
+		// clog(k)
+	}
+	// clog("~")
+	for (k of n.attributes){
+	// for (k of n.attributes){
+		// clog(k)
+	}
+	// clog("--")
+	for ([k,v] of Object.entries(n.attributes)){
+		// clog(k,v,v+"+")
+		// clog("+",[k,v],v)
+		ret[v.name]= v.value
+		// clog(typeof(k),typeof(v))
+	}
+	return ret
+
+
+}
+
+
+
+
+
+
+// ai.from.split((a0,a1,a2,a3)=>{clog({a0,a1,a2,a3});return "z"})
+// tmsgx3({type:"db_sync_request"})
+function mhndlr_rld(that,m){
+	try {
+		window.mx=m
+		var n = m.querySelector(`code`)
+		if (!n){return}
+		var parsed = JSON.parse(n.innerHTML)
+		var ai = attr_info(m)
+		window.ai=ai
+		// clog("FROM",ai.from == glob_mx.all_jids[0])
+		// var id = ai.from.split().slice(-1)[0]
+		var id = ai.from.split("/").pop()
+
+		clog("mhndlr_rld2",m,parsed,n,n.dataset)
+		var o = parsed.payload
+		switch (parsed.type){
+			case "set_msg":
+				pf._set_recv(o.path,o.key,o.val)
+			break;
+			case "event":
+				clog("~event~",parsed)
+				dispatch_events({parsed,ai,m,that})
+			break;
+			case "msg_test":
+				clog("msg_test",parsed)
+			break;
+			case "db_sync_request":
+				// tmsgx3({type:"db_sync_response",payload:pf.root})
+				tmsgx3({type:"db_sync_response",payload:pf.root},{to:ai.from})
+				
+				clog("db_sync_request",parsed)
+			break;
+			case "db_sync_response":
+				if (id == glob_mx.local_id){
+					clog( "db_sync_response ...")
+					break
+
+				}
+					if (glob_mx.prom.init_db_resolve){
+						glob_mx.prom.init_db_resolve({aaa:"dsr",pl:parsed.payload})
+
+					}
+
+				clog("db_sync_response",ai.from == glob_mx.local_id,ai.from,parsed)
+			break;
+
+		}
+		/*
+
+
+		if (parsed.type == "set_msg"){
+			var o = parsed.payload
+			pf._set_recv(o.path,o.key,o.val)
+		} 
+		if (parsed.type == "msg_test"){
+			clog("msg_test",parsed)
+		} 
+		*/
+
+	} catch (err) {
+		clog("mhndlr err:",err)
+	}
+	return true
+}
+
+isProxy = Symbol("isProxy")
+
+
+tlu = {
+	object:"",
+	string:true,
+	number:true,
+	undefined:true,
+	boolean:true,
+}
+
+
+
+function type_info(o){
+	var t 
+	var flags = {
+		leaf:false,
+		deep_not_prx:false,
+		prx:false,
+		isObj:false,
+		isArr:false,
+		els:false,
+	}
+	t = typeof(o)
+	flags.t=t
+	if (!(o === null)){
+		flags.isArr = Array.isArray(o)
+		flags.isObj = Object.prototype == o.__proto__
+	}
+
+	if (tlu[t] === true || o === null){
+		flags.leaf = true
+	} else if (t == "object" && o.__prx){
+		flags.prx = true
+	} else if (t == "object" && (flags.isArr || flags.isObj)){
+		flags.prx = false
+		flags.deep_not_prx = true
+	} else {
+		clog("ELSE")
+		flags.els = true
+	}	
+
+	return flags
+
+	clog(t,flags)
+}
+
+
+
+
+
+function deep_prop(o,p){
+	try {
+	var arr = jc(p)
+	var ret = o
+	while (arr.length){
+		// clog("deep_prop",arr,ret)
+		ret = ret[arr.shift()]
+	}
+	// clog("deep_prop ret",ret)
+	return ret
+	} catch(err){console.error("DEEP_PROP ERR:",err)}
+}
+
+
+
+
+delete Proxy_Factory
+{
+
+class Proxy_Factory {
+	constructor(o,n="dflt"){
+		this.db = o
+		this.n = n
+		this.hidden_props = ["add_proxy","_set","walker","walker_start","prxy","_sett","_sett2"]
+		this._pub_cb =[]
+		this.__prx = true
+		this.SymPrx = Symbol("SymPrx")
+	}
+	init(o){
+		// clog("BP",this,this.baseProp,this.__proto__.baseProp,window.baseProp)
+		this.root = o
+	}
+	sync(o){
+		this.root = jc(o.root)
+		o._pub_cb.push(this._set_recv.bind(this))
+	}
+	get prxy(){
+		return this
+	}
+
+	_set(o,k,v,prx,a0){
+		this.obj[k]=prx
+	}
+
+	_sett(o,k,v,prx,a0){
+		clog("_SETT",this,arguments)
+	}
+	_sett2(o,k,v,prx,a0){
+		clog("_SETT2",this,arguments)
+	}
+
+	set_pub(obj, prop, val,receiver){
+		// clog("qia_pub",obj, prop, val,receiver)
+		// clog("qia_pub2",this.n,obj.__path_arr, prop, jx(val))
+		this._set_pub(obj.__path_arr, prop, jx(val))
+
+	}
+	_set_pub(path,key,val){
+		var k,v
+					// /*
+
+			tmsgx({
+				"type":"set_msg",
+				"payload":{path,key,val},
+			},"code")
+			//		*/
+		for (v of this._pub_cb){
+			v(path,key,val)
+
+		}
+	}
+
+	_set_recv(path,prop,val){
+		// return
+		var p = path
+		var nprop =deep_prop(this.root,p)
+		var dpth = nprop.__dpth
+		if (tlu[typeof(val)]){
+		nprop._set(nprop,prop,val,val)
+		} else {
+		nprop._set(nprop,prop,val,new Proxy(val,this))
+		nprop[prop].add_proxy(nprop,prop,val,dpth+1)
+		}
+		// var tf = {}
+		// this.walker(nprop[prop],tf,dpth+2)
+		this.walker(nprop[prop],{},dpth+2)
+	}
+
+	set(obj, prop, val,receiver){
+		// clog("prx_db set ",this,obj, prop, val,receiver,val.__prx)
+		if (obj[prop] === val){
+			return Reflect.set(...arguments)
+		}
+
+		this.set_pub(obj, prop, val,receiver)
+		this.event_proc("set")
+		
+		if ("__prx" == prop){
+			this.__prx=val
+			return this.__prx
+		}
+
+		if (typeof(val) === "object" && val != null && !(val.__prx)){
+			var ret = Reflect.set(...arguments)
+			this.set_obj(obj, prop, val,receiver)
+			return ret
+		} 
+
+		return Reflect.set(...arguments)
+	}
+	get(obj, prop,receiver){
+		// clog("prx_db get ...",prop==isProxy,this,obj, prop,receiver)
+		if (this.hidden_props.includes(prop)){
+			switch (prop){
+				case "add_proxy":
+				return this.add_proxy.bind(this)
+			break;
+				case "prxy":
+				return this
+				case "_set":
+				// clog("_SET")
+				// return this._set.bind({this})
+				return this._set.bind({that:this,obj, prop,receiver})
+				case "_sett":
+				return this._sett.bind({that:this,obj, prop,receiver})
+				case "_sett2":
+				return this._sett2.bind({that:this})
+				case "walker_start":
+				return this.walker_start
+				case "walker":
+				return this.walker
+			break;
+			}
+		}
+
+		if (isProxy == prop){ return true }
+		if ("__prx" == prop){ return this.__prx }
+
+		return Reflect.get(...arguments)
+	}
+	add_proxy(o,k,v,dpth){
+		// clog("~add_proxy~",o,k,v,dpth)
+		// clog("~add_proxy~",o.__prx,o,k,v,dpth,xpath)
+		var xpath = o.__path
+		var apath = o.__path_arr
+		this.event_proc("add_proxy")
+		if (!apath){
+			apath=[]
+		}
+
+		if (!xpath){
+			xpath="ROOT!"
+		}
+
+		Object.defineProperty(v,"__path_arr",Object.assign({value:apath.concat(k),},this.baseProp))
+		Object.defineProperty(v,"__path",Object.assign({value:xpath+":"+k,},this.baseProp))
+		Object.defineProperty(v,"__dpth",Object.assign({value:dpth,},this.baseProp))
+
+	}
+	set_obj(obj, prop, val,receiver){
+		var dpth = obj.__dpth
+		var tf = {}
+		this.walker(receiver,tf,dpth)
+	}
+
+	walker(o,tfo,dpth=0){
+		clog("qia WALK",this)
+		if (dpth > 7){
+			console.error("MAX DEPTH")
+			return
+		}
+		var k,v
+		var tf 
+			for ([k,v] of Object.entries(o)){
+				tf = type_info(v)
+				if (tf.deep_not_prx){
+					o._set(o,k,v,new Proxy(v,this.prxy))
+					o[k].add_proxy(o,k,v,dpth)
+				this.walker(o[k],tf,dpth+1)
+				}
+			}
+	}
+	walker_start(o,dpth){
+		var tf = type_info(o)
+		o.add_proxy({},[],o,-1)
+		this.walker(o,tf,0)
+	}
+	event_proc(e){}
+}
+window.Proxy_Factory = Proxy_Factory
+
+Proxy_Factory.prototype.baseProp={
+	writable: true,
+	// enumerable: true,
+	enumerable: false,
+	configurable: true,
+	}
+}
+
+
+function arr_match(m,o){
+	var k,v
+	var r = 0
+	for ([k,v] of Object.entries(m || {})){
+		if (o[k] != v.valueOf()){
+			r += 1
+			return !r
+		}
+
+	// for ([k,v] in m){
+		// case 
+		clog(k,v)
+	}
+	return !r
+}
+
+permissions_def = {
+	participants:{
+		m:["participants"],
+		fn(set_scope,match){
+
+
+			clog("FN....",match.fp,match.fp[1] == window.glob_mx.local_id)
+			if (match.fp[1] != window.glob_mx.local_id)
+				throw "permission err"
+			return 
+		},
+	}
+}
+// 
+// msto.my_data.prxy.__proto__.__proto__.set.call(msto.my_data.prxy,msto.participants,"abc2",{})
+permissions_def__set = {
+	participants:{
+		m:["participants"],
+		fn(set_scope,match){
+
+
+			clog("FN....",match.fp,match.fp[1] == window.glob_mx.local_id)
+			if (match.fp[1] != window.glob_mx.local_id)
+				// throw "permission err"
+			return 
+		},
+	}
+}
+
+
+{
+	class Proxy_Permissions extends Proxy_Factory {
+		constructor(a,a1){
+			super(...arguments)
+		}
+		set(obj, prop, val,receiver){
+			clog("PRX_PERM",obj.__path_arr,prop)
+			var k,v
+			var r
+			var matched 
+			var fp = obj.__path_arr.concat(prop)
+			for ([k,v] of Object.entries(permissions_def)){
+				matched = arr_match(v.m,fp)
+				if (matched){
+					r = v.fn({that:this,obj, prop, val,receiver},{fp,k,v}) || {}
+				}
+				// if (r.return)
+			}
+			// case
+			// if (obj.__path_arr && obj.__path_arr.length){}
+			super.set(obj, prop, val,receiver)
+		}
+		_set(){
+			clog("Proxy_Permissions _set")
+			super._set(...arguments)
+		}
+	}
+	window.Proxy_Permissions = Proxy_Permissions
+}
+
+
+msto_z = {
+	// private_local:{},
+	// participant_local:{},
+	conference:{},
+	participants:{
+	},
+}
+
+
+
+
+
+function pfnf(o){
+	return  function(resolve, reject){
+		o.resolve=resolve
+		o.reject=reject
+		// clog(arguments)
+	}
+}
+
+
+
+
+
+
+
+
+function init_db_cb(){
+}
+function init_sync_participant(){
+}
+function init_db(objx){
+		var obj
+	if (objx.participants){
+		obj = objx
+	} else {
+		obj = objx.pl
+	}
+	// var obj = obj.pl
+	clog("INIT DB...",objx,obj)
+pf = new Proxy_Permissions({},"pf")
+msto_prx = new Proxy(obj,pf)
+window.msto_prx0 =msto_prx
+// msto_prx = new Proxy(msto_z,pf)
+pf.init(msto_prx)
+msto_prx.walker_start(msto_prx)
+
+pf.root.participants[glob_mx.local_id] = {}
+
+
+window.msto= {
+	participants:pf.root.participants,
+	conference:pf.root.conference,
+	my_data:pf.root.participants[glob_mx.local_id],
+	private_local:{},
+}
+// var k,v
+clog("RUN_CB...")
+run_cbs("init_db")
+}
+
+function init_mu(persistent_mods){
+	// .role == "moderator"
+		clog(">>>>>>>>>>>>>>>>>>>.. RUN_CB")
+var participants = get_participants()
+clog(participants)
+
+
+
+
+var local = get_local(participants)
+	if (window.glob_mx.local_id && persistent_mods && local.role=="moderator"){
+		// if window.glob_mx.local_id
+		clog("no RUN_CB")
+
+		return
+	}
+window.glob_mx.local_id = local.id
+var k,v
+window.glob_mx.all_ids = []
+window.glob_mx.all_jids = []
+for (v of participants){
+	window.glob_mx.all_ids.push(v.id)
+	window.glob_mx.all_jids.push(`nnnx@conference.jfidev.com/${v.id}`)
+}	
+	var rr = {}
+	var prom1 = new Promise(pfnf(rr));
+	prom1.then(init_db)
+	// setTimeout(rr.reject,2000,"RESP DB Timeout")
+	// setTimeout(rr.resolve,4000,"RESP DB Timeout")
+	// setTimeout(rr.resolve,4000,msto_z)
+	// setTimeout(rr.resolve,4000,{aaa:"timedout",pl:msto_z})
+	setTimeout(rr.resolve,5000,{aaa:"timedout",pl:msto_z})
+
+	if (participants.length > 1){
+	glob_mx.prom.init_db_resolve = rr.resolve
+		tmsgx3({type:"db_sync_request"})
+
+	} else {
+		// glob_mx.prom.init_db_resolve(msto_z)
+		rr.resolve(msto_z)
+	// init_db()
+
+	}
+}
+
+
+
+
+function create_db(){
+	
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+function isident(){
+	return JSON.stringify(pf.root) == JSON.stringify(pf2.root)
+}
+
+
+
+function init_mu_runner(){
+	if (window.glob_mx.conf_joined){
+		init_mu(...arguments)
+	}
+}
+
+
+function init_mx2(){
+	clog("INITMX3")
+	window.glob_mx.conf_joined =1
+	init_mu_runner()
+	// add_handler_m(mhndlr)
+}
+ifn_obj.init_conf_join.push(init_mx2)
+
+// init_mu_runner("auto")
+init_mu_runner("")
+
+
+
+
+
+
+
+
+clog("RUN_CB!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!")

m/mdev.js

@@ -0,0 +1,418 @@
+
+
+
+
+
+
+
+
+o = {a:2,b:3}
+
+// Object.defineProperties()
+Object.defineProperty(o,"b",{
+	enumerable:false,
+})
+Object.defineProperty(o,"c",{
+	enumerable:false,
+})
+Object.defineProperty(o,"d",{
+	// enumerable:false,
+})
+
+zxc2 = Object.getOwnPropertyDescriptors (o)
+// zxc2.a.enumerable=false
+
+
+
+ 
+function okv(obj) {
+	var k,v
+	for ([k,v] of Object.entries(obj))
+	// body...
+	clog("!",k,v)
+}
+
+cnt = 0
+
+
+
+prxt = {
+	set:function(obj, prop, val,receiver){
+		clog("prxt set ",obj, prop, val,receiver)
+		return
+
+		return Reflect.set(...arguments)
+	},
+	get:function(obj, prop,receiver){
+
+
+
+
+
+		
+		if (window.cnt){
+		window.cnt+=1
+		clog("prxt get ret",cnt,prop)
+			return
+		}
+		window.cnt+=1
+		clog("prxt get",obj, prop,receiver)
+		// clog("prxt get",prop)
+		// clog("prxt get")
+		return
+
+		return Reflect.get(...arguments)
+	},
+	// __prx:true,
+	// rec:
+
+}
+
+
+
+
+delete obsObj
+{
+
+class obsObj {
+	constructor(o){
+		this.db = o
+	}
+	_pub_msg(m){
+		clog("ixi PUB MSG",m)
+	}
+	_rec_msg(that,m){
+		clog("ixi REC MSG2",m)
+	}
+	__noSuchMethod__(){
+		clog("__lookupGetter__~",arguments)
+	}
+}
+window.obsObj = obsObj
+glob_mx.obsobj =new obsObj({})
+glob_mx.obsobj2 =new obsObj({})
+}
+
+
+glob_mx.obsobj.__proto__ = new Proxy(glob_mx.obsobj.__proto__,prxt)
+
+delete Magic
+{
+
+class Magic {
+    constructor () {
+        return new Proxy(this, this);
+    }
+    get (target, prop) {
+        return this[prop] || 'MAGIC';
+    }
+}
+window.Magic = Magic
+glob_mx.magic =new Magic({})
+glob_mx.magic2 =new Magic({})
+// glob_mx.magic3 =new Magic({})
+}
+// __lookupGetter__
+
+// function replacer(a0,a1,a2,a3,a4){
+hdn = [
+"__path_arr",
+"__path",
+"__dpth",
+]
+
+function replacer(key,val){
+	// clog("REP",key,val,this)
+	var v,k
+	if (typeof(val) == "object" && val != null){
+		// val._add="Z"
+		v = Object.assign({},val)
+		for (k of hdn){
+			v[k] = val[k]
+		}
+		return v
+	}
+	return val
+	// return a0
+}
+
+
+function jh(o){
+	return JSON.parse(JSON.stringify(o, replacer))
+}
+
+
+s1 ={a:{b:{c:3}}}
+// JSON.stringify({a:{b:{c:3}}}, replacer)
+// JSON.stringify({}, replacer)
+// JSON.stringify({a:{b:{c:3}}}, replacer)
+// JSON.stringify({}, replacer[, space]])
+// 
+m = {}
+m.m0 = {
+	// k:["z2"]
+}
+m.m1 = {
+	k:["z2","z3"]
+}
+m.m2 = {
+	k:["z3"]
+}
+// m.
+
+
+function isSubset(subset,superset){
+    for (var elem of subset) {
+        if (!superset.includes(elem)) {
+            return false;
+        }
+    }
+    return true;  
+}
+
+function isSubset_arr(subset,superset){
+    for (var elem of subset) {
+    	if (Array.isArray(elem)){
+
+    		if (!new Set(elem).intersection(superset).size){
+    			return false
+    		}
+    	} else if (!superset.includes(elem)) {
+            return false;
+        }
+    }
+    return true;  
+}
+
+
+function sym_info(o){
+	var k,v 
+	for ([k,v] of Object.entries(syms)){
+		// clog(k,v)
+		clog(k,o[v])
+	}
+}
+
+function art(m,o){
+	var k,v
+	var r = 0
+	var ret = {}
+	var md =Object.getOwnPropertyDescriptors(m)
+
+	for ([k,v] of Object.entries(md)){
+		if (typeof(v.value) == "symbol"){
+			r+=1
+			ret[k]=v.value
+		}
+
+
+	// for ([k,v] in m){
+		// case 
+		clog(k,typeof(v.value),v.value,[v])
+	}
+	return {cnt:r,o:ret}
+}
+syms = art(Symbol).o
+
+function match(mx,m,o){
+	var k,v,k2,v2
+	var r = 0
+		// clog("@",mx,m,o)
+	for ([k,v] of Object.entries(m || {})){
+		v2 = o[k]
+    // clog("M~",k,typeof(v),typeof(v2),v,v2)
+		if (typeof(v) == "string" && typeof(v2) == "string") {
+			r += !(v==v2)
+		} else if (Array.isArray(v) && Array.isArray(v2)){
+			r += !(isSubset_arr(v,v2))
+		} else if (Array.isArray(v) && typeof(v2) == "string"){
+      // r += !(isSubset_arr(v2,v))
+      // r += !(isSubset_arr(v2,v))
+      r += !v.includes(v2)
+			// clog("!!!!!!!!!!!!!",v,v2,isSubset_arr(v2,v))
+		} else if (Array.isArray(v2) && typeof(v) == "string"){
+			r += !(v2.includes(v))
+		}
+		if (r){
+			return !r
+		}
+	}
+	return !r
+}
+
+
+// clog("m1,m2",match({},m.m1,m.m2))
+// clog("m2,m1",match({},m.m2,m.m1))
+
+// clog("m2,m0",match({},m.m2,m.m0))
+// clog("m0,m2",match({},m.m0,m.m2))
+
+
+a = ["A","B","C"]
+a1 = ["A","B",,"D"]
+a1[-1]="z"
+a1["q"]="z2"
+s2 = "str2"
+
+r1 = [/a\d/,/b[a-z]\d/]
+
+delete Str
+{
+
+class Str extends String {
+	// constructor(o){
+		// super(o)
+	// }
+	/*
+		this.db = o
+	}
+	_pub_msg(m){
+		clog("ixi PUB MSG",m)
+	}
+	_rec_msg(that,m){
+		clog("ixi REC MSG2",m)
+	}
+	*/
+}
+window.Str = Str
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function gpt(){
+	try {
+	clog("gx gpt",get_participants)
+	clog("gx gpt2",get_participants())
+
+	}	catch (err) {
+
+	clog("gx gpt err:",err)
+	}
+}
+
+gpt()
+
+
+
+{
+
+class QString extends String {
+    isEmpty() {
+        return this.length === 0;
+    }
+    concat(){
+      return new QString(this + Array.prototype.join.call(arguments, ''));
+    }
+}
+
+var testQStr1 = new QString("abc");
+var testQStr2 = new QString("as easy as");
+var testQStr3 = new QString("123");
+var testStr3 = new String("123");
+
+console.log(testQStr1,testQStr1 == "abc");
+test1 = testQStr1.concat(testQStr2,testQStr3);
+console.log(test1,test1=="abcas easy as123");
+
+
+
+
+}
+
+
+
+
+
+
+
+
+
+
+function switch_t(m,o){
+	// var t 
+	// var flags = {
+	// 	leaf:"??",
+	// 	prx:"??",
+	// }
+	// t = typeof(o)	
+	// t=o
+	// var s1 = t
+	// var s2 = 2
+	// var s0 = [s1,s2]
+	// switch (...s0){
+	switch (o[0],o[1]){
+		case m[0][0],m[0][1]:
+		clog("m0")
+	break;
+		case  m[1][0],m[1][1]:
+		clog("m1")
+		clog(m[1][0],m[1][1],":",o[0],o[1])
+		// clog("~MX~","tlu")
+	break;
+	default:
+		clog("default")
+
+	}
+}
+o1 = []
+m1 = [[],[]]
+function wait(ms) {
+  return new Promise(r => setTimeout(r, ms));
+}
+pfn1= async function(resolve, reject) {
+	clog("RESV")
+  // resolve('Success!');
+	window.pfn1_cb = function(/*resolve, reject*/) {
+  resolve('Success!');
+	}
+	await wait(3000)
+	
+	reject("TIMED_OUT")
+}
+pfn2=  function(resolve, reject) {
+	clog("RESV")
+  resolve({zzz:'Success!'});
+
+
+}
+
+prm ={}
+
+// prm.resolve("zzz")
+// promise1 = new Promise(pfn1);
+
+
+promise1 = new Promise(pfnf(prm));
+
+setTimeout(prm.reject,3000,"ST REJ")
+
+	clog("and then")
+promise1.then(function(value) {
+  console.log(this,value,arguments);
+  // expected output: "Success!"
+});
+
+promise1.then(function(value) {
+  console.log("this,value,arguments");
+  // expected output: "Success!"
+});
+
+promise1.catch(function(value) {
+  console.log("REJECT",this,value,arguments);
+  // expected output: "Success!"
+});
+	clog("and then...")
+
+
+prm.resolve("11111zzz","zzzzzzz")

m/timer/m.css

@@ -0,0 +1,426 @@
+
+
+
+
+
+.videocontainer__toptoolbar  {
+	/*opacity: 0;*/
+	/*display: none;*/
+}
+
+.remotevideomenu  {
+	/*outline: 2px solid #0ff;*/
+	}
+
+
+
+.abs {
+	background: #0ff;
+	background: #0080;
+	/*outline: 2px solid #fff;*/
+	position: absolute;
+	z-index: 100;
+	top:0;
+	left:0;
+	right: 0;
+	bottom: 0;
+	margin: inherit;
+	/*border: 2px solid #fff;*/
+	/*border-radius: 100%;*/
+	/*border-radius: 50%;*/
+	/*border-radius: 25%;*/
+	/*width: 100%;*/
+	/*height: 100%;*/
+}	
+
+
+.cont.z {
+	/*opacity: 0;*/
+	width: 33%;
+	width: calc(33% - 1px);
+	width: 100%;
+	/*padding: 2px;*/
+	height: 100%;
+	/*background: #0ff8;*/
+	/*display: inline;*/
+	position: relative;
+	display: inline-block;
+	/*display: inline;*/
+}
+
+.cont.z {
+	/*opacity: 0;*/
+	width: 33%;
+	width: calc(33% - 1px);
+	width: 100%;
+	/*padding: 2px;*/
+	height: 100%;
+	/*background: #0ff8;*/
+	/*display: inline;*/
+	position: relative;
+	display: inline-block;
+	/*display: inline;*/
+}
+
+
+
+.c1.z{
+	/*background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(71,71,71,0));*/
+	background-color: #246 !important;
+	background-color: #fff !important;
+	/*background-color: # !important;*/
+	background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(0,0,0,0));
+	background-image:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,0));
+	background-image:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,0));
+}
+
+.icont {
+	background: #0000 !important;
+	background: #0ff8;
+	/*outline: 2px solid red;*/
+	width: 100%;
+	height: 100%;
+	/*z-index: */
+	position: absolute;
+	position: relative;
+}
+.ic3 {
+	background: #ff08;
+
+}
+.ic2 {
+	background: #00f8;
+
+}
+.ic3 {
+	/*opacity: 0;*/
+
+}
+.ic2 {
+	/*opacity: 0;*/
+}
+
+
+
+
+
+video {
+
+
+	/*filter: drop-shadow(30px 10px 4px #4444dd);*/
+	/*filter: blur(4px);*/
+	/*filter: invert(100%) grayscale(100%);*/
+	/*filter: grayscale(100%)  invert(100%);*/
+	/*filter: grayscale(100%)  invert(100%) invert(100%) grayscale(100%);*/
+	/*filter: grayscale(100%);*/
+
+
+	/*filter: saturate(1860%);*/
+}
+
+video {
+	/*filter: grayscale(100%);*/
+}
+
+
+
+.xbox {
+	width: 25px;
+	height: 25px;
+	/*color: #0000;*/
+	color: #000;
+	background: #0ff;
+	background-image: linear-gradient(to top left, #ff8 50%, #0ff 50%);
+}
+
+.xbox2 {
+	/*width: 25px;*/
+	/*position: */
+	/*height: 25px;*/
+	/*color: #0000;*/
+	/*top: 0;*/
+	/*left: 0;*/
+	/*right: 0;*/
+	/*bottom: 0;*/
+	width: 25px;
+	height: 25px;
+
+	/*width: 100%;*/
+	/*height: 100%;*/
+
+	position: relative;
+	position: absolute;
+	/*width: 100%;*/
+	/*height: 100%;*/
+	color: #000;
+	/*background: #0ff;*/
+	background-image: linear-gradient(to top left, #ff8 50%, #0ff 50%);
+}
+
+
+
+.small_vid .xbox:after,.small_vid .xbox2:after{
+/*.xbox:after,.xbox2:after{*/
+	content: "???";
+	z-index: 0;
+	white-space: pre-wrap;
+	content: var(--v_index,":???:") "\A" var(--v_id,":???:");
+	background-color: #fff;
+	position:absolute;
+	top: 0;
+	width: 75px;
+	height: 45px;
+	left: 0;
+	/*right: 0;*/
+	/*bottom: 0;*/
+}
+.small_vid .xbox:after {
+	/*background-color: red;*/
+}
+
+.xbox.m2s {
+	width: 75px;
+	height: 75px;
+
+	width: 100%;
+	height: 100%;
+
+	/*color: #0000;*/
+	/*background: #0ff;*/
+	background: #ff8;
+	/*background-image: linear-gradient(45deg, red 50%, blue 15%);*/
+	background-image: linear-gradient(to top left, #ff8 50%, #0ff 50%);
+
+
+}
+
+
+
+
+.pseudo_vid {
+	/*display: none;*/
+	/*position: relative;*/
+	background-color: #f00;
+	background-image: linear-gradient(to top left, #ff8 50%, #0ff 50%);
+	/*border-radius: 50px;*/
+	/*outline: 8px solid red;*/
+}
+
+.pseudo_vid:after{
+	/*content: "XYZ";*/
+	/*background: #f00;*/
+}
+
+
+.tile-view .pseudo_vid{
+
+	/*margin:5px;*/
+}
+/*.tile-view .pseudo_vid*/
+.tile-view .pseudo_vid,.vertical-filmstrip .pseudo_vid{
+	background-size:contain;
+	/*border: 2px solid transparent !important;*/
+	margin:4 5px;
+	width: 100%;
+}
+/*
+.vertical-filmstrip .pseudo_vid{
+	background-size:contain;
+	border: 2px solid transparent !important;
+	margin:0 2px;
+	width: 100%;
+}
+*/
+.dev_filmstrip .pseudo_vid{
+	/*width: 100px !important;*/
+	/*height: 100px !important;*/
+
+}
+.small_vid {
+	display: block;
+}
+.pseudo_vid {
+	/*display: none;*/
+	position: relative;
+	/*position: absolute;*/
+}
+
+
+
+.vspace {
+	position: absolute;
+	/*height: 500px;*/
+	height: 100%;
+	width: 100%;
+	/*width: calc(100% - 4px);*/
+	width: calc(100% );
+	width: calc(100% - 4px);
+	/*background-color: #555;*/
+	height: calc(100% - 4px);
+	border-radius: 100px;
+
+}
+.vspace.z {
+	position: absolute;
+	/*height: 500px;*/
+	height: 100%;
+	width: 100%;
+	/*width: calc(100% - 4px);*/
+	width: calc(100% );
+	width: calc(100% - 4px);
+	height: calc(100% - 4px);
+	border-radius: 100px;
+	/*z-index: 1;*/
+	/*border:  2px solid #fff;*/
+	/*z-index: 400;*/
+	/*z-index: 2;*/
+	/*background-color: #f00;*/
+}
+.vspace.z:after {
+	content: ",";
+	top: 0;
+	left: 0; 
+	position: absolute;
+	/*height: 500px;*/
+	height: 100%;
+	width: 100%;
+	/*width: calc(100% - 4px);*/
+	/*width: calc(100% );*/
+	/*width: calc(100% - 4px);*/
+	/*height: calc(100% - 4px);*/
+	border-radius: 100px;
+	/*z-index: 1;*/
+	border:  2px solid #fff;
+	/*z-index: 400;*/
+	/*z-index: 2;*/
+	background-color: #f00;
+}
+
+
+.m4 {
+	width: 50px;
+	height: 50px;
+	top: 200px;
+	left: 10px;
+	z-index: 100; 
+	position: relative;
+	background-color: #00f;
+}
+
+
+
+
+.cont {
+	position: relative;
+	position: absolute;
+
+}
+
+.cont.c1.z {
+	position: absolute;
+	width: 135px;
+	height: calc(100% - 100px); 
+}
+
+.cont.c2.z {
+	position: absolute;
+	height: 135px; 
+	width: 100%;
+	/*width: calc(100% - 270px);*/
+	/*margin: auto;*/
+	/*margin: */
+	/*padding-right: : ;*/
+}
+.cont.c3.z {
+	position: absolute;
+	width: 135px; 
+	right: 0;
+	height: calc(100% - 100px); 
+}
+
+
+.icont.ic2.z {
+	width: calc(100% - 270px);
+	/*margin: auto;*/
+	margin:0 135px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.dev_filmstrip {
+	/*position: relative;*/
+	/*position: absolute;*/
+	/*z-index: 100;*/
+}
+
+
+.cont {
+	/*position: relative;*/
+	/*position: absolute;*/
+	/*z-index: 6;*/
+
+}
+
+.cont.c4.z {
+	/*position: relative;*/
+	position: absolute;
+	z-index: 9;
+
+}
+
+.cont.c5.z {
+	/*position: relative;*/
+	/*position: absolute;*/
+	width: 100%;
+	background-color: #555c;
+	z-index: 9;
+
+}
+
+
+video  {
+
+/*object-fit:contain !important;*/
+}
+
+
+
+.toolbox-background{
+	z-index: 100 !important;
+
+	/*background-color: #8888;*/
+}
+/*toolbox-content*/
+
+.overflow {
+	/*width: 200% !important;*/
+	/*overflow: scroll;*/
+	/*zoom:.5;*/
+}
+
+.c6 {
+	overflow-x: scroll;
+	/*width: 200% !important;*/
+	/*zoom:.5;*/
+}

m/timer/m.html

@@ -0,0 +1,156 @@
+
+
+
+
+
+
+
+HI THIS is AN HTML SNIPIT
+
+
+<!-- <div class="mp1">abc</div>
+<div class="mp2">def</div> -->
+
+
+
+
+<span class="plugin_top abs filmstrip_template"><div class="dev_filmstrip">
+	<span class="cont c1">
+		<div class="icont ic1"></div>
+	</span>
+	<span class="cont c2">
+		<div class="icont ic2"></div>
+	</span>
+	<span class="cont c3">
+		<div class="icont ic3"></div>
+	</span>
+</div></span>
+
+
+
+
+<span id="vspace_filmstrip_template0" class="plugin_top abs2"><div class="dev_filmstrip">
+	<span class="cont c1">
+		<div class="icont ic1 vid_container" data-fs_type="vertical" data-fs_handler="vertical"></div>
+	</span>
+	<span class="cont c2">
+		<div class="icont ic2 vid_container" data-fs_type="horizontal" data-fs_handler="horizontal"></div>
+	</span>
+	<span class="cont c3">
+		<div class="icont ic3 vid_container" data-fs_type="vertical" data-fs_handler="vertical"></div>
+	</span>
+	<span class="cont c6">
+		<div class="icont ic6 vid_container" data-fs_type="horizontal" data-fs_handler="horizontal"></div>
+	</span>
+	<span class="cont c5">
+		<div class="icont ic5 vid_container" data-fs_type="single" data-fs_handler="center"></div>
+		<div class="at a1"></div>
+		<div class="at a2"></div>
+		<div class="at a3"></div>
+		<div class="at a4"></div>
+	</span>
+	<span class="cont c4">
+		<div class="icont ic4 vid_container" data-fs_type="single"></div>
+	</span>
+</div></span>
+
+
+
+
+
+
+
+
+
+
+
+<!-- 
+<input type="checkbox" name="">
+ -->
+
+
+
+
+
+
+
+
+
+<span id="vspace_filmstrip_template" class="plugin_top abs2"><div class="dev_filmstrip">
+	<span class="fs_container">
+	<span class="cont c2">
+		<div class="icont ic2 vid_container" data-fs_type="vertical" data-fs_handler="vertical"></div>
+	</span>
+	<span class="cont c1">
+		<div class="icont ic1 vid_container" data-fs_type="horizontal" data-fs_handler="horizontal"></div>
+	</span>
+	<span class="cont c3">
+		<div class="icont ic3 vid_container" data-fs_type="vertical" data-fs_handler="vertical"></div>
+	</span>
+	<span class="cont c6">
+		<div class="icont ic6 vid_container" data-fs_type="horizontal" data-fs_handler="horizontal"></div>
+	</span>
+	<!-- 
+	<span class="cont c5">
+		<div class="icont ic5 vid_container" data-fs_type="single" data-fs_handler="center"></div>
+		<div class="at a1"></div>
+		<div class="at a2"></div>
+		<div class="at a3"></div>
+		<div class="at a4"></div>
+	</span>
+	 -->
+	<span class="cont c4">
+		<div class="icont ic4 vid_container" data-fs_type="single" data-fs_handler="center"></div>
+	</span>
+	</span>
+</div></span>
+
+
+
+
+
+
+
+
+
+<span id="vspace_filmstrip_proto_template" class="plugin_top abs2"><div class="dev_filmstrip">
+	<!-- 
+	<span class="cont c1">
+		<div class="icont ic1 vid_container" data-fs_type="vertical"></div>
+	</span>
+	<span class="cont c2">
+		<div class="icont ic2 vid_container" data-fs_type="horizontal"></div>
+	</span>
+	<span class="cont c3">
+		<div class="icont ic3 vid_container" data-fs_type="vertical"></div>
+	</span>
+	 -->
+
+	<span class="cont c5">
+		<!-- <div class="icont ic5 vid_container" data-fs_type="single"></div> -->
+		<div class="at a1"></div>
+		<div class="at a2"></div>
+		<div class="at a3"></div>
+		<div class="at a4"></div>
+		<div class="at a5"></div>
+		<div class="at a6"></div>
+		<div class="at a7"></div>
+		<div class="at a8"></div>
+
+
+
+		<div class="at at2 b1"></div>
+		<div class="at at2 b2"></div>
+		<div class="at at2 b3"></div>
+		<div class="at at2 b4"></div>
+		<div class="at at2 b5"></div>
+		<div class="at at2 b6"></div>
+		<div class="at at2 b7"></div>
+		<div class="at at2 b8"></div>
+
+
+	</span>
+	<span class="cont c4">
+		<!-- <div class="icont ic4 vid_container" data-fs_type="single"></div> -->
+	</span>
+</div></span>

m/timer/m.js

@@ -0,0 +1,475 @@
+clog("ltest m.js")
+
+function html_js_handler(rsp) {
+	clog("html_js_handler",[...arguments])
+	mod_templates = $(`<span>${rsp}</span>`)
+
+
+	// init_api5()
+	init_api6()
+}
+
+mod_templates = window.mod_templates || $("")
+// mod_templates.find(".filmstrip_template")
+
+html_hooks = {
+	create_video_tile(n){
+		add_node(n,`#localVideoTileViewContainer`,"before")
+		clog("CVT")
+
+	},
+
+
+
+
+
+
+
+
+
+	create_vid_toptoolbar_hook(n){
+		clog("CVT")
+		add_node(n,`.vid_toptoolbar_hook`,"append")
+		// add_node(n,`.vid_toptoolbar_hook_after`,"append")
+	},
+	create_vid_toptoolbar_hook_after(n){
+		clog("CVT")
+		add_node(n,`.vid_toptoolbar_hook`,"append")
+		// add_node(n,`.vid_toptoolbar_hook_after`,"append")
+	},
+
+	// Top of window
+	create_top_toolbox_hook(n){
+		add_node(n,`.top_toolbox`,"append")
+		// add_node(n,`.vid_toptoolbar_hook`,"append")
+		clog("CVT")
+	},
+	create_bottom_toolbox_hook(n){
+		clog("CVT")
+		add_node(n,`.button-group-right`,"prepend")
+	},
+
+
+
+
+
+	create_new_filmstrip(n){
+
+		add_node(n,`#filmstripRemoteVideos`,"prepend")
+	},
+	// filmstripRemoteVideos
+
+}
+
+
+
+function saftly_remove(n,remove_nodes=true){
+	// $(`#filmstripRemoteVideosContainer`).append($(`.cx0 .remote_vid`))
+	// $(`#localVideoTileViewContainer`).append($(`.cx0 .local_vid`))
+	// $(`#filmstripRemoteVideosContainer`).append($(`#localVideoTileViewContainer`))
+	const j =$(n)
+
+	$(`#localVideoTileViewContainer`).append(j.find(".local_vid"))
+	$(`#filmstripRemoteVideosContainer`).append(j.find("#localVideoTileViewContainer"))
+
+	// $(`#filmstripRemoteVideosContainer`).append(j.find(".remote_vid"))
+	$(`#localVideoTileViewContainer`).before(j.find(".remote_vid"))
+	// remove_nodes ? j.remove() : 0
+	remove_nodes ? j.remove() : clog("DO NOT REMOVE")
+
+
+}
+
+
+function init_api5(){
+	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)
+	n = `<span class="plugin_top pseudo_vid small_vid "><div class="m3 xbox2">ABC</div></span>`
+	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
+	// vspace
+
+	add_node(n,`.vspace`,"append")
+
+	try {
+		dispatch_resize()
+	} catch {
+
+	}
+
+}
+
+
+function move_vids(){
+	// var all_vids = $(".small_vid")
+	// var all_vids = $(".remote_vid,.local_vid")
+	var all_vids = $(".small_vid")
+	// var all_vids = $(".remote_vid,#localVideoTileViewContainer")
+	 // $(".cont.c1").append($(".remote_vid"))
+	 // $(".icont.ic1").append(all_vids)
+	 $(".icont.ic1").append(all_vids.splice(0,4))
+	 $(".icont.ic2").append(all_vids.splice(0,4))
+	 // $(".icont.ic2").append(all_vids.slice(0,2))
+	 // $(".icont.ic2").append($(".pseudo_vid")[0])
+
+}
+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
+
+	}
+}
+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
+	// clog("ffcb",this.value,this.checked,[this,...arguments])
+	// disp(glob_react.base_conference.setFollowMe(this.checked))
+}
+function num_pseudo(){
+	msto.conference.repeat = this.value
+	setTimeout(refresh_fs_send,100)
+}
+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()
+	}
+
+	// msto.conference.force_follow = this.checked
+	// clog("ffcb",this.value,this.checked,[this,...arguments])
+	// disp(glob_react.base_conference.setFollowMe(this.checked))
+}
+
+
+// to
+
+function refresh_toolbars(){
+    saftly_remove(".plugin_top.tbar")
+
+    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(n)
+
+    html_hooks.create_vid_toptoolbar_hook_after(n)
+
+    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=${msto.conference.repeat || 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=${msto.conference.scroll_timeout || 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>`
+    // html_hooks.create_top_toolbox_hook(n)
+    // subject
+    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
+
+    window.chk =n
+
+    // n.onclick =
+    add_node(n,`.subject`,"prepend")
+    }
+    // html_hooks.create_top_toolbox_hook(n)
+
+}
+
+// disp(glob_react.base_conference.setFollowMe(true))
+
+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>`
+    // const repeat = 
+    const repeat = msto.conference.repeat || 0
+
+    if ((!isNaN(repeat) && repeat > 0 )){
+    html_hooks.create_video_tile(n.repeat(repeat))
+
+    }
+    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>`
+    refresh_toolbars()
+    
+
+
+    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 {
+
+    }
+
+}
+
+
+
+
+
+
+
+// move_vids()
+
+
+// "."+[...j.classList].join(".")
+
+
+
+function get_hook_types(){
+	var j = $(".dev_hook")
+	var ret = {}
+	var ret = new Map()
+	var k,v
+	for (k of j){
+		v = "."+[...k.classList].join(".")
+		ret.setD(v,0)
+		// ret.get(v) + 1
+		ret.set(v,ret.get(v) + 1)
+		// clog("~",k)
+	}
+	return ret
+
+	// $(".pseudo_vid .xbox").append(h)
+}
+
+
+
+h = `<div class="mp1">abc</div>
+<div class="mp2">def</div>`
+
+
+// $(".pseudo_vid .xbox").append(h)
+// init_api5()
+
+if (window.init_api6){
+	init_api6()
+	mod_sort()
+new_move()
+
+	dispatch_resize()
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+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,
+	// fn:nop,
+	// m:{etype:"timer_start"},
+	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"},
+}

m/timer/m0.js

@@ -0,0 +1,913 @@
+clog("ltest m0.js")
+
+
+
+
+if (window.saftly_remove){
+    // init_api6()
+    // get_avail_width()
+    // clog("REZIE PROTO READY")
+}
+
+    // clog("REZIE PROTO LOAD")
+
+
+
+// glob_mx.filmstrip_handlers = glob_mx.filmstrip_handlers || {}
+// ctstv()
+
+
+glob_mx.filmstrip_handlers[undefined] = function function_name(argument) {
+    // body...
+    clog("FN HANDLER")
+}
+
+
+dflt_css = {
+
+      'padding-top': '',
+      "min-height": ``,
+      "min-width": ``,
+      width: ``,
+      height: ``,
+    
+}
+
+
+
+function fix_avatar(vid){
+    // if ($(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),
+        })
+        // clog(v)
+
+    }
+}
+
+
+
+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 = 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).height() * aspect) 
+  width = ($(cont).height() * aspect) - 10
+  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){
+  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)
+
+}
+
+
+
+
+glob_mx.dims = glob_mx.dims || {} 
+
+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.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()
+    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:"",})
+
+// $("#sharedVideoIFrame")
+// $("#sharedVideo")
+
+
+
+    // resize_thumbs_proto($("#largeVideoContainer"),{})
+
+    /*
+    resize_thumbs_proto($("#sharedVideoIFrame"),{
+        width:s_width,
+        height:h_height,
+        "z-index":10;
+    })
+    */
+
+
+            /*
+    resize_thumbs_proto($("#largeVideoContainer"),[
+        {
+        // 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"},
+        },])
+    //        */
+
+    // largeVideoContainer
+
+}
+
+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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+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=0
+// reverse_indexed_map=0
+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(){
+    // if (amimod()){} else {return}
+    var arr = []
+    var parr = []
+    var ivid = {}
+    var k,v
+    var j = $(".small_vid:not(.pseudo_vid)")
+    // clog(j)
+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
+
+    }
+
+}
+function new_move(){
+    var j 
+    try {
+        j = jc(window.sorted_tiles)
+    } catch (err) {
+        clog("NEW MOVE err:",err)
+    }
+    // var j = $(".pseudo_vid")
+
+    // $(".ic4").append(j.splice(0,1))
+    // $(".ic4").append(j.splice(0,1))
+    $(".ic1").append(j.splice(0,5))
+    $(".ic2").append(j.splice(0,3))
+    $(".ic3").append(j.splice(0,3))
+    // $(".ic6").append(j.splice(0,5))
+    const all_extra = j.splice(0)
+    if (all_extra.length > 5){
+        $(".ic6").addClass("overflow")
+    } else {
+
+        $(".ic6").removeClass("overflow")
+    }
+    $(".ic6").append(all_extra)
+    // $(".ic4").append($(".pseudo_vid")[0])
+
+    // window.sorted_tiles
+}
+function new_move2(){
+    var j 
+    try {
+        j = jc(window.sorted_tiles)
+    } catch (err) {
+        clog("NEW MOVE err:",err)
+    }
+    // var j = $(".small_vid")
+    clog("v1",j.splice(0,1))
+    clog("v2",j.splice(0,5))
+    clog("v3",j.splice(0,3))
+    clog("v4",j.splice(0,3))
+    clog("v5",j.splice(0,5))
+}
+function move_info(){
+    var j = $(".small_vid")
+    var k,v
+    for (v of j){
+        clog(v)
+    }
+    // $(".ic1").append(j.splice(2,5))
+    // $(".ic2").append(j.splice(0,3))
+    // $(".ic3").append(j.splice(0,3))
+    // $(".ic6").append(j.splice(0,5))
+    // $(".ic4").append(j.splice(0,1))
+}
+
+// sort_results = []
+// sort_results = new Map()
+if (window.init_api6){
+    // init_api6()
+mod_sort()
+new_move()
+
+dispatch_resize()
+
+
+
+}
+
+
+
+
+// timeout_scroll_glob=0
+
+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.stop = 1
+    timeout_scroll_glob.rid += 1
+    // timeout_scroll(timeout_scroll_glob.rid)
+    setTimeout(timeout_scroll,timeout_scroll_glob.timeout,timeout_scroll_glob.rid)
+
+}
+// timeout_scroll_start()
+
+
+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
+        clog(arr)
+    for (v of arr){
+        // clog("",v)
+        bcr = v.getBoundingClientRect()
+        ret.arr.push(bcr)
+        isleft = bcr.right < (fs_bcr.right + 10)
+        // isright = bcr.left > (fs_bcr.left + 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
+
+        }
+        
+
+        // ret.first_left ? :
+        // ret.first_right ? :
+    }
+    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")
+    // var vid = s[n]
+    fs_bcr = fs.getBoundingClientRect() 
+    var ov = get_bcrs([...s],fs_bcr)
+    // vid_bcr = vid.getBoundingClientRect() 
+    // clog([fs,vid])
+    /*
+    clog(fs_bcr,vid_bcr)
+    if (vid_bcr.right <= fs_bcr.right && vid_bcr.left >= fs_bcr.left && 0) {
+
+        // clog("IN VIEW")
+    // } else if (vid_bcr.right <= fs_bcr.right) {
+    } 
+    if (vid_bcr.right <= fs_bcr.right) {
+        // clog("<<",vid_bcr.right - fs_bcr.right )
+        // clog("NOT in VIEW")
+    // } else if (vid_bcr.left >= fs_bcr.left) {
+    } 
+     if (vid_bcr.left >= fs_bcr.left) {
+        // clog(">>",vid_bcr.left - fs_bcr.left)
+    } else {
+        // clog("we shouldnt be here")
+    }
+    */
+    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
+            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
+
+        }
+
+    }
+
+    if (ov.first_right){
+        // ov.first_right.scrollIntoView({ behavior: 'smooth', block: 'nearest' ,inline:"nearest"})
+    } else if (ov.first_left){
+        // ov.first_left.scrollIntoView({ behavior: 'smooth', block: 'nearest' ,inline:"nearest"})
+
+    }
+    // window.
+    ov.fs_bcr =fs_bcr
+    window.ov=ov
+    clog("~~~~",ov,fs_bcr,vid)
+    // fs.scr
+    // requestAnimationFrame(raf.bind(timeout_scroll_glob,fs,vid,0,0),"z-index")
+    // requestAnimationFrame(raf.bind(timeout_scroll_glob,fs,vid,inc,inc_mx,0,0),"z-index")
+    // requestAnimationFrame(raf.bind(timeout_scroll_glob,fs,vid,inc,inc_mx,0,0),"z-index")
+    // requestAnimationFrame(raf.bind(timeout_scroll_glob,fs,vid,inc,30,0,0),"z-index")
+    // requestAnimationFrame(raf.bind(timeout_scroll_glob,fs,vid,3,30,0,0),"z-index")
+    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){
+
+    // clog("raf",this,arguments)
+    // clog("raf",cnt,ts)
+    // setTimeout(raf_clog,6000,fs,vid,cnt,ts)
+    fs.scrollBy(inc,0)
+
+
+    // requestAnimationFrame
+    // if (! isNaN(cnt) && cnt > -1 && cnt < timeout_scroll_glob.mx_raf){
+    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"})
+    }
+
+}
+
+// function scroll_chain
+// scroll_to
+setTimeout(scroll_to,500,0)
+
+
+
+

preload.js

@@ -0,0 +1,253 @@
+// clog = console.log
+// function nop(){}
+
+glob_dev_hooks = window.glob_dev_hooks || {}
+glob_dev_fns = window.glob_dev_fns || {}
+window.glob_react = window.glob_react || {i:"r0"}
+
+
+
+
+
+
+
+
+
+
+/*
+
+
+function FS_dec2(fn) {
+  return function() {
+  	// dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    clog("SVD",{ret,that:this,args:[...arguments]})
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+  	// const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	// if (ret2){
+  		// return ret2.ret
+  	// }
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    return ret;
+  }
+}
+*/
+
+
+// svop = jc(SmallVideoOrig.prototype)
+// svop = jc(SmallVideoOrig)
+// svop = Object.assign({},glob_react.Filmstrip)
+// svop = Object.assign({},SmallVideoOrig.prototype)
+// function save_orig()
+orig_classes = window.orig_classes || {}
+react_trc_log = window.react_trc_log || {}
+react_trc_log = window.react_trc_log || {}
+
+
+/*
+window.react_trc_log.SmallVideoTrc0= ["$avatar",
+ "_setThumbnailSize",
+ "bindHoverHandler",
+ "initBrowserSpecificProperties",
+ "_renderDisplayName",
+ "$avatar",
+ "initializeAvatar",
+ "_getAudioLevelContainer",
+ "_getAudioLevelContainer",
+ "updateAudioLevelIndicator",
+ "addAudioLevelIndicator",
+ "updateIndicators",
+ "isCurrentlyOnLargeVideo",
+ "_isHovered",]
+
+
+
+
+
+react_trc_log.SmallVideoTrc = ["_renderDisplayName",
+"_setThumbnailSize",
+"showDominantSpeakerIndicator",
+"setVideoMutedView",
+"initBrowserSpecificProperties",
+"bindHoverHandler",
+"addAudioLevelIndicator",]
+
+*/
+
+
+glob_dev_fns.getTileViewGridDimensions_set_num = function(state,maxColumns,onumberOfParticipants){
+	// return
+	clog("SET NUM PRT")
+	var numberOfParticipants
+	// if (window.glob_dev_fns && window.glob_dev_fns.ret0){return onumberOfParticipants}
+		try {
+    var thumbs = glob_react.Filmstrip._getThumbs()
+			
+// numberOfParticipants = thumbs.remoteThumbs.length + thumbs.localThumb  thumbs.localThumb.length
+numberOfParticipants = thumbs.remoteThumbs.length 
+if (thumbs.localThumb){
+numberOfParticipants += thumbs.localThumb.length 
+
+}
+		} catch(e) {
+			clog("getTileViewGridDimensions_set_num err:",e)
+			return onumberOfParticipants
+
+		}
+	// clog("getTileViewGridDimensions_set_num ret:",numberOfParticipants,thumbs,onumberOfParticipants)
+	// numberOfParticipants < onumberOfParticipants ? numberOfParticipants = onumberOfParticipants : 1
+	// clog("getTileViewGridDimensions_set_num ret2:",numberOfParticipants,thumbs,onumberOfParticipants)
+	// clog("NUM",numberOfParticipants)
+return numberOfParticipants
+
+
+}
+
+
+
+
+window.glob_dbg = window.glob_dbg || {
+	log:{},
+	logs:{},
+}
+
+
+
+
+
+
+
+function log_tb(err,key){
+	var key
+	try{
+
+	key in window.glob_dbg.logs ? 1 : window.glob_dbg.logs[key]=[]
+	// key in window.glob_dbg.log ? 1 : window.glob_dbg.log[key]=[]
+	window.glob_dbg.logs[key].push(err.stack)
+	// window.glob_dbg.log[key].push(err)
+	// clog("LOG_TB",key,err)
+	} catch (e){
+		clog("LOG TB",key,"ERR:",e)
+	}
+	// return new Error()
+}
+
+
+
+
+
+
+
+
+
+
+
+
+function clone_class() {
+	var k,v,p 
+	if (orig_classes.SmallVideoOrig){
+		return
+	}
+	orig_classes.SmallVideoOrig = {}
+	for ([k,p] of Object.entries(Object.getOwnPropertyDescriptors(SmallVideoOrig.prototype))) {
+		v=p.value
+		orig_classes.SmallVideoOrig[k]=v
+	}
+
+}
+// clog("R0...",window.SmallVideoOrig)
+/*
+function loop_proto(){
+	var k,v,p 
+	for ([k,p] of Object.entries(Object.getOwnPropertyDescriptors(SmallVideoOrig.prototype))) {
+		// clog("~",k,v)
+		v=p.value
+		clog("~",k,typeof(v))
+		if (typeof(v) == "function"){
+		SmallVideoOrig.prototype[k] = FS_dec2(v)
+
+		}
+
+	}
+}
+
+*/
+
+
+
+
+
+
+function loop_vids(vids = $(".small_vid")){
+	clog("vids",vids)
+	var k,v
+	// for (k in [...vids]){
+	for (k of vids){
+		clog("..",k)
+	}
+}
+
+
+function log_info0(key){
+	var ret = new Map()
+	var k,v
+	var arr
+	for (v of glob_dbg.log[key]){
+		ret.setD(v.stack,0)
+		ret.set(v.stack,ret.get(v.stack) + 1)
+		arr = v.stack.split("\n")
+		clog(arr[2])
+
+		// v.
+		// clog(k,v)
+	}
+	return ret
+
+}
+
+
+function log_info(key,line_num=2,num_lines=1){
+	var ret = new Map()
+	var ret1 = new Map()
+	var line 
+	var k,v
+	var arr
+	for (v of glob_dbg.logs[key]){
+		ret.setD(v,0)
+		ret.set(v,ret.get(v) + 1)
+		arr = v.split("\n")
+		// clog(arr[3])
+		// clog(arr[2])
+		// line = arr[line_num]
+		line = arr.slice(line_num,line_num+num_lines).join("\n")
+		// if ("an")
+		if (line.includes("anony")){
+
+		} else {
+			// continue
+		}
+
+		// clog(line)
+		ret1.setD(line,0)
+		ret1.set(line,ret1.get(line) + 1)
+
+		// v.
+		// clog(k,v)
+	}
+	return ret1
+
+}
+
+
+function map_loop(m){
+	var k,v
+	for ([k,v] of m){
+		clog(k,v)
+	}
+}
+
+
+
+
+// XMPPAttachInfo.data = {atr:"modme"}

proto_ext.js

@@ -0,0 +1,91 @@
+Map.prototype.setD = function(k,v){
+	if (!this.has(k)){
+		this.set(k,v)
+		// clog("SetD")
+		return 1
+	}
+		// clog("SetD0")
+}
+
+Set.prototype.isSuperset = function(subset) {
+    for (var elem of subset) {
+        if (!this.has(elem)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+Set.prototype.union = function(setB) {
+    var union = new Set(this);
+    for (var elem of setB) {
+        union.add(elem);
+    }
+    return union;
+}
+
+Set.prototype.intersection = function(setB) {
+    var intersection = new Set();
+    for (var elem of setB) {
+        if (this.has(elem)) {
+            intersection.add(elem);
+        }
+    }
+    return intersection;
+}
+
+Set.prototype.difference = function(setB) {
+    var difference = new Set(this);
+    for (var elem of setB) {
+        difference.delete(elem);
+    }
+    return difference;
+}
+
+
+
+
+
+
+
+
+
+
+Set.prototype.union_update = function(setB) {
+    var union = this;
+    for (var elem of setB) {
+        union.add(elem);
+    }
+    return union;
+}
+
+Set.prototype.intersection_update = function(setB) {
+    var intersection = this
+    for (var elem of setB) {
+        if (!this.has(elem)) {
+            intersection.delete(elem);
+        }
+    }
+    return intersection;
+}
+
+Set.prototype.difference_update = function(setB) {
+    var difference = this;
+    for (var elem of setB) {
+        difference.delete(elem);
+    }
+    return difference;
+}
+
+/*
+Set.prototype.symDifference = function(setB) {
+    var difference = new Set(this.union(setB));
+     var intersection = new Set(this.intersection(setB));
+    for (var elem of intersection) {
+        difference.delete(elem);
+    }
+    return difference;
+}
+*/
+
+console.log("test")

proxy_dev.js

@@ -0,0 +1,250 @@
+/*
+function jval(obj,prop,a2,a3){
+	clog("JVAL",arguments,this)
+	return "JVAL ~~"
+}
+
+jk = [
+// Symbol.toPrimitive,
+"toString",
+// "valueOf",
+// Symbol.toStringTag,
+]
+
+function jget(obj,prop,a2,a3){
+  var ret = obj[prop]
+  // if (typeof(ret) == "object"){
+    // ret = new Proxy(ret,ph)
+  // }
+  clog("jdv jget",jk.includes(prop),prop in obj,prop,obj)
+  if (jk.includes(prop)){
+  	clog("RET",this)
+  	return "RET_" + jk.indexOf(prop)
+  } else if (prop == "valueOf"){
+  	return this.valueOf
+
+  }
+  // if (prop in )
+  // if (!(prop in obj) && prop != "undefined_key" ){
+  	// obj.undefined_key = 1
+  // }
+  return ret
+}
+function _jset(obj,prop,val,a3){
+  obj[prop] =val
+  var ret = obj[prop]
+  // if (typeof(ret) == "object"){
+    // ret = new Proxy(ret,ph)
+  // }
+  clog("jdv jget",prop,arguments)
+  return ret
+}
+
+jprox = {
+get:jget,
+valueOf:jval,
+// set:jset,
+// apply:jcall,
+}
+
+*/
+
+rfns = {
+
+	rfn_apply(){																													
+		clog("RFN:apply")
+return Reflect.apply(...arguments)
+	},
+	rfn_construct(){																				
+		clog("RFN:construct")
+return Reflect.construct(...arguments)
+	},
+	rfn_defineProperty(){																						
+		clog("RFN:defineProperty")
+return Reflect.defineProperty(...arguments)
+	},
+	rfn_deleteProperty(){																
+		clog("RFN:deleteProperty")
+return Reflect.deleteProperty(...arguments)
+	},
+	rfn_get0(obj, prop,receiver){																						
+		// clog("RFN:get",this.cnt,prop)
+		if (prop == "dev"){
+			clog("RFN:GET DEV!")
+		}
+		if (!mx_glob.stop){
+			// clog(",>>>>",prop,typeof(prop))
+			var err = new Error()
+			window.log_tb(err,"get") 
+			try {
+				// isNan(Number(prop))
+				var sprop
+			 sprop = prop.toString()
+				if (isNaN(Number(sprop))){
+			 sprop = prop.toString()
+				} else {
+			 sprop = "number"
+
+				}
+			// sprop = typeof(prop)=="symbol" : ?
+			window.log_tb(err,"get_"+sprop) 
+
+		} catch (e) {
+			clog("RFN:ERR",prop)
+
+			window.log_tb(err,"get_"+e) 
+		}
+
+		}
+		// mx_glob.stop ? 1 : window.log_tb(new Error(),"get") 
+		// window.log_tb(new Error(),"get")
+return Reflect.get(...arguments)
+	},
+
+	rfn_get(obj, prop,receiver){																						
+		// clog("RFN:get",this.cnt,prop)
+		if (prop == "dev"){
+			clog("RFN:GET DEV!")
+		} else if (prop == "length" && !mx_glob.stop){
+			window.log_tb(new Error(),"getlen") 
+
+			return obj[prop] 
+			// return obj[prop] + 1
+		}
+		// mx_glob.stop ? 1 : window.log_tb(new Error(),"get") 
+		// window.log_tb(new Error(),"get")
+return Reflect.get(...arguments)
+	},
+
+	rfn_getOwnPropertyDescriptor(){																	
+		clog("RFN:getOwnPropertyDescriptor")
+return Reflect.getOwnPropertyDescriptor(...arguments)
+	},
+	rfn_getPrototypeOf(){																
+		clog("RFN:getPrototypeOf")
+return Reflect.getPrototypeOf(...arguments)
+	},
+	rfn_has(){																							
+		// clog("RFN:has")
+		mx_glob.stop ? 1 : window.log_tb(new Error(),"has") 
+		// window.log_tb(new Error(),"has")
+return Reflect.has(...arguments)
+	},
+	rfn_isExtensible(){																					
+		clog("RFN:isExtensible")
+return Reflect.isExtensible(...arguments)
+	},
+	rfn_ownKeys(){																				
+		clog("RFN:ownKeys")
+return Reflect.ownKeys(...arguments)
+	},
+	rfn_preventExtensions(){																		
+		clog("RFN:preventExtensions")
+return Reflect.preventExtensions(...arguments)
+	},
+	rfn_set(){																					
+		clog("RFN:set")
+return Reflect.set(...arguments)
+	},
+	rfn_setPrototypeOf(){																						
+		clog("RFN:setPrototypeOf")
+return Reflect.setPrototypeOf(...arguments)
+	},
+
+}
+
+
+
+rprox_base = window.rprox_base || {
+	cnt:0,
+	// stop:0,
+}
+rprox0 = {
+	cnt:0,
+apply: rfns.rfn_apply,
+construct: rfns.rfn_construct,
+defineProperty: rfns.rfn_defineProperty,
+deleteProperty: rfns.rfn_deleteProperty,
+get: rfns.rfn_get,
+getOwnPropertyDescriptor: rfns.rfn_getOwnPropertyDescriptor,
+getPrototypeOf: rfns.rfn_getPrototypeOf,
+has: rfns.rfn_has,
+isExtensible: rfns.rfn_isExtensible,
+ownKeys: rfns.rfn_ownKeys,
+preventExtensions: rfns.rfn_preventExtensions,
+set: rfns.rfn_set,
+setPrototypeOf: rfns.rfn_setPrototypeOf,
+}
+
+rprox = {
+	cnt:0,
+// apply: rfns.rfn_apply,
+// construct: rfns.rfn_construct,
+// defineProperty: rfns.rfn_defineProperty,
+// deleteProperty: rfns.rfn_deleteProperty,
+get: rfns.rfn_get,
+// getOwnPropertyDescriptor: rfns.rfn_getOwnPropertyDescriptor,
+// getPrototypeOf: rfns.rfn_getPrototypeOf,
+// has: rfns.rfn_has,
+// isExtensible: rfns.rfn_isExtensible,
+// ownKeys: rfns.rfn_ownKeys,
+// preventExtensions: rfns.rfn_preventExtensions,
+// set: rfns.rfn_set,
+// setPrototypeOf: rfns.rfn_setPrototypeOf,
+}
+
+fbp = []
+mx_glob = window.mx_glob || {
+	mx:60,
+	stop:0,
+} 
+function stop_mx(){
+	clog("RFN STOP MX")
+	mx_glob.stop = !0
+}
+function gen_proxy(){
+	jc(rprox)
+	var ret = Object.assign({},rprox,rprox_base)
+	rprox_base.cnt+=1
+	return ret
+}
+
+
+function get_states_timer(t,mx){
+	// clog("rfn get state...",t,mx)
+	if (mx >= 0){
+	setTimeout(get_states_timer,t,t,mx - 1)
+	} else {
+		clog("TIMER FIN rfn")
+	}
+	setTimeout(get_states,1,mx)
+
+	
+}
+
+function get_states(mx){
+	// clog("rfn get state",mx,fbp,)
+	try {
+		fbp.push(APP.store.getState()['features/base/participants'])
+	} catch (err) {
+		fbp.push(err)
+	}
+
+}
+
+setTimeout(stop_mx,6000)
+// get_states_timer(300,30)
+// get_states_timer(1,400)
+// get_states_timer(1000,2)
+
+
+// fbp  = APP.store.getState()['features/base/participants'] 
+
+
+
+// _j = {a:":"}
+// j = new Proxy(_j,rprox)
+// s = new Set([])
+
+
+// clog("~~~~~~",arrs)

proxy_dev2.js

@@ -0,0 +1,102 @@
+
+function base_fn(){
+	clog("base_fn")
+}
+base_fn = {
+	"a":"xyz"
+}
+function base_fn2(){
+	clog("base_fn2")
+}
+
+
+
+rfns2 = {
+
+	rfn_apply(){																													
+		clog("RFN:apply")
+return Reflect.apply(...arguments)
+	},
+	rfn_construct(){																				
+		clog("RFN:construct")
+return Reflect.construct(...arguments)
+	},
+	rfn_defineProperty(){																						
+		clog("RFN:defineProperty")
+return Reflect.defineProperty(...arguments)
+	},
+	rfn_deleteProperty(){																
+		clog("RFN:deleteProperty")
+return Reflect.deleteProperty(...arguments)
+	},
+	rfn_get(){																						
+		clog("RFN:get")
+return Reflect.get(...arguments)
+	},
+	rfn_getOwnPropertyDescriptor(){																	
+		clog("RFN:getOwnPropertyDescriptor")
+return Reflect.getOwnPropertyDescriptor(...arguments)
+	},
+	rfn_getPrototypeOf(){																
+		clog("RFN:getPrototypeOf")
+return Reflect.getPrototypeOf(...arguments)
+	},
+	rfn_has(){																							
+		clog("RFN:has")
+return Reflect.has(...arguments)
+	},
+	rfn_isExtensible(){																					
+		clog("RFN:isExtensible")
+return Reflect.isExtensible(...arguments)
+	},
+	rfn_ownKeys(){																				
+		clog("RFN:ownKeys")
+return Reflect.ownKeys(...arguments)
+	},
+	rfn_preventExtensions(){																		
+		clog("RFN:preventExtensions")
+return Reflect.preventExtensions(...arguments)
+	},
+	rfn_set(){																					
+		clog("RFN:set")
+return Reflect.set(...arguments)
+	},
+	rfn_setPrototypeOf(){																						
+		clog("RFN:setPrototypeOf")
+return Reflect.setPrototypeOf(...arguments)
+	},
+
+}
+
+
+
+rprox2 = {
+apply: rfns.rfn_apply,
+construct: rfns.rfn_construct,
+defineProperty: rfns.rfn_defineProperty,
+deleteProperty: rfns.rfn_deleteProperty,
+get: rfns.rfn_get,
+getOwnPropertyDescriptor: rfns.rfn_getOwnPropertyDescriptor,
+getPrototypeOf: rfns.rfn_getPrototypeOf,
+has: rfns.rfn_has,
+isExtensible: rfns.rfn_isExtensible,
+ownKeys: rfns.rfn_ownKeys,
+preventExtensions: rfns.rfn_preventExtensions,
+set: rfns.rfn_set,
+setPrototypeOf: rfns.rfn_setPrototypeOf,
+}
+
+
+
+
+// dec_fn = new Proxy(base_fn,rprox2)
+
+// base_fn.__proto__
+base_fn.__proto__ = new Proxy(base_fn.__proto__,rprox2)
+
+// base_fn.prototype = new Proxy(base_fn.prototype,rprox2)
+
+
+
+base_fn.q=3
+base_fn.q={}

quick_tiling_fix.js

@@ -0,0 +1,83 @@
+
+
+
+
+window.qt = {
+	cnt:0,
+	mx:20,
+	stop:0,
+}
+function onAll_run(a,b,c){
+	clog("onAll_run",qt.cnt,a,b,c)
+
+	// clog("onAll",arguments)
+	qt.cnt += 1
+	if (qt.cnt > qt.mx || qt.stop){
+		clog("stopping",qt.cnt > qt.mx || qt.stop,{cnt:qt.cnt , mx:qt.mx , stop:qt.stop})
+		return false
+	}
+	return true
+}
+
+function onAll(a,b,c){
+	clog("onAll_xyz",qt.cnt,a,b,c)
+
+	// clog("onAll",arguments)
+	qt.cnt += 1
+	if (qt.cnt > qt.mx || qt.stop){
+		clog("stopping",qt.cnt > qt.mx || qt.stop,{cnt:qt.cnt , mx:qt.mx , stop:qt.stop})
+		return false
+	}
+	return true
+}
+function onAll_isMatch(a,b,c){
+	clog("onAll_isMatch",qt.cnt,a,b,c)
+
+	// clog("onAll",arguments)
+	qt.cnt += 1
+	if (qt.cnt > qt.mx || qt.stop){
+		clog("stopping",qt.cnt > qt.mx || qt.stop,{cnt:qt.cnt , mx:qt.mx , stop:qt.stop})
+		return false
+	}
+	clog("ISMATCH RET")
+	return true
+}
+var jhndlr_opt_null = {
+from: undefined,
+handler: onAll,
+run: onAll_run,
+id: null,
+name: null,
+// "http://jitsi.org/jitmeet"
+ns: null,
+options: {matchBareFromJid: false, ignoreNamespaceFragment: false},
+type: null,
+user: true,
+isMatch:onAll_isMatch,
+// cstr:"test"
+};
+
+
+
+hprx = {
+	get:function(obj, prop,receiver){
+		clog("HPRX",obj, prop,receiver)
+		return Reflect.get(...arguments)
+	},
+}
+
+
+// APP.connection.xmpp.connection._stropheConn.handlers
+// APP.connection.xmpp.connection._stropheConn.addHandlers.push(jhndlr_opt_null)
+// APP.connection.xmpp.connection._stropheConn.addHandlers.push(new Proxy(jhndlr_opt_null,hprx))
+// APP.connection.xmpp.connection._stropheConn.handlers.push(jhndlr_opt_null)
+// APP.conference._room.room.addEventListener(jhndlr_opt_null)
+
+// addListener
+
+
+// APP.store.subscribe(onAll)
+
+// APP.conference._room.room.connection
+// APP.conference._room.room.connection.addEventListener("CLIENT_RESIZED",onAll)
+// APP.conference._room.room.connection.addEventListener("USER_JOINED",onAll)

r0.css

@@ -0,0 +1,151 @@
+
+
+#filmstripRemoteVideosContainer {
+	/*width: 100% !important;*/
+}
+#filmstripRemoteVideos{
+overflow-x: auto !important;
+
+}
+
+.pseudo_vid{
+	outline: 2px solid blue;
+}
+
+
+.small_vid {
+	/*outline: 2px solid blue; */
+	/*outline: 5px solid blue; */
+	outline: 1px solid #fff; 
+	outline: 1px solid #888; 
+}
+
+
+.jdiv {
+	/*position: */
+	/*width: */
+}
+/*<div class="indicator_trc jdiv"></div>*/
+/*indicator_trc*/
+
+
+/*vid_toptoolbar_hook*/
+
+
+
+
+
+.hidden_vid {
+	position: relative;
+	/*position: absolute;*/
+	width:     80px !important;
+	min-width: 80px !important;
+	display: none;
+
+}
+.pseudo_vid {
+}
+
+.overlay {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	outline: 2px solid #0ff;
+	background-color: #ff08;
+	background-color: #0ff8;
+	/*z-index: 351;*/
+}
+
+.button-group-center *{
+	/*z-index: 0 !important;*/
+}
+
+.toolbox-icon {
+	/*z-index: 0 !important;*/
+	/*display: none ;*/
+}
+
+.top_toolbox {
+	/*position: absolute;*/
+	/*display: none;*/
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	/*width: 50%;*/
+	height: 100px;
+	/*background-color: #0ff8;*/
+	/*background-color: #0ff;*/
+	/*background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0));*/
+	background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(71,71,71,0));
+	background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(71,71,71,0));
+	/*background-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(71,71,71,0));*/
+	/*border-radius: 20px;*/
+	/*outline: 2px solid #ff0;*/
+
+}
+
+.toolbox-content > *{
+	/*zoom:.5;*/
+}
+
+
+[aria-label="Leave the call"] {
+
+}
+
+.new-toolbox .toolbox-content  .audio-preview .toolbox-button{
+	    margin-left:  0px;
+
+}
+.new-toolbox .toolbox-content  .video-preview .toolbox-button{
+	    margin-right: 0px;
+
+}
+
+.new-toolbox .toolbox-content .toolbox-button{
+	/*margin: 0;*/
+	    margin-right: 4px;
+	    margin-left:  4px;
+}
+.button-group-right {
+	/*flex-grow:0;*/
+	width: 25% !important;
+}
+.button-group-left{
+	width: 25% !important;
+	/*flex-grow:0;*/
+
+}
+.button-group-center {
+	width: 50% !important;
+	/*flex-grow:3;*/
+}
+
+
+.subject {
+	background-image:unset;
+	text-align: unset;
+	padding-left: 75px;
+	padding-right: 75px;
+
+
+
+	/*display: none;*/
+}
+
+
+/*aria-label="Toggle mute video"*/
+/*$(`[aria-label="Toggle mute video"]`)*/
+
+
+.tile-view #largeVideoContainer {
+    /*background-color: #033 !important;*/
+    background-color: #366 !important;
+    background-color: #00f !important;
+    background-color: #225 !important;
+    background-color: #246 !important;
+}
+
+

r0.js

@@ -0,0 +1,287 @@
+// clog = console.log
+// function nop(){}
+
+glob_dev_hooks = window.glob_dev_hooks || {}
+glob_dev_fns = window.glob_dev_fns || {}
+window.glob_react = window.glob_react || {i:"r0"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function wt(a1,a2){
+	var c = 0
+	var cmx = 10
+	clog(a1 < a2,a1 > a2)
+	while (a1 < a2){
+		c += 1
+		clog(".",c)
+		if (cmx < c){clog("r",c);return}
+
+	}
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function FS_dec2(fn) {
+  return function() {
+  	// dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    clog("SVD",{ret,that:this,args:[...arguments]})
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+  	// const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	// if (ret2){
+  		// return ret2.ret
+  	// }
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    return ret;
+  }
+}
+
+
+// svop = jc(SmallVideoOrig.prototype)
+// svop = jc(SmallVideoOrig)
+// svop = Object.assign({},glob_react.Filmstrip)
+// svop = Object.assign({},SmallVideoOrig.prototype)
+// function save_orig()
+orig_classes = window.orig_classes || {}
+react_trc_log = window.react_trc_log || {}
+react_trc_log = window.react_trc_log || {}
+window.react_trc_log.SmallVideoTrc0= ["$avatar",
+ "_setThumbnailSize",
+ "bindHoverHandler",
+ "initBrowserSpecificProperties",
+ "_renderDisplayName",
+ "$avatar",
+ "initializeAvatar",
+ "_getAudioLevelContainer",
+ "_getAudioLevelContainer",
+ "updateAudioLevelIndicator",
+ "addAudioLevelIndicator",
+ "updateIndicators",
+ "isCurrentlyOnLargeVideo",
+ "_isHovered",]
+
+
+
+
+
+react_trc_log.SmallVideoTrc = ["_renderDisplayName",
+"_setThumbnailSize",
+"showDominantSpeakerIndicator",
+"setVideoMutedView",
+"initBrowserSpecificProperties",
+"bindHoverHandler",
+"addAudioLevelIndicator",]
+
+
+
+glob_dev_fns.getTileViewGridDimensions_set_num = function(state,maxColumns,onumberOfParticipants){
+	// return
+	// clog("SET NUM PRT")
+	var numberOfParticipants
+	// if (window.glob_dev_fns && window.glob_dev_fns.ret0){return onumberOfParticipants}
+		try {
+    var thumbs = glob_react.Filmstrip._getThumbs()
+			
+// numberOfParticipants = thumbs.remoteThumbs.length + thumbs.localThumb  thumbs.localThumb.length
+numberOfParticipants = thumbs.remoteThumbs.length 
+if (thumbs.localThumb){
+numberOfParticipants += thumbs.localThumb.length 
+
+}
+		} catch(e) {
+			clog("getTileViewGridDimensions_set_num err:",e)
+			return onumberOfParticipants
+
+		}
+	// clog("getTileViewGridDimensions_set_num ret:",numberOfParticipants,thumbs,onumberOfParticipants)
+	// numberOfParticipants < onumberOfParticipants ? numberOfParticipants = onumberOfParticipants : 1
+	// clog("getTileViewGridDimensions_set_num ret2:",numberOfParticipants,thumbs,onumberOfParticipants)
+	// clog("NUM",numberOfParticipants)
+return numberOfParticipants
+
+
+}
+
+
+
+
+window.glob_dbg = window.glob_dbg || {
+	log:{},
+	logs:{},
+}
+
+
+
+
+
+
+
+function log_tb(err,key){
+	var key
+	try{
+
+	key in window.glob_dbg.logs ? 1 : window.glob_dbg.logs[key]=[]
+	// key in window.glob_dbg.log ? 1 : window.glob_dbg.log[key]=[]
+	window.glob_dbg.logs[key].push(err.stack)
+	// window.glob_dbg.log[key].push(err)
+	// clog("LOG_TB",key,err)
+	} catch (e){
+		clog("LOG TB",key,"ERR:",e)
+	}
+	// return new Error()
+}
+
+
+
+
+
+
+
+
+
+
+
+
+function clone_class() {
+	var k,v,p 
+	if (orig_classes.SmallVideoOrig){
+		return
+	}
+	orig_classes.SmallVideoOrig = {}
+	for ([k,p] of Object.entries(Object.getOwnPropertyDescriptors(SmallVideoOrig.prototype))) {
+		v=p.value
+		orig_classes.SmallVideoOrig[k]=v
+	}
+
+}
+clog("R0...",window.SmallVideoOrig)
+
+function loop_proto(){
+	var k,v,p 
+	for ([k,p] of Object.entries(Object.getOwnPropertyDescriptors(SmallVideoOrig.prototype))) {
+		// clog("~",k,v)
+		v=p.value
+		clog("~",k,typeof(v))
+		if (typeof(v) == "function"){
+		SmallVideoOrig.prototype[k] = FS_dec2(v)
+
+		}
+
+	}
+}
+
+
+
+
+
+
+
+function loop_vids(vids = $(".small_vid")){
+	clog("vids",vids)
+	var k,v
+	// for (k in [...vids]){
+	for (k of vids){
+		clog("..",k)
+	}
+}
+
+
+function log_info0(key){
+	var ret = new Map()
+	var k,v
+	var arr
+	for (v of glob_dbg.log[key]){
+		ret.setD(v.stack,0)
+		ret.set(v.stack,ret.get(v.stack) + 1)
+		arr = v.stack.split("\n")
+		clog(arr[2])
+
+		// v.
+		// clog(k,v)
+	}
+	return ret
+
+}
+
+
+function log_info(key,line_num=2,num_lines=1){
+	var ret = new Map()
+	var ret1 = new Map()
+	var line 
+	var k,v
+	var arr
+	for (v of glob_dbg.logs[key]){
+		ret.setD(v,0)
+		ret.set(v,ret.get(v) + 1)
+		arr = v.split("\n")
+		// clog(arr[3])
+		// clog(arr[2])
+		// line = arr[line_num]
+		line = arr.slice(line_num,line_num+num_lines).join("\n")
+		// if ("an")
+		if (line.includes("anony")){
+
+		} else {
+			// continue
+		}
+
+		// clog(line)
+		ret1.setD(line,0)
+		ret1.set(line,ret1.get(line) + 1)
+
+		// v.
+		// clog(k,v)
+	}
+	return ret1
+
+}
+
+
+function map_loop(m){
+	var k,v
+	for ([k,v] of m){
+		clog(k,v)
+	}
+}
+
+
+
+
+// XMPPAttachInfo.data = {atr:"modme"}

r0a.css

@@ -0,0 +1,92 @@
+
+
+#filmstripRemoteVideosContainer {
+	/*width: 100% !important;*/
+}
+#filmstripRemoteVideos{
+overflow-x: auto !important;
+
+}
+
+.pseudo_vid{
+	outline: 2px solid blue;
+}
+
+
+.small_vid {
+	/*outline: 2px solid blue; */
+	/*outline: 5px solid blue; */
+	outline: 1px solid #fff; 
+	outline: 1px solid #888; 
+}
+
+
+.jdiv {
+	/*position: */
+	/*width: */
+}
+/*<div class="indicator_trc jdiv"></div>*/
+/*indicator_trc*/
+
+
+/*~~~~~~~~~~~~~~~~~~~~~*/
+/*vid_toptoolbar_hook*/
+
+
+
+.jdiv:not(.t2):after {
+	position: absolute;
+	content: "ABC";
+	background-color: red;
+}
+
+
+.t3:after{
+	background-color: blue;
+	right: 20px;
+
+}
+.t2:after{
+	background-color: green;
+	left: 20px;
+}
+
+.t1:after{
+	background-color: #0ff;
+	top: 40px;
+}
+/*.vid_toptoolbar_hook{*/
+.t2{
+	width: 10px;
+	height:  10px;
+	background-color: #fff;
+	display: inline-block;
+	display: inline;
+	position: relative;
+	position: absolute;
+	/*position: all;*/
+}
+
+/*.vid_toptoolbar_hook:after {*/
+.t2:after {
+	/*position: relative;*/
+	/*position: unset;*/
+	display: inline-block;
+	display: inline;
+	top: 0px;
+	outline: 2px solid #ff0;
+}
+
+/*~~~~~~~~~~~~~~~~~~~~~*/
+.hidden_vid {
+	position: relative;
+	/*position: absolute;*/
+	width:     80px !important;
+	min-width: 80px !important;
+	/*display: none;*/
+
+}
+.pseudo_vid {
+	/*display: none;*/
+	/*position: absolute;*/
+}

r0b.js

@@ -0,0 +1,327 @@
+// clog = console.log
+// function nop(){}
+
+glob_dev_hooks = window.glob_dev_hooks || {}
+glob_dev_fns = window.glob_dev_fns || {}
+window.glob_react = window.glob_react || {i:"r0"}
+
+
+function FS_dec(fn) {
+  return function() {
+  	dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+  	const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	if (ret2){
+  		return ret2.ret
+  	}
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    return ret;
+  }
+}
+
+
+
+
+
+
+
+function save_orig(){
+
+glob_orig = window.glob_orig || {
+	Filmstrip:{},
+	fs:{},
+	rf_filmstrip:{},
+}
+
+
+	glob_orig.Filmstrip = Object.assign({},glob_react.Filmstrip)
+	glob_orig.fs = Object.assign({},glob_react.fs)
+	glob_orig.rf_filmstrip = Object.assign({},glob_react.rf_filmstrip)
+	save_orig = nop
+}
+
+
+
+
+if (window.glob_orig){
+
+save_orig = nop
+// save_orig()
+}
+if (!window.glob_orig && window.glob_react){
+
+// save_orig = nop
+save_orig()
+}
+if (window.glob_orig && window.glob_react){
+dec_fs()
+// save_orig = nop
+// save_orig()
+}
+
+// if ((!window.glob_orig) && ){
+
+// }
+
+// glob_react.rf_filmstrip.calculateThumbnailSizeForTileView
+
+// calculateThumbnailSizeForTileView
+
+dec_fns = {
+	resizeThumbnailsForTileView:{
+		pre:function(){
+			// console.trace("resizeThumbnailsForTileView")
+
+		},
+		post:function(){
+
+		},
+
+	}
+}
+
+
+function rt(w,h = 0,force = true){
+	h ? 0 : h = w / (16/9)   
+	glob_react.Filmstrip.resizeThumbnailsForTileView(w,h,force)
+}
+
+function dec_fs2(){
+	var k,v
+	glob_react.rf_filmstrip.calculateThumbnailSizeForTileView = FS_dec(glob_react.rf_filmstrip.calculateThumbnailSizeForTileView)
+
+	// for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		// clog("~",k,v.name)
+		// glob_react.Filmstrip[k] = FS_dec(v)
+	// }
+
+}
+
+
+
+function dec_fs(){
+	var k,v
+	for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		clog("~",k,v.name)
+		glob_react.Filmstrip[k] = FS_dec(v)
+	}
+
+}
+
+
+
+modkeys =  ["calculateThumbnailSizeForTileView",
+"TILE_VIEW_SIDE_MARGINS",
+"SET_TILE_VIEW_DIMENSIONS",]
+
+// glob_react.rf_filmstrip
+function check_mod_keys(){
+	var k
+	for (k of modkeys){
+		clog(k,glob_react.rf_filmstrip[k])
+	}
+
+}
+
+// function setTileViewDimensions_x(dimensions: Object, windowSize: Object) {
+function setTileViewDimensions_x() {
+    // dev hook
+    if (window.glob_dev_fns && window.glob_dev_fns.setTileViewDimensions){
+        // var ret = window.glob_dev_fns.setTileViewDimensions.apply(this,...arguments)
+        var ret = window.glob_dev_fns.setTileViewDimensions({that:this,args:arguments})
+        if (ret){
+            return ret.ret
+        }
+    }
+
+    const thumbnailSize = calculateThumbnailSizeForTileView({
+        ...dimensions,
+        ...windowSize
+    });
+    const filmstripWidth = dimensions.columns * (TILE_VIEW_SIDE_MARGINS + thumbnailSize.width);
+
+    return {
+        type: SET_TILE_VIEW_DIMENSIONS,
+        dimensions: {
+            gridDimensions: dimensions,
+            xtra:"xtra_val",
+            thumbnailSize,
+            filmstripWidth
+        }
+    };
+}
+
+
+
+glob_dev_fns.getTileViewGridDimensions = function(numberOfParticipants,state,maxColumns){
+	clog("getTileViewGridDimensions....")
+
+}
+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"]
+
+
+function calc_layout2(a,ni){
+    var r = 1
+    var c = 1
+    var n = 1
+    clog("mx CL",ni,a)
+while (1){
+        if (r * c < n){ 
+            if ( (c + 1) * a  < r + 1 ) {
+                c++ 
+            } else {
+                r++
+            }
+        } 
+                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,
+        }
+}

r0c.js

@@ -0,0 +1,716 @@
+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,
+        }
+}

r0d.js

@@ -0,0 +1,537 @@
+// clog = console.log
+// function nop(){}
+
+glob_dev_hooks = window.glob_dev_hooks || {}
+glob_dev_fns = window.glob_dev_fns || {}
+window.glob_react = window.glob_react || {i:"r0"}
+
+
+function FS_dec(fn) {
+  return function() {
+  	dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+  	const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	if (ret2){
+  		return ret2.ret
+  	}
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    return ret;
+  }
+}
+
+
+
+
+
+
+
+function save_orig(){
+
+glob_orig = window.glob_orig || {
+	Filmstrip:{},
+	fs:{},
+	rf_filmstrip:{},
+}
+
+
+	glob_orig.Filmstrip = Object.assign({},glob_react.Filmstrip)
+	glob_orig.fs = Object.assign({},glob_react.fs)
+	glob_orig.rf_filmstrip = Object.assign({},glob_react.rf_filmstrip)
+	save_orig = nop
+}
+
+
+
+
+if (window.glob_orig){
+
+save_orig = nop
+// save_orig()
+}
+if (!window.glob_orig && window.glob_react){
+
+// save_orig = nop
+save_orig()
+}
+if (window.glob_orig && window.glob_react){
+dec_fs()
+// save_orig = nop
+// save_orig()
+}
+
+// if ((!window.glob_orig) && ){
+
+// }
+
+// glob_react.rf_filmstrip.calculateThumbnailSizeForTileView
+
+// calculateThumbnailSizeForTileView
+
+dec_fns = {
+	resizeThumbnailsForTileView:{
+		pre:function(){
+			// console.trace("resizeThumbnailsForTileView")
+
+		},
+		post:function(){
+
+		},
+
+	}
+}
+
+
+function rt(w,h = 0,force = true){
+	h ? 0 : h = w / (16/9)   
+	glob_react.Filmstrip.resizeThumbnailsForTileView(w,h,force)
+}
+
+function dec_fs2(){
+	var k,v
+	glob_react.rf_filmstrip.calculateThumbnailSizeForTileView = FS_dec(glob_react.rf_filmstrip.calculateThumbnailSizeForTileView)
+
+	// for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		// clog("~",k,v.name)
+		// glob_react.Filmstrip[k] = FS_dec(v)
+	// }
+
+}
+
+
+
+function dec_fs(){
+	var k,v
+	for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		clog("~",k,v.name)
+		glob_react.Filmstrip[k] = FS_dec(v)
+	}
+
+}
+
+
+
+modkeys =  ["calculateThumbnailSizeForTileView",
+"TILE_VIEW_SIDE_MARGINS",
+"SET_TILE_VIEW_DIMENSIONS",]
+
+// glob_react.rf_filmstrip
+function check_mod_keys(){
+	var k
+	for (k of modkeys){
+		clog(k,glob_react.rf_filmstrip[k])
+	}
+
+}
+
+// function setTileViewDimensions_x(dimensions: Object, windowSize: Object) {
+function setTileViewDimensions_x() {
+    // dev hook
+    if (window.glob_dev_fns && window.glob_dev_fns.setTileViewDimensions){
+        // var ret = window.glob_dev_fns.setTileViewDimensions.apply(this,...arguments)
+        var ret = window.glob_dev_fns.setTileViewDimensions({that:this,args:arguments})
+        if (ret){
+            return ret.ret
+        }
+    }
+
+    const thumbnailSize = calculateThumbnailSizeForTileView({
+        ...dimensions,
+        ...windowSize
+    });
+    const filmstripWidth = dimensions.columns * (TILE_VIEW_SIDE_MARGINS + thumbnailSize.width);
+
+    return {
+        type: SET_TILE_VIEW_DIMENSIONS,
+        dimensions: {
+            gridDimensions: dimensions,
+            xtra:"xtra_val",
+            thumbnailSize,
+            filmstripWidth
+        }
+    };
+}
+
+glob_dev_fns.getTileViewGridDimensions_0ld = 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)
+	var c = clo.r
+	var 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
+
+
+
+}
+
+
+
+
+
+window.glob_dev_fns.getTileViewGridDimensions_sq = nop
+
+
+
+
+glob_dev_fns.ret0=0
+glob_dev_fns.ret1=0
+// glob_dev_fns.ret1=1
+// glob_dev_fns.ret0=1
+
+// window.TILE_VIEW_SIDE_MARGINS = 10
+window.TILE_VIEW_SIDE_MARGINS = 20
+// window.TILE_VIEW_SIDE_MARGINS = 0
+window.dev_v = {}
+glob_dev_fns.getTileViewGridDimensions = function(state,maxColumns){
+	// return
+	clog("GTVT..................")
+	if (glob_dev_fns.ret0){return}
+	if (glob_dev_fns.ret1){return}
+
+
+    // >< const { iAmRecorder } = state['features/base/config'];
+    const iAmRecorder  = state['features/base/config'].iAmRecorder;
+    // const numberOfParticipants = state['features/base/participants'].length - (iAmRecorder ? 1 : 0);
+    var numberOfParticipants = state['features/base/participants'].length - (iAmRecorder ? 1 : 0);
+    var thumbs = glob_react.Filmstrip._getThumbs()
+    // numberOfParticipants 
+    numberOfParticipants = thumbs.remoteThumbs.length + thumbs.localThumb.length
+    // 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
+	// >< const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+
+
+
+	// {
+		var aspect = 16/9
+		var TILE_ASPECT_RATIO = aspect
+
+		// 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
+
+
+
+		var clo = calc_layout2(TILE_ASPECT_RATIO/viewAspectRatio,numberOfParticipants)
+	// }
+
+	var r = clo.r
+	var c = clo.c
+
+	// maybe remove a column, for aesthetics 
+	if (r <= clo.n - numberOfParticipants){
+		clog("REMOVE COUMN")
+		c -= 1
+	}
+
+
+	// clog("GTVGD",clo,{r,c})
+	// return 3
+	const columnsToMaintainASquare = c
+
+		window.dev_v.ratio =ratioOfRatios
+		window.dev_v.vratio =viewAspectRatio
+		window.dev_v.tratio =TILE_ASPECT_RATIO
+		window.dev_v.c =c
+		window.dev_v.mc =maxColumns
+		window.dev_v.calc2 =calcTileGrid_arr(TILE_ASPECT_RATIO/viewAspectRatio,numberOfParticipants)
+
+
+    // const columns = Math.min(columnsToMaintainASquare, 100);
+    // const rows = Math.ceil(numberOfParticipants / columns);
+
+
+/*
+    const columnsOverflowed = columnsToMaintainASquare > maxColumns
+    const columns = Math.min(columnsToMaintainASquare, maxColumns);
+    var visibleRows = Math.ceil(numberOfParticipants / columns);
+    // var visibleRows = Math.ceil(numberOfParticipants / Math.min(c, maxColumns));
+    if (columnsOverflowed){
+
+    visibleRows = Math.min(visibleRows , maxColumns);
+    }
+		//			*/
+	 //    			/*
+    const columns = Math.min(columnsToMaintainASquare, maxColumns);
+    var visibleRows = Math.ceil(numberOfParticipants / columns);
+
+
+    // var visibleRows = Math.min(visibleRows , columns);
+    // This is not actually the true number of visibleRows
+    if (c >= maxColumns | 0){
+    // if (c > maxColumns | 0){
+    visibleRows = Math.min(visibleRows , maxColumns);
+
+    }
+    //		*/
+    // visibleRows = visibleRows - 2
+    // visibleRows = 3
+    clog("CVR",{columns,visibleRows,c,noc:numberOfParticipants / columns,clo_r:r})
+    console.table(dev_v.calc2.arr)
+
+    return {
+        // columns:7,
+        // visibleRows:2.5,
+        // visibleRows:1.5,
+        columns,
+        visibleRows ,
+    };
+
+
+	// return c
+
+
+
+}
+glob_dev_fns.gtv_key = "getTileViewGridDimensions_set_num"
+
+glob_dev_fns.getTileViewGridDimensions_set_num = function(state,maxColumns,onumberOfParticipants){
+	// return
+	clog("SET NUM PRT")
+	var numberOfParticipants
+	// if (window.glob_dev_fns && window.glob_dev_fns.ret0){return onumberOfParticipants}
+		try {
+    var thumbs = glob_react.Filmstrip._getThumbs()
+			
+numberOfParticipants = thumbs.remoteThumbs.length + thumbs.localThumb.length
+		} catch {
+			return onumberOfParticipants
+
+		}
+return numberOfParticipants
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+glob_dev_fns.setTileViewDimensions = function(o,dimensions,windowSize,that){
+	if (glob_dev_fns.ret0){return}
+	// return
+	const old_dimensions = o.args[0]
+	const old_windowSize = o.args[1]
+	dimensions = glob_react.getTileViewGridDimensions(APP.store.getState())
+	// clog("GTVD",dimensions)
+	// console.trace("setTileViewDimensions trc")
+	clog("GTVD",old_dimensions)
+
+
+
+	return { dimensions:dimensions }
+	// gridDimensions: {columns: 2, visibleRows: 1}
+	// return { dimensions:{columns: 1, visibleRows: 2} }
+
+
+}
+
+function calc_layout2(a,ni){
+	return calcTileGrid(...arguments)
+}
+
+ // @param
+ /* ----------------------------------------------------------------------
+  * @param {number} ratio - Ratio of the tile's aspect-ratio / the container's aspect-ratio
+  * @param {int} tiles - the number of tiles to calculate the grid for
+  * @returns {Object} An object containing the number of rows and columns, rows * columns
+  * @returns {Object} An object containing the number of rows, columns, rows * columns, and the argument tiles 
+ */
+
+ /**
+  * 
+  * 
+  *
+  * @param {number} ratio - Ratio of the tile's aspect-ratio / the container's aspect-ratio
+  * @param {int} tiles - the number of tiles to calculate the grid for
+  * @returns {Object} An object containing the number of rows and columns, rows * columns
+  * @returns {Object} An object containing the number of rows, columns, rows * columns, and the argument tiles 
+  */
+
+function calcTileGrid(ratio,tiles){
+
+    var rows = 1
+    var columns = 1
+    var availTiles = 1
+
+    // otherwise this could become an infinite loop for large numbers due to loss of precision
+    // Someone could give you ratio = 0 or tiles = Infinity
+    if (tiles > 65536) {tiles = 1}
+
+	while (availTiles < tiles){
+	        if ( (columns + 1) * ratio  < rows + 1 ) {
+	            columns++ 
+	        } else {
+	            rows++
+	        }
+	    availTiles=rows*columns 
+	}
+	        return {
+	            r:rows,
+	            c:columns,
+	            n:availTiles,
+	            ni:tiles,
+	        }
+}
+function calcTileGrid_arr(ratio,tiles){
+
+    var rows = 1
+    var arr = []
+    var columns = 1
+    var availTiles = 1
+
+    // otherwise this could become an infinite loop for large numbers due to loss of precision
+    // Someone could give you ratio = 0 or tiles = Infinity
+    if (tiles > 65536) {tiles = 1}
+
+	while (availTiles < tiles){
+	        if ( (columns + 1) * ratio  < rows + 1 ) {
+	            columns++ 
+	        } else {
+	            rows++
+	        }
+	    availTiles=rows*columns 
+	        arr.push({rows,columns,availTiles})
+	}
+	        return {
+	        	arr,
+	            r:rows,
+	            c:columns,
+	            n:availTiles,
+	            ni:tiles,
+	        }
+}
+function calcTileGrid2(ratio,tiles){
+
+    var rows = 1
+    var columns = 1
+    var avail_tiles = 1
+    var c = 0
+    // var cmx = 10000000000000000
+    var cmx  = 1000000000
+    var cmx2 = 100000000
+    var cmx3 = cmx2
+    // var cmx = 10000000000000000
+    // if (tiles > 2147483648) {tiles = 1}
+
+    // this can become an infinite loop for large numbers due to loss of precision and long loops from  ratio = 0 etc
+    if (tiles > 65536) {tiles = 1}
+    // if (ratio < .0000000001) {tiles = 1}
+
+
+
+	while (avail_tiles < tiles){
+		// clog(c,"...",{r:rows,c:columns,n:avail_tiles,ni:tiles})
+		if ((c+=1) > cmx){clog("ILOOP!",c);return {r:rows,c:columns,n:avail_tiles,ni:tiles}}
+		if (c > cmx3){clog("LLOOP",c,avail_tiles/tiles,{r:rows,c:columns,n:avail_tiles,ni:tiles,cnt:c,mx_cnt:cmx});cmx3 += cmx2}
+	
+		 // avail_tiles=avail_tiles+1
+	
+	    // if (rows * columns < avail_tiles | 1){ 
+	        if ( (columns + 1) * ratio  < rows + 1 ) {
+	            columns++ 
+	        } else {
+	            rows++
+	        }
+	    // } else {
+	    	// clog("DO I EVER RUN?",{r:rows,c:columns,n:avail_tiles,ni:tiles,cnt:c,mx_cnt:cmx})
+	    // }
+	    avail_tiles=rows*columns 
+	}
+	clog("ILOOP!....",c)
+	        return {
+	            r:rows,
+	            c:columns,
+	            n:avail_tiles,
+	            ni:tiles,
+	        }
+}
+
+
+function calcTileGrid1(ratio,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}
+	while (avail_tiles < tiles){
+	
+		 avail_tiles=avail_tiles+1
+	
+	    if (rows * columns < avail_tiles){ 
+	        if ( (columns + 1) * ratio  < rows + 1 ) {
+	            columns++ 
+	        } else {
+	            rows++
+	        }
+	    }
+	    avail_tiles=rows*columns 
+	}
+	        return {
+	            r:rows,
+	            c:columns,
+	            n:avail_tiles,
+	            ni:tiles,
+	        }
+}
+
+
+
+
+
+
+function wt(a1,a2){
+	var c = 0
+	var cmx = 10
+	clog(a1 < a2,a1 > a2)
+	while (a1 < a2){
+		c += 1
+		clog(".",c)
+		if (cmx < c){clog("r",c);return}
+
+	}
+
+
+}
+
+
+

r0e.js

@@ -0,0 +1,427 @@
+// clog = console.log
+// function nop(){}
+
+glob_dev_hooks = window.glob_dev_hooks || {}
+glob_dev_fns = window.glob_dev_fns || {}
+window.glob_react = window.glob_react || {i:"r0"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function FS_dec(fn) {
+  return function() {
+  	dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+  	const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	if (ret2){
+  		return ret2.ret
+  	}
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    return ret;
+  }
+}
+
+
+
+
+
+
+
+function save_orig(){
+console.trace("SAVE-ORIG")
+glob_orig = window.glob_orig || {
+	Filmstrip:{},
+	fs:{},
+	rf_filmstrip:{},
+}
+
+
+	glob_orig.Filmstrip = Object.assign({},glob_react.Filmstrip)
+	glob_orig.fs = Object.assign({},glob_react.fs)
+	glob_orig.rf_filmstrip = Object.assign({},glob_react.rf_filmstrip)
+	save_orig = nop
+}
+
+
+
+
+if (window.glob_orig){
+
+save_orig = nop
+// save_orig()
+}
+if (!window.glob_orig && window.glob_react){
+
+// save_orig = nop
+save_orig()
+}
+if (window.glob_orig && window.glob_react){
+dec_fs()
+// save_orig = nop
+// save_orig()
+}
+
+// if ((!window.glob_orig) && ){
+
+// }
+
+// glob_react.rf_filmstrip.calculateThumbnailSizeForTileView
+
+// calculateThumbnailSizeForTileView
+
+dec_fns = {
+	resizeThumbnailsForTileView:{
+		pre:function(){
+			// console.trace("resizeThumbnailsForTileView")
+
+		},
+		post:function(){
+
+		},
+
+	}
+}
+
+
+function rt(w,h = 0,force = true){
+	h ? 0 : h = w / (16/9)   
+	glob_react.Filmstrip.resizeThumbnailsForTileView(w,h,force)
+}
+
+function dec_fs2(){
+	var k,v
+	glob_react.rf_filmstrip.calculateThumbnailSizeForTileView = FS_dec(glob_react.rf_filmstrip.calculateThumbnailSizeForTileView)
+
+	// for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		// clog("~",k,v.name)
+		// glob_react.Filmstrip[k] = FS_dec(v)
+	// }
+
+}
+
+
+
+function dec_fs(){
+	var k,v
+	for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		clog("~",k,v.name)
+		glob_react.Filmstrip[k] = FS_dec(v)
+	}
+
+}
+fs_dec_list = ["resizeThumbnailsForHorizontalView",
+"resizeThumbnailsForVerticalView",
+"resizeThumbnailsForTileView",]
+
+function dec_fs_resize(){
+	var k,v
+	save_orig()
+
+	for (k of fs_dec_list){
+		clog("~",k)
+	}
+	// return
+	for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		clog("~",k,v.name,v)
+		// glob_react.Filmstrip[k] = FS_dec(v)
+	}
+
+}
+
+
+
+modkeys =  ["calculateThumbnailSizeForTileView",
+"TILE_VIEW_SIDE_MARGINS",
+"SET_TILE_VIEW_DIMENSIONS",]
+
+// glob_react.rf_filmstrip
+function check_mod_keys(){
+	var k
+	for (k of modkeys){
+		clog(k,glob_react.rf_filmstrip[k])
+	}
+
+}
+
+
+
+
+function wt(a1,a2){
+	var c = 0
+	var cmx = 10
+	clog(a1 < a2,a1 > a2)
+	while (a1 < a2){
+		c += 1
+		clog(".",c)
+		if (cmx < c){clog("r",c);return}
+
+	}
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function FS_dec2(fn) {
+  return function() {
+  	// dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    clog("SVD",{ret,that:this,args:[...arguments]})
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+  	// const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	// if (ret2){
+  		// return ret2.ret
+  	// }
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    return ret;
+  }
+}
+
+
+// svop = jc(SmallVideoOrig.prototype)
+// svop = jc(SmallVideoOrig)
+// svop = Object.assign({},glob_react.Filmstrip)
+// svop = Object.assign({},SmallVideoOrig.prototype)
+// function save_orig()
+orig_classes = window.orig_classes || {}
+react_trc_log = window.react_trc_log || {}
+react_trc_log = window.react_trc_log || {}
+window.react_trc_log.SmallVideoTrc0= ["$avatar",
+ "_setThumbnailSize",
+ "bindHoverHandler",
+ "initBrowserSpecificProperties",
+ "_renderDisplayName",
+ "$avatar",
+ "initializeAvatar",
+ "_getAudioLevelContainer",
+ "_getAudioLevelContainer",
+ "updateAudioLevelIndicator",
+ "addAudioLevelIndicator",
+ "updateIndicators",
+ "isCurrentlyOnLargeVideo",
+ "_isHovered",]
+
+
+
+
+
+react_trc_log.SmallVideoTrc = ["_renderDisplayName",
+"_setThumbnailSize",
+"showDominantSpeakerIndicator",
+"setVideoMutedView",
+"initBrowserSpecificProperties",
+"bindHoverHandler",
+"addAudioLevelIndicator",]
+
+
+
+glob_dev_fns.getTileViewGridDimensions_set_num = function(state,maxColumns,onumberOfParticipants){
+	// return
+	// clog("SET NUM PRT")
+	var numberOfParticipants
+	// if (window.glob_dev_fns && window.glob_dev_fns.ret0){return onumberOfParticipants}
+		try {
+    var thumbs = glob_react.Filmstrip._getThumbs()
+			
+// numberOfParticipants = thumbs.remoteThumbs.length + thumbs.localThumb  thumbs.localThumb.length
+numberOfParticipants = thumbs.remoteThumbs.length 
+if (thumbs.localThumb){
+numberOfParticipants += thumbs.localThumb.length 
+
+}
+		} catch(e) {
+			clog("getTileViewGridDimensions_set_num err:",e)
+			return onumberOfParticipants
+
+		}
+	// clog("getTileViewGridDimensions_set_num ret:",numberOfParticipants,thumbs,onumberOfParticipants)
+	numberOfParticipants < onumberOfParticipants ? numberOfParticipants = onumberOfParticipants : 1
+	// clog("getTileViewGridDimensions_set_num ret2:",numberOfParticipants,thumbs,onumberOfParticipants)
+	// clog("NUM",numberOfParticipants)
+return numberOfParticipants
+
+
+}
+
+
+
+
+window.glob_dbg = window.glob_dbg || {
+	log:{},
+	logs:{},
+}
+
+
+
+
+
+
+
+function log_tb(err,key){
+	var key
+	try{
+
+	key in window.glob_dbg.logs ? 1 : window.glob_dbg.logs[key]=[]
+	// key in window.glob_dbg.log ? 1 : window.glob_dbg.log[key]=[]
+	window.glob_dbg.logs[key].push(err.stack)
+	// window.glob_dbg.log[key].push(err)
+	// clog("LOG_TB",key,err)
+	} catch (e){
+		clog("LOG TB",key,"ERR:",e)
+	}
+	// return new Error()
+}
+
+
+
+
+
+
+
+
+
+
+
+
+function clone_class() {
+	var k,v,p 
+	if (orig_classes.SmallVideoOrig){
+		return
+	}
+	orig_classes.SmallVideoOrig = {}
+	for ([k,p] of Object.entries(Object.getOwnPropertyDescriptors(SmallVideoOrig.prototype))) {
+		v=p.value
+		orig_classes.SmallVideoOrig[k]=v
+	}
+
+}
+clog("R0...",window.SmallVideoOrig)
+
+function loop_proto(){
+	var k,v,p 
+	for ([k,p] of Object.entries(Object.getOwnPropertyDescriptors(SmallVideoOrig.prototype))) {
+		// clog("~",k,v)
+		v=p.value
+		clog("~",k,typeof(v))
+		if (typeof(v) == "function"){
+		SmallVideoOrig.prototype[k] = FS_dec2(v)
+
+		}
+
+	}
+}
+
+
+
+
+
+
+
+function loop_vids(vids = $(".small_vid")){
+	clog("vids",vids)
+	var k,v
+	// for (k in [...vids]){
+	for (k of vids){
+		clog("..",k)
+	}
+}
+
+
+function log_info0(key){
+	var ret = new Map()
+	var k,v
+	var arr
+	for (v of glob_dbg.log[key]){
+		ret.setD(v.stack,0)
+		ret.set(v.stack,ret.get(v.stack) + 1)
+		arr = v.stack.split("\n")
+		clog(arr[2])
+
+		// v.
+		// clog(k,v)
+	}
+	return ret
+
+}
+
+
+function log_info(key,line_num=2,num_lines=1){
+	var ret = new Map()
+	var ret1 = new Map()
+	var line 
+	var k,v
+	var arr
+	for (v of glob_dbg.logs[key]){
+		ret.setD(v,0)
+		ret.set(v,ret.get(v) + 1)
+		arr = v.split("\n")
+		// clog(arr[3])
+		// clog(arr[2])
+		// line = arr[line_num]
+		line = arr.slice(line_num,line_num+num_lines).join("\n")
+		// if ("an")
+		if (line.includes("anony")){
+
+		} else {
+			// continue
+		}
+
+		// clog(line)
+		ret1.setD(line,0)
+		ret1.set(line,ret1.get(line) + 1)
+
+		// v.
+		// clog(k,v)
+	}
+	return ret1
+
+}
+
+
+function map_loop(m){
+	var k,v
+	for ([k,v] of m){
+		clog(k,v)
+	}
+}
+

r1.js

@@ -0,0 +1,33 @@
+
+
+function clientResized_dev(clientWidth, clientHeight) {
+    return {
+        type: "CLIENT_RESIZED",
+        clientHeight,
+        clientWidth
+    };
+}
+
+
+function dispatch_resize(store = APP.store) {
+        store.dispatch(clientResized_dev(innerWidth, innerHeight));
+        clog("dispatch_resize")
+}
+function add_spans(n=1,xtra=0){
+	var s = `
+	<span class="pseudo_vid videocontainer"></span>
+	`
+	$(".pseudo_vid").remove()
+	if (!xtra){
+	n = n - APP.store.getState()["features/base/participants"].length
+	}
+	var k,v
+	for (var i = 0; i < n; i++) {
+		// Things[i]
+		clog("..",i)
+	$("#filmstripRemoteVideosContainer").append(s)
+	}
+	dispatch_resize()
+}
+
+

r2.js

@@ -0,0 +1,217 @@
+
+
+
+
+
+function FS_dec(fn) {
+  return function() {
+  	dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+    console.log('FSD',fn.name);
+    console.trace('FSD_trc  '+fn.name);
+    // log_tb()
+    window.log_tb(new Error(),fn.name)
+  	const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	if (ret2){
+  		return ret2.ret
+  	}
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    return ret;
+  }
+}
+
+
+
+
+
+// if ((!window.glob_orig) && ){
+
+// }
+
+// glob_react.rf_filmstrip.calculateThumbnailSizeForTileView
+
+// calculateThumbnailSizeForTileView
+
+dec_fns = {
+	resizeThumbnailsForTileView:{
+		pre:function(){
+			// console.trace("resizeThumbnailsForTileView")
+
+		},
+		post:function(){
+
+		},
+
+	}
+}
+
+
+function rt(w,h = 0,force = true){
+	h ? 0 : h = w / (16/9)   
+	glob_react.Filmstrip.resizeThumbnailsForTileView(w,h,force)
+}
+
+function dec_fs2(){
+	var k,v
+	glob_react.rf_filmstrip.calculateThumbnailSizeForTileView = FS_dec(glob_react.rf_filmstrip.calculateThumbnailSizeForTileView)
+
+	// for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		// clog("~",k,v.name)
+		// glob_react.Filmstrip[k] = FS_dec(v)
+	// }
+
+}
+
+
+
+function dec_fs(){
+	var k,v
+	for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		clog("~",k,v.name)
+		glob_react.Filmstrip[k] = FS_dec(v)
+		// glob_react.Filmstrip[k] = v
+	}
+
+}
+fs_dec_list = [
+"resizeThumbnailsForHorizontalView",
+"resizeThumbnailsForVerticalView",
+// "resizeThumbnailsForTileView",
+]
+
+function undec_fs(){
+	var k,v
+	for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		// clog("~",k,v.name)
+		// glob_react.Filmstrip[k] = FS_dec(v)
+		glob_react.Filmstrip[k] = v
+	}	
+}
+
+
+
+modkeys =  ["calculateThumbnailSizeForTileView",
+"TILE_VIEW_SIDE_MARGINS",
+"SET_TILE_VIEW_DIMENSIONS",]
+
+// glob_react.rf_filmstrip
+function check_mod_keys(){
+	var k
+	for (k of modkeys){
+		clog(k,glob_react.rf_filmstrip[k])
+	}
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function log_info3(o){
+	var i,k,v
+	for ([k,v] of o.ret3){
+		if (v.fn.size >= 3){
+			clog(k,v)
+		}
+	}
+}
+function log_info2(key,line_num=2,num_lines=1){
+	var ret = new Map()
+	var ret2 = new Map()
+	var ret3 = new Map()
+	var ret4 = new Map()
+	// var ret = new Map()
+	var i,k,v
+	var i2,k2,v2
+	var i3,k3,v3
+	var i4,k4,v4
+	var line 
+	var arr
+	key = 2
+	// var 
+
+	// for ([k,v] of Object.values(glob_dbg.logs)){
+	// for (v of [...Object.values(glob_dbg.logs)]){
+	for ([k,v] of Object.entries(glob_dbg.logs)){
+		// clog([k,v])
+		for (v2 of v){
+			ret.setD(v2,{c:0,fn:k})
+			i = ret.get(v2)
+			i.c += 1
+			// ret.set(v2,ret.get(v2) + 1)
+		}
+	}
+	for ([k,v] of ret){
+		arr = k.split("\n")
+		i =  ret.get(k)
+		// k2 = i.fn: arr[key]
+		k2 = `${i.fn}: ${arr[key]}`
+		ret2.setD(k2,{c:0})
+		i2 =  ret2.get(k2)
+		i2.c += i.c
+
+
+		for ([k3,v3] of Object.entries(arr)){
+			// clog(k3,v3)
+			v4 = k3 + ": " +v3
+			ret4.setD(v4,{fn:new Set()})
+
+			ret3.setD(v3,{fn:new Set()})
+			i3 = ret3.get(v3)
+			i3.fn.add(i.fn)
+		}
+
+
+	}
+	clog(ret2)
+
+
+	return {ret,ret2,ret3,ret4}
+	var ret1 = new Map()
+	var line 
+	var arr
+	for (v of glob_dbg.logs[key]){
+		ret.setD(v,0)
+		ret.set(v,ret.get(v) + 1)
+		arr = v.split("\n")
+		// clog(arr[3])
+		// clog(arr[2])
+		// line = arr[line_num]
+		line = arr.slice(line_num,line_num+num_lines).join("\n")
+		// if ("an")
+		if (line.includes("anony")){
+
+		} else {
+			// continue
+		}
+
+		// clog(line)
+		ret1.setD(line,0)
+		ret1.set(line,ret1.get(line) + 1)
+
+		// v.
+		// clog(k,v)
+	}
+	return ret1
+
+}
+// clog(log_info3(log_info2()))
+// clog(log_info2())

r2t.js

@@ -0,0 +1,144 @@
+
+
+
+
+function FS_dec(fn) {
+  return function() {
+  	dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+  	const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	if (ret2){
+  		return ret2.ret
+  	}
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    return ret;
+  }
+}
+
+
+
+
+
+
+
+function save_orig(){
+console.trace("SAVE-ORIG")
+glob_orig = window.glob_orig || {
+	Filmstrip:{},
+	fs:{},
+	rf_filmstrip:{},
+}
+
+
+	glob_orig.Filmstrip = Object.assign({},glob_react.Filmstrip)
+	glob_orig.fs = Object.assign({},glob_react.fs)
+	glob_orig.rf_filmstrip = Object.assign({},glob_react.rf_filmstrip)
+	save_orig = nop
+}
+
+
+
+
+if (window.glob_orig){
+
+save_orig = nop
+// save_orig()
+}
+if (!window.glob_orig && window.glob_react){
+
+// save_orig = nop
+save_orig()
+}
+if (window.glob_orig && window.glob_react){
+dec_fs()
+// save_orig = nop
+// save_orig()
+}
+
+// if ((!window.glob_orig) && ){
+
+// }
+
+// glob_react.rf_filmstrip.calculateThumbnailSizeForTileView
+
+// calculateThumbnailSizeForTileView
+
+dec_fns = {
+	resizeThumbnailsForTileView:{
+		pre:function(){
+			// console.trace("resizeThumbnailsForTileView")
+
+		},
+		post:function(){
+
+		},
+
+	}
+}
+
+
+function rt(w,h = 0,force = true){
+	h ? 0 : h = w / (16/9)   
+	glob_react.Filmstrip.resizeThumbnailsForTileView(w,h,force)
+}
+
+function dec_fs2(){
+	var k,v
+	glob_react.rf_filmstrip.calculateThumbnailSizeForTileView = FS_dec(glob_react.rf_filmstrip.calculateThumbnailSizeForTileView)
+
+	// for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		// clog("~",k,v.name)
+		// glob_react.Filmstrip[k] = FS_dec(v)
+	// }
+
+}
+
+
+
+function dec_fs(){
+	var k,v
+	for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		clog("~",k,v.name)
+		glob_react.Filmstrip[k] = FS_dec(v)
+	}
+
+}
+fs_dec_list = ["resizeThumbnailsForHorizontalView",
+"resizeThumbnailsForVerticalView",
+"resizeThumbnailsForTileView",]
+
+function dec_fs_resize(){
+	var k,v
+	save_orig()
+
+	for (k of fs_dec_list){
+		clog("~",k)
+	}
+	// return
+	for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+	// for ([k,v] of Object.entries(glob_react.Filmstrip)){
+		clog("~",k,v.name,v)
+		// glob_react.Filmstrip[k] = FS_dec(v)
+	}
+
+}
+
+
+
+modkeys =  ["calculateThumbnailSizeForTileView",
+"TILE_VIEW_SIDE_MARGINS",
+"SET_TILE_VIEW_DIMENSIONS",]
+
+// glob_react.rf_filmstrip
+function check_mod_keys(){
+	var k
+	for (k of modkeys){
+		clog(k,glob_react.rf_filmstrip[k])
+	}
+
+}
+

react_fn.js

@@ -0,0 +1,173 @@
+
+
+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,},
+    });
+}
+}
+
+
+
+
+

redir.css

@@ -0,0 +1,5 @@
+#react > div {
+	background-color: #1B5668;
+	
+	/*color: red !important;*/
+}

resize_hook.b.js

@@ -0,0 +1,235 @@
+function FS_dec_resize(fn) {
+  return function() {
+    clog("rtscv0",glob_react.Filmstrip._getThumbs())
+  	dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+    // console.log('FSD',fn.name);
+    
+    // console.trace('FSD_trc  '+fn.name);
+    // log_tb()
+    // window.log_tb(new Error(),fn.name)
+    clog("rtscv1",glob_react.Filmstrip._getThumbs())
+    resizeThumbnailsForCustomView(this,fn.name,arguments)
+  	const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	if (ret2){
+  		return ret2.ret
+  	}
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    clog("rtscv2",glob_react.Filmstrip._getThumbs())
+    return ret;
+  }
+}
+function FS_dec_proto(fn) {
+  return function() {
+    clog("fdp",fn.name)
+    dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+    // console.log('FSD',fn.name);
+    
+    // console.trace('FSD_trc  '+fn.name);
+    // log_tb()
+    // window.log_tb(new Error(),fn.name)
+    // clog("rtscv1",glob_react.Filmstrip._getThumbs())
+    // resizeThumbnailsForCustomView(this,fn.name,arguments)
+    const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+    if (ret2){
+      return ret2.ret
+    }
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    // clog("rtscv2",glob_react.Filmstrip._getThumbs())
+    return ret;
+  }
+}
+
+
+
+function undec_fs(){
+  var k,v
+  for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+  // for ([k,v] of Object.entries(glob_react.Filmstrip)){
+    // clog("~",k,v.name)
+    // glob_react.Filmstrip[k] = FS_dec(v)
+    glob_react.Filmstrip[k] = v
+  } 
+}
+
+
+function undec_class(){
+  var k,v
+  for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+  // for ([k,v] of Object.entries(glob_react.Filmstrip)){
+    // clog("~",k,v.name)
+    // glob_react.Filmstrip[k] = FS_dec(v)
+    glob_react.Filmstrip[k] = v
+  } 
+}
+
+
+
+function resizeThumbnailsForCustomView(that,fn_name,args){
+    const thumbs = glob_react.Filmstrip._getThumbs()
+    const all_thumbs = $(".small_vid")
+    const custom_thumbs = all_thumbs.not(thumbs)
+
+    clog("rtscv",fn_name,[that,...args])
+
+
+}
+function dec_fs_proto(){
+  var k,v
+  save_orig()
+  undec_fs()
+
+  for (k of fs_dec_list){
+    clog("~",k)
+    v = glob_orig.Filmstrip[k]
+    glob_react.Filmstrip[k] = FS_dec_resize(v)
+  }
+  return
+  for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+  // for ([k,v] of Object.entries(glob_react.Filmstrip)){
+    // clog("~",k,v.name,v)
+    clog("~",k,v.name)
+    // glob_react.Filmstrip[k] = FS_dec(v)
+  }
+
+}
+
+
+function dec_fs_resize(){
+  var k,v
+  save_orig()
+  undec_fs()
+
+  for (k of fs_dec_list){
+    clog("~",k)
+    v = glob_orig.Filmstrip[k]
+    glob_react.Filmstrip[k] = FS_dec_resize(v)
+  }
+  return
+  for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+  // for ([k,v] of Object.entries(glob_react.Filmstrip)){
+    // clog("~",k,v.name,v)
+    clog("~",k,v.name)
+    // glob_react.Filmstrip[k] = FS_dec(v)
+  }
+
+}
+
+
+
+
+
+
+function test_thumbs(){
+  var ret = glob_react.Filmstrip._getThumbs()
+  clog(ret)
+  return ret
+
+}
+
+
+
+
+
+
+function save_orig_prototype(classes){
+  var i,k,v
+  var i2,k2,v2
+  var o
+  var ret = {}
+  // o = glob_react.vidClass.LocalVideo.prototype
+  // o  = tobj
+  // o = glob_react.vidClass.LocalVideo
+  // for ([k,v] of Object.entries(glob_react.vidClass)){
+  // for ([k,v] of Object.entries(o)){
+  // for ([k2,v2] of Object.entries(glob_react.vidClass)){
+  for ([k2,v2] of Object.entries(classes)){
+      clog("...",k2)
+      ret[k2] = {}
+      o = v2.prototype
+    for ([k,v] of iter_desc(o)){
+
+      // clog(k,v)
+      ret[k2][k]=v
+      clog(k2,k,v)
+    }
+  }
+  clog("><",Object.getOwnPropertyDescriptors(o))
+  return ret
+
+}
+
+function save_orig(){
+// console.trace("SAVE-ORIG")
+glob_orig = window.glob_orig || {
+  Filmstrip:{},
+  fs:{},
+  rf_filmstrip:{},
+}
+
+
+  glob_orig.Filmstrip = Object.assign({},glob_react.Filmstrip)
+  glob_orig.fs = Object.assign({},glob_react.fs)
+  glob_orig.rf_filmstrip = Object.assign({},glob_react.rf_filmstrip)
+  glob_orig.vidClass = save_orig_prototype(glob_react.vidClass)
+  // glob_orig.vidClass.LocalVideo_proto = Object.assign({},glob_react.vidClass.LocalVideo.prototype)
+  // glob_orig.vidClass2  = jc(glob_react.vidClass)
+  // glob_orig.rf_filmstrip = Object.assign({},glob_react.rf_filmstrip)
+  save_orig = nop
+}
+
+// glob_react.vidClass.LocalVideo.prototype
+// 
+
+
+
+
+
+if (window.glob_orig){
+
+save_orig = nop
+// save_orig()
+}
+if (!window.glob_orig && window.glob_react){
+
+// save_orig = nop
+save_orig()
+}
+if (window.glob_orig && window.glob_react){
+// dec_fs()
+// dec_fs_resize()
+// save_orig = nop
+// save_orig()
+}
+
+
+
+
+
+if (window.glob_orig && window.glob_react){
+// dec_fs()
+dec_fs_resize()
+// save_orig = nop
+// save_orig()
+}
+
+
+
+
+
+function* iter_desc(o){
+  var i,k,v
+  i = 0
+  for ([k,v] of Object.entries(Object.getOwnPropertyDescriptors(o))){
+    yield [k,v]
+    i += 1
+  }
+
+}
+
+

resize_hook.js

@@ -0,0 +1,344 @@
+function FS_dec_resize(fn) {
+  return function() {
+    clog("rtscv0",glob_react.Filmstrip._getThumbs())
+    resize_filmstrips(this,fn.name,arguments)
+  	dec_fns[fn.name] && dec_fns[fn.name].pre ? dec_fns[fn.name].pre({that:this, arguments}) : 1
+    const ret = fn.apply(this, arguments);
+    resize_filmstrips2(this,fn.name,arguments)
+    // console.log('FSD',fn.name,ret, [this,...arguments]);
+    // console.log('FSD',fn.name);
+    
+    // console.trace('FSD_trc  '+fn.name);
+    // log_tb()
+    // window.log_tb(new Error(),fn.name)
+    clog("rtscv1",glob_react.Filmstrip._getThumbs())
+    resizeThumbnailsForCustomView(this,fn.name,arguments)
+  	const ret2 = dec_fns[fn.name] && dec_fns[fn.name].post ? dec_fns[fn.name].post({that:this, arguments}) : 0
+  	if (ret2){
+  		return ret2.ret
+  	}
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    clog("rtscv2",glob_react.Filmstrip._getThumbs())
+    return ret;
+  }
+}
+function FS_dec_proto(fn,fn_name) {
+  return function() {
+    clog("fdp0",fn_name,glob_react.Filmstrip._getThumbs())
+    dec_fns[fn_name] && dec_fns[fn_name].pre ? dec_fns[fn_name].pre({that:this, arguments}) : 1
+    if (fn_name == "updateDOMLocation") {
+      this.updateDOMLocation2()
+    }
+    const ret = fn.apply(this, arguments);
+    // console.log('FSD',fn_name,ret, [this,...arguments]);
+    // console.log('FSD',fn_name);
+    
+    // console.trace('FSD_trc  '+fn_name);
+    // log_tb()
+    // window.log_tb(new Error(),fn_name)
+    // clog("rtscv1",glob_react.Filmstrip._getThumbs())
+    // resizeThumbnailsForCustomView(this,fn_name,arguments)
+    clog("fdp2",fn_name,glob_react.Filmstrip._getThumbs())
+    const ret2 = dec_fns[fn_name] && dec_fns[fn_name].post ? dec_fns[fn_name].post({that:this, arguments}) : 0
+    if (ret2){
+      return ret2.ret
+    }
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    // clog("rtscv2",glob_react.Filmstrip._getThumbs())
+    return ret;
+  }
+}
+
+
+
+function undec_fs(){
+  var k,v
+  for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+  // for ([k,v] of Object.entries(glob_react.Filmstrip)){
+    // clog("~",k,v.name)
+    // glob_react.Filmstrip[k] = FS_dec(v)
+    glob_react.Filmstrip[k] = v
+  } 
+}
+
+
+function undec_class(){
+  var k,v
+  var proto = glob_orig.vidClass.LocalVideo
+  // var proto = glob_react.vidClass.LocalVideo.prototype
+  // for ([k,v] of iter_desc(proto)){
+  for ([k,v] of Object.entries(proto)){
+    // glob_react.Filmstrip[k] = v
+    // clog(k,v)
+    glob_react.vidClass.LocalVideo.prototype[k] = v.value
+    // clog(k,v)
+  } 
+}
+
+
+
+
+function dec_fs_proto(){
+  var k,v
+  save_orig()
+  undec_class()
+  var proto = glob_orig.vidClass.LocalVideo
+  for ([k,v] of Object.entries(proto)){
+    // glob_react.Filmstrip[k] = v
+    // glob_react.vidClass.LocalVideo.prototype[k] = FS_dec_proto(v)
+    glob_react.vidClass.LocalVideo.prototype[k] = FS_dec_proto(v.value,k)
+    // clog(k,v)
+  } 
+  // glob_react.vidClass.LocalVideo.prototype.updateDOMLocation = updateDOMLocation
+  glob_react.vidClass.LocalVideo.prototype.updateDOMLocation = updateDOMLocation2
+  // updateDOMLocation
+  /*
+  for (k of fs_dec_list){
+    clog("~",k)
+    v = glob_orig.Filmstrip[k]
+    glob_react.Filmstrip[k] = FS_dec_resize(v)
+  }
+  */
+  return
+  for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+  // for ([k,v] of Object.entries(glob_react.Filmstrip)){
+    // clog("~",k,v.name,v)
+    clog("~",k,v.name)
+    // glob_react.Filmstrip[k] = FS_dec(v)
+  }
+
+}
+
+
+function dec_fs_resize(){
+  var k,v
+  save_orig()
+  undec_fs()
+  dec_fs_proto()
+
+  for (k of fs_dec_list){
+    clog("~",k)
+    v = glob_orig.Filmstrip[k]
+    glob_react.Filmstrip[k] = FS_dec_resize(v)
+  }
+  return
+  for ([k,v] of Object.entries(glob_orig.Filmstrip)){
+  // for ([k,v] of Object.entries(glob_react.Filmstrip)){
+    // clog("~",k,v.name,v)
+    clog("~",k,v.name)
+    // glob_react.Filmstrip[k] = FS_dec(v)
+  }
+
+}
+
+
+
+
+
+
+function test_thumbs(){
+  var ret = glob_react.Filmstrip._getThumbs()
+  clog(ret)
+  return ret
+
+}
+
+
+
+function updateDOMLocation2() {
+        clog("updateDOMLocation2",this,arguments)
+        // this._updateVideoElement();
+        clog("UDL 00")
+        // return
+        // if (!this.container || !this.container.parentElement) {
+        if (!this.container ) {
+            return;
+        }
+        // dev trc 
+        // ...
+
+        clog("UDL 10",this.container.parentElement)
+
+        var custom_local = 0
+        this.container.parentElement ? custom_local = this.container.parentElement.classList.contains("icont") : 0
+        if (this.container.parentElement && !custom_local) {
+            this.container.parentElement.removeChild(this.container);
+        }
+        // return
+        clog("UDL 20")
+        const appendTarget = shouldDisplayTileView(APP.store.getState())
+            ? document.getElementById('localVideoTileViewContainer')
+            : document.getElementById('filmstripLocalVideoThumbnail');
+        // if ()
+        !custom_local && appendTarget && appendTarget.appendChild(this.container);
+        clog("UDL 30")
+        clog("")
+        this._updateVideoElement();
+        clog("UDL 40")
+    }
+
+
+
+
+
+
+
+function updateDOMLocation() {
+
+        if (!this.container) {
+            return;
+        }
+        // dev trc 
+        // ...
+        if (this.container.parentElement) {
+            this.container.parentElement.removeChild(this.container);
+        }
+
+        const appendTarget = shouldDisplayTileView(APP.store.getState())
+            ? document.getElementById('localVideoTileViewContainer')
+            : document.getElementById('filmstripLocalVideoThumbnail');
+
+        appendTarget && appendTarget.appendChild(this.container);
+        this._updateVideoElement();
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function save_orig_prototype(classes){
+  var i,k,v
+  var i2,k2,v2
+  var o
+  var ret = {}
+  // o = glob_react.vidClass.LocalVideo.prototype
+  // o  = tobj
+  // o = glob_react.vidClass.LocalVideo
+  // for ([k,v] of Object.entries(glob_react.vidClass)){
+  // for ([k,v] of Object.entries(o)){
+  // for ([k2,v2] of Object.entries(glob_react.vidClass)){
+  for ([k2,v2] of Object.entries(classes)){
+      clog("...",k2)
+      ret[k2] = {}
+      o = v2.prototype
+    for ([k,v] of iter_desc(o)){
+
+      // clog(k,v)
+      ret[k2][k]=v
+      clog(k2,k,v)
+    }
+  }
+  clog("><",Object.getOwnPropertyDescriptors(o))
+  return ret
+
+}
+
+function save_orig(){
+// console.trace("SAVE-ORIG")
+glob_orig = window.glob_orig || {
+  Filmstrip:{},
+  fs:{},
+  rf_filmstrip:{},
+}
+
+
+  glob_orig.Filmstrip = Object.assign({},glob_react.Filmstrip)
+  glob_orig.fs = Object.assign({},glob_react.fs)
+  glob_orig.rf_filmstrip = Object.assign({},glob_react.rf_filmstrip)
+  glob_orig.vidClass = save_orig_prototype(glob_react.vidClass)
+  // glob_orig.vidClass.LocalVideo_proto = Object.assign({},glob_react.vidClass.LocalVideo.prototype)
+  // glob_orig.vidClass2  = jc(glob_react.vidClass)
+  // glob_orig.rf_filmstrip = Object.assign({},glob_react.rf_filmstrip)
+  save_orig = nop
+}
+
+// glob_react.vidClass.LocalVideo.prototype
+// 
+
+
+
+
+
+if (window.glob_orig){
+
+save_orig = nop
+// save_orig()
+}
+if (!window.glob_orig && window.glob_react){
+
+// save_orig = nop
+save_orig()
+}
+if (window.glob_orig && window.glob_react){
+// dec_fs()
+// dec_fs_resize()
+// save_orig = nop
+// save_orig()
+}
+
+
+
+
+
+if (window.glob_orig && window.glob_react){
+// dec_fs()
+dec_fs_resize()
+// save_orig = nop
+// save_orig()
+}
+
+
+
+
+
+function* iter_desc(o){
+  var i,k,v
+  i = 0
+  for ([k,v] of Object.entries(Object.getOwnPropertyDescriptors(o))){
+    yield [k,v]
+    i += 1
+  }
+
+}
+
+
+
+
+
+
+
+
+function glvcb(elm){
+  // clog("GLVCB",this,[...arguments])
+  try{
+  return  elm.isLocal
+
+  } catch{}
+}
+
+function get_local_vid(){
+  return glob_dev_hooks.smallvids.filter(glvcb)[0]
+
+}

resize_proto.js

@@ -0,0 +1,401 @@
+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()
+
+
+
+

rf/class_dec.js

@@ -0,0 +1,225 @@
+
+GLOB_ORIG = "glob_orig_v2"
+
+
+
+function FS_dec_proto_v2(fn,fn_name) {
+  return function() {
+    clog("fdp0",fn_name,glob_react.Filmstrip._getThumbs())
+    dec_fns[fn_name] && dec_fns[fn_name].pre ? dec_fns[fn_name].pre({that:this, arguments}) : 1
+    if (fn_name == "updateDOMLocation") {
+      this.updateDOMLocation2()
+    }
+    const ret = fn.apply(this, arguments);
+    // console.log('FSD',fn_name,ret, [this,...arguments]);
+    // console.log('FSD',fn_name);
+    
+    // console.trace('FSD_trc  '+fn_name);
+    // log_tb()
+    // window.log_tb(new Error(),fn_name)
+    // clog("rtscv1",glob_react.Filmstrip._getThumbs())
+    // resizeThumbnailsForCustomView(this,fn_name,arguments)
+    clog("fdp2",fn_name,glob_react.Filmstrip._getThumbs())
+    const ret2 = dec_fns[fn_name] && dec_fns[fn_name].post ? dec_fns[fn_name].post({that:this, arguments}) : 0
+    if (ret2){
+      return ret2.ret
+    }
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    // clog("rtscv2",glob_react.Filmstrip._getThumbs())
+    return ret;
+  }
+}
+
+function undec_class_v2(cls,cls_orig,cname){
+  var k,v
+  var proto = cls_orig
+  // var proto = glob_react.vidClass.LocalVideo.prototype
+  // for ([k,v] of iter_desc(proto)){
+  for ([k,v] of Object.entries(proto)){
+    // glob_react.Filmstrip[k] = v
+    // clog(k,v)
+    cls.prototype[k] = v.value
+    // clog(k,v)
+  } 
+}
+
+function _method_dec_v2(fn,fn_name){
+  return function() {
+    // clog("fdp0",fn_name,glob_react.Filmstrip._getThumbs())
+    const ret1 = dec_fns[fn_name] && dec_fns[fn_name].pre ? dec_fns[fn_name].pre({that:this, args:arguments}) : 0
+    // if (fn_name == "updateDOMLocation") {
+      // this.updateDOMLocation2()
+    // }
+    if (ret1){
+      return ret1.ret
+    }
+    const ret = fn.apply(this, arguments);
+    // clog("MDV2",fn_name,{that:this, args:arguments,ret:ret})
+    // clog("MDV2 xyz",fn_name,{that:this, args:arguments,ret:ret})
+    // console.log('FSD',fn_name,ret, [this,...arguments]);
+    // console.log('FSD',fn_name);
+    
+    // console.trace('FSD_trc  '+fn_name);
+    // log_tb()
+    // window.log_tb(new Error(),fn_name)
+    // clog("rtscv1",glob_react.Filmstrip._getThumbs())
+    // resizeThumbnailsForCustomView(this,fn_name,arguments)
+    // clog("fdp2",fn_name,glob_react.Filmstrip._getThumbs())
+
+    
+    const ret2 = dec_fns[fn_name] && dec_fns[fn_name].post ? dec_fns[fn_name].post({that:this, arguments}) : 0
+        // clog("MDEX",{ret1,ret2})
+    if (ret2){
+      return ret2.ret
+    }
+    // const result = fn.apply(this, arguments);
+    // console.log('Finished');
+    // clog("rtscv2",glob_react.Filmstrip._getThumbs())
+    return ret;
+  }
+}
+
+
+function dec_class_v2(cls,cls_orig,cname){
+  var k,v
+  var proto = cls_orig
+  // var proto = glob_react.vidClass.LocalVideo.prototype
+  // for ([k,v] of iter_desc(proto)){
+  for ([k,v] of Object.entries(proto)){
+    // glob_react.Filmstrip[k] = v
+    // clog(k,v)
+    cls.prototype[k] = _method_dec_v2(v.value,k)
+    // clog(k,v)
+  } 
+}
+
+
+
+function save_orig_class(cls){
+  var i,k,v
+  var i2,k2,v2
+  var o
+  var ret = {}
+  // o = glob_react.vidClass.LocalVideo.prototype
+  // o  = tobj
+  // o = glob_react.vidClass.LocalVideo
+  // for ([k,v] of Object.entries(glob_react.vidClass)){
+  // for ([k,v] of Object.entries(o)){
+  // for ([k2,v2] of Object.entries(glob_react.vidClass)){
+  // for ([k2,v2] of Object.entries(classes)){
+      // clog("...",k2)
+      // ret[k2] = {}
+      o = cls.prototype
+    for ([k,v] of iter_desc(o)){
+
+      // clog(k,v)
+      ret[k]=v
+      // clog(k2,k,v)
+    }
+  // }
+  // clog("><",Object.getOwnPropertyDescriptors(o))
+  return ret
+
+}
+// dec_fns
+
+
+function init_cdec(){
+let runonce = !window[GLOB_ORIG]
+// runonce = 1
+// if (!window[GLOB_ORIG]){
+// }
+window[GLOB_ORIG] = window[GLOB_ORIG] || {
+    classes:{}
+}
+cdec.glob_orig = window[GLOB_ORIG]
+if (runonce){
+
+    window[GLOB_ORIG].classes["SharedVideoManager"] = cdec.get_class_methods(glob_react.SharedVideoManager)
+}
+
+}
+
+
+
+function undec_svm(){
+    cdec.undec_class(glob_react.SharedVideoManager,cdec.glob_orig.classes.SharedVideoManager)
+
+}
+function dec_svm(){
+    cdec.dec_class(glob_react.SharedVideoManager,cdec.glob_orig.classes.SharedVideoManager)
+
+}
+// function dec_svm(){}
+function onSharedVideoUpdate_mod(id, url, attributes) {
+        // if we are sending the event ignore
+        if (APP.conference.isLocalId(this.from)) {
+            return;
+        }
+
+        if (!this.isSharedVideoShown) {
+            this.onSharedVideoStart(id, url, attributes);
+
+            return;
+        }
+
+        // eslint-disable-next-line no-negated-condition
+        if (!this.player) {
+            this.initialAttributes = attributes;
+        } else {
+            this.processVideoUpdate(this.player, attributes);
+        }
+    }
+
+dec_fns_v2 = {
+    onSharedVideoUpdate:{
+        pre(o){
+            try {
+                if (!o.that.player){
+                    window.autoplay_probably_disabled ? autoplay_probably_disabled(o) : clog("NO fix implemented")
+                    clog("...autoplay_probably_disabled...")
+                }
+/*
+            clog("onSharedVideoUpdate pre arg",[...o.args])
+            // clog("onSharedVideoUpdate pre",o.args[2],o.that.isSharedVideoShown,!this.player)
+            clog("onSharedVideoUpdate pre",o.args[2],!o.that.isSharedVideoShown,!o.that.player)
+            // onSharedVideoUpdate_mod.apply(o.that, o.args);
+            try {
+                clog("osvu player",o.that.player)
+            o.that.player.g.g.playerVars
+
+        } catch (err){
+            clog("osvu err")
+        }
+
+            clog("onSharedVideoUpdate...",o.that.player)
+
+*/
+            // return {}
+
+            } catch (err){clog("dec fn err svm",err)}
+            // return onSharedVideoUpdate_mod.apply(o.that, o.args);
+            // return onSharedVideoUpdate_mod.apply(o.that, o.args);
+
+        },
+        post_x(o){
+            try {
+
+            // clog("onSharedVideoUpdate post",o)
+            } catch (err){clog("dec fn err svm")}
+
+        },
+    }
+}
+
+cdec = {
+    get_class_methods:save_orig_class,
+    undec_class:undec_class_v2,
+    dec_class:dec_class_v2,
+    glob_orig:window[GLOB_ORIG],
+}
+dec_fns = window.dec_fns || {}
+Object.assign(dec_fns,dec_fns_v2)
+init_cdec()
+dec_svm()

rf/fake_resize.js

@@ -0,0 +1,41 @@
+
+// make the App think you resized the window
+function dispatch_resize(store = APP.store) {
+        // store.dispatch(clientResized_dev(innerWidth, innerHeight));
+        store.dispatch({
+        type: "CLIENT_RESIZED",
+        clientHeight:innerHeight,
+        clientWidth:innerWidth,
+    });
+        // clog("dispatch_resize")
+}
+
+// unused old fn to add pseudo videos
+function add_spans(n=1,xtra=0){
+	var s = `
+	<span class="pseudo_vid videocontainer"></span>
+	`
+	$(".pseudo_vid").remove()
+	if (!xtra){
+	n = n - APP.store.getState()["features/base/participants"].length
+	}
+	var k,v
+	for (var i = 0; i < n; i++) {
+		// Things[i]
+		clog("..",i)
+	$("#filmstripRemoteVideosContainer").append(s)
+	}
+	dispatch_resize()
+}
+
+
+
+
+
+
+fs_dec_list = [
+"resizeThumbnailsForHorizontalView",
+"resizeThumbnailsForVerticalView",
+// "resizeThumbnailsForTileView",
+]
+dec_fns = {}

rf/filmstrip_mod/m.css

@@ -0,0 +1,150 @@
+
+.abs {
+	background: #0080;
+	position: absolute;
+	z-index: 100;
+	top:0;
+	left:0;
+	right: 0;
+	bottom: 0;
+	margin: inherit;
+}	
+
+
+
+
+.icont {
+	/*background: #0ff8;*/
+
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+
+
+.xbox {
+	width: 25px;
+	height: 25px;
+	/*color: #0000;*/
+	color: #000;
+	background: #0ff;
+	background-image: linear-gradient(to top left, #ff8 50%, #0ff 50%);
+}
+
+.xbox2 {
+	width: 25px;
+	height: 25px;
+	position: relative;
+	position: absolute;
+	color: #000;
+	background-image: linear-gradient(to top left, #ff8 50%, #0ff 50%);
+}
+
+
+
+.small_vid .xbox:after,.small_vid .xbox2:after{
+/*.xbox:after,.xbox2:after{*/
+	content: "???";
+	z-index: 0;
+	white-space: pre-wrap;
+	content: var(--v_index,":???:") "\A" var(--v_id,":???:");
+	background-color: #fff;
+	position:absolute;
+	top: 0;
+	width: 75px;
+	height: 45px;
+	left: 0;
+	/*right: 0;*/
+	/*bottom: 0;*/
+}
+
+
+.xbox.m2s {
+	width: 75px;
+	height: 75px;
+
+	width: 100%;
+	height: 100%;
+
+	background: #ff8;
+	background-image: linear-gradient(to top left, #ff8 50%, #0ff 50%);
+
+
+}
+
+
+
+
+.pseudo_vid {
+	background-color: #f00;
+	background-image: linear-gradient(to top left, #ff8 50%, #0ff 50%);
+}
+
+
+.tile-view .pseudo_vid,.vertical-filmstrip .pseudo_vid{
+	background-size:contain;
+	/*border: 2px solid transparent !important;*/
+	margin:4 5px;
+	width: 100%;
+}
+
+.small_vid {
+	display: block;
+}
+.pseudo_vid {
+	/*display: none;*/
+	position: relative;
+	/*position: absolute;*/
+}
+
+
+
+.vspace {
+	position: absolute;
+	/*height: 500px;*/
+	height: 100%;
+	width: 100%;
+	/*width: calc(100% - 4px);*/
+	width: calc(100% );
+	width: calc(100% - 4px);
+	/*background-color: #555;*/
+	height: calc(100% - 4px);
+	border-radius: 100px;
+
+}
+
+
+.m4 {
+	width: 50px;
+	height: 50px;
+	top: 200px;
+	left: 10px;
+	z-index: 100; 
+	position: relative;
+	background-color: #00f;
+}
+
+
+
+
+.cont {
+	/*position: relative;*/
+	position: absolute;
+
+}
+
+.toolbox-background{
+	z-index: 100 !important;
+}
+
+
+
+.c6 {
+	overflow-x: scroll;
+}
+
+
+.remote-videos-container {
+	outline: 
+}

rf/filmstrip_mod/m.html

@@ -0,0 +1,156 @@
+
+
+
+
+
+
+
+HI THIS is AN HTML SNIPIT
+
+
+<!-- <div class="mp1">abc</div>
+<div class="mp2">def</div> -->
+
+
+
+
+<span class="plugin_top abs filmstrip_template"><div class="dev_filmstrip">
+	<span class="cont c1">
+		<div class="icont ic1"></div>
+	</span>
+	<span class="cont c2">
+		<div class="icont ic2"></div>
+	</span>
+	<span class="cont c3">
+		<div class="icont ic3"></div>
+	</span>
+</div></span>
+
+
+
+
+<span id="vspace_filmstrip_template0" class="plugin_top abs2"><div class="dev_filmstrip">
+	<span class="cont c1">
+		<div class="icont ic1 vid_container" data-fs_type="vertical" data-fs_handler="vertical"></div>
+	</span>
+	<span class="cont c2">
+		<div class="icont ic2 vid_container" data-fs_type="horizontal" data-fs_handler="horizontal"></div>
+	</span>
+	<span class="cont c3">
+		<div class="icont ic3 vid_container" data-fs_type="vertical" data-fs_handler="vertical"></div>
+	</span>
+	<span class="cont c6">
+		<div class="icont ic6 vid_container" data-fs_type="horizontal" data-fs_handler="horizontal"></div>
+	</span>
+	<span class="cont c5">
+		<div class="icont ic5 vid_container" data-fs_type="single" data-fs_handler="center"></div>
+		<div class="at a1"></div>
+		<div class="at a2"></div>
+		<div class="at a3"></div>
+		<div class="at a4"></div>
+	</span>
+	<span class="cont c4">
+		<div class="icont ic4 vid_container" data-fs_type="single"></div>
+	</span>
+</div></span>
+
+
+
+
+
+
+
+
+
+
+
+<!-- 
+<input type="checkbox" name="">
+ -->
+
+
+
+
+
+
+
+
+
+<span id="vspace_filmstrip_template" class="plugin_top abs2"><div class="dev_filmstrip">
+	<span class="fs_container">
+	<span class="cont c2">
+		<div class="icont ic2 vid_container" data-fs_type="vertical" data-fs_handler="vertical"></div>
+	</span>
+	<span class="cont c1">
+		<div class="icont ic1 vid_container" data-fs_type="horizontal" data-fs_handler="horizontal"></div>
+	</span>
+	<span class="cont c3">
+		<div class="icont ic3 vid_container" data-fs_type="vertical" data-fs_handler="vertical"></div>
+	</span>
+	<span class="cont c6">
+		<div class="icont ic6 vid_container" data-fs_type="horizontal" data-fs_handler="horizontal"></div>
+	</span>
+	<!-- 
+	<span class="cont c5">
+		<div class="icont ic5 vid_container" data-fs_type="single" data-fs_handler="center"></div>
+		<div class="at a1"></div>
+		<div class="at a2"></div>
+		<div class="at a3"></div>
+		<div class="at a4"></div>
+	</span>
+	 -->
+	<span class="cont c4">
+		<div class="icont ic4 vid_container" data-fs_type="single" data-fs_handler="center"></div>
+	</span>
+	</span>
+</div></span>
+
+
+
+
+
+
+
+
+
+<span id="vspace_filmstrip_proto_template" class="plugin_top abs2"><div class="dev_filmstrip">
+	<!-- 
+	<span class="cont c1">
+		<div class="icont ic1 vid_container" data-fs_type="vertical"></div>
+	</span>
+	<span class="cont c2">
+		<div class="icont ic2 vid_container" data-fs_type="horizontal"></div>
+	</span>
+	<span class="cont c3">
+		<div class="icont ic3 vid_container" data-fs_type="vertical"></div>
+	</span>
+	 -->
+
+	<span class="cont c5">
+		<!-- <div class="icont ic5 vid_container" data-fs_type="single"></div> -->
+		<div class="at a1"></div>
+		<div class="at a2"></div>
+		<div class="at a3"></div>
+		<div class="at a4"></div>
+		<div class="at a5"></div>
+		<div class="at a6"></div>
+		<div class="at a7"></div>
+		<div class="at a8"></div>
+
+
+
+		<div class="at at2 b1"></div>
+		<div class="at at2 b2"></div>
+		<div class="at at2 b3"></div>
+		<div class="at at2 b4"></div>
+		<div class="at at2 b5"></div>
+		<div class="at at2 b6"></div>
+		<div class="at at2 b7"></div>
+		<div class="at at2 b8"></div>
+
+
+	</span>
+	<span class="cont c4">
+		<!-- <div class="icont ic4 vid_container" data-fs_type="single"></div> -->
+	</span>
+</div></span>

rf/filmstrip_mod/m.js

@@ -0,0 +1,417 @@
+
+// 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()
+
+}
+

rf/filmstrip_mod/m0.js

@@ -0,0 +1,821 @@
+
+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 ()

rf/fs.css

@@ -0,0 +1,327 @@
+
+
+.tile-view #filmstripRemoteVideos {
+	margin: 135 0 100 0;
+}
+
+
+
+
+
+.vid_container > .small_vid {
+	display: inline-block;
+}
+
+
+
+.small_vid{
+	/*box-sizing: content-box;*/
+	box-sizing: border-box;
+	margin: 4px 5px;/
+	/*background-clip: border-box;*/
+	background-clip: content-box;
+	outline: unset;
+}
+.dev_filmstrip {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+
+.vid_container{
+	z-index: 6;
+}
+
+
+
+
+
+.ic4  {
+	/*vertical-align: */
+	vertical-align: middle;
+	text-align: center;
+	/*outline: 2px solid red;*/
+
+	align-items: center;
+	/*margin: auto;*/
+	display: flex;
+	/*flex-wrap: */
+}
+
+.ic4 .small_vid  {
+	display: inline-block !important;
+	margin: auto;
+}
+
+
+
+.fs_container{
+	position: relative;
+	display: inline-block;
+	height: 100%;
+	margin: auto;
+
+}
+
+#sharedVideoIFrame {
+	width: 100% !important;
+	height: 100% !important;
+}
+
+#videospace{
+	vertical-align: center;
+	--lvw: 100% !important;;
+}
+ 
+.youtube_vid {
+	outline: 5px dotted red;
+}
+
+
+
+.ic1 {
+
+  display: flex;
+  justify-content: center;
+
+	justify-content:center;
+
+}
+
+
+
+#sharedVideoIFrame,#sharedVideo {
+	display: unset !important;
+	opacity: 1 !important;
+}
+
+#largeVideoWrapper {
+	width: 100% !important;
+	height: 100% !important;
+	top: 0 !important;
+	bottom: 0 !important;
+	left: 0 !important;
+	right: 0 !important;
+}
+
+.large-video-background{
+	display: none !important;
+}
+
+
+.indicator_hook {
+pointer-events: none;
+}
+
+
+.vid_toptoolbar_hook {
+	position: absolute;
+}
+
+
+#toggleFilmstripButton,[aria-label="Toggle tile view"] {
+	/*display: none !important;*/
+}
+
+.videocontainer__toptoolbar{
+	z-index: auto !important;
+}
+
+
+/* this is important this covers large video  */
+.cont.c4{
+	z-index: 0;
+}
+
+
+.dev_hook:not(.vspace,.top_toolbox){
+	display: none;
+}
+.xbox {
+	display: none ;
+
+}
+
+
+
+
+
+
+
+.vid_toptoolbar_hook{
+	width: 100%;
+	height: 0%;
+	padding-bottom: 56.25%;
+}
+
+
+
+
+
+.outline_indicator{
+	/*outline: 1px solid #0000;*/
+	outline: 2px solid #000;
+	outline: 0px solid #fff;
+	outline-offset: -15px;
+	--voffc: -3px; 
+	--voff:  2px;
+	--voffw: 2px; 
+	width: 100%;
+	height: 100%;
+	position: absolute;
+
+}
+
+.active-speaker .outline_indicator.ind_1{
+	outline-offset: 5px;
+	outline-offset: calc((var(--voff) * 3 ) + var(--voffc));
+	outline-width: var(--voffw);
+	outline-color: #0ff;
+}
+.videoContainerFocused .outline_indicator.ind_2{
+	outline-offset: 3px;
+	outline-offset: calc((var(--voff) * 2 ) + var(--voffc));
+	outline-width: var(--voffw);
+	outline-color: #f00;
+}
+.local_vid .outline_indicator.ind_3{
+	outline-offset: 1px;
+	outline-offset: calc((var(--voff) * 1 ) + var(--voffc));
+	outline-width: var(--voffw);
+	outline-color: #fff;
+}
+
+
+
+
+
+.remote-video-menu-trigger, .remotevideomenu {
+	z-index: 10;
+}
+
+.follow_focus {
+	z-index: 20;
+	position: absolute;
+	left: 250px;
+	pointer-events:auto;
+
+}
+
+.follow_focus2 {
+	z-index: 20;
+	position: absolute;
+	right: 100px;
+	pointer-events:auto;
+
+}
+
+.dev_hook.top_toolbox{
+	pointer-events: none;
+	z-index: -1;
+}
+
+
+#react > div {
+		/*background-color: rgb(27, 38, 56);*/
+		/*background-color: rgb(71, 71, 71);*/
+		background-color: #374757;
+}
+
+
+.new-toolbox .toolbox-background {
+/*
+    background-image: linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.4),rgba(0,0,0,.1),rgba(0,0,0,0));
+
+
+    --vr0: rgba(0,0,0,1);
+    --vr1: rgba(0,0,0,.6);
+    --vr2: rgba(0,0,0,.4);
+    --vr3: rgba(0,0,0,0);
+
+    background-image: linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,.5),rgba(0,0,0,.2),rgba(0,0,0,0));
+*/
+
+    --vr0:  rgba(0,0,0,1)  0%;
+    --vr1:  rgba(0,0,0,.6) 25%;
+    --vr2:  rgba(0,0,0,.3) 55%;
+    --vr3:  rgba(0,0,0,0)  100%;
+
+    background-image: linear-gradient(to top,var(--vr0),var(--vr1),var(--vr2),var(--vr3));
+}
+.button-group-center {
+	position: relative;
+}
+
+
+
+/*
+.il {
+	outline: 4px inset #ff0;
+}
+
+.ir {
+	outline: 4px inset #f00;
+	
+}
+
+
+.ilr {
+	outline: 4px inset #0ff;
+}
+
+.ir0 {
+	border-radius: 30px;
+}
+
+.il0 {
+	border-radius: 30px;
+}
+.ic3 {
+	background: #ff08;
+
+}
+.ic2 {
+	background: #00f8;
+
+}
+*/
+
+
+
+.follow_focus,.follow_focus2 {
+	background-color: #0008;
+}
+
+
+.inline_input {
+	display: inline;
+}
+
+#ov_timeout,#num_pseudo{
+	width: 4em;
+}
+
+/*.presence-label, */
+
+.subject {
+	overflow: visible;
+}
+
+* {
+	/*color: red;*/
+}
+#sharedVideo.z{
+	pointer-events: unset !important;
+}
+#etherpad.z{
+	outline: 2px solid red;
+	outline-offset: -5px;
+	/*z-index: 500 !important;*/
+	z-index: -1 !important;
+	pointer-events: none;
+}

rf/fs_hook.js

@@ -0,0 +1,87 @@
+
+
+
+
+function resize_filmstrips(that,fn_name,args=[]){
+
+}
+function resize_filmstrips2(that,fn_name,args=[]){
+	
+}
+
+
+glob_mx.filmstrip_handlers = glob_mx.filmstrip_handlers || {}
+glob_mx.filmstrip_tile_handlers = glob_mx.filmstrip_tile_handlers || {}
+
+
+
+// run callbacks for all filmstrips on resize
+function resizeThumbnailsForCustomView(that,fn_name,args=[]){
+    const thumbs = glob_react.Filmstrip._getThumbs()
+    const all_thumbs = $(".small_vid")
+    const custom_thumbs = all_thumbs.not(thumbs.remlocThumbs)
+    const vid_containers = $(".vid_container")
+    const loose_thumbs = custom_thumbs.not(vid_containers.children())
+    var k,v 
+    let fs_handler_key
+    let fs_handler 
+    let fs_tile_handler
+    let fs_handlers = new Map()
+    let i
+    // console.trace("rtscv...")
+
+    let fs_tile_handlers = []
+    for (v of vid_containers){
+      // clog(":",v,v.dataset.fs_type)
+      fs_handler_key = v.dataset.fs_handler
+      // clog("~",v,v.dataset,fs_handler)
+      fs_tile_handler = glob_mx.filmstrip_tile_handlers[fs_handler_key] || nop
+      fs_handler = glob_mx.filmstrip_handlers[fs_handler_key] || nop
+      // glob_mx.filmstrip_tile_handlers[fs_handler_key] ? glob_mx.filmstrip_tile_handlers[fs_handler_key](v) : 1
+      // fs_tile_handlers.push([glob_mx.filmstrip_tile_handlers[fs_handler_key] || nop,v])
+      // fs_handlers.setD(glob_mx.filmstrip_handlers[fs_handler_key] || nop,)
+      fs_tile_handlers.push([fs_tile_handler,v])
+      fs_handlers.setD(fs_handler,[])
+      i = fs_handlers.get(fs_handler)
+      i.push(v)
+
+      // glob_mx.filmstrip_handlers
+    }
+    // clog("fs_tile_handlers",fs_tile_handlers)
+    for ([k,v] of fs_handlers){
+    	// clog("ft0",k,v)
+    	k(v)
+    }
+    for ([k,v] of fs_tile_handlers){
+    	// clog("ft",k,v)
+    	k(v)
+
+    }
+
+
+    // return
+    // const custom_thumbs = all_thumbs
+
+    var aspect = 16/18
+    var width = 135
+    var height = Math.round(width/aspect)
+    loose_thumbs.css({
+      'padding-top': '',
+      "min-height": `${height}px`,
+      "min-width": `${width}px`,
+      width: `${width}px`,
+      height: `${height}px`,
+    })
+
+    clog("rtscv",fn_name,[that,...args])
+
+
+}
+
+
+
+
+
+function onover(){
+	clog(this,[...arguments])
+}

rf/i4m/m.css

@@ -0,0 +1,94 @@
+
+
+
+/*.lobby_root*/
+/*rooms_dir*/
+/*room_span*/
+
+/*rx1*/
+/*rx2*/
+
+
+.lobby_root {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	outline: 3px solid red;
+	outline-offset: -20px;
+	position: absolute;
+	z-index: 10;
+	/*background-image: url("../../media/examples/lizard.png");*/
+	background-image: url("/ign/rf/img/image.png");
+
+	/*background-image: url("/ign/rf/img/img3.jpg");*/
+	/*vertical-align: middle;*/
+}
+
+
+
+.rooms_dir {
+	/*padding-top: auto;*/
+	/*top: 50%;*/
+	top: 50%;
+	vertical-align: middle;
+	/*display: inline-block;*/
+	transform: translate(0,-50%);
+	width: calc(100% - 50px);
+	height: 300px;
+	position: relative;
+	outline: 6px solid green;
+	margin: auto;
+	overflow-x: scroll;
+
+}
+
+.rooms_dir_full{
+	/*position: relative;*/
+	/*display: inline;*/
+	/*width: 300%;*/
+	top: 0;
+
+	/*left: 0;*/
+	width: auto;
+	position: absolute;
+	/*right: 0;*/
+	bottom: 0;
+}
+
+
+
+.room_span {
+	/*top: 0;*/
+	/*bottom: 0;*/
+	height: 200px;
+	/*width: 20%;*/
+	/*margin: 20em;*/
+	margin: 20px;
+	width: 200px;
+	outline: 2px solid #ff0;
+	position: relative;
+	display: flex;
+	display: inline;
+	display: inline-block;
+	/*display: inline-flex;*/
+}
+
+.tile_title{
+	/*margin: auto 30px;*/
+	/*margin: 30px auto;*/
+	/*width: 100%;*/
+	text-align: center;
+	position: relative;
+	/*display: inline;*/
+	font-size: 2em;
+}
+.tile_button{
+	width: 125px;
+	height: 25px;
+	outline: 3px solid blue;
+	/*margin: 0 50%;*/
+	margin: 0 auto;
+
+
+}

rf/i4m/m.html

@@ -0,0 +1,31 @@
+
+
+
+<span class="plugin_top abs filmstrip_template">
+
+<div class="lobby_root plugin_top">
+	<div class="rooms_dir">
+	<span class="rooms_dir_full">
+		<!-- <span class="room_span rx2"></span> -->
+	</span>
+	</div>
+</div>
+
+
+</div>
+
+
+<span>
+	
+		<span class="room_span rxt">
+			<div class="tile_title">Title</div>
+			<div class="tile_button"></div>
+		</span>
+</span>
+
+
+</span>
+
+
+
+

rf/i4m/m.js

@@ -0,0 +1,87 @@
+mod_templates_4 = window.mod_templates_4 || $("")
+
+// reload templates
+function html_js_handler_lobby(rsp) {
+	clog("html_js_handler_lobby",[...arguments])
+	mod_templates_4 = $(`<span>${rsp}</span>`)
+	init_lobby()
+	// init_api6()
+}
+
+
+
+
+function init_lobby(){
+	saftly_remove(".plugin_top")
+	var lroot = mod_templates_4.find(".lobby_root")
+	lr = lroot[0].outerHTML
+	clog("...",lr)
+	// welcome_page
+	// add_node
+	// add_node(n,`.vid_toptoolbar_hook`,"append")
+	add_node(lr,"#welcome_page","append")
+	add_tiles()
+	// $("#welcome_page").
+
+}
+
+
+
+function add_tiles(){
+	var rtile = mod_templates_4.find(".room_span.rxt")
+	var rtile2 = rtile[0].outerHTML
+	var i,k,v,n
+	i=0
+	while (i < 10){
+		n = $(rtile2)
+		n.addClass(`rx${i}`)
+		// add_node(n,".rooms_dir","append")
+		add_node(n,".rooms_dir_full","append")
+		i+=1
+		clog("//",i)
+	}
+	set_width()
+}
+
+function set_width(){
+	var rdf = $('.rooms_dir_full')
+  var totalWidth = 0;
+	rdf.children().each(function(){
+    totalWidth += $(this).outerWidth();
+    totalWidth +=px_int($(this).css("margin-left") )
+	totalWidth +=px_int($(this).css("margin-right"))
+
+    // totalWidth += ?  :
+    // totalWidth +=  ?  :
+  });
+     rdf.css('width', totalWidth);
+}
+
+function px_int(s){
+	// totalWidth
+	var a = s.split("px") 
+	var ret = Number(a[0])
+	ret = ret ? ret : 0
+	return ret
+}
+
+/*
+$(document).ready(function(){
+  var totalWidth = 0;
+  $('#container').children().each(function(){
+    totalWidth += $(this).outerWidth();
+  });
+  $('#container').css('width', totalWidth);
+});
+*/
+
+
+
+
+clog(".....2")
+
+try {
+init_lobby()
+} catch (err) {
+clog("err:",err)
+}

rf/idev/i8.js

@@ -0,0 +1,3 @@
+
+clog("I8")
+

rf/inspect_utils.js

@@ -0,0 +1,20 @@
+
+
+function jclone(obj){
+	return Array.isArray(obj) ?  $.extend(true,[],obj) :  $.extend(true,{},obj)
+}
+function jx(obj){
+	return JSON.parse(JSON.stringify(obj))
+}
+window.jc = jclone
+
+function rcom2(){
+	var k,v
+	var k2,v2
+	for ([k,v] of Object.entries(rldi.files) ){
+		// clog(k,v.cached == rls[k],v.cached,rls[k])
+		clog(k)
+	}
+	clog(Object.entries(rldi.files).length)
+
+}

rf/jquery.corner.js

@@ -0,0 +1,251 @@
+/*!
+ * jQuery corner plugin: simple corner rounding
+ * Examples and documentation at: http://jquery.malsup.com/corner/
+ * version 2.13 (19-FEB-2013)
+ * Requires jQuery v1.3.2 or later
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ * Authors: Dave Methvin and Mike Alsup
+ */
+
+/**
+ *  corner() takes a single string argument:  $('#myDiv').corner("effect corners width")
+ *
+ *  effect:  name of the effect to apply, such as round, bevel, notch, bite, etc (default is round). 
+ *  corners: one or more of: top, bottom, tr, tl, br, or bl.  (default is all corners)
+ *  width:   width of the effect; in the case of rounded corners this is the radius. 
+ *           specify this value using the px suffix such as 10px (yes, it must be pixels).
+ */
+;(function($) { 
+
+var msie = /MSIE/.test(navigator.userAgent);
+
+var style = document.createElement('div').style,
+    moz = style['MozBorderRadius'] !== undefined,
+    webkit = style['WebkitBorderRadius'] !== undefined,
+    radius = style['borderRadius'] !== undefined || style['BorderRadius'] !== undefined,
+    mode = document.documentMode || 0,
+    noBottomFold = msie && (!mode || mode < 8),
+
+    expr = msie && (function() {
+        var div = document.createElement('div');
+        try { div.style.setExpression('width','0+0'); div.style.removeExpression('width'); }
+        catch(e) { return false; }
+        return true;
+    })();
+
+$.support = $.support || {};
+$.support.borderRadius = moz || webkit || radius; // so you can do:  if (!$.support.borderRadius) $('#myDiv').corner();
+
+function sz(el, p) { 
+    return parseInt($.css(el,p),10)||0; 
+}
+function hex2(s) {
+    s = parseInt(s,10).toString(16);
+    return ( s.length < 2 ) ? '0'+s : s;
+}
+function gpc(node) {
+    while(node) {
+        var v = $.css(node,'backgroundColor'), rgb;
+        if (v && v != 'transparent' && v != 'rgba(0, 0, 0, 0)') {
+            if (v.indexOf('rgb') >= 0) { 
+                rgb = v.match(/\d+/g); 
+                return '#'+ hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);
+            }
+            return v;
+        }
+        if (node.nodeName.toLowerCase() == 'html')
+            break;
+        node = node.parentNode; // keep walking if transparent
+    }
+    return '#ffffff';
+}
+
+function getWidth(fx, i, width) {
+    switch(fx) {
+    case 'round':  return Math.round(width*(1-Math.cos(Math.asin(i/width))));
+    case 'cool':   return Math.round(width*(1+Math.cos(Math.asin(i/width))));
+    case 'sharp':  return width-i;
+    case 'bite':   return Math.round(width*(Math.cos(Math.asin((width-i-1)/width))));
+    case 'slide':  return Math.round(width*(Math.atan2(i,width/i)));
+    case 'jut':    return Math.round(width*(Math.atan2(width,(width-i-1))));
+    case 'curl':   return Math.round(width*(Math.atan(i)));
+    case 'tear':   return Math.round(width*(Math.cos(i)));
+    case 'wicked': return Math.round(width*(Math.tan(i)));
+    case 'long':   return Math.round(width*(Math.sqrt(i)));
+    case 'sculpt': return Math.round(width*(Math.log((width-i-1),width)));
+    case 'dogfold':
+    case 'dog':    return (i&1) ? (i+1) : width;
+    case 'dog2':   return (i&2) ? (i+1) : width;
+    case 'dog3':   return (i&3) ? (i+1) : width;
+    case 'fray':   return (i%2)*width;
+    case 'notch':  return width; 
+    case 'bevelfold':
+    case 'bevel':  return i+1;
+    case 'steep':  return i/2 + 1;
+    case 'invsteep':return (width-i)/2+1;
+    }
+}
+
+$.fn.corner = function(options) {
+    // in 1.3+ we can fix mistakes with the ready state
+    if (this.length === 0) {
+        if (!$.isReady && this.selector) {
+            var s = this.selector, c = this.context;
+            $(function() {
+                $(s,c).corner(options);
+            });
+        }
+        return this;
+    }
+
+    return this.each(function(index){
+        var $this = $(this),
+            // meta values override options
+            o = [$this.attr($.fn.corner.defaults.metaAttr) || '', options || ''].join(' ').toLowerCase(),
+            keep = /keep/.test(o),                       // keep borders?
+            cc = ((o.match(/cc:(#[0-9a-f]+)/)||[])[1]),  // corner color
+            sc = ((o.match(/sc:(#[0-9a-f]+)/)||[])[1]),  // strip color
+            width = parseInt((o.match(/(\d+)px/)||[])[1],10) || 10, // corner width
+            re = /round|bevelfold|bevel|notch|bite|cool|sharp|slide|jut|curl|tear|fray|wicked|sculpt|long|dog3|dog2|dogfold|dog|invsteep|steep/,
+            fx = ((o.match(re)||['round'])[0]),
+            fold = /dogfold|bevelfold/.test(o),
+            edges = { T:0, B:1 },
+            opts = {
+                TL:  /top|tl|left/.test(o),       TR:  /top|tr|right/.test(o),
+                BL:  /bottom|bl|left/.test(o),    BR:  /bottom|br|right/.test(o)
+            },
+            // vars used in func later
+            strip, pad, cssHeight, j, bot, d, ds, bw, i, w, e, c, common, $horz;
+        
+        if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR )
+            opts = { TL:1, TR:1, BL:1, BR:1 };
+            
+        // support native rounding
+        if ($.fn.corner.defaults.useNative && fx == 'round' && (radius || moz || webkit) && !cc && !sc) {
+            if (opts.TL)
+                $this.css(radius ? 'border-top-left-radius' : moz ? '-moz-border-radius-topleft' : '-webkit-border-top-left-radius', width + 'px');
+            if (opts.TR)
+                $this.css(radius ? 'border-top-right-radius' : moz ? '-moz-border-radius-topright' : '-webkit-border-top-right-radius', width + 'px');
+            if (opts.BL)
+                $this.css(radius ? 'border-bottom-left-radius' : moz ? '-moz-border-radius-bottomleft' : '-webkit-border-bottom-left-radius', width + 'px');
+            if (opts.BR)
+                $this.css(radius ? 'border-bottom-right-radius' : moz ? '-moz-border-radius-bottomright' : '-webkit-border-bottom-right-radius', width + 'px');
+            return;
+        }
+            
+        strip = document.createElement('div');
+        $(strip).css({
+            overflow: 'hidden',
+            height: '1px',
+            minHeight: '1px',
+            fontSize: '1px',
+            backgroundColor: sc || 'transparent',
+            borderStyle: 'solid'
+        });
+    
+        pad = {
+            T: parseInt($.css(this,'paddingTop'),10)||0,     R: parseInt($.css(this,'paddingRight'),10)||0,
+            B: parseInt($.css(this,'paddingBottom'),10)||0,  L: parseInt($.css(this,'paddingLeft'),10)||0
+        };
+
+        if (typeof this.style.zoom !== undefined) this.style.zoom = 1; // force 'hasLayout' in IE
+        if (!keep) this.style.border = 'none';
+        strip.style.borderColor = cc || gpc(this.parentNode);
+        cssHeight = $(this).outerHeight();
+
+        for (j in edges) {
+            bot = edges[j];
+            // only add stips if needed
+            if ((bot && (opts.BL || opts.BR)) || (!bot && (opts.TL || opts.TR))) {
+                strip.style.borderStyle = 'none '+(opts[j+'R']?'solid':'none')+' none '+(opts[j+'L']?'solid':'none');
+                d = document.createElement('div');
+                $(d).addClass('jquery-corner');
+                ds = d.style;
+
+                bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);
+
+                if (bot && cssHeight != 'auto') {
+                    if ($.css(this,'position') == 'static')
+                        this.style.position = 'relative';
+                    ds.position = 'absolute';
+                    ds.bottom = ds.left = ds.padding = ds.margin = '0';
+                    if (expr)
+                        ds.setExpression('width', 'this.parentNode.offsetWidth');
+                    else
+                        ds.width = '100%';
+                }
+                else if (!bot && msie) {
+                    if ($.css(this,'position') == 'static')
+                        this.style.position = 'relative';
+                    ds.position = 'absolute';
+                    ds.top = ds.left = ds.right = ds.padding = ds.margin = '0';
+                    
+                    // fix ie6 problem when blocked element has a border width
+                    if (expr) {
+                        bw = sz(this,'borderLeftWidth') + sz(this,'borderRightWidth');
+                        ds.setExpression('width', 'this.parentNode.offsetWidth - '+bw+'+ "px"');
+                    }
+                    else
+                        ds.width = '100%';
+                }
+                else {
+                    ds.position = 'relative';
+                    ds.margin = !bot ? '-'+pad.T+'px -'+pad.R+'px '+(pad.T-width)+'px -'+pad.L+'px' : 
+                                        (pad.B-width)+'px -'+pad.R+'px -'+pad.B+'px -'+pad.L+'px';                
+                }
+
+                for (i=0; i < width; i++) {
+                    w = Math.max(0,getWidth(fx,i, width));
+                    e = strip.cloneNode(false);
+                    e.style.borderWidth = '0 '+(opts[j+'R']?w:0)+'px 0 '+(opts[j+'L']?w:0)+'px';
+                    bot ? d.appendChild(e) : d.insertBefore(e, d.firstChild);
+                }
+                
+                if (fold && $.support.boxModel) {
+                    if (bot && noBottomFold) continue;
+                    for (c in opts) {
+                        if (!opts[c]) continue;
+                        if (bot && (c == 'TL' || c == 'TR')) continue;
+                        if (!bot && (c == 'BL' || c == 'BR')) continue;
+                        
+                        common = { position: 'absolute', border: 'none', margin: 0, padding: 0, overflow: 'hidden', backgroundColor: strip.style.borderColor };
+                        $horz = $('<div/>').css(common).css({ width: width + 'px', height: '1px' });
+                        switch(c) {
+                        case 'TL': $horz.css({ bottom: 0, left: 0 }); break;
+                        case 'TR': $horz.css({ bottom: 0, right: 0 }); break;
+                        case 'BL': $horz.css({ top: 0, left: 0 }); break;
+                        case 'BR': $horz.css({ top: 0, right: 0 }); break;
+                        }
+                        d.appendChild($horz[0]);
+                        
+                        var $vert = $('<div/>').css(common).css({ top: 0, bottom: 0, width: '1px', height: width + 'px' });
+                        switch(c) {
+                        case 'TL': $vert.css({ left: width }); break;
+                        case 'TR': $vert.css({ right: width }); break;
+                        case 'BL': $vert.css({ left: width }); break;
+                        case 'BR': $vert.css({ right: width }); break;
+                        }
+                        d.appendChild($vert[0]);
+                    }
+                }
+            }
+        }
+    });
+};
+
+$.fn.uncorner = function() { 
+    if (radius || moz || webkit)
+        this.css(radius ? 'border-radius' : moz ? '-moz-border-radius' : '-webkit-border-radius', 0);
+    $('div.jquery-corner', this).remove();
+    return this;
+};
+
+// expose options
+$.fn.corner.defaults = {
+    useNative: true, // true if plugin should attempt to use native browser support for border radius rounding
+    metaAttr:  'data-corner' // name of meta attribute to use for options
+};
+    
+})(jQuery);

rf/keyboard_dev_fn.js

@@ -0,0 +1,130 @@
+glob_dev_fns.kb_shortcut_keyup= function(){
+	return {}
+}
+glob_dev_fns.kb_shortcut_keydown= function(){
+	return {}
+}
+glob_dev_fns.runonce = 1
+
+glob_dev_fns._renderOverflowMenuContent = function(o){
+	if (!glob_dev_fns.runonce){
+		// returnz/
+	}
+	// clog("_renderToolboxContent",o.kv.ret)
+	// o.kv.ret.fill(false)
+	return
+	glob_dev_fns.runonce = 0
+		// return
+	// console.trace("dev trc _renderOverflowMenuContent")
+	// clog("dev log _renderOverflowMenuContent",arguments)
+	// clog("dev log2 ret overflowMenuContent",o.kv.ret)
+	var k,v
+	// if (glob_dev_fns.runonce){
+
+	for (v of o.kv.ret){
+
+	clog("devx",v)
+	if (v){
+		// clog(v.props)
+		v.props.showLabel=false
+		// v.props.visible=true
+		v.props.visible=false
+		// showLabel: true, visible: true
+	}
+
+	}
+	// }
+	// return {}
+}
+
+glob_dev_fns._renderToolboxContent = function(o){
+	return
+	// console.trace("dev trc _renderOverflowMenuContent")
+	clog("dev log _renderToolboxContent",arguments)
+	clog("dev log2 _renderToolboxContent overflowMenuContent",o.kv.overflowMenuContent)
+	// return {}
+}
+// _renderToolboxContent
+
+glob_dev_fns.UI_arr_showToolbar = function(o){
+	// clog("dev_log4 UI_arr_showToolbar")
+	// return {}
+}
+
+glob_dev_fns.SVC_onHoverIn = function(o){
+	// clog("dev_log4 SVC_onHoverIn")
+	// return {}
+}
+
+
+glob_dev_fns.hideToolbox = function(o){
+	clog("dev_log4 hideToolbox")
+	// return {}
+}
+
+
+glob_dev_fns.showToolbox = function(o){
+	// clog("dev_log4 showToolbox",o.args,o)
+	// return {}
+}
+glob_dev_fns.conference__onShowToolbar = function(o){
+	// clog("dev_log4 conference__onShowToolbar",o.args,o)
+	// return {}
+}
+
+
+ function fn_mm2(that,args){
+// glob_dev_fns.fn_mm2 =function(){
+	// var that = arguments[0]
+	var event = args[0]
+
+	// clog("ON mm",this,arguments)
+/*	xy= {
+
+	screenX:event.screenX,
+	screenY:event.screenY,
+	pageX:event.pageX,
+	pageY:event.pageY,
+	movementX:event.movementX,
+	movementY:event.movementY,
+	clientX:event.clientX,
+	clientY:event.clientY,
+	innerWidth,
+	innerHeight,
+
+	}*/
+	if (innerHeight - event.clientY < 150){
+		that._onShowToolbar()
+	} else if (iammod && event.clientY < 150){
+		that._onShowToolbar()
+
+	}
+	// clog("ON mm2",that,event)
+	// clog("ON mm3",xy)
+	// clog("ON mm3",innerHeight - event.clientY )
+	
+}
+function fake_fn(){
+
+
+            try {
+            var fn_name = "hideToolbox"
+            var fn_name = "showToolbox"
+
+            var fn_ret = glob_dev_fns[fn_name]({that:this,kv:{},args:[...arguments],fn_name,arg0:arguments})
+            if (fn_ret){ return fn_ret.ret }; 
+        } catch (err) { clog(`react_fn fn_name:${fn_name} err:`,err) }
+
+}
+
+/*
+
+            try {
+            var fn_name = "SET_TOOLBOX_TIMEOUT_reducer"
+            var fn_name = "SET_TOOLBOX_TIMEOUT_middleware"
+            var fn_name = "CLEAR_TOOLBOX_TIMEOUT_reducer"
+            var fn_name = "CLEAR_TOOLBOX_TIMEOUT_middleware"
+            var fn_ret = glob_dev_fns[fn_name]({that:this,kv:{},args:[...arguments],fn_name,arg0:arguments})
+            if (fn_ret){ return fn_ret.ret }; 
+        } catch (err) { clog(`react_fn fn_name:${fn_name} err:`,err) }
+*/

rf/m/_m_utils.js

@@ -0,0 +1,139 @@
+
+
+
+
+if (!window.glob_mx){
+	// window.glob_mx={}
+}
+function disp(o){
+	APP.store.dispatch(o)
+}
+
+
+// default event handler this should match all events
+mhndlr_opt_null = {
+from: undefined,
+handler: "onAll",
+id: null,
+name: null,
+// "http://jitsi.org/jitmeet"
+ns: null,
+options: {matchBareFromJid: false, ignoreNamespaceFragment: false},
+type: null,
+user: true,
+cstr:"test"
+};
+
+
+
+mhndlr_opt_x = {
+	cstr:"?",
+	ns:"corner_mx",
+	handler:mhndlr,
+
+}
+
+
+function add_handler_m(handler) {
+	var phx = APP.connection.xmpp.connection._stropheConn.handlers[0].__proto__;
+
+	var hxa=Object.create(phx)
+	Object.assign(hxa,mhndlr_opt_null,handler)
+	APP.connection.xmpp.connection._stropheConn.addHandlers.push(hxa)
+}
+
+
+function tmsgx(data,tag="div",attrs={}){
+	// return
+	var ns = {xmlns:"corner_mx"}
+	var msg = $build("message",{ to: window.APP.conference._room.room.roomjid,
+            type: 'groupchat',
+             });
+	var payload=JSON.stringify(data)
+
+	Object.assign({},ns,attrs)
+
+	msg.c(tag, payload,Object.assign({},ns,attrs)).up();
+	// console.log("zzzz")
+	APP.conference._room.room.connection.send(msg)
+}
+
+
+
+function tmsgx2(data,opt_arg={},attrs={}){
+	// return
+	dflt_opt = {
+	tag:"code",
+	type:"chat",
+	to:window.APP.conference._room.room.roomjid,
+	}
+	var opt = Object.assign({},dflt_opt,opt_arg)
+
+	var ns = {xmlns:"corner_mx"}
+	var msg = $build("message",{ to: opt.to,
+            type: opt.type,
+             });
+	var payload=JSON.stringify(data)
+
+	Object.assign({},ns,attrs)
+
+	msg.c(opt.tag, payload,Object.assign({},ns,attrs)).up();
+	// console.log("zzzz")
+	APP.conference._room.room.connection.send(msg)
+}
+function tmsgx3(data,opt_arg={},attrs={}){
+	// return
+	dflt_opt = {
+	tag:"code",
+	// type:"chat",
+	to:window.APP.conference._room.room.roomjid,
+	}
+	var opt = Object.assign({},dflt_opt,opt_arg)
+	clog("T:",data,opt,opt.type)
+	if (!opt.type){
+		clog("NO TYPE")
+	opt.to == dflt_opt.to ? opt.type = "groupchat" : opt.type = "chat"
+	}
+	clog("T:",data,opt,opt.type)
+
+	var ns = {xmlns:"corner_mx"}
+	var msg = $build("message",{ to: opt.to,
+            type: opt.type,
+            // from: "nnnx@conference.jfidev.com/3db7bf15",
+            // xtra: "nnnx@conference.jfidev.com/3db7bf15",
+             });
+	var payload=JSON.stringify(data)
+
+	Object.assign({},ns,attrs)
+
+	msg.c(opt.tag, payload,Object.assign({},ns,attrs)).up();
+	// console.log("zzzz")
+	APP.conference._room.room.connection.send(msg)
+}
+
+
+
+function mhndlr_rld_dflt(a0,a1,a2,a3,a4){
+	clog("mhndlr... dflt")
+	return true
+}
+if (!window.mhndlr_rld){
+	window.mhndlr_rld = mhndlr_rld_dflt
+}
+function mhndlr(a0,a1,a2,a3,a4){
+	// clog("MH!")
+	setTimeout(window.mhndlr_rld,1,this,a0,a1,a2,a3,a4)
+	return true
+}
+
+
+function init_mx(){
+	clog("INITMX")
+	add_handler_m(mhndlr_opt_x)
+	// add_handler_m(mhndlr_opt_x_all)
+}
+
+// init_mx will be called once we join th confrence
+ifn_obj.init_conf_join.push(init_mx)
+
+

rf/m/m_api.js

@@ -0,0 +1,290 @@
+
+
+
+// this file enables loading modules after pageload
+
+
+
+
+
+function get_cui_html(file) {
+	clog("get_cui_html",this,arguments)
+	// console.trace("~IX~ ixr")
+	clog("~IX~ ixr")
+	// for (var file of this.arr){
+		var aii 
+		aii= $.ajax({
+			// url: "ign/cui.html",
+			url: file.url,
+			// data: file.qs,
+			cache:false,
+			// complete:complete_html,
+			success: file.success || proc_cui_html,
+			// error: err_html,
+			// dataType: "text"
+			dataType: "html"
+		})
+		aii.file = file
+		// aii.rldh=file
+	// }
+}
+
+
+
+function cui_respH(){
+	clog("cui_respH")
+}
+
+function cui_diffH(file){
+	clog("cui_diffH",this,arguments)
+	// get_cui_html(file)	
+}
+
+
+
+
+
+
+function proc_cui_html(rsp,status,xhr){
+	clog("proc_cui_html",this,arguments)
+	/*
+	gxh.success = {
+		that:this,
+		rsp,status,xhr,
+		args:arguments,
+	}
+	*/
+	// insert_cui_html(rsp)
+	// rsp
+}
+function insert_cui_html(innerHTML){
+	clog("insert_cui_html....")
+	window.cui_html = innerHTML
+	t5i2.crnr_init()
+	// t5i2.crnr_refresh()
+
+	// var n
+	//  n = document.createElement("div")
+	// n = document.querySelector("#xh_root")
+	// n ? n.innerHTML = innerHTML : 0
+	// event_html(n)
+}
+
+
+function dflt_api_handler(){
+	clog("dflt_api_handler NOT IMPLIMENTED")
+}
+
+function add_rld_html(){
+	// js files
+	// html
+	// css
+
+
+
+
+rldi.files["ign/m/timer/rhtml.html"]=  {url: "ign/m/timer/rhtml.html",
+ qs: {v:1}, respH: cui_respH, diffH: cui_diffH,
+ cached:"z z",
+ success:proc_cui_html,
+}
+
+
+
+}
+
+/*
+var reqt = {
+	url:"",
+	respH:dflt_handler,
+	diffH:diff_handler,
+}
+
+*/
+
+
+
+
+// jsrh
+// cssrh
+api_dflts = {
+	dflt:window.reqt || {url:"", respH:dflt_handler, diffH:diff_handler,},
+	js:{
+		diffH:jsrh,
+		// diffH:jsrh,
+		qs:{v:1},
+	},
+	css:{
+		diffH:cssrh,
+		qs:{v:1},
+
+	},
+	html:{
+
+		diffH:html_rld_cb,
+		qs:{v:1},
+	},
+}
+
+
+api_test = {}
+
+// <script class="rld" src="ign/m/m_api.js?c=023"></script>
+function insert_js(file){
+	var n = document.createElement("SCRIPT")
+	n.classList.add("rld")
+	n.src=file.url + "?_="+new Date().getTime()
+	// n.rel="stylesheet"
+	$(`script.rld[src^="`+file.url+`"]`).remove()
+	$(".m0.module").after(n)
+}
+function insert_css(file){
+	var url = file.url
+	var n = document.createElement("LINK")
+	n.classList.add("rld")
+	n.href=file.url + "?_="+new Date().getTime()
+	n.rel="stylesheet"
+	 $(`link.rld[href^="`+file.url+`"]`).remove()
+	$(".m0.module").after(n)
+}
+function html_rld_cb(){
+	clog("html_rld_cb!")
+
+}
+
+
+function html_rld_cb2(){
+	clog("html_rld_cb2!",this,[...arguments])
+
+}
+function html_rld_cb3(){
+	clog("html_rld_cb3!",this,[...arguments])
+}
+function html_rld_cb4(rsp,status,xhr){
+	clog("html_rld_cb4!",this,[...arguments])
+	// window[this.success_js](rsp,status,xhr)
+	window[xhr.file.success_js](rsp,status,xhr)
+}
+
+
+function register_rld(file){
+	clog("RR",file)
+	file.cached = rls[file.url]
+	rldi.files[file.url] =  file
+
+}
+
+
+window.qto_stop = 0
+window.qto_cnt = 0
+function qto_init(){
+	window.qto_stop = 0
+window.qto_cnt = 0
+	// setTimeout(qto_stop_fn,1000)
+	setTimeout(qto_stop_fn,100)
+	qto()
+
+}
+function qto_stop_fn(){
+	clog("qto_stop_fn")
+	window.qto_stop =1
+}
+function qto(){
+	clog("QTO",window.qto_cnt)
+	// clog("QTO",window.qto_cnt,$(`script.rld[src^="ign/m/timer/m.js"]`))
+	window.qto_cnt += 1
+	if (!window.qto_stop){
+		setTimeout(qto,1)
+	}
+
+}
+
+
+
+	// $(`script.rld[src^="ign/m/timer/m.js"]`).remove()
+	// ign/m/timer/m.js
+
+
+
+
+// mtx ={js:["ign/m/timer/m.js"],css:["ign/m/timer/m.css"],html:["ign/m/timer/m.html"]}
+// mtx ={js:["ign/m/timer/m.js"],css:["ign/m/timer/m.css"],html:[{url:"ign/m/timer/m.html",diffH:html_rld_cb2,success:html_rld_cb4,}]}
+
+// function 
+mod_path ="ign/rf/filmstrip_mod/"
+
+mtx ={	
+	// js:["ign/m/timer/m.js","ign/m/timer/m0.js"],
+	js:[`${mod_path}m0.js`,`${mod_path}m.js`,],
+	css:[`${mod_path}m.css`],
+	html:[{url:`${mod_path}m.html`,diffH:get_cui_html,success:html_rld_cb4,success_js:"html_js_handler"}]
+	}
+
+function add_module(o){
+	var k,v
+	let file 
+		// qto_init()
+		// file = jclone(api_dflts.css)
+	for (k of o.css || []){
+		if (typeof(k) == "string"){
+			 file = $.extend(true,{},api_dflts.css, {url:k})
+		} else {
+			 file = $.extend(true,{},api_dflts.css, k)
+		}
+		// file = jclone(api_dflts.css)
+		// file.url = k
+
+		register_rld(file)
+		insert_css(file)
+
+		api_test[file.url]=file
+		clog("~",k)
+	}
+	for (k of o.js || []){
+		if (typeof(k) == "string"){
+			 file = $.extend(true,{},api_dflts.js, {url:k})
+		} else {
+			 file = $.extend(true,{},api_dflts.js, k)
+		}
+		// file = jclone(api_dflts.js)
+		// file.url = k
+
+		register_rld(file)
+		insert_js(file)
+
+		api_test[file.url]=file
+		clog("~",k)
+	}
+	for (k of o.html || []){
+		if (typeof(k) == "string"){
+			 file = $.extend(true,{},api_dflts.html, {url:k})
+		} else {
+			 file = $.extend(true,{},api_dflts.html, k)
+		}
+		// file = jclone(api_dflts.html)
+		// file.url = k
+		register_rld(file)
+		api_test[file.url]=file
+		clog("~",k)
+		rfile = file
+		get_cui_html(file)
+	}
+
+
+}
+
+
+
+
+
+
+// jquery helper
+function add_node(n,rn,i) {
+	$(rn)[i](n)
+}
+
+
+setTimeout(add_module,300,mtx)
+
+
+// add_module(mtx )