Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-12 21:05:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 962560 - Audio volume UI resets to full volume after toggling the screen size of a video. r=gijs

Browse Source 
MozReview-Commit-ID: HHPOHZQoK50
This commit is contained in:
Jared Wein 2016-05-10 08:54:00 -04:00
parent bc54cf492b
commit 5960042c3b
2 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
toolkit/content/tests/widgets/test_videocontrols.html
View File

@ -30,6 +30,7 @@ const muteButtonWidth = 33;
const muteButtonHeight = 28;
const durationWidth = 34;
const fullscreenButtonWidth = document.fullscreenEnabled ? 28 : 0;
const fullscreenButtonHeight = document.fullscreenEnabled ? 28 : 0;
const volumeSliderWidth = 32;
const scrubberWidth = videoWidth - playButtonWidth - durationWidth - muteButtonWidth - volumeSliderWidth - fullscreenButtonWidth;
const scrubberHeight = 28;
@ -40,6 +41,9 @@ const playButtonCenterY = videoHeight - Math.round(playButtonHeight / 2);
// Mute button is on the bottom-right before the full screen button and volume slider
const muteButtonCenterX = videoWidth - Math.round(muteButtonWidth / 2) - volumeSliderWidth - fullscreenButtonWidth;
const muteButtonCenterY = videoHeight - Math.round(muteButtonHeight / 2);
// Fullscreen button is on the bottom-right at the far end
const fullscreenButtonCenterX = videoWidth - Math.round(fullscreenButtonWidth / 2);
const fullscreenButtonCenterY = videoHeight - Math.round(fullscreenButtonHeight / 2);
// Scrubber bar is between the play and mute buttons. We don't need it's
// X center, just the offset of its box.
const scrubberOffsetX = 0 + playButtonWidth;
@ -61,6 +65,13 @@ function isMuteButtonMuted() {
return muteButton.getAttribute('muted') === 'true';
}
function isVolumeSliderShowingCorrectVolume(expectedVolume) {
var volumeButton = getButtonByAttribute('anonid', 'volumeForeground');
let expectedPaddingRight = (1 - expectedVolume) * volumeSliderWidth + "px";
is(volumeButton.style.paddingRight, expectedPaddingRight,
"volume slider should match expected volume");
}
function runTest(event) {
ok(true, "----- test #" + testnum + " -----");
@ -289,6 +300,22 @@ function runTest(event) {
ok(!isMuteButtonMuted(), "Mute button says it's not muted");
synthesizeMouse(video, fullscreenButtonCenterX, fullscreenButtonCenterY, { });
break;
case 24:
is(event.type, "fullscreenchange", "checking event type");
is(video.volume, 0.6, "Volume should still be 0.6");
isVolumeSliderShowingCorrectVolume(video.volume);
synthesizeKey("VK_ESCAPE", {});
break;
case 25:
is(event.type, "fullscreenchange", "checking event type");
is(video.volume, 0.6, "Volume should still be 0.6");
isVolumeSliderShowingCorrectVolume(video.volume);
SimpleTest.finish();
break;
@ -309,6 +336,7 @@ function canplaythroughevent(event) {
video.addEventListener("volumechange", runTest, false);
video.addEventListener("seeking", runTest, false);
video.addEventListener("seeked", runTest, false);
document.addEventListener("fullscreenchange", runTest, false);
// Begin the test.
runTest(event);
}

23
toolkit/content/widgets/videocontrols.xml
View File

@ -407,13 +407,9 @@
this.videocontrols.randomID = this.randomID;
this.setPlayButtonState(this.video.paused);
this.updateMuteButtonState();
this.setFullscreenButtonState();
var volume = this.video.muted ? 0 : Math.round(this.video.volume * 100);
this.volumeControl.value = volume;
var duration = Math.round(this.video.duration * 1000); // in ms
var currentTime = Math.round(this.video.currentTime * 1000); // in ms
this.log("Initial playback position is at " + currentTime + " of " + duration);
@ -474,6 +470,11 @@
this.controlBar.hidden = true;
this.adjustControlSize();
// Can only update the volume controls once we've computed
// _volumeControlWidth, since the volume slider implementation
// depends on it.
this.updateVolumeControls();
// Preserve Statistics when toggling fullscreen mode due to bug 714071.
if (this.video.mozMediaStatisticsShowing)
this.showStatistics(true);
@ -524,6 +525,14 @@
return enabled;
},
updateVolumeControls() {
var volume = this.video.muted ? 0 : this.video.volume;
var volumePercentage = Math.round(volume * 100);
this.updateMuteButtonState();
this.volumeControl.value = volumePercentage;
this.volumeForeground.style.paddingRight = (1 - volume) * this._volumeControlWidth + "px";
},
handleEvent : function (aEvent) {
this.log("Got media event ----> " + aEvent.type);
@ -561,11 +570,7 @@
this.setupStatusFader();
break;
case "volumechange":
var volume = this.video.muted ? 0 : this.video.volume;
var volumePercentage = Math.round(volume * 100);
this.updateMuteButtonState();
this.volumeControl.value = volumePercentage;
this.volumeForeground.style.paddingRight = (1 - volume) * this._volumeControlWidth + "px";
this.updateVolumeControls();
// Show the controls to highlight the changing volume,
// but only if the click-to-play overlay has already
// been hidden (we don't hide controls when the overlay is visible).