compact-media-controls.js [plain text]
class CompactMediaControls extends LayoutNode
{
constructor({ width = 320, height = 240 } = {})
{
super(`<div class="compact media-controls"></div>`);
this._state = CompactMediaControls.States.Paused;
this._scaleFactor = 1;
this._shouldCenterControlsVertically = false;
this.layoutTraits = LayoutTraits.Compact;
this.playButton = new Button({
cssClassName: "play",
iconName: Icons.PlayCompact,
layoutDelegate: this
});
this.invalidButton = new Button({
cssClassName: "invalid",
iconName: Icons.InvalidCompact,
layoutDelegate: this
});
this.activityIndicator = new CompactActivityIndicator(this);
this.width = width;
this.height = height;
}
// Public
get scaleFactor()
{
return this._scaleFactor;
}
set scaleFactor(scaleFactor)
{
if (this._scaleFactor === scaleFactor)
return;
this._scaleFactor = scaleFactor;
this.markDirtyProperty("scaleFactor");
}
get shouldCenterControlsVertically()
{
return this._shouldCenterControlsVertically;
}
set shouldCenterControlsVertically(flag)
{
if (this._shouldCenterControlsVertically === flag)
return;
this._shouldCenterControlsVertically = flag;
this.markDirtyProperty("scaleFactor");
}
get state()
{
return this._state;
}
set state(state)
{
if (this._state === state)
return;
this._state = state;
this.layout();
}
// Protected
layout()
{
super.layout();
switch (this._state) {
case CompactMediaControls.States.Paused:
this.children = [this.playButton];
break;
case CompactMediaControls.States.Pending:
this.children = [this.activityIndicator];
this.activityIndicator.show();
break;
case CompactMediaControls.States.Invalid:
this.children = [this.invalidButton];
break;
}
}
commitProperty(propertyName)
{
if (propertyName !== "scaleFactor") {
super.commitProperty(propertyName);
return;
}
const zoom = 1 / this._scaleFactor;
if (zoom < 1) {
this.element.style.transform = `scale(${zoom})`;
this.element.style.removeProperty("zoom");
} else {
this.element.style.zoom = zoom;
this.element.style.removeProperty("transform");
}
this.element.style.top = this._shouldCenterControlsVertically ? `${(this.height / 2) * (zoom - 1)}px` : "auto";
}
}
CompactMediaControls.States = {
Paused: "paused",
Pending: "pending",
Invalid: "invalid"
};