如何在 Jitsi 中重新排序视频块?
How to reoder video tiles in Jitsi?
去年,我写了一个小书签,允许按字母顺序重新排列 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
问题可以通过修改全局 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)
去年,我写了一个小书签,允许按字母顺序重新排列 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
问题可以通过修改全局 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)