Bug 1793889 - Re-enabled double click fullscreen on audio only video tags r=mconley

Renabled double click full screen on audio only video tags. This feature is now only disabled on audio tags.

Differential Revision: https://phabricator.services.mozilla.com/D159216
This commit is contained in:
Bernard Igiri 2022-10-17 16:08:00 +00:00
parent d91a2ed63e
commit 1550a1050e
4 changed files with 72 additions and 33 deletions

View File

@ -25,6 +25,7 @@ support-files =
videomask.css
[test_audiocontrols_dimensions.html]
[test_audiocontrols_fullscreen.html]
[test_mousecapture_area.html]
[test_ua_widget_sandbox.html]
[test_ua_widget_unbind.html]

View File

@ -0,0 +1,61 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Audio controls test</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script type="text/javascript" src="head.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"></p>
<div id="content">
<audio id="audio" controls preload="auto"></audio>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
const audio = document.getElementById("audio");
const controlBar = getElementWithinVideo(audio, "controlBar");
add_setup(async function setup() {
await new Promise(resolve => {
audio.addEventListener("loadedmetadata", resolve, {once: true});
audio.src = "audio.wav";
});
});
add_task(async function test_double_click_does_not_fullscreen() {
SimpleTest.requestCompleteLog();
SimpleTest.requestFlakyTimeout("Waiting to ensure that fullscreen event does not fire");
const { x, y } = audio.getBoundingClientRect();
const endedPromise = new Promise(resolve => {
audio.addEventListener("ended", () => {
info('Audio ended event fired!');
resolve();
}, { once: true });
setTimeout( () => {
info('Audio ran out of time before ended event fired!');
resolve();
}, audio.duration * 1000);
});
let noFullscreenEvent = true;
document.addEventListener("mozfullscreenchange", () => {
noFullscreenEvent = false;
}, { once: true });
info("Simulate double click on media player.");
synthesizeMouse(audio, x, y, { clickCount: 2 });
info("Waiting for video to end...");
await endedPromise;
// By this point, if the double click was going to trigger fullscreen then
// it should have happened by now.
ok(
noFullscreenEvent,
"Double clicking should not trigger fullscreen event"
);
});
</script>
</pre>
</body>
</html>

View File

@ -29,7 +29,7 @@
let children =
InspectorUtils.getChildrenForNode(element, true);
for (let child of children) {
var result = findElementByAttribute(child, aName, aValue);
const result = findElementByAttribute(child, aName, aValue);
if (result) {
return result;
}
@ -38,36 +38,9 @@
}
function loadedmetadata(event) {
SimpleTest.requestCompleteLog();
SimpleTest.executeSoon(async function test_fullscreen_unavailable() {
const { x, y } = video.getBoundingClientRect();
SimpleTest.executeSoon(function() {
const controlBar = findElementByAttribute(video, "class", "controlBar");
SimpleTest.requestFlakyTimeout("Waiting to ensure that fullscreen event does not fire");
const endedPromise = new Promise(resolve => {
video.addEventListener("ended", () => {
info('Video ended event fired!');
resolve();
}, { once: true });
setTimeout( () => {
info('Video ran out of time before ended event fired!');
resolve();
}, video.duration * 1000);
});
let noFullscreenEvent = true;
is(controlBar.getAttribute("fullscreen-unavailable"), "true", "Fullscreen button is hidden");
document.addEventListener("mozfullscreenchange", () => {
noFullscreenEvent = false;
}, { once: true });
info("Simulate double click on media player.");
synthesizeMouse(video, x, y, { clickCount: 2 });
info("Waiting for video to end...");
await endedPromise;
// By this point, if the double click was going to trigger fullscreen then
// it should have happened by now.
ok(
noFullscreenEvent,
"Double clicking should not trigger fullscreen event"
);
SimpleTest.finish();
});
}

View File

@ -299,6 +299,10 @@ this.VideoControlsImplWidget = class {
isPausedByDragging: false,
_isAudioOnly: false,
get isAudioTag() {
return this.video.localName == "audio";
},
get isAudioOnly() {
return this._isAudioOnly;
},
@ -788,7 +792,7 @@ this.VideoControlsImplWidget = class {
this.controlsSpacer.removeAttribute("aria-label");
this.statusOverlay.removeAttribute("status");
this.statusIcon.setAttribute("type", "throbber");
this.isAudioOnly = this.video.localName == "audio";
this.isAudioOnly = this.isAudioTag;
this.setPlayButtonState(true);
this.setupNewLoadState();
this.setupStatusFader();
@ -1706,7 +1710,7 @@ this.VideoControlsImplWidget = class {
toggleFullscreen() {
// audio tags cannot toggle fullscreen
if (!this.isAudioOnly) {
if (!this.isAudioTag) {
this.isVideoInFullScreen
? this.document.exitFullscreen()
: this.video.requestFullscreen();
@ -2436,7 +2440,7 @@ this.VideoControlsImplWidget = class {
// Since the size of videocontrols is expanded with controlBar in <audio>, we
// should fix the dimensions in order not to recursively trigger reflow afterwards.
if (this.video.localName == "audio") {
if (this.isAudioTag) {
if (givenHeight) {
// The height of controlBar should be capped with the bounds between controlBarMinHeight
// and controlBarMinVisibleHeight.
@ -2596,7 +2600,7 @@ this.VideoControlsImplWidget = class {
this.volumeStack,
];
this.isAudioOnly = this.video.localName == "audio";
this.isAudioOnly = this.isAudioTag;
this.setupInitialState();
this.setupNewLoadState();
this.initTextTracks();