@nent/core
Version:
158 lines (157 loc) • 4.28 kB
JavaScript
/*!
* NENT 2022
*/
import { Component, h, Host, Prop } from '@stencil/core';
import { commonState, onCommonStateChange, } from '../../services/common';
import { getDataProvider } from '../../services/data/factory';
import { audioState, onAudioStateChange, } from '../n-audio/services/state';
/**
* This element exposes a checkbox to enable or disable global audio for background sounds and video.
*
* @system audio
*/
export class AudioSwitch {
constructor() {
this.storage = null;
/**
* Which state property this switch controls.
*/
this.setting = 'enabled';
/**
* The data provider to store the audio state in.
*/
this.dataProvider = 'storage';
}
get stateKey() {
return `audio-${this.setting}`;
}
setValue(value) {
switch (this.setting) {
case 'enabled': {
commonState.audioEnabled = value;
break;
}
case 'muted': {
audioState.muted = value;
break;
}
}
}
getValue() {
switch (this.setting) {
case 'enabled': {
return commonState.audioEnabled;
}
case 'muted': {
return audioState.muted;
}
}
}
async componentWillLoad() {
var _a;
this.storage = (await getDataProvider(this.dataProvider));
if (this.storage) {
const value = await ((_a = this.storage) === null || _a === void 0 ? void 0 : _a.get(this.stateKey));
if (value != null) {
this.setValue(value == 'true');
}
}
this.subscription =
this.setting == 'muted'
? onAudioStateChange('muted', async (m) => {
var _a;
await ((_a = this.storage) === null || _a === void 0 ? void 0 : _a.set(this.stateKey, m.toString()));
})
: onCommonStateChange('audioEnabled', async (m) => {
var _a;
await ((_a = this.storage) === null || _a === void 0 ? void 0 : _a.set(this.stateKey, m.toString()));
});
}
toggle() {
var _a;
this.setValue(((_a = this.checkbox) === null || _a === void 0 ? void 0 : _a.checked) || false);
}
disconnectedCallback() {
var _a;
(_a = this.subscription) === null || _a === void 0 ? void 0 : _a.call(this);
}
render() {
return (h(Host, null,
h("input", { type: "checkbox", class: this.inputClass, id: this.inputId, ref: e => {
this.checkbox = e;
}, onChange: () => this.toggle(), checked: this.getValue() })));
}
static get is() { return "n-audio-switch"; }
static get properties() { return {
"setting": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'muted' | 'enabled'",
"resolved": "\"enabled\" | \"muted\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Which state property this switch controls."
},
"attribute": "setting",
"reflect": false,
"defaultValue": "'enabled'"
},
"inputClass": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Any classes to add to the input-element directly."
},
"attribute": "input-class",
"reflect": false
},
"inputId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The id field to add to the input-element directly."
},
"attribute": "input-id",
"reflect": false
},
"dataProvider": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The data provider to store the audio state in."
},
"attribute": "data-provider",
"reflect": false,
"defaultValue": "'storage'"
}
}; }
}