El año pasado, escribí un bookmarklet que permitía reordenar los mosaicos de video de Jitsi en orden alfabético.

Desafortunadamente, el script ya no parece funcionar con las versiones recientes de Jitsi. Ya he ajustado el acceso a los elementos requeridos, esto está funcionando bien de nuevo. Sin embargo, el atributo order: n de los elementos se ignora, incluso cuando configuro el padre para display:flex , elimine la position: absolute y la left|top:n px . Jugué con el CSS y busqué en la documentación, pero dado que no soy frontender, actualmente estoy atascado.

¿Cómo puedo cambiar el CSS para que se reordenen los mosaicos?

Como aclaración, solo estoy buscando dónde necesito qué cambios en el CSS, no hay una solución con guión. Puedo encargarme de la secuencia de comandos. Lograr un intercambio de dos mosaicos de video sin romper la apariencia probablemente sería suficiente.

La siguiente información no es necesaria, pero podría ser útil para responder la pregunta. A continuación se muestra una captura de pantalla que muestra la posición en el árbol DOM:

Árbol DOM que conduce a los mosaicos de video (parece que necesito más reputación para incrustar la imagen)

Y aquí está el javascript que permite acceder directamente a los elementos:

 var numberOfVideos; function getNumberOfParticipants(){ // works } function getNameOfParticipant(i){ var container = $('#remoteVideos')[0]; var jChildren = $(container).children(); var jChildren2 = jChildren[1].firstChild.children; return [jChildren2[i].getElementsByClassName("displayname")[0].innerHTML, jChildren2[i] ]; } function sortParticipants(){ numberOfVideos = getNumberOfParticipants(); var names = new Array(); //only applicable in tiles mode! for(i=0; i<numberOfVideos; i++) { names[i] = new Array (2); names[i] = getNameOfParticipant(i); } //sort Array names.sort((a, b) => a[0].localeCompare(b[0])); //reorder the tiles for(i = 0; i < numberOfVideos; i++){ $(names[i][1]).css('order', i); //this is the line that worked in 2021, but the `order` attribute is now being ignored } }

https://github.com/kaiyazeera/jitsi-bookmarklets/blob/master/alphabeticSort-auto0.js