-1

Last year, I wrote a bookmarklet that allowed to reorder Jitsi video tiles in alphabetic order.

Unfortunately, the script does not seem to work with the recent Jitsi versions anymore. I have already adjusted the access to the required elements, this is working fine again. However, the order: n attribute of the elements is ignored know, even when I set the parent to display:flex, remove the position: absolute and the left|top:n px. I played around with the CSS and looked into documentation, but given I am no frontender, I am currently stuck.

How can I change the CSS, so that the tiles are reordered?

As a clarification, I am only looking for where I need which changes in the CSS, no scripted solution. I can take care of the scripting. Achieving a swap of two video tiles while not breaking the look would be sufficient probably.

The below information are not necessary, but might be helpful to answer the question. Below is a screenshot showing the position in the DOM tree:

DOM tree leading to the video tiles (seems I need more reputation to embed the image)

And here is the the javascript that allows to directly access the elements:

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

kaiyazeera
  • 7
  • 3
  • Show us your code, without code it becomes problematic to help you. – Tschallacka Jan 14 '22 at 10:46
  • 1
    actually, given the question is about CSS in Jitsi, I would have expected that my code is not relevant towards answering the question, I disclosed the code anyway – kaiyazeera Jan 14 '22 at 11:01
  • The code is relevant for a question like this. Without knowing what your code does it's hard to give an answer on how to change it. Could you also attach the rendered contents of #remotevideo in your quetion? That way we can spoof a DOM to play around with. – Tschallacka Jan 14 '22 at 11:11
  • As seen in the screenshot, the elements are positioned `absolute` and are not a part of a `flex`-container, only adding `order` to the element will have no effect – DarkBee Jan 14 '22 at 11:13
  • @Tschallacka what do you mean by rendered content? Actually, it's Jitsi, and the image shows the path to the relevant element, I think given the complexity it is better to play around within Jitsi itself. (though, I am still not seeing how my code is relevant to the CSS part, given that's something to be found out via developer mode (F12)? – kaiyazeera Jan 14 '22 at 11:36
  • @DarkBee sure, but when I remove absolute and put them in a flex it still doesn't work. – kaiyazeera Jan 14 '22 at 11:36
  • The rendered content is what you see when you right click and then inspect element. I don't have a Jitsi account and won't make one. Hence the need for you to provide the rendered html. – Tschallacka Jan 14 '22 at 11:37
  • you don't need an account, it's just meet.jit.si/yournameforyourvc – kaiyazeera Jan 14 '22 at 12:00
  • the videoTiles are adressed by `jChildren2` in the above script, `jChildren[n]` is the nth video tile. – kaiyazeera Jan 14 '22 at 12:03

1 Answers1

0

The problem could be solved by modfying the global CSS:

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".videocontainer { position:relative !important; top: unset !important; left: unset !important; text-align:center;overflow:hidden;  }"

var css2 = document.createElement("style");
css2.type = "text/css";
css2.innerHTML = ".tile-view .remote-videos > div {flex-wrap:wrap;}"

document.body.appendChild(css)
document.body.appendChild(css2)
kaiyazeera
  • 7
  • 3