mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-01 00:32:11 +00:00
Bug 1328060 - re-adjust controls when get metadata of video duration. r=jaws
MozReview-Commit-ID: AKY5Umg08P6 --HG-- extra : rebase_source : 78e632ab17b806a9a5934bec4ba22ab9a66459cb
This commit is contained in:
Ray Lin
parent
f91b9fa5f7
commit
79a4687d13
@ -30,7 +30,7 @@ const playButtonWidth = 30;
|
||||
const playButtonHeight = 40;
|
||||
const muteButtonWidth = 30;
|
||||
const muteButtonHeight = 40;
|
||||
const positionAndDurationWidth = 85;
|
||||
const positionAndDurationWidth = 75;
|
||||
const fullscreenButtonWidth = 30;
|
||||
const fullscreenButtonHeight = 40;
|
||||
const volumeSliderWidth = 48;
|
||||
|
||||
@ -245,6 +245,13 @@
|
||||
this.video.style.removeProperty("width");
|
||||
}
|
||||
},
|
||||
|
||||
get isControlBarHidden() {
|
||||
return this.controlBar.hidden ||
|
||||
this.controlBar.hideByAdjustment ||
|
||||
this.controlBar.getAttribute("fadeout") === "true";
|
||||
},
|
||||
|
||||
suppressError : false,
|
||||
|
||||
setupStatusFader(immediate) {
|
||||
@ -384,6 +391,16 @@
|
||||
value: true,
|
||||
writable: true
|
||||
},
|
||||
resized: {
|
||||
value: false,
|
||||
writable: true
|
||||
},
|
||||
resizedHandler: {
|
||||
value: () => {
|
||||
control.minWidth = control.clientWidth;
|
||||
},
|
||||
writable: true
|
||||
},
|
||||
hideByAdjustment: {
|
||||
set: (v) => {
|
||||
if (v) {
|
||||
@ -409,9 +426,11 @@
|
||||
this.volumeControl.minWidth = 48;
|
||||
this.clickToPlay.minWidth = 48;
|
||||
|
||||
if (this.positionDurationBox) {
|
||||
this.positionDurationBox.minWidth -= this.durationSpan.minWidth;
|
||||
}
|
||||
this.durationSpan.resized = true;
|
||||
this.positionDurationBox.resized = true;
|
||||
this.positionDurationBox.resizedHandler = () => {
|
||||
this.positionDurationBox.minWidth = this.positionDurationBox.clientWidth - this.durationSpan.clientWidth;
|
||||
};
|
||||
|
||||
this.adjustControlSize();
|
||||
this.controlBar.hidden = true;
|
||||
@ -526,7 +545,6 @@
|
||||
}
|
||||
break;
|
||||
case "loadedmetadata":
|
||||
this.adjustControlSize();
|
||||
// If a <video> doesn't have any video data, treat it as <audio>
|
||||
// and show the controls (they won't fade back out)
|
||||
if (this.video instanceof HTMLVideoElement &&
|
||||
@ -536,11 +554,14 @@
|
||||
this.startFadeIn(this.controlBar);
|
||||
this.setFullscreenButtonState();
|
||||
}
|
||||
this.showDuration(Math.round(this.video.duration * 1000));
|
||||
this.showPosition(Math.round(this.video.currentTime * 1000), Math.round(this.video.duration * 1000));
|
||||
this.positionDurationBox.resized = true;
|
||||
this.durationSpan.resized = true;
|
||||
if (!this.isAudioOnly && !this.video.mozHasAudio) {
|
||||
this.muteButton.setAttribute("noAudio", "true");
|
||||
this.muteButton.setAttribute("disabled", "true");
|
||||
}
|
||||
this.adjustControlSize();
|
||||
break;
|
||||
case "loadeddata":
|
||||
this.firstFrameShown = true;
|
||||
@ -735,7 +756,7 @@
|
||||
this.statusOverlay.setAttribute("error", error);
|
||||
},
|
||||
|
||||
formatTime(aTime) {
|
||||
formatTime(aTime, showHour = false) {
|
||||
// Format the duration as "h:mm:ss" or "m:ss"
|
||||
aTime = Math.round(aTime / 1000);
|
||||
let hours = Math.floor(aTime / 3600);
|
||||
@ -745,7 +766,7 @@
|
||||
if (secs < 10) {
|
||||
secs = "0" + secs;
|
||||
}
|
||||
if (hours) {
|
||||
if (hours || showHour) {
|
||||
if (mins < 10) {
|
||||
mins = "0" + mins;
|
||||
}
|
||||
@ -877,6 +898,8 @@
|
||||
// If the duration is unknown (because the server didn't provide
|
||||
// it, or the video is a stream), then we want to fudge the duration
|
||||
// by using the maximum playback position that's been seen.
|
||||
let showHour = Math.floor(Math.round(duration / 1000) / 3600);
|
||||
|
||||
if (currentTime > this.maxCurrentTimeSeen) {
|
||||
this.maxCurrentTimeSeen = currentTime;
|
||||
}
|
||||
@ -884,7 +907,7 @@
|
||||
|
||||
this.log("time update @ " + currentTime + "ms of " + duration + "ms");
|
||||
|
||||
let positionTime = this.formatTime(currentTime);
|
||||
let positionTime = this.formatTime(currentTime, showHour);
|
||||
|
||||
this.scrubber.value = currentTime;
|
||||
if (this.videocontrols.isTouchControls) {
|
||||
@ -1494,6 +1517,7 @@
|
||||
onControlBarTransitioned() {
|
||||
this.textTrackList.setAttribute("hidden", "true");
|
||||
this.video.dispatchEvent(new CustomEvent("controlbarchange"));
|
||||
this.adjustControlSize();
|
||||
},
|
||||
|
||||
toggleClosedCaption() {
|
||||
@ -1611,6 +1635,11 @@
|
||||
let preventAppendControl = false;
|
||||
|
||||
for (let control of prioritizedControls) {
|
||||
if (!this.isControlBarHidden && control.resized && !control.hideByAdjustment) {
|
||||
control.resizedHandler();
|
||||
control.resized = false;
|
||||
}
|
||||
|
||||
if (!control.isWanted) {
|
||||
control.hideByAdjustment = true;
|
||||
continue;
|
||||
@ -1626,12 +1655,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
if (this.durationSpan.hideByAdjustment) {
|
||||
this.positionDurationBox.setAttribute("positionOnly", "true");
|
||||
} else {
|
||||
this.positionDurationBox.removeAttribute("positionOnly");
|
||||
}
|
||||
|
||||
if (videoHeight < this.controlBar.minHeight ||
|
||||
widthUsed === minControlBarPaddingWidth) {
|
||||
this.controlBar.setAttribute("size", "hidden");
|
||||
|
||||
@ -340,21 +340,16 @@ audio > xul|videocontrols {
|
||||
}
|
||||
|
||||
.positionDurationBox {
|
||||
min-width: 9ch;
|
||||
text-align: center;
|
||||
padding-inline-start: 1px;
|
||||
padding-inline-end: 9px;
|
||||
white-space: nowrap;
|
||||
font: message-box;
|
||||
font-size: 13px;
|
||||
font-size-adjust: 0.6;
|
||||
font-size-adjust: 0.55;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.positionDurationBox[positionOnly] {
|
||||
min-width: 4ch;
|
||||
}
|
||||
|
||||
%ifdef XP_MACOSX
|
||||
.positionDurationBox {
|
||||
font-size-adjust: unset;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user