diff --git a/assets/player.js b/assets/player.js index 6935a6d..b9efafa 100644 --- a/assets/player.js +++ b/assets/player.js @@ -9,6 +9,16 @@ xhr.onreadystatechange = function() { disabledPlayers = []; playerVolumeSettings = {}; +function webcallFrameSort() { + // If we're full screening a player this will break it, so don't + if (document.fullscreenElement) { return } + + // Sort the players alphabetically by ID + Array.from(document.body.querySelectorAll(".frame")) + .sort((a, b) => a.id > b.id ? 1 : -1) + .forEach(node => document.body.appendChild(node)) +} + // Auto-resize frames in a webcall interface function webcallFrameResize() { // Figure out how many Frames are visible @@ -57,11 +67,6 @@ function webcallFrameResize() { element.style.width = w; } ) - - // Sort the players alphabetically by ID - Array.from(document.body.querySelectorAll(".frame")) - .sort((a, b) => a.id > b.id ? 1 : -1) - .forEach(node => document.body.appendChild(node)) } function createPlayer(stream, muted, volume) { @@ -128,9 +133,10 @@ function createPlayer(stream, muted, volume) { player.stateManager = manageState; player.on("stateChanged", player.stateManager); - // Run a resize + // Run a resize and sort if (named_frames) { webcallFrameResize(); + webcallFrameSort(); } } @@ -163,9 +169,10 @@ function destroyPlayerById(containerId) { // Delete frame document.getElementById(`frame_${containerId}`).remove(); - // Run our resize + // Run our resize and sort if (named_frames) { webcallFrameResize(); + webcallFrameSort(); } } @@ -232,6 +239,10 @@ function EmprexSetup() { resize_timeout = setTimeout(webcallFrameResize, 250); }) + // If we enter or exit full screen, call the webcall frame sort + // The sort will refuse to run if we're in full screen. So we need to sort once we leave it + addEventListener("fullscreenchange", webcallFrameSort); + // Update streams every 5 seconds, and immediately requestStreamList(); setInterval(requestStreamList, 5000);