add help button for how to pop out video in firefox (#9298)

* add help button for how to pop out video in firefox * change back to 'Pop out video'
microsoft · Jan 19, 2023 · 7ef8a60 · 7ef8a60
1 parent 1347aff
commit 7ef8a60
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/webapp/src/marked.tsx b/webapp/src/marked.tsx
@@ -350,6 +350,18 @@ export class MarkedContent extends data.Component<MarkedContentProps, MarkedCont
                     pipButton.textContent = lf("Pop out video");
                     pipButton.ariaLabel = lf("Open video in picture-in-picture mode");
                     pipButton.title = pipButton.ariaLabel;
+                } else if (pxt.BrowserUtils.isFirefox()) {
+                    const pipInstructionButton = document.createElement("button");
+                    inlineVideo.parentElement.appendChild(pipInstructionButton);
+                    pipInstructionButton.addEventListener("click", () => {
+                        pxt.tickEvent("video.pip.firefoxHelp");
+                        window.open("/firefox-picture-in-picture", "_blank");
+                    });
+                    pipInstructionButton.addEventListener("keydown", e => fireClickOnEnter(e as any));
+                    pipInstructionButton.className = "common-button";
+                    pipInstructionButton.textContent = lf("Pop out video");
+                    pipInstructionButton.ariaLabel = lf("Instructions on how to open video in picture-in-picture mode");
+                    pipInstructionButton.title = pipInstructionButton.ariaLabel;
                 }
 
                 player.on(dashjs.MediaPlayer.events.PLAYBACK_STARTED,