Skip to content

Demonstrate PiP for team elements #3029

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions webapp/public/js/domjudge.js
Original file line number Diff line number Diff line change
Expand Up @@ -1292,3 +1292,97 @@ function initScoreboardSubmissions() {
});
});
}

$(function () {
window.checkExperimentalFeature = function () {
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();

// Heavily based on: https://github.com/mdn/dom-examples/tree/main/document-picture-in-picture
const popOutFrame = document.querySelector("#pop-out-frame");
const popOutContainer = document.querySelector("#pop-out-container");
async function togglePictureInPicture() {
if (!(popOutFrame && popOutContainer)) {
console.log("Unexpected page, we only run if both are available.");
return;
}

popOutContainer.style.display = 'block';
// Early return if there's already a Picture-in-Picture window open
if (window.documentPictureInPicture.window) {
popOutContainer.append(popOutFrame);
window.documentPictureInPicture.window.close();
return;
}

// Open a Picture-in-Picture window.
const pipWindow = await window.documentPictureInPicture.requestWindow({
width: popOutFrame.clientWidth,
height: popOutFrame.clientHeight
});

pipWindow.document.body.style.padding = 0;
pipWindow.document.body.style.margin = 0;
const scoreBoards = document.querySelectorAll("#pop-out-frame .scoreboard");
scoreBoards.forEach((scoreBoard) => {
scoreBoard.style.margin = 0;
});
console.log("sb", scoreBoards);

// Add pagehide listener to handle the case of the pip window being closed using the browser X button
pipWindow.addEventListener("pagehide", (event) => {
popOutContainer.style.display = 'none';
popOutContainer.append(popOutFrame);
});


// Copy style sheets over from the initial document
// so that the player looks the same.
[...document.styleSheets].forEach((styleSheet) => {
try {
if (styleSheet.href) {
const link = document.createElement("link");

link.rel = "stylesheet";
link.type = styleSheet.type;
link.media = styleSheet.media;
link.href = styleSheet.href;

pipWindow.document.head.appendChild(link);
} else {
const cssRules = [...styleSheet.cssRules]
.map((rule) => rule.cssText)
.join("");
const style = document.createElement("style");

style.textContent = cssRules;
pipWindow.document.head.appendChild(style);
}
} catch (e) {
const link = document.createElement("link");

link.rel = "stylesheet";
link.type = styleSheet.type;
link.media = styleSheet.media;
link.href = styleSheet.href;

pipWindow.document.head.appendChild(link);
}
});

pipWindow.document.body.append(popOutFrame);
}
});
12 changes: 12 additions & 0 deletions webapp/public/style_domjudge.css
Original file line number Diff line number Diff line change
Expand Up @@ -757,3 +757,15 @@ blockquote {
height: 80vh;
border: 1px solid grey;
}

#pop-out-button {
display: none;
}

#no-picture-in-picture {
display: none;
}

#pop-out-container {
display: none;
}
6 changes: 4 additions & 2 deletions webapp/templates/team/index.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

{% block messages %}{% endblock %}
{% block content %}
<div data-ajax-refresh-target data-ajax-refresh-after="setFlashAndProgress" data-ajax-refresh-before="saveFlash">
<div data-ajax-refresh-target data-ajax-refresh-after="setFlashAndProgressAndExperimentalFeatures" data-ajax-refresh-before="saveFlash">
{% include 'team/partials/index_content.html.twig' %}
</div>
{% endblock %}
Expand All @@ -37,7 +37,7 @@
$flash = $('[data-flash-messages]').children();
}

function setFlashAndProgress() {
function setFlashAndProgressAndExperimentalFeatures() {
var $newProgress = $('[data-ajax-refresh-target] > [data-progress-bar]');
if ($newProgress.length) {
var $oldProgress = $('body > [data-progress-bar]');
Expand All @@ -46,6 +46,8 @@
}

$('[data-flash-messages]').html($flash);

checkExperimentalFeature();
}

window.initModalClarificationPreviewAdd = function() {
Expand Down
17 changes: 17 additions & 0 deletions webapp/templates/team/partials/index_content.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,23 @@
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 id="pop-out-container">
<div id="pop-out-frame">
{% set displayRank = not contest.freezeData.showFrozen %}
{% include 'partials/scoreboard_table.html.twig' with {displayRank: displayRank, jury: false, public: false} %}
<span style="background-color: black; color: white"><i class="fas fa-comments"></i>3</span>
<span style="background-color: red; color: white"><i class="fas fa-gavel"></i>C++/warning</span>
</div>
</div>
</div>
</div>
</div>
{% endif %}
Expand Down
Loading