class ControlsBar extends LayoutNode
{
constructor(mediaControls)
{
super(`<div class="controls-bar">`);
this._translation = new DOMPoint;
this._mediaControls = mediaControls;
this.fadesWhileIdle = false;
this.userInteractionEnabled = true;
this.autoHideDelay = ControlsBar.DefaultAutoHideDelay;
if (GestureRecognizer.SupportsTouches)
this._tapGestureRecognizer = new TapGestureRecognizer(this._mediaControls.element, this);
}
get translation()
{
return new DOMPoint(this._translation.x, this._translation.y);
}
set translation(point)
{
if (this._translation.x === point.x && this._translation.y === point.y)
return
this._translation = new DOMPoint(point.x, point.y);
this.markDirtyProperty("translation");
}
get userInteractionEnabled()
{
return this._userInteractionEnabled;
}
set userInteractionEnabled(flag)
{
if (this._userInteractionEnabled === flag)
return;
this._userInteractionEnabled = flag;
this.markDirtyProperty("userInteractionEnabled");
}
get fadesWhileIdle()
{
return this._fadesWhileIdle;
}
set fadesWhileIdle(flag)
{
if (this._fadesWhileIdle == flag)
return;
this._fadesWhileIdle = flag;
if (!GestureRecognizer.SupportsTouches) {
if (flag) {
this._mediaControls.element.addEventListener("mousemove", this);
this._mediaControls.element.addEventListener("mouseleave", this);
this.element.addEventListener("mouseenter", this);
this.element.addEventListener("mouseleave", this);
} else {
this._mediaControls.element.removeEventListener("mousemove", this);
this._mediaControls.element.removeEventListener("mouseleave", this);
this.element.removeEventListener("mouseenter", this);
this.element.removeEventListener("mouseleave", this);
}
}
if (flag && !this.faded)
this._resetAutoHideTimer(false);
else if (!flag)
this.faded = false;
}
get visible()
{
return super.visible;
}
set visible(flag)
{
if (flag && !this.visible)
this.faded = false;
else if (!flag)
this._cancelAutoHideTimer();
super.visible = flag;
}
get faded()
{
return !!this._faded;
}
set faded(flag)
{
if (this._faded === flag)
return;
this._faded = flag;
if (!flag)
this._resetAutoHideTimer(true);
else
delete this._enforceAutoHideTimer;
this.markDirtyProperty("faded");
}
handleEvent(event)
{
if (event.currentTarget === this._mediaControls.element) {
if (event.type === "mousemove") {
this.faded = false;
this._resetAutoHideTimer(true);
} else if (event.type === "mouseleave" && this._fadesWhileIdle && !this._enforceAutoHideTimer)
this.faded = true;
} else if (event.currentTarget === this.element) {
if (event.type === "mouseenter") {
this._disableAutoHiding = true;
this._cancelAutoHideTimer();
} else if (event.type === "mouseleave") {
delete this._disableAutoHiding;
this._resetAutoHideTimer(true);
} else if (event.type === "focus")
this.faded = false;
}
}
gestureRecognizerStateDidChange(recognizer)
{
if (this._tapGestureRecognizer !== recognizer || recognizer.state !== GestureRecognizer.States.Recognized)
return;
if (this.faded)
this.faded = false;
else {
const tapLocation = recognizer.locationInClient();
const tappedElement = document.elementFromPoint(tapLocation.x, tapLocation.y);
if (!this.element.contains(tappedElement))
this.faded = true;
}
}
commitProperty(propertyName)
{
if (propertyName === "translation")
this.element.style.transform = `translate(${this._translation.x}px, ${this._translation.y}px)`;
else if (propertyName === "faded")
this.element.classList.toggle("faded", this.faded);
else if (propertyName === "userInteractionEnabled")
this.element.style.pointerEvents = this._userInteractionEnabled ? "all" : "none";
else
super.commitProperty(propertyName);
}
_cancelAutoHideTimer()
{
if (this._enforceAutoHideTimer)
return;
window.clearTimeout(this._autoHideTimer);
delete this._autoHideTimer;
}
_resetAutoHideTimer(cancelable)
{
if (cancelable && this._enforceAutoHideTimer)
return;
this._cancelAutoHideTimer();
if (cancelable)
delete this._enforceAutoHideTimer;
else
this._enforceAutoHideTimer = true;
this._autoHideTimer = window.setTimeout(this._autoHideTimerFired.bind(this), this.autoHideDelay);
}
_autoHideTimerFired()
{
delete this._enforceAutoHideTimer;
if (this._disableAutoHiding)
return;
this._cancelAutoHideTimer();
this.faded = this._fadesWhileIdle;
}
}
ControlsBar.DefaultAutoHideDelay = 4000;