// import {Camera} from 'three';
import {isBooleanTrue} from '../../../core/Type';
import {RootManagerNode} from '../../nodes/manager/Root';
import {BaseViewerType} from '../_Base';
const ICON = {
ON: ``,
OFF: ``,
};
export class ViewerAudioController {
private __iconContainer: HTMLElement | undefined;
private _onIcon: HTMLElement | undefined;
private _offIcon: HTMLElement | undefined;
constructor(private _viewer: BaseViewerType) {}
update() {
const root = this._viewer.scene().root();
if (isBooleanTrue(root.pv.displayAudioIcon)) {
this._showIcon();
this._updateIcon(root);
} else {
this._hideIcon();
}
}
unmount() {
if (this.__iconContainer) {
this.__iconContainer.parentElement?.removeChild(this.__iconContainer);
this.__iconContainer = undefined;
}
this._onIcon = undefined;
this._offIcon = undefined;
}
private _showIcon() {
const element = this._iconContainer();
if (element) {
element.style.display = 'block';
}
}
private _hideIcon() {
if (this.__iconContainer) {
this.__iconContainer.style.display = 'none';
}
}
private _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());
}
private _createIconContainer() {
const element = document.createElement('div');
element.addEventListener('pointerdown', (event) => {
this._toggleSound();
event.preventDefault();
event.stopPropagation();
return false;
});
return element;
}
private _setIconContainerStyle(element: HTMLElement, root: RootManagerNode) {
// const style = 'position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; cursor: pointer'
const style = root.pv.audioIconStyle;
element.setAttribute('style', style);
element.style.color = root.pv.audioIconColor.getStyle();
// element.style.position = 'absolute';
// element.style.top = '10px';
// element.style.right = '10px';
// element.style.width = '24px';
// element.style.height = '24px';
// element.style.cursor = 'pointer';
}
private offIcon() {
function createIcon() {
const icon = document.createElement('div');
icon.innerHTML = ICON.OFF;
return icon.children[0] as HTMLElement;
}
return (this._offIcon = this._offIcon || createIcon());
}
private onIcon() {
function createIcon() {
const icon = document.createElement('div');
icon.innerHTML = ICON.ON;
return icon.children[0] as HTMLElement;
}
return (this._onIcon = this._onIcon || createIcon());
}
private _toggleSound() {
const root = this._viewer.scene().root();
root.audioController.toggleSound();
this._updateIcon(root);
}
private _updateIcon(root: RootManagerNode) {
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);
offIcon.parentElement?.removeChild(offIcon);
} else {
container.appendChild(offIcon);
onIcon.parentElement?.removeChild(onIcon);
}
}
}