Bug 1697616 - Hide toggle when video duration is NaN. r=mtigley,mhowell

Differential Revision: https://phabricator.services.mozilla.com/D108241
2021-03-23 19:39:13 +00:00 · 2021-03-23 19:39:13 +00:00 · 9e2f72d5ac
--- a/toolkit/components/pictureinpicture/tests/browser.ini
+++ b/toolkit/components/pictureinpicture/tests/browser.ini
@ -73,6 +73,9 @@ skip-if = os == "win" && bits == 64 && debug # Bug 1683002
 [browser_stripVideoStyles.js]
 [browser_tabIconOverlayPiP.js]
 [browser_thirdPartyIframe.js]
+[browser_toggleButtonOnNanDuration.js]
+support-files = 
+  test-page-with-nan-video-duration.html
 [browser_toggleAfterTabTearOutIn.js]
 skip-if = (os == 'linux' && bits == 64) || (os == 'mac' && !asan && !debug) # Bug 1605546
 [browser_toggleButtonOverlay.js]
--- a/toolkit/components/pictureinpicture/tests/browser_toggleButtonOnNanDuration.js
+++ b/toolkit/components/pictureinpicture/tests/browser_toggleButtonOnNanDuration.js
@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests that we do not show the Picture-in-Picture toggle on video
+ * elements that have a NaN duration.
+ */
+add_task(async function test_toggleButtonOnNanDuration() {
+  await BrowserTestUtils.withNewTab(
+    {
+      url: TEST_PAGE_WITH_NAN_VIDEO_DURATION,
+      gBrowser,
+    },
+    async browser => {
+      const VIDEO_ID = "test-video";
+
+      await SpecialPowers.spawn(browser, [VIDEO_ID], async videoID => {
+        let video = content.document.getElementById(videoID);
+        if (video.readyState < content.HTMLMediaElement.HAVE_ENOUGH_DATA) {
+          info(`Waiting for 'canplaythrough' for ${videoID}`);
+          await ContentTaskUtils.waitForEvent(video, "canplaythrough");
+        }
+      });
+
+      await testToggleHelper(browser, "nan-duration", false);
+
+      await testToggleHelper(browser, "test-video", true);
+    }
+  );
+});
--- a/toolkit/components/pictureinpicture/tests/test-page-with-nan-video-duration.html
+++ b/toolkit/components/pictureinpicture/tests/test-page-with-nan-video-duration.html
@ -3,6 +3,7 @@
  <head>
    <meta charset="utf-8">
    <title>Bug 1679174</title>
+    <script type="text/javascript" src="click-event-helper.js"></script>
  </head>
  <body>
    <video id="nan-duration"></video>
--- a/toolkit/content/widgets/videocontrols.js
+++ b/toolkit/content/widgets/videocontrols.js
@ -147,6 +147,10 @@ this.VideoControlsWidget = class {
    someVideo,
    reflowedDimensions
  ) {
+    if (isNaN(someVideo.duration)) {
+      return false;
+    }
+
    if (
      prefs["media.videocontrols.picture-in-picture.video-toggle.always-show"]
    ) {