inline-media-controls.js [plain text]
const InsideMargin = 6; const BottomControlsBarHeight = 31; const MinimumSizeToShowAnyControl = 47;
const MaximumSizeToShowSmallProminentControl = 88;
class InlineMediaControls extends MediaControls
{
constructor(options)
{
super(options);
this.element.classList.add("inline");
this.skipBackButton = new SkipBackButton(this);
this.skipForwardButton = new SkipForwardButton(this);
this.topLeftControlsBar = new ControlsBar("top-left");
this._topLeftControlsBarContainer = this.topLeftControlsBar.addChild(new ButtonsContainer);
this.topRightControlsBar = new ControlsBar("top-right");
this._topRightControlsBarContainer = this.topRightControlsBar.addChild(new ButtonsContainer);
this.leftContainer = new ButtonsContainer({ cssClassName: "left" });
this.rightContainer = new ButtonsContainer({ cssClassName: "right" });
this._shouldUseAudioLayout = false;
this._shouldUseSingleBarLayout = false;
this.showsStartButton = false;
this._updateBottomControlsBarLabel();
}
set shouldUseAudioLayout(flag)
{
if (this._shouldUseAudioLayout === flag)
return;
this._shouldUseAudioLayout = flag;
this.element.classList.toggle("audio", flag);
this.needsLayout = true;
this._updateBottomControlsBarLabel();
}
set shouldUseSingleBarLayout(flag)
{
if (this._shouldUseSingleBarLayout === flag)
return;
this._shouldUseSingleBarLayout = flag;
this.needsLayout = true;
}
get showsStartButton()
{
return !!this._showsStartButton;
}
set showsStartButton(flag)
{
if (this._showsStartButton === flag)
return;
this._showsStartButton = flag;
this.layout();
}
layout()
{
super.layout();
const children = [];
if (this.placard) {
children.push(this.placard);
if (this.placardPreventsControlsBarDisplay()) {
this.children = children;
return;
}
}
if (!this.visible) {
this.children = children;
return;
}
if (!this._shouldUseAudioLayout && (this.width < MinimumSizeToShowAnyControl || this.height < MinimumSizeToShowAnyControl)) {
this.children = children;
return;
}
if (this._showsStartButton) {
this.playPauseButton.style = this.width <= MaximumSizeToShowSmallProminentControl || this.height <= MaximumSizeToShowSmallProminentControl ? Button.Styles.SmallCenter : Button.Styles.Center;
this.children = [this.playPauseButton];
return;
}
if (!this.bottomControlsBar)
return;
this._topLeftControlsBarContainer.buttons = this._topLeftContainerButtons();
this._topLeftControlsBarContainer.layout();
this.topLeftControlsBar.width = this._topLeftControlsBarContainer.width;
this.topLeftControlsBar.visible = this._topLeftControlsBarContainer.children.length > 0;
this.bottomControlsBar.width = this._shouldUseAudioLayout ? this.width : (this.width - 2 * InsideMargin);
const centerControl = this.statusLabel.enabled ? this.statusLabel : this.timeControl;
let minimumCenterControlWidth = centerControl.minimumWidth;
const minimumControlsBarWidthForCenterControl = minimumCenterControlWidth + this.leftContainer.leftMargin + this.rightContainer.rightMargin;
if (this.bottomControlsBar.width < minimumControlsBarWidthForCenterControl) {
this.playPauseButton.style = Button.Styles.Corner;
if (!this._shouldUseSingleBarLayout && this.height >= 82) {
children.push(this.topLeftControlsBar);
this._addTopRightBarWithMuteButtonToChildren(children);
}
this.children = children.concat(this.playPauseButton);
return;
}
minimumCenterControlWidth = centerControl.idealMinimumWidth;
this.bottomControlsBar.visible = true;
this.playPauseButton.style = Button.Styles.Bar;
this.leftContainer.buttons = this._leftContainerButtons();
this.rightContainer.buttons = this._rightContainerButtons();
this.rightContainer.buttons.concat(this.leftContainer.buttons).forEach(button => delete button.dropped);
this.muteButton.style = this.preferredMuteButtonStyle;
this.muteButton.usesRTLIconVariant = false;
for (let button of this._droppableButtons()) {
if (!button.enabled)
continue;
this.leftContainer.layout();
this.rightContainer.layout();
if (this.leftContainer.width + minimumCenterControlWidth + this.rightContainer.width < this.bottomControlsBar.width)
break;
button.dropped = true;
}
this.leftContainer.layout();
this.rightContainer.layout();
const widthLeftOfTimeControl = this.leftContainer.children.length > 0 ? this.leftContainer.width : this.leftContainer.leftMargin;
const widthRightOfTimeControl = this.rightContainer.children.length > 0 ? this.rightContainer.width : this.rightContainer.rightMargin;
centerControl.x = widthLeftOfTimeControl;
centerControl.width = this.bottomControlsBar.width - widthLeftOfTimeControl - widthRightOfTimeControl;
centerControl.layout();
const controlsBarChildren = [];
if (this.leftContainer.children.length)
controlsBarChildren.push(this.leftContainer);
controlsBarChildren.push(centerControl);
if (this.rightContainer.children.length) {
controlsBarChildren.push(this.rightContainer);
this.rightContainer.x = this.bottomControlsBar.width - this.rightContainer.width;
}
this.bottomControlsBar.y = Math.max(0, this.height - BottomControlsBarHeight - InsideMargin);
this.bottomControlsBar.children = controlsBarChildren;
if (!this._shouldUseAudioLayout && !this._shouldUseSingleBarLayout)
children.push(this.topLeftControlsBar);
children.push(this.bottomControlsBar);
if (this.muteButton.style === Button.Styles.Corner || (this.muteButton.dropped && !this._shouldUseAudioLayout && !this._shouldUseSingleBarLayout))
this._addTopRightBarWithMuteButtonToChildren(children);
this.children = children;
}
commitProperty(propertyName)
{
if (propertyName !== "visible")
super.commitProperty(propertyName);
}
get preferredMuteButtonStyle()
{
return (this._shouldUseAudioLayout || this._shouldUseSingleBarLayout) ? Button.Styles.Bar : Button.Styles.Corner;
}
_updateBottomControlsBarLabel() {
this.bottomControlsBar.element.setAttribute("aria-label", this._shouldUseAudioLayout ? UIString("Audio Controls") : UIString("Video Controls"));
}
_topLeftContainerButtons()
{
if (this._shouldUseSingleBarLayout)
return [];
if (this.usesLTRUserInterfaceLayoutDirection)
return [this.fullscreenButton, this.pipButton];
return [this.pipButton, this.fullscreenButton];
}
_leftContainerButtons()
{
return [this.skipBackButton, this.playPauseButton, this.skipForwardButton];
}
_rightContainerButtons()
{
if (this._shouldUseAudioLayout)
return [this.muteButton, this.airplayButton];
if (this._shouldUseSingleBarLayout)
return [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton];
const buttons = [];
if (this.preferredMuteButtonStyle === Button.Styles.Bar)
buttons.push(this.muteButton);
buttons.push(this.airplayButton, this.tracksButton);
return buttons;
}
_droppableButtons()
{
if (this._shouldUseSingleBarLayout)
return [this.skipForwardButton, this.skipBackButton, this.airplayButton, this.tracksButton, this.pipButton, this.fullscreenButton, this.muteButton];
const buttons = [this.skipForwardButton, this.skipBackButton, this.airplayButton, this.tracksButton];
if (this.preferredMuteButtonStyle === Button.Styles.Bar)
buttons.push(this.muteButton);
return buttons;
}
_addTopRightBarWithMuteButtonToChildren(children)
{
if (!this.muteButton.enabled)
return;
delete this.muteButton.dropped;
this.muteButton.style = Button.Styles.Bar;
this.muteButton.usesRTLIconVariant = !this.usesLTRUserInterfaceLayoutDirection;
this._topRightControlsBarContainer.buttons = [this.muteButton];
this._topRightControlsBarContainer.layout();
this.topRightControlsBar.width = this._topRightControlsBarContainer.width;
children.push(this.topRightControlsBar);
}
}