@polygonjs/polygonjs
Version:
node-based WebGL 3D engine https://polygonjs.com
111 lines (110 loc) • 3.74 kB
JavaScript
"use strict";
import { isBooleanTrue } from "../../../core/Type";
const ICON = {
ON: `<svg xmlns="http://www.w3.org/2000/svg" class="soundOn h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
</svg>`,
OFF: `<svg xmlns="http://www.w3.org/2000/svg" class="soundOff h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" clip-rule="evenodd" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
</svg>`
};
export class ViewerAudioController {
constructor(_viewer) {
this._viewer = _viewer;
}
update() {
const root = this._viewer.scene().root();
if (isBooleanTrue(root.pv.displayAudioIcon)) {
this._showIcon();
this._updateIcon(root);
} else {
this._hideIcon();
}
}
unmount() {
var _a;
if (this.__iconContainer) {
(_a = this.__iconContainer.parentElement) == null ? void 0 : _a.removeChild(this.__iconContainer);
this.__iconContainer = void 0;
}
this._onIcon = void 0;
this._offIcon = void 0;
}
_showIcon() {
const element = this._iconContainer();
if (element) {
element.style.display = "block";
}
}
_hideIcon() {
if (this.__iconContainer) {
this.__iconContainer.style.display = "none";
}
}
_iconContainer() {
const createIconContainer = () => {
const element = this._createIconContainer();
const domElement = this._viewer.domElement();
if (!domElement) {
return;
}
domElement.append(element);
return element;
};
return this.__iconContainer = this.__iconContainer || createIconContainer();
}
_createIconContainer() {
const element = document.createElement("div");
element.addEventListener("pointerdown", (event) => {
this._toggleSound();
event.preventDefault();
event.stopPropagation();
return false;
});
return element;
}
_setIconContainerStyle(element, root) {
const style = root.pv.audioIconStyle;
element.setAttribute("style", style);
element.style.color = root.pv.audioIconColor.getStyle();
}
offIcon() {
function createIcon() {
const icon = document.createElement("div");
icon.innerHTML = ICON.OFF;
return icon.children[0];
}
return this._offIcon = this._offIcon || createIcon();
}
onIcon() {
function createIcon() {
const icon = document.createElement("div");
icon.innerHTML = ICON.ON;
return icon.children[0];
}
return this._onIcon = this._onIcon || createIcon();
}
_toggleSound() {
const root = this._viewer.scene().root();
root.audioController.toggleSound();
this._updateIcon(root);
}
_updateIcon(root) {
var _a, _b;
const container = this._iconContainer();
if (!container) {
return;
}
this._setIconContainerStyle(container, root);
const onIcon = this.onIcon();
const offIcon = this.offIcon();
if (this._viewer.scene().root().audioController.soundOn()) {
container.appendChild(onIcon);
(_a = offIcon.parentElement) == null ? void 0 : _a.removeChild(offIcon);
} else {
container.appendChild(offIcon);
(_b = onIcon.parentElement) == null ? void 0 : _b.removeChild(onIcon);
}
}
}