Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-26 06:11:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 462117 - Reducing the number of visible controls when the video is too small. r=dolske

Browse Source
This commit is contained in:
Jared Wein 2011-09-23 12:43:03 -07:00
parent 3cb9a0ee6b
commit b0341fd18f
2 changed files with 62 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
toolkit/content/widgets/videocontrols.css
View File

@ -53,3 +53,18 @@
.statusOverlay[fadeout] {
opacity: 0;
}
.controlBar[size="hidden"],
.controlBar[size="small"] .durationBox,
.controlBar[size="small"] .durationLabel,
.controlBar[size="small"] .positionLabel {
visibility: collapse;
}
.controlBar[size="small"] .scrubberStack {
visibility: hidden;
}
.controlBar[size="small"] .scrubberStack > * {
visibility: hidden;
}

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

@ -343,6 +343,17 @@
this.statusIcon.setAttribute("type", "throbber");
this.setupStatusFader();
}
// An event handler for |onresize| should be added when bug 227495 is fixed.
let controlBarWasHidden = this.controlBar.getAttribute("hidden") == "true";
this.controlBar.removeAttribute("hidden");
this._playButtonWidth = this.playButton.clientWidth;
this._durationLabelWidth = this.durationLabel.clientWidth;
this._muteButtonWidth = this.muteButton.clientWidth;
this._controlBarHeight = this.controlBar.clientHeight;
if (controlBarWasHidden)
this.controlBar.setAttribute("hidden", "true");
this.adjustControlSize();
},
get dynamicControls() {
@ -400,6 +411,7 @@
this.volumeControl.value = volume;
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 &&
@ -654,6 +666,9 @@
!(this.video.autoplay && this.video.mozAutoplayEnabled))
return;
if (!isMouseOver)
this.adjustControlSize();
this.startFade(this.controlBar, isMouseOver);
},
@ -861,6 +876,37 @@
dump("videoctl: " + msg + "\n");
},
_playButtonWidth : 0,
_durationLabelWidth : 0,
_muteButtonWidth : 0,
_controlBarHeight : 0,
adjustControlSize : function adjustControlSize() {
if (this.isAudioOnly)
return;
let videoHeight = this.video.clientHeight;
let videoWidth = this.video.clientWidth;
// The scrubber has |flex=1|, therefore |minScrubberWidth|
// was generated by empirical testing.
let minScrubberWidth = 25;
let minWidthAllControls = this._playButtonWidth +
minScrubberWidth +
this._durationLabelWidth +
this._muteButtonWidth;
let minHeightForControlBar = this._controlBarHeight;
let minWidthOnlyPlayPause = this._playButtonWidth + this._muteButtonWidth;
let size = "normal";
if (videoHeight < minHeightForControlBar)
size = "hidden";
else if (videoWidth < minWidthOnlyPlayPause)
size = "hidden";
else if (videoWidth < minWidthAllControls)
size = "small";
this.controlBar.setAttribute("size", size);
},
init : function (binding) {
this.video = binding.parentNode;
this.videocontrols = binding;
@ -879,7 +925,7 @@
this.durationLabel = document.getAnonymousElementByAttribute(binding, "class", "durationLabel");
this.positionLabel = document.getAnonymousElementByAttribute(binding, "class", "positionLabel");
this.statusOverlay = document.getAnonymousElementByAttribute(binding, "class", "statusOverlay");
this.controlsSpacer = document.getAnonymousElementByAttribute(binding, "class", "controlsSpacer")
this.controlsSpacer = document.getAnonymousElementByAttribute(binding, "class", "controlsSpacer");
this.setupInitialState();