Add the button

Default is this hidden as only 50% of the browser engines on my system
support this feature.

Author: vmcj

webapp/public/js/domjudge.js

@@ -1292,3 +1292,22 @@ function initScoreboardSubmissions() {
         });
     });
 }
+
+$(function () {
+    function checkExperimentalFeature() {
+        if ("documentPictureInPicture" in window) {
+            // Only the team interface has this button.
+            const togglePipButton = document.querySelector("#pop-out-button");
+            if (togglePipButton) {
+                togglePipButton.style.display = 'inline';
+                togglePipButton.addEventListener("click", togglePictureInPicture, false);
+            }
+        } else {
+            const pipMessage = document.querySelector("#no-picture-in-picture");
+            if (pipMessage) {
+                pipMessage.style.display = 'inline';
+            }
+        }
+    }
+    checkExperimentalFeature();
+});

webapp/public/style_domjudge.css

@@ -757,3 +757,11 @@ blockquote {
     height: 80vh;
     border: 1px solid grey;
 }
+
+#pop-out-button {
+    display: none;
+}
+
+#no-picture-in-picture {
+    display: none;
+}

webapp/templates/team/index.html.twig

@@ -46,6 +46,8 @@
             }
 
             $('[data-flash-messages]').html($flash);
+
+            checkExperimentalFeature();
         }
 
         window.initModalClarificationPreviewAdd = function() {

webapp/templates/team/partials/index_content.html.twig

@@ -46,6 +46,15 @@
                     Request clarification
                 </a>
             </div>
+            <h1 class="teamoverview">Experimental feature</h1>
+            <div class="m-1">
+                <p id="no-picture-in-picture">
+                    Ask your Tech team for another browser (<code>Document Picture-in-Picture API not available
+                <p>
+                <span class="btn btn-warning btn-sm" id="pop-out-button">
+                    <i class="fa-solid fa-explosion"></i> PR Pop-out
+                </span>
+            </div>
         </div>
     </div>
 {% endif %}