web: Add fullscreen context menu item

TODO: Retain focus on fullscreen enter/exit.

web/packages/core/src/ruffle-player.js

@@ -242,28 +242,61 @@ exports.RufflePlayer = class RufflePlayer extends HTMLElement {
     }
 
     open_right_click_menu(e) {
-        const rect = this.getBoundingClientRect();
+        e.preventDefault();
 
+        const rect = this.getBoundingClientRect();
         this.right_click_menu.style.display = "block";
         this.right_click_menu.style.left = Math.ceil(e.clientX - rect.x) + "px";
         this.right_click_menu.style.top = Math.ceil(e.clientY - rect.y) + "px";
-        e.preventDefault();
+        while (this.right_click_menu.firstChild) {
+            this.right_click_menu.removeChild(this.right_click_menu.lastChild);
+        }
 
-        this.right_click_menu.innerHTML = "";
+        const items = [];
-
+        if (document.fullscreenEnabled) {
-        // TODO: Loop through each item and create an appropriate element with appropriate callback here
+            if (document.fullscreenElement) {
-
+                items.push({
-        const element = document.createElement("li");
+                    text: "Exit fullscreen",
-        element.className = "menu_item active";
+                    onClick: () => {
-        const version =
+                        document.exitFullscreen();
-            __CHANNEL__ === "nightly"
+                    },
-                ? `nightly ${__COMMIT_DATE__}`
+                });
-                : window.RufflePlayer.version;
+            } else {
-        element.innerText = `Ruffle ${version}`;
+                items.push({
-        element.addEventListener("click", () => {
+                    text: "Enter fullscreen",
-            window.open("https://ruffle.rs", "_blank");
+                    onClick: () => {
+                        this.requestFullscreen();
+                        this.focus();
+                    },
+                });
+            }
+        }
+        items.push({
+            text: `Ruffle ${
+                __CHANNEL__ === "nightly"
+                    ? `nightly ${__COMMIT_DATE__}`
+                    : window.RufflePlayer.version
+            }`,
+            onClick() {
+                window.open("https://ruffle.rs", "_blank");
+            },
         });
-        this.right_click_menu.appendChild(element);
+
+        for (const [i, { text, onClick }] of items.entries()) {
+            const element = document.createElement("li");
+            element.className = "menu_item active";
+            if (i === 0) {
+                element.style.borderTopRightRadius = "5px";
+                element.style.borderTopLeftRadius = "5px";
+            }
+            if (i === items.length - 1) {
+                element.style.borderBottomRightRadius = "5px";
+                element.style.borderBottomLeftRadius = "5px";
+            }
+            element.textContent = text;
+            element.addEventListener("click", onClick);
+            this.right_click_menu.appendChild(element);
+        }
     }
 
     hide_right_click_menu() {