Only sort frames when it's safe and pertinent

- Don't sort if a player is fullscreened. Fixes #12
- Force a sort when exiting fullscreen
- Only sort when the player list changes, not any resize

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);