macos-inline-media-controls.js [plain text]
const MinimumHeightToShowVolumeSlider = 136;
class MacOSInlineMediaControls extends InlineMediaControls
{
constructor(options = {})
{
options.layoutTraits = LayoutTraits.macOS;
super(options);
this.element.classList.add("mac");
this._backgroundClickDelegateNotifier = new BackgroundClickDelegateNotifier(this);
this.volumeSlider = new Slider("volume");
this.volumeSlider.width = 60;
this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container"></div>`);
this._volumeSliderContainer.children = [new BackgroundTint, this.volumeSlider];
this.muteButton.element.addEventListener("mouseenter", this);
this.muteButton.element.addEventListener("mouseleave", this);
this._volumeSliderContainer.element.addEventListener("mouseleave", this);
}
layout()
{
super.layout();
if (!this._volumeSliderContainer)
return;
this._volumeSliderContainer.x = this.rightContainer.x + this.muteButton.x;
this._volumeSliderContainer.y = this.bottomControlsBar.y - BottomControlsBarHeight - InsideMargin;
}
get preferredMuteButtonStyle()
{
return (this.height >= MinimumHeightToShowVolumeSlider) ? Button.Styles.Bar : super.preferredMuteButtonStyle;
}
handleEvent(event)
{
if (event.type === "mouseenter" && event.currentTarget === this.muteButton.element) {
if (this.muteButton.parent === this.rightContainer)
this.addChild(this._volumeSliderContainer);
} else if (event.type === "mouseleave" && (event.currentTarget === this.muteButton.element || event.currentTarget === this._volumeSliderContainer.element)) {
if (!this._volumeSliderContainer.element.contains(event.relatedTarget))
this._volumeSliderContainer.remove();
} else
super.handleEvent(event);
}
}