如何在 Jitsi 中重新排序视频图块？答案

【问题标题】：How to reoder video tiles in Jitsi?如何在 Jitsi 中重新排序视频图块？
【发布时间】：2023-03-20 22:40:01
【问题描述】：

去年，我写了一个小书签，允许按字母顺序重新排列 Jitsi 视频块。

不幸的是，该脚本似乎不再适用于最新的 Jitsi 版本。我已经调整了对所需元素的访问，这又可以正常工作了。但是，元素的order: n 属性被忽略知道，即使我将父级设置为display:flex，删除position: absolute 和left|top:n px。我玩弄了 CSS 并查看了文档，但鉴于我不是前端，我目前陷入困境。

如何更改 CSS，以便重新排列图块？

澄清一下，我只是在寻找我需要在 CSS 中进行哪些更改的地方，而不是脚本解决方案。我可以处理脚本。在不破坏外观的情况下实现两个视频块的交换可能就足够了。

以下信息不是必需的，但可能有助于回答问题。下面是显示在 DOM 树中位置的屏幕截图：

DOM tree leading to the video tiles（看来我需要更多声望才能嵌入图片）

这里是允许直接访问元素的 javascript：

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

【问题讨论】：

向我们展示您的代码，如果没有代码，帮助您就会有问题。
实际上，鉴于问题是关于 Jitsi 中的 CSS，我原以为我的代码与回答问题无关，我还是公开了代码
代码与这样的问题相关。在不知道您的代码做什么的情况下，很难给出如何更改它的答案。您能否在您的问题中附上#remotevideo 的渲染内容？这样我们就可以欺骗一个 DOM 来玩弄。
如截图所示，元素位于absolute，不是flex-container的一部分，只在元素中添加order不会有任何效果
@Tschallacka 渲染内容是什么意思？实际上，它是 Jitsi，并且图像显示了相关元素的路径，我认为考虑到复杂性，最好在 Jitsi 本身内玩。（不过，我仍然没有看到我的代码与 CSS 部分有何关联，因为这需要通过开发人员模式 (F12) 才能找到？

标签： javascript css bookmarklet jitsi jitsi-meet

【解决方案1】：

这个问题可以通过修改全局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)

【讨论】：