web: Add clipboard modal informing about shortcuts

This modal informs the user that they can use shortcuts
for copy, cut, and paste instead of using the context menu.
This modal is meant to be displayed when the browser
does not support reading the clipboard,
or the user denies permission to the clipboard.

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

@@ -146,6 +146,7 @@ export class RufflePlayer extends HTMLElement {
     private readonly volumeControls: HTMLDivElement;
     private readonly videoModal: HTMLDivElement;
     private readonly hardwareAccelerationModal: HTMLDivElement;
+    private readonly clipboardModal: HTMLDivElement;
 
     private readonly contextMenuOverlay: HTMLElement;
     // Firefox has a read-only "contextMenu" property,
@@ -271,10 +272,14 @@ export class RufflePlayer extends HTMLElement {
         this.volumeControls = <HTMLDivElement>(
             this.shadow.getElementById("volume-controls-modal")
         );
+        this.clipboardModal = <HTMLDivElement>(
+            this.shadow.getElementById("clipboard-modal")
+        );
         this.addModalJavaScript(this.saveManager);
         this.addModalJavaScript(this.volumeControls);
         this.addModalJavaScript(this.videoModal);
         this.addModalJavaScript(this.hardwareAccelerationModal);
+        this.addModalJavaScript(this.clipboardModal);
 
         this.volumeSettings = new VolumeControls(false, 100);
         this.addVolumeControlsJavaScript(this.volumeControls);
@@ -2366,6 +2371,18 @@ export class RufflePlayer extends HTMLElement {
         }
     }
 
+    protected displayClipboardModal(accessDenied: boolean): void {
+        const description = this.clipboardModal.querySelector(
+            "#clipboard-modal-description",
+        );
+        if (description) {
+            description.textContent = text("clipboard-message-description", {
+                variant: accessDenied ? "access-denied" : "unsupported",
+            });
+            this.clipboardModal.classList.remove("hidden");
+        }
+    }
+
     protected debugPlayerInfo(): string {
         return "";
     }

web/packages/core/src/shadow-template.ts

@@ -815,6 +815,36 @@ hardwareModalLink.target = "_blank";
 hardwareModalLink.className = "acceleration-link";
 hardwareModalLink.textContent = text("enable-hardware-acceleration");
 
+// Clipboard message
+const clipboardModal = createElement("div", "clipboard-modal", "modal hidden");
+const clipboardModalArea = createElement("div", undefined, "modal-area");
+const clipboardModalClose = createElement("span", undefined, "close-modal");
+clipboardModalClose.textContent = "\u00D7";
+const clipboardModalHeading = createElement("h2", undefined);
+clipboardModalHeading.textContent = text("clipboard-message-title");
+const clipboardModalTextDescription = createElement(
+    "p",
+    "clipboard-modal-description",
+);
+const shortcutModifier = navigator.userAgent.includes("Mac OS X")
+    ? "Command"
+    : "Ctrl";
+const clipboardModalTextCopy = createElement("p", undefined);
+const clipboardModalTextCopyShortcut = createElement("b", undefined);
+clipboardModalTextCopyShortcut.textContent = `${shortcutModifier}+C`;
+const clipboardModalTextCopyText = createElement("span", undefined);
+clipboardModalTextCopyText.textContent = text("clipboard-message-copy");
+const clipboardModalTextCut = createElement("p", undefined);
+const clipboardModalTextCutShortcut = createElement("b", undefined);
+clipboardModalTextCutShortcut.textContent = `${shortcutModifier}+X`;
+const clipboardModalTextCutText = createElement("span", undefined);
+clipboardModalTextCutText.textContent = text("clipboard-message-cut");
+const clipboardModalTextPaste = createElement("p", undefined);
+const clipboardModalTextPasteShortcut = createElement("b", undefined);
+clipboardModalTextPasteShortcut.textContent = `${shortcutModifier}+V`;
+const clipboardModalTextPasteText = createElement("span", undefined);
+clipboardModalTextPasteText.textContent = text("clipboard-message-paste");
+
 // Context menu overlay elements
 const contextMenuOverlay = createElement(
     "div",
@@ -888,6 +918,21 @@ appendElement(ruffleShadowTemplate.content, hardwareModal);
 appendElement(hardwareModal, hardwareModalArea);
 appendElement(hardwareModalArea, hardwareModalClose);
 appendElement(hardwareModalArea, hardwareModalLink);
+// Clipboard modal append
+appendElement(ruffleShadowTemplate.content, clipboardModal);
+appendElement(clipboardModal, clipboardModalArea);
+appendElement(clipboardModalArea, clipboardModalClose);
+appendElement(clipboardModalArea, clipboardModalHeading);
+appendElement(clipboardModalArea, clipboardModalTextDescription);
+appendElement(clipboardModalArea, clipboardModalTextCopy);
+appendElement(clipboardModalTextCopy, clipboardModalTextCopyShortcut);
+appendElement(clipboardModalTextCopy, clipboardModalTextCopyText);
+appendElement(clipboardModalArea, clipboardModalTextCut);
+appendElement(clipboardModalTextCut, clipboardModalTextCutShortcut);
+appendElement(clipboardModalTextCut, clipboardModalTextCutText);
+appendElement(clipboardModalArea, clipboardModalTextPaste);
+appendElement(clipboardModalTextPaste, clipboardModalTextPasteShortcut);
+appendElement(clipboardModalTextPaste, clipboardModalTextPasteText);
 // Context menu overlay append
 appendElement(ruffleShadowTemplate.content, contextMenuOverlay);
 appendElement(contextMenuOverlay, contextMenu);

web/packages/core/texts/en-US/messages.ftl

@@ -14,6 +14,15 @@ enable-hardware-acceleration = It looks like hardware acceleration is not enable
 view-error-details = View Error Details
 open-in-new-tab = Open in a new tab
 click-to-unmute = Click to unmute
+clipboard-message-title = Copying and pasting in Ruffle
+clipboard-message-description =
+    { $variant ->
+        *[unsupported] Your browser does not support full clipboard access,
+        [access-denied] Access to the clipboard has been denied,
+    } but you can always use these shortcuts instead:
+clipboard-message-copy = { " " } for copy
+clipboard-message-cut = { " " } for cut
+clipboard-message-paste = { " " } for paste
 error-file-protocol =
     It appears you are running Ruffle on the "file:" protocol.
     This doesn't work as browsers block many features from working for security reasons.

web/src/lib.rs

@@ -178,6 +178,9 @@ extern "C" {
 
     #[wasm_bindgen(method, js_name = "displayUnsupportedVideo")]
     fn display_unsupported_video(this: &JavascriptPlayer, url: &str);
+
+    #[wasm_bindgen(method, js_name = "displayClipboardModal")]
+    fn display_clipboard_modal(this: &JavascriptPlayer, access_denied: bool);
 }
 
 #[derive(Debug, Clone)]