在 Jitsi 中重新排序视频图块 - 使用 DOM

问题描述

我想向 Jitsi 添加一个功能，允许通过小册子功能按字母顺序排列视频图块。

我使用 cketti's reorder.js 作为基础，因为它在我的机器上运行良好；但是，当我通过控制台运行自己的脚本时，视频无法正确显示（部分不可见）并且音频中断。 我不太习惯 JavaScript。

我做错了什么，我错过了什么？ 或者：我不太了解如何调试 JS，我如何才能找到如何重用 reorder.js 函数来正确排序？

var container = $('#filmstripRemoteVideosContainer')[0];
var jChildren = $(container).children();
const numberOfVideos = jChildren.length;
var names = new Array();

//only applicable in tiles mode!
for(i=0; i<numberOfVideos; i++) {
  names[i] = new Array (2);
  names[i][0] = jChildren[i].getElementsByClassName("displayname")[0].innerHTML;
  names[i][1] = jChildren[i];
}

//sort Array
names.sort((a,b) => a[0].localeCompare(b[0]))

//copy over to one-dimensional array
var newChildren = new Array();
for(i=0; i<numberOfVideos; i++) {
  newChildren[i] = names[i][1];
}

//convert to NodeList
var toNodeList = function(arr){
  var nodeList = document.createDocumentFragment();
  arr.forEach(function(item){
    nodeList.appendChild(item.cloneNode());
  });
  return nodeList.childNodes;
};

//Set new position
var remoteVideos = toNodeList(newChildren);
var videoTiles = $(remoteVideos).toArray()

// Set CSS 'order' properties to reflect current DOM order = display order
videoTiles.forEach(function(index) {
    $(this).css('order',-numberOfVideos + index);
});

//remove all videoTiles
for(i=0; i<numberOfVideos;i++){
  container.firstChild.remove()
}
// Add video tiles to DOM in sorted order (Now the CSS 'order' property is used for the display order)
videoTiles.forEach(videoTile => container.appendChild(videoTile));

编辑：这是工作代码：

    var container = $('#filmstripRemoteVideosContainer')[0];
    var jChildren = $(container).children();
    const numberOfVideos = jChildren.length;
    var names = new Array();
    
    //only applicable in tiles mode!
    for(i = 0; i < numberOfVideos; i++){
      names[i] = new Array (2);
      names[i][0] = jChildren[i].getElementsByClassName("displayname")[0].innerHTML;
      names[i][1] = jChildren[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);
    }

解决方法

看起来您正在克隆元素节点。尝试重新排序现有的，首先将它们从 DOM 中删除，然后按照所需的顺序重新添加它们。